Arxiu de l'autor: Estudiant

COM FER UN SLIDE (sense la funció d’slide) per Clàudia Barberà

Primer de tot s’ha de crear un fons per la pantalla, un coslidep creat arrosseguem un canvas. Al canvas li posarem de fons la primera imatge que mostrarem a l’slide, mentre que les altres 3 només les carregarem (han de tenir noms successius: instruccio_1, instruccio_2…) al media.
Definirem la primera imatge com a imatge 1, per tal de posicionar-la a la llista d’imatges que es succeïran.
Arrastrarem l’opció de Canvas. Flung (per tal de poder crear successió d’imatges que estan dins d’aquest canvas).
Una vegada arrosegada aquesta opció, li aplicarem l’opció del condicionant “if else”. Ara posarem la condició inicial per desencadenar el canvi d’imatges: que la velocitat d’x (horitzontal) sigui menor a 0 (és a dir moviment cap a l’esquerra). Un cop amb la premisa marcada posarem què passara al fer aquest moviment:
- Si la imatge és major a 1 (és a dir, totes les imatges menys la primera), la llista serà inversa.
- Si la imatge és menor a 1 (totes les imatges menys l’última), la llista es succeïrà en ordre ascendent.
Finalment cal crear una llista on referenciar aquestes imatges (select lis titem>make a list)

MENÚ DESPLEGABLE – mediante la lógica visible/invisible. Autora: Laura Picallo

Este ejercicio se basa en la posibilidad de hacer visible o invisible tanto un botón como una image sprite para programar un menú desplegable.

Lo primero sería crear todos los apartados de los que constará el menú desplegable (esto es, poner sobre la pantalla el árbol entero).
Una vez hecho esto, y usando la opción a la derecha de la pantalla de decidir si el botón o la imagen es visible o invisible, hacemos los apartados desplegables invisibles.

En el block editor contamos con el bloque set ____.visible to, que nos permite, mediante la lógica true o false, llevar a invisibilidad o a visibilidad las distintas image sprites y botones.
En este menú se despliegan los apartados cuando tocas uno de los botones principales, y se pliegan cuando lo pulsas durante unos segundos. Es tan sencillo como:

Cuando tocas X botón, Y imágenes se hacen visibles, Z imágenes invisibles (jugando con que cuando aprietas, por ejemplo, cos, todo lo referente a cara y cap se hará invisible)
También puedes añadir condicionales para que solo se desplieguen ciertos apartados cuando su imagen raíz sea visible (algo útil cuando cuantas con muchas image sprite invisibles sobre el canvas que el usuario podría tocar sin querer)
PRIMERA

SEGUNDA

APP INVENTOR: Map Tour. Autor: Said El Hamoudi Bader

Para este tutorial se debe estar familiarizado con los conceptos básicos de App Inventor, ya que se utilizan los componentes ActivityStarter y ListPicker. Una respondería para el lanzamiento de aplicaciones Android, en este caso el arranque de Google Maps, y la otra para permitir al usuario elegir de una lista de ubicaciones.

Establecer la pantalla:

Creamos en la ventana de diseño una imagen estética del lugar de destino, el ListPiker que mostrará la lista de destino y por último el ActivityStarter que inicia la aplicación de mapas cuando se elige un destino.

designer

Habrá que configurar el ActivityStarter para iniciar la aplicación Maps con las siguientes propiedades:

Acción                                 android.intent.action.VIEW

ActivityPackage               com.google.android.apps.maps

ActivityClass                     com.google.android.maps.MapsActivity

 

Establecer la lista de destinos:

-         Debemos crear una variable con la lista de destinos para el Map Tour

-         Hacer make a list para agregar los elementos a la lista

-         Finalmente los textos con los destinos

destinationList

 

 

Establecer comportamientos a los componentes:

En Map Tour aplicamos dos comportamientos

-         Al iniciar la aplicación cargar destinos en ListPicker para que el usuario elija

