Embedded Files
DEMOSTRACIÓ
DEMOSTRACIÓ
En aquesta activitat aprendrem a aplicar interaccions de l'usuari a les nostres animacions. Comprova el que farem, fixa't com l'usuari fa clic a la porta, després al forat de la paret, després a la rata i per últim al diàleg.
02_casa.mp4PREPARACIÓ
PREPARACIÓ
Ara que ja controlem la pantalla principal del programa, veurem una part més avançada i farem que puguem interactuar amb la nostra animació.
En primer lloc anem a crear 4 frames que seran els que formaran la nostra animació. Canvia els noms perquè siguen així:
CASA
HABITACIÓ
RATOLÍ
HOLA
Els frames seran els següents. IMPORTANT, ELS RECUADRES VERDS NO ES DIBUIXEN
El timeline hauria de quedar així:
INTERACCIÓ
INTERACCIÓ
FER QUE PARE L'ANIMACIÓ A LA CASA
FER QUE PARE L'ANIMACIÓ A LA CASA
Per fer que pare l'animació en el frame de la casa farem clic sobre el frame
Després farem clic sobre la part dreta on posa Default
Per últim, en la finestra que s'obrirà escriurem la funció stop()
D'aquesta manera, quan fem clic al PLAY veure'm com l'animació queda parada al frame número 1, el de la casa
FER QUE AL CLICAR SOBRE LA PORTA PASSE AL FRAME 2, EL DE L'HABITACIÓ
FER QUE AL CLICAR SOBRE LA PORTA PASSE AL FRAME 2, EL DE L'HABITACIÓ
En primer lloc selecciona tots els elements de la porta amb la ferramenta de selecció i la tecla shift (per seleccionar diferents elements)
Després farem clic en Make Clip i veure'm que la porta tindrà com un recuadre que l'envolta
Després farem clic a +add script per afegir-li funcionalitat.
En la finestra que s'obrirà seleccionarem Mouse i Mouseclick que és l'acció quan fem clic sobre l'element amb el ratolí
Després hem de seleccionar la categoria de Timeline perquè volem realitzar una acció amb els frames de la nostra línia de temps
Seguidament fem clic a l'opció gotoAndStop que el que fa és anar al frame que nosaltres li indiquem i parar l'animació
Per últim, substituirem l'1 que apareix pel nom exacte del frame número 2
Ara, reprodueix l'animació des del frame 1 i comprova que al fer clic sobre la porta s'obri el frame 2 amb l'habitació.
FER QUE AL CLICAR SOBRE EL FORAT DE LA PARET PASSE AL FRAME 3, EL QUE APAREIX EL RATOLÍ
FER QUE AL CLICAR SOBRE EL FORAT DE LA PARET PASSE AL FRAME 3, EL QUE APAREIX EL RATOLÍ
Ara, hauràs de fer el pas anterior però al frame 2:
Seleccionar el forat
Fer-lo clip
Afegir un script
Indicar el event mouseclick
Assignar l'acció gotoAndStop
Indicar el nom del frame número 3
FER LA RESTA
FER LA RESTA
A continuació has de fer que:
Al fer clic al ratolí del frame 3 vaja al frame 4
Al fer clic al text HOLA del frame 4 vaja al frame 1
EXPORTAR I GUARDAR EL PROJECTE
EXPORTAR I GUARDAR EL PROJECTE
Guarda el projecte i puja-ho a aules.
Exporta el projecte com Interactiu i HTML. Puja-ho a aules i al blog com s'explica a continuació:
EXPORTAR I GUARDAR EL PROJECTE
EXPORTAR I GUARDAR EL PROJECTE
Passos per a pujar un html al blog:
Obri el fitxer exportat en html amb un editor de textos com (Scite)
Selecciona i copia tot el contingut
Ves al google site
Fes clic a Insertar > Insertar
En la finestra que s'obrirà posem Insertar código
TARDARÀ UN POC PERQUÈ SERAN MOLTES LINIES
EL RESULTAT SERÀ COM AQUEST ------------------------------------->
EXERCICI 1
EXERCICI 1
Crea una escena d'una carretera amb un semàfor en roig. Un cotxe arriba al semàfor i es para. Quan l'usuari faça clic al semàfor, es posarà en verd i el cotxe continuarà. Pistes:
No fa falta que anomenes tots els frames, només el que para el cotxe i el que el semàfor està en verd
Crea 3 capes: Semàfor, Cotxe i Fons
Quan el cotxe arribe al semàfor, fer que el frame pare l'execució -> stop()
Al fer clic al semàfor, continuar amb la següent frame però en lloc de gotoAndStop serà gotoAndPlay
PUNTUACIÓ EXTRA: Fer que el vehicle es faça cada vegada més menut perquè es va allunyant
02-02-COTXE-SEMAFOR.mp4Realitzat per Noelia T
EXERCICI 2
EXERCICI 2
Fes que hi aparega una escena on hi han 3 contenedors, un groc per al plàstic, un verd per al virdre i un blau per al cartró. Després ha d'apareixer un producte (un bric de llet, una botella de vidre o una caixa de cartró). Si selecciones un contenedor erroni ha d'apareixer el producte amb una X roja, si és correcte apareixerà amb un check (V) en verd.
Després faràs el mateix amb dos productes més.
PISTA: Fes els següents frames:
1) 3 contenedors + títol (per exemple: anem a reciclar)
2) 3 contenedors + producte 1 (si es fa clic a un contenedor erroni s'anirà al frame 3, si és correcte al frame 4
3) 3 contenedors + producte 1 + X roja + botó continuar (al fer clic al botó de continuar s'anirà al frame 5)
4) 3 contenedors + producte 1 + V verda + botó continuar (al fer clic al botó de continuar s'anirà al frame 5)
... fes el mateix per als altres 2 productes
Mira l'exemple:
Page updated
Google Sites
Report abuse