Taller de Flash: Saps de què parlo?

Objectiu: Crear una pàgina web amb contingut d'endevinalla on hi hagi el text escrit i un dibuix que es transforma en un altre al fer clic a un botó.

Veieu uns quants exemples realitzats per alumnes

Plantilla de Flash:
1. Menú Modificar - Película Canviar color de fons i Aceptar.
2. Menú Ventanas - Bibliotecas comunes - Botones
3. Doble clic sobre Circle (Button Set) Fer clic sobre Cercle with arrow. Arrossegar a l'escenari el botó que haurà aparegut al damunt de la finestreta. Per fer-ho més gran fer clic a sobre amb el botó dret i triar escalar. Ara es pot canviar la grandària.
4. Fem clic al damunt amb el botó dret i escollim Acciones. Fem clic sobre Acciones básicas i després doble clic sobre Goto. A la dreta s'haurà escrit:
on (release) {
gotoAndPlay (1);
}

Hem de canviar el (1) per un (2) simplement canviat a la part de sota de la finestra de Acciones de Objetos
4. Podem canviar el nom de la capa 1 per Botó (doble clic i reescriure. Tecla Intro per acceptar).
5. Afegim fotogrames a la línia de temps amb la tecla F5 fins arribar al fotograma 50 per exemple.
6. Per últim posarem un candau a la capa per evitar modificacions i desarem la nostra plantilla

*Si no volem fer tota aquesta feina podem baixar-nos la plantilla des d'aquí

Creació de la pel·lícula de transformació d'imatges:

1. Obrim el Flash i obrim l'arxiu: plantilla.fla
2. Menú Insertar - capa , la qual li canviarem el nom per imatge (doble clic a sobre del nom per reescriure i Intro)
3. Fem el primer dibuix, per exemple el nombre 4. (Hem de comprovar que veiem la finestra flotant Herramientas, si no és així anem al Menú Ventana - Herramientas i la col·loquem on ens interessi). Fem clic al primer fotograma de la capa imatge i després a la Herramienta Pincel. Més a baix podem triar la forma i grandària del pincel i també els color de Trazo i Relleno. Ja podem dibuixar l nostra primera imatge.

4. Fem clic a la Herramienta Flecha (Negra) i després un altre clic a l'últim fotograma (el 50) de la capa imatge. A continuació premem la tecla F6.
5. Abans de fer la segona imatge i final podem esborrar amb la Herramienta Borrador aquelles parts del primer dibuix que no ens interessi (ATENCIÓ: NO PODEM ESBORRAR-LO TOT, HEM DE DEIXAR UNA MICA, NI QUE SIGUI PETITA) A continuació ja podem fer el segon dibuix utilitzant les eines de les Herramientas i els colors que volguem.

6. Fem clic amb el botó dret damunt del fotograma 1 i triem Paneles - Fotograma. A la segona línia Interpolación, on diu ninguno, escollirem forma (a la línia de temps s'haurà creat una línia sobre fons verd) Ja podem tancar aquesta petita finestra.
7. Una altra vegada fem clic amb el botó dret damunt el fotograma 1 i triem Acciones. Obrim el primer menú: Acciones básicas si no està obert i fem doble clic sobre STOP (sortirà escrit a la dreta) Seguidament i sense tancar res fem clic (botó esquerre) sobre el fotograma 50 Ara tornem a fer doble clic sobre STOP (JA PODEM TANCAR LA FINESTRA "Acciones fotogramas"
8. Per veure el resultat, anem al Menú Control - Probar película Aquí veurem al fer clic sobre el botó si surt el que preteníem.
9. Desarem el nostre treball: Archivo - Guardar como...(Ens guarda en format .fla per poder modificar-lo després)
10. Anem al Menú Archivo - Publicar i ara ens desarà un arxiu en format .swf que es pot visualitzar en qualsevol navegador. Aquest és el que penjarem a la nostra web.

Creació de la pàgina web

Podem crear una com la que presentem aquí, que té una capa títol, una altra per a la peli, una altra per al text i una última per posar el nom de l'autor. Si volem estalviar-nos feina podem descarregar aquesta, que l'hem anomenada muestra.htm

Els alumnes han d'obrir el Dreamweaver, obrir la pàgina muestra.htm i canviar el contingut de les diferents capes. Recordeu que la pel·lícula de Flash que hem d'incorporar és l'arxiu amb format .swf i que ha d'estar a la mateixa carpeta on desarem la pàgina web, igual que ho faríem en un document de word que volguem modificar. Finalment guardarem el treball amb un altre nom.