-         Al seleccionar el destino la aplicación de mapas muestra el destino

 

Para que suceda definimos el comportamiento Screen1.Initialize

screenInit

 

 

Comportamiento al elegir destino:

ActivityStarter debe lanzar los mapas al seleccionar destino, por ello será necesario programar el componente Listpicker que activará el ListPicker.AfterPicking, necesario para configurar el DataURI del componente ActivityStarter.

afterPicking

 

Existe un segundo uso más sofisticado del ActivityStarter y del componente Listpicker que se encuentra en la segunda parte del tutorial de la web.

ParisMapTour.ZIP

Activity Starter

El componente Activity Starter permite combinar aplicaciones permitiendo a una aplicación arrancar otras aplicaciones.

Las aplicaciones iniciadas pueden otras aplicaciones de App Inventor creadas por nosotros o aplicaciones tales como la que gestiona la cámara o mapas pre-instalados en el mismo.

Para iniciar otra aplicación, debe proporcionar cierta información de control para el sistema operativo Android. Para ello, se deben establecer varias propiedades de Activity Starter antes de invocar la aplicación que deseamos iniciar.

Se puede probar con el siguiente proyecto: 1

Se trata de una aplicación que proporciona al usuario toda la información deseada sobre un programa de televisión por internet. Existen 5 botones los cuales enlazan con la página web del programa, con su facebook, con los vídeos colgados de youtube, posibilita enviar directamente un correo a los editores, establece su ubicación y a modo de explicación del activity starter podemos lanzar la cámara del dispositivo.

 Abrir el navegador a una página Web

 

2 3

Reproducir un vídeo de YouTube

Para ello se necesita saber la dirección URI del vídeo de YouTube. 8

Enviar un email a una dirección de destinatario ya especificada 6

Mostrar el mapa de un lugar

Si se conoce el código postal, se pueden establecer las propiedades de  Activity Starter  de la siguiente manera:7

Inicio de la cámara

 4

Canvi d’imatges

Autora: Ariadna Santos

El fet que el programa no deixi modificar les imatges directament des de l’àrea de disseny ens obliga a preparar les imatges que volem canviar prèviament. En aquest cas, l’aplicació consisteix en fer explotar l’ocell quan l’usuari el toqui. Serà el moment en que les imatges de l’explosió que hem preparat prèviament apareguin en una seqüència.

Components de la interfície:

Component

Palette

Nom

Propietats

Canvas Basic MyCanvas Background.jpgWidth: Fill parentHeight: 380 pixels
ImageSprite Animation bird BirdBlue.pngInterval: 500
ImageSprite Animation boom BirdExplosion0.png*BirdExplosion1.pngBirdExplosion2.pngInterval: 100

Opció Visible desactivada

Label Basic score Text: Score
Clock Basic boomClock Interval: 100*TimerEnabled: desactivat
Sound Media boomSound BirdExplosionNoise0.wav

*És important que la imatge BirdExplosion0.png estigui seleccionada com a Picture en l’animació boom. Però també hem de pujar les imatges que la segueixen per tal que també apareguin just després de la primera. Situem l’explosió en el canvas a prop o a sobre de l’ocell i la desactivem.

*Si l’interval és més alt veurem més lentament el canvi d’imatges.

Block’s Editor:

Definicions: 

- Variable: BoomCounter

Captura de pantalla 2013-05-23 a la(s) 12.21.03

 

Utilitzem el Counter per crear els noms de les imatges. Inicialment el valor del boomCounter és 1, és perquè el nom de la segona explosió és BirdExplosion1.png, no BirdExplosion2.png

- Variable: puntuació

Captura de pantalla 2013-05-23 a la(s) 12.21.10

- Procedure: MoveBird

 

Captura de pantalla 2013-05-23 a la(s) 12.21.17

