INICIACIÓ AL FLASH CARACTERÍSTIQUES DEL PROGRAMA Pertany a la família de Macromèdia. S’obtenen productes de baix pes en format *.swf. Els arxius de treball són *.fla. Es treballa amb fotogrames i per capes. El llenguatge de programació: Action Script. Es treballa amb imatges en dos formats: mapa de bits (pesen més, no tanta qualitat) i en imatges vectorials (pesen poc, les podem fer més grans i mantenen la qualitat). QUÈ PODEM FER AMB EL FLASH? Animacions Activitats interactives Dibuixar Modificar fotografies Pàgines web INTERFÍCIE
L’escenari és l’espai on treballareu i és el que serà visible.
INICIACIÓ AL FLASH.doc
1
EINES
Llapis: permet dibuixar línies i formes lliures. Línia: permet dibuixar línies rectes. Oval: permet dibuixar ovals i cercles i els omple de color. Rectangle: permet dibuixar rectangles i quadrats i els omple de color. Pinzell: permet dibuixar traços semblants als d’ un pinzell. Podem seleccionar gruix i color. Goma d’esborrar: permet esborrar línies, traços i altres objectes. Pot de pintura: permet omplir o canviar de color superfícies tancades. Pot de tinta: permet dibuixar el traç extern d’un objecte Comptagotes: permet copiar el color a un altre objecte i línia.
INICIACIÓ AL FLASH.doc
2
DIBUIXEM. LES CAPES Quan es fan totes les parts d’un dibuix en una mateixa capa, passa això quan en voleu separar les parts:
(1)
Cal tenir-ho present perquè si us equivoqueu és més difícil de corregir. Si treballeu en capes, la figura (1), podríeu pintar el cercle d’un color i el quadrat d’un altre, els podríeu separar i es mantindrien les formes originals, podríeu esborrar una de les dues figures. MODIFICAR ELS DIBUIXOS DE MANERA SENZILLA Amb l’eina de fletxa podeu modificar els objectes, deformar-los. Dibuixeu un cercle:
INICIACIÓ AL FLASH.doc
3
Us pot quedar una figura així.
També podeu utilitzar la goma d’esborrar per modificar. Una altra manera de transformar s’aconsegueix treballant amb una mateixa capa i a partir d’una forma inicial, dibuixar a sobre altres objectes o línies.
(1)
(2)
(3)
ANIMACIONS: Podeu fer una animació fent: - petites modificacions cada dos fotogrames. - Interpolacions de forma. - Interpolacions de moviment.
INTERPOLACIONS DE FORMA: En el flash hem de diferenciar els objectes dels símbols. Per fer interpolacions de forma cal que siguin objectes. Si el que heu fet és un símbol (heu convertit l’objecte en símbol, o heu escrit text) cal anar a MODIFICAR, SEPARAR. Clicar sobre SEPARAR fins que desapareguin les ratlles blaves que envolten el símbol (és el que ens indica que es tracta d’un símbol).
INICIACIÓ AL FLASH.doc
4
Dibuixeu una figura geomètrica:
Aneu a la línia del temps. En el número 30, cliqueu botó dret i activeu l’opció INSERTAR FOTOGRAMA CLAVE
INICIACIÓ AL FLASH.doc
5
Aneu al fotograma 30 de la línia del temps i feu les modificacions que vulgueu amb la eina de fletxa. També podem modificar la mida utilitzant l’eina Seleccioneu en la línia del temps els 30 fotogrames. Aneu a la part baixa de la pantalla, a la pestanya PROPIEDADES, on diu ANIMAR, trieu l’opció FORMA.
Els fotogrames de la línia del temps quedaran de color verd i es dibuixarà una fletxa que va del primer a l’últim fotograma. Premeu les tecles <CONTROL>+<RETORN> per veure els resultats. Si ho voleu desar heu d’anar a ARCHIVO, GUARDAR COMO i triar la carpeta on ho voleu desar i nomenar l’arxiu. Seguidament heu de tornar anar una altra vegada a ARCHIVO, CONFIGURACIÓN DE PUBLICACIÓN i triar
INICIACIÓ AL FLASH.doc
6
l’opció Flash (swf), PUBLICAR I ACEPTAR. Quan tanqueu el programa us demanarà si volem desar, li direm que sí. INTERPOLACIONS DE MOVIMENT: Dibuixem una figura a l’escenari
Aquesta figura és un objecte, cal convertir-la en símbol. Cliqueu a sobre de l’objecte (seleccionar), aneu a MODIFICAR i CONVERTIR EN SÍMBOLO, SÍMBOLO GRÁFICO. La figura quedarà envoltada per una quadrat blau (símbol). Aquesta figura ja és un símbol gràfic, ens queda desat a la biblioteca del flash (VENTANA, BIBLIOTECA), i des d’aquí el podeu posar les vegades que vulgueu.
INICIACIÓ AL FLASH.doc
7
Aneu a la línia del temps, cliqueu sobre el fotograma 10 amb el botó dret i li dieu INSERTAR FOTOGRAMA CLAVE. Seleccioneu el fotograma 10 de la línia del temps, aneu a l’escenari i moveu el símbol gràfic. Aneu a la línia del temps, cliqueu sobre el fotograma 20 amb el botó dret i li dieu INSERTAR FOTOGRAMA CLAVE. Seleccioneu el fotograma 20 de la línia del temps, aneu a l’escenari i moveu el símbol gràfic. Repetiu l’operació les vegades que vulgueu, augmentant en 10 fotogrames cada vegada. Seleccioneu tota la línia de fotogrames, aneu a la pestanya PROPIEDADES (la part baixa de la pantalla), i a ANIMAR trieu l’opció MOVIMIENTO. Els fotogrames de la línia del temps quedaran pintats de color lila i es dibuixaran fletxes que van de 10 en 10 fotogrames. Premeu les tecles <CONTROL>+<RETORN> per veure els resultats. Si ho voleu desar heu d’anar a ARCHIVO, GUARDAR COMO i triar la carpeta on ho volem desar i nomenar l’arxiu. Seguidament hem de tornar anar una altra vegada a ARCHIVO, CONFIGURACIÓN DE PUBLICACIÓN i triar l’opció Flash (swf), PUBLICAR I ACEPTAR. Quan tanqueu el programa us demanarà si volem desar, li direm que sí. Si voleu que l’animació s’aturi cal clicar a sobre de l’últim fotograma ( o allà on vulgueu que s’aturi), obriu la pestanya ACCIONES (part de baix de la pantalla), FUNCIONES GLOBALES, CONTROL DE LA LÍNIA DEL TIEMPO, STOP. PRÀCTICA: Endevinalles: Dibuixeu a l’escenari l’objecte que representa la solució de l’endevinalla, fent servir el pinzell i el pot de pintura. Tot en una mateixa capa.
INICIACIÓ AL FLASH.doc
8
Aneu a la línia del temps, cliqueu sobre el fotograma 30 amb el botó dret i li dieu INSERTAR FOTOGRAMA CLAVE. Seleccioneu el fotograma 1, esborreu l’arbre de l’escenari i dibuixeu un rectangle.
Seleccioneu en la línia del temps els 30 fotogrames. Aneu a la part baixa de la pantalla, a la pestanya PROPIEDADES, on diu ANIMAR, triar l’opció FORMA. Aneu el fotograma 30 i escriviu a l’escenari al paraula arbre. Seleccioneu el fotograma 30 de la línia del temps i obriu la pestanya ACCIONES (part de baix de la pantalla), FUNCIONES GLOBALES, CONTROL DE LA LÍNIA DEL TIEMPO, STOP. Premeu les tecles <CONTROL>+<RETORN> per veure els resultats. Posareu un botó a l’inici (al primer fotograma). Aneu a VENTANA, OTROS PANELES, BIBLIOTECAS COMUNES, BOTONES A la vostra dreta s’obrirà la finestra de la biblioteca - botones . fla
INICIACIÓ AL FLASH.doc
9
Obriu una nova capa a la línia del temps:
Cliqueu a sobre de la carpeta i es crearà la CAPA 2. Seleccioneu el fotograma 1 de la capa 2, aneu a la biblioteca de botons, obriu la carpeta CIRCLE BUTTONS, cliqueu sobre CIRCLE BUTTON-NEXT, el veureu a l’escenari de la biblioteca. L’heu d’arrossegar a l’escenari.
Obriu la pestanya ACCIONES de la part inferior de la pantalla. Seleccioneu el botó (clicant-hi a sobre). Heu d’escriure les ordres del botó on (press) {gotoAndPlay(nextFrame); play();} Cliqueu a sobre de l’escenari per desar aquestes ordres. Aneu al primer fotograma de la línia del temps. Hi heu de posar l’acció STOP
INICIACIÓ AL FLASH.doc
10
Seleccioneu el fotograma 1 de la capa 2 de la línia del temps i obriu la pestanya ACCIONES (part de baix de la pantalla), FUNCIONES GLOBALES, CONTROL DE LA LÍNIA DEL TIEMPO, STOP. Si ho voleu desar heu d’anar a ARCHIVO, GUARDAR COMO i triar la carpeta on ho volem desar i nomenar l’arxiu (això és millor fer-ho en el moment que creem l’arxiu). Seguidament heu de tornar anar una altra vegada a ARCHIVO, CONFIGURACIÓN DE PUBLICACIÓN i triar l’opció Flash (swf), PUBLICAR I ACEPTAR. Quan tanqueu el programa us demanarà si voleu desar, li direu que sí.
INICIACIÓ AL FLASH.doc
11