flash

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