bird.Touched:

  • Una vegada toquem l’ocell, a partir d’una operació boleana (fals), desactivarem el seu valor i l’ocell no es veurà. (Bird.Enabled. Bird.Visible)
  • Ordenarem que la imatge boom es col·loqui a la posició actual de l’ocell.
  • Boom.Picture. Indiquem que mostri l’explosió 0 escrivint en un text el nom exacte de la imatge.
  • A partir d’una altre operació boleana (true) activem la imatge boom. (boom.Enable- Boo.visible).
  • Com que en l’àrea de disseny hem desactivat la opció Enabled del boom.Clock ara li hem de dir, amb una operació boleana, que ens l’activi (true).
  • Finalment que canviï la posició de l’ocell.
  • Sumar la puntuació.

Captura de pantalla 2013-05-23 a la(s) 12.21.43

BoomClock.Timer:

  • ifelse (control) comprova una condició donada. Si el resultat és verdader, duu a terme les accions de la seqüència then-do, si és fals duu a terme les accions de else-do.
  • BoomCounter > 2. Aquesta ordre compara els dos números, si el primer és més gran serà veritat (true), al contrari, l’operació serà falsa.
  • L’acció del else-do serà donar un valor a la imatge boom.picture. Ho farem amb la opció join que es troba al text blocks. Afegirà el text .png al resultat del text BirdExplosion i el global boomCounter.
  • Finalment en el valor global del boomCounter li sumem 1.

Captura de pantalla 2013-05-23 a la(s) 12.21.54

Com ampliar el tutorial:

  • Incloure el botó de reset.
  • Fer que l’ocell es mogui constantment, des del principi.

 

 

 

 

 

 

 

 

 

 

MAP TOUR – Elena Espiau

- ActivityStarter

ActivityStarter et permet obrir una altra aplicació sense sortir de la que estàs fent servir. Així pots consultar el GoogleMaps, clicar per tornar enrere, i trobar-te la app com estava abans de sortir. S’han d’especificar unes propietats, però no sé com es defineixen (si no és que te les donen).

Sin título

Sin título

- ListPicker

El ListPicker crea automàticament una llista d’opcions a escollir per a l’usuari. No es tracta de traslladar-te a una altra pantalla, sinó que aparegui una llista de possibilitats. Aquesta llista es defineix fàcilment a partir del Blocks Editor, podent afegir i treure elements amb molta facilitat. Si no m’equivoco, diria que el disseny d’aquesta llista no es pot modificar i manté el mateix disseny del tema del mòbil.

listpicker

Tal i com es mostra a la captura de pantalla anterior, així es defineix la llista de ListPicker. No entenc què és Screen1.Initialize.

- Obrir Maps amb una cerca

Tal i com esmentava, l’ActivityStarter ens permet iniciar una altra aplicació sense sortir de la que tenim oberta. Un cop definit que l’aplicació que s’activarà sigui el GoogleMaps, cal definir què volem obrir.
Així, quan l’usuari clica una de les opcions de la ListPicker1, s’obre el Maps cercant les paraules que haguem definit en les destinacions. Per a què això passi cal definir-ho mitjançant el ListPicker1.AfterPicking.

listpickerafter1

L’ActivityStarter1.DataUri defineix què ha d’obrir el Maps. En aquest cas, se li demana que obri el cercador i que insereixi la destinació seleccionada de la llista. Per això fa una combinació entre “http://maps.google.com/?q=” i l’opció seleccionada. Així si l’usuari escull “Tour Eiffel”, el DataUri es dirigeix a “http://maps.google.com/?q=Tour Eiffel.”

 

VideoWall

APP INVENTOR: Canviar el tamany del reproductor de vídeo
Autor/a: Patricia Ruiz

Introducció:

Aquest tutorial mostra com podem controlar el tamany d’un vídeo a una aplicació. El VideoWall utilitza els recursos multimèdia (vídeos emmagatzemats a la pròpia app), però també podem fer servir la app per mostrar vídeos d’Internet.

Comencem:

  1. Creem un nou projecte i li donem el nom de VideoWall.
  2. Canviem la orientació de la pantalla a Landscape i, de pas, el BackgroundColor a Black.
  3. Ens baixem els tres vídeos que farem servir a continuació:http://appinventor.mit.edu/explore/content/videowall.html

Un cop finalitzem l’aplicació VideoWall, se’ns mostrarà una pantalla amb els tres vídeos, que podrem ampliar fins assolir el seu tamany real, i després tornar a encongir. L’aplicació també ens permetrà visualitzar els vídeos en pantalla completa.

Establim els components:

A continuació, farem servir el dissenyador de components per crear la interfície de VideoWall. Havent acabat, hauria de tenir el següent aspecte:

1

Per aconseguir-ho, primer hem de carregar els arxius de vídeo que ens hem baixat. Farem click al botó Add i seleccionarem els vídeos un per un.

Ara, crearem la interfície arrossegant els següents components de la Palette al Viewer:

Tipus de component Grup de la Palette Com l’anomenarem Propòsit del component Comentaris
HorizontalArrangement ScreenArrangement HorizontalArrangement1 Alinea els components horitzontalment  Posarem el Width a Fill parent
VerticalArrangement ScreenArrangement VerticalArrangement1 Alinea el vídeo de l’esquerra i els controls corresponents Posarem el Width a Fill parent
VerticalArrangement ScreenArrangement VerticalArrangement2 Alinea el vídeo del mig i els controls corresponents Posarem el Width a Fill parent
VerticalArrangement ScreenArrangement VerticalArrangement3 Alinea el vídeo de la dreta i els controls corresponents Posarem el Width a Fill parent
VideoPlayer Media VideoPlayer1 Mostra el BigBuckBunny video Triem el vídeo Bigbuckbunny.3gp a Source, el Width el posem a Fill parent i el Height a 36 pixels
VideoPlayer Media VideoPlayer2 Mostra el NASA video Triem el vídeo Nasa.3gp a Source, el Width el posem a Fill parent i el Height a 36 pixels
VideoPlayer Media VideoPlayer3 Mostra el Sintelvideo Triem el vídeo Sintel.3gp a Source, el Width el posem a Fill parent i el Height a 36 pixels
Button Basic ResizeButton1 Canvia el tamany del VideoPlayer1 Al text escriurem “Grow” iposarem el Width a Fill parent
Button Basic ResizeButton2 Canvia el tamany del VideoPlayer2 Al text escriurem “Grow” iposarem el Width a Fill parent
Button Basic ResizeButton3 Canvia el tamany del VideoPlayer3 Al text escriurem “Grow” iposarem el Width a Fill parent
Button Basic FullScreenButton1 Mostra el VideoPlayer1 video en pantalla completa Al text escriurem “Show FullScreen” iposarem el Width a Fill parent
Button Basic FullScreenButton2 Mostra el VideoPlayer2 video en pantalla completa Al text escriurem “Show FullScreen” iposarem el Width a Fill parent
Button Basic FullScreenButton3 Mostra el VideoPlayer3 video en pantalla completa Al text escriurem “Show FullScreen” iposarem el Width a Fill parent

Assignar comportaments als components:

 Ara la interfície està completa, però els botons encara no canvien el tamany dels vídeos. Per això, obrirem el Blocks Editor, per assignar comportament als botons. Primer de tot, definirem tres blocs de variables per poder modificar el tamany dels VideoPlayers.

3Ara crearem el bloc de resizeVideoPlayer. Hi ha tres Videoplayers a l’aplicació, però utilitzarem només un sol bloc de procediment per canviar el tamany dels tres. Per fer-ho, anirem al component Advanced, i clicarem sobre el bloc Any VideoPlayer.

4

Creació dels blocs de Click:

Els blocs que crearem responen als clicks sobre els botons ResizeButton.

5

La majoria de blocs a l’App Inventor requereixen que coneguem exactament quin component manipularà la nostra aplicació en el moment en que l’estem dissenyant. Per algunes apps, tindrem bastants components del mateix tipus, i voldrem programar un mateix comportament per tots els components similars (com és el cas dels blocs de VideoPlayer en aquesta app).

Nota: La appVideoWallpodría haver-se dissenyat amb una redimensió específica per a cada VideoPlayer. Utilitzant el bloc Advanced en un sol procediment de redimensió, la app és molt més simple.

 Com funcionen els blocs:

Configurar les propietats d’amplada i alçada per a un VideoPlayer, funciona exactament de la mateixa manera que configurar l’amplada i alçada d’un botó. Per qualsevol número positiu que establim, el vídeo que es reprodueixi redimensionarà la seva aparença per a encaixar en aquell valor. Hi ha dos valors que són excepcions de la norma d’utilitzar valors positius: el -1 i el -2.  Configurar el VideoPlayer.Width o VideoPlayer.Height a -1 és com configurar l’alçada o l’amplada a Fill Parent en el designer. Configurar el VideoPlayer.Width o VideoPlayer.Height a  -2 és com configurar l’alçada o l’amplada a Automatic al designer.

Cal tenir en compte que, en alguns dispositius, el tamany no es canvia correctament i, per tant, el resultat és impredictible.

Full screen:

El  VideoPlayer.FullScreen bloc, agafa un valor positiu/negatiu (anomenat també Boolean), per dir si el vídeo s’ha de posar en full screen o no. Configurar un bloc VideoPlayer.FullScreen  a true, farà que el vídeo es reprodueixi en fullscreen. Si hi ha un altre video en fullscreen, el valor es posarà a fals i serà remplaçat per l’actual videoplayer. Si el VideoPlayer.FullScreen  es true, configurar el bloc com a falsa causa que es tanqui el fullscreen.

6

Location Sensor i Activity Starter

Autor/a: Elsa Reig Ambrojo

Ambdós elements,Location Sensor i ActivityStarter,formen part dels “no visibles” dins la interfície del Mit App Inventor. El primer,serveix per a que el dispositiu detecti les coordenades de latitud i longitud on es troba el dispositiu, així com l’adreça. En les seves propietats podem escollir l’interval de temps o distancia en què volem que es vagi refrescant la informació.

1

ActivityStarter, en canvi, és un component que serveix per a obrir una altre aplicació, com GoogleMaps, fent que l’usuari pugui visualitzar un mapa quan ho necessiti.Per als mapes, hem d’utilitzar la URL del que vulguem que l’usuari vegi en la propietat DataUri d’aquest element. Si volem mostrar direccions, la URL ha de tenir una forma com http://maps.google.com/maps/?saddr=0.1,0.1&daddr=0.2,0.2on els números són les coordenades de GPS. Per a aquest component necessitem omplir-ne tres propietats:

  • Action (android.intent.action.VIEW)
  • Activity Package (com.google.android.apps.maps)
  • Activity Class (com.google.android.maps.MapsActivity)

 2

En l’editor de blocs, utilitzem el LocationSensor1.LocationChanged per a fer que el dispositiu vagi refrescant les coordenades a mesura que canviem de posició. Cada cop que canviï, farà que CurrentAdressDataLabelpugui mostrar l’adreça actual (on en la imatge posa unknown), mentre que a sota, on posa GPS, se’ns mostrin en números les coordenades de localització.

34

Tot i això, necessitem el botó “Remembermycurrentlocation” per a indicar-li al dispositiu que volem que ens mostri aquella adreça concreta (fent ús de la TinyDB). I en l’editor de blocs necessitarem el següent:

5

Per a mostrar el mapa, utilitzarem el boto “Show Directions”. Per a això, en el blocs editor, farem servir DirectionsButton.Click, que iniciarà l’ActivitStarter1.DataUri. És a dir, quan l’usuari piqui en el botó de Show Directions, es generarà una URL per al mapa i l’ActivityStarter carregarà el mapa des del googlemaps.

6

Brick Breaker

Autor/a: Queralt Pons

Les principals característiques d’aquesta APP són:

  • Diferents pantalles com a menú principal, tria de nivell, resultat final,…
  • Un submenú amagat dins d’una pantalla a partir de la possibilitat de mostrar i amagar elements segons l’evolució del joc.
  • La possibilitat de crear tants nivells de dificultat com es vulguin (cada un en una pantalla nova) i que en cada nivell canviïn el nombre de blocs, la velocitat de la pilota i la barra, el nombre de vides,…
  • Creació d’una base de dades del resultat ja que sinó al tancar la APP perdríem tota la informació del joc. Aquesta info es mostrarà a la pantalla de Total Score.

 

Determinació de paràmetres:

El primer que farem al Blocks Editor serà configurar tots els paràmetres del joc com ara nombre de vides, velocitat i mides de la pilota, què és el que veiem i el què no a l’inici del joc,…

Això ho farem a partir de determinar diferents procedures que configuraran les diferents respostes a les diferents accions.

El mostrat a continuació es tracta del Set up central dels paràmetres del joc:

Sin título-1

Configuració d’accions:

Hem creat tots els procedures anteriors per a poder configurar totes les accions del joc que principalment es basaran en atorgar una funció a cada botó de la pantalla i a evolució dels paràmetres anteriors segons si el jugador guanya o perd.

A continuació veiem la programació del bloc del temps (Timer) i de la pilota (Ball). També la de cadascún dels blocs de la pantalla que aniràn desapareixent.

Sin título-3Sin título-2

És una aplicació que agrupa les principals funcions bàsiques de l’App Inventor i està bé per practicar-les de cara a la nostre aplicació personal.

 

cómo crear una panorámica arrastrando la imagen.

http://puravidaapps.com/snippets.php#stopCannibalism

Autora:  Haizea Galarreta Fernández

FLUNG

flung 2

(number x, number y, number speed, number heading, number xvel, number yvel, boolean flungSprite).

Utilidades:

  • Permite  visualizar toda la panorámica sin que tengas que reducir la anchura de la imagen.
  • Permite la opción de pasar de una imagen a otra con el gesto de arrastrar.

A tener en cuenta:

  • No equivocar con la opción drag.

Introducción

Para que al hacer un gesto de arrastrar una imagen funcione hay que crear un canvas para obtener una posición inicial (x,y). Además, se obtiene la velocidad y el punto de partida del gesto, al igual que componente de la velocidad X e Y del vector de arrastre.

ejes

En screen 1 los componentes que necesitamos son screen uno (screenorientation<landscape) y un canvas con la imagen de la habitación en background image.

 1.      Definimos dos variables con dos nombres diferentes:

  • A una se le asigna un número.
  • A la otra le añadimos una lista donde subiremos las fotos que compongan la panorámica (en este caso serían dos).

variables

2.      Para que al tocar con el dedo la pantalla podamos arrastrar la imagen hacia la izquierda y derecha necesitamos canvas.flung.

  • Necesitamos condiciones if else.
    • If  la velocidad de la coordenada X es menor a 0. Se cumplirá la función de que se pase de la primera variable a la variable con la lista (es decir, algo así a rotarla) hacia la izquierda.
    • If  la velocidad de la coordenada X es mayor a 0. Se cumplirá la función de que se pase de la primera variable a la variable con la lista (es decir, algo así a rotarla) hacia la derecha.
  • Hay que añadir la opción canvas. Background image y le agregaremos la lista de las dos variables (de número y de lista) con las que hemos estado trabajando. 

Este tutorial también sirve con el gesto de arrastrar queremos que se den transiciones de imágenes. Para ello, añadiríamos las imágenes con las que se quiere intercambiar a la lista.

todo

Problemas:

  • No consigo averiguar si existe la opción de poder conseguir una panorámica con una sola imagen. Es decir sin tener que dividirla y dotarle de izquierda o derecha a cada lado.
  • en el caso de que utilice el emulador, la pantalla no permite la opción de girarla horizontalmente.