mòdul iii les animacionsweib.caib.es/formacio/distancia/material/flash/flash3.pdfcurs de macromedia...

47
Materials de formació Introducció al Macromedia Flash Mòdul III Les animacions Jesús Arbués García del Moral Joan Gelabert Vich Ernest Prats García Setembre 2004

Upload: others

Post on 24-Feb-2020

2 views

Category:

Documents


0 download

TRANSCRIPT

Materials de formació

Introducció al Macromedia Flash

Mòdul III

Les animacions

Jesús Arbués García del MoralJoan Gelabert VichErnest Prats García

Setembre 2004

Mòdul III: Les animacions

Autors: Jesús Arbués García del Moral, Joan Gelabert Vich i Ernest Prats García Servei de Formació Permanent del ProfessoratDirecció General d’Ordenació, Innovació i Formació del ProfessoratGovern de les Illes BalearsConselleria d’Educació i CulturaSetembre de 2004

obra de Jesús Arbués Garcia del Moral, Joan Gelabert Vich i Ernest Prats García està subjecta a una llicència de Reconeixement-No comercial-Compartir amb la

mateixa llicència 3.0 Espanya de Creative Commons

Taula de continguts

1. La línia de temps................................................................................................................................5

2. Crear una interpolació de moviment...................................................................................................7

2.1. Desplaçament d’un objecte en diverses línies rectes.................................................................10

2.2. Crear una interpolació de moviment amb canvi de dimensions.................................................11

2.3. Interpolació de moviment amb acceleració o frenada................................................................12

2.4. Interpolació de moviment amb desaparició gradual d’una imatge fent-la transparent................13

2.5. Interpolació de moviment, objecte que es desplaça en línia recta i gira....................................14

2.6. Interpolació de moviment, objecte que es desplaça en LÍNIA recta i gira un nombre determinat de vegades.......................................................................................................................................15

2.7. Interpolació de moviment, l’objecte gira un nombre determinat de vegades sense moure’s de lloc.....................................................................................................................................................16

2.8. Interpolació de moviment, l’objecte gira un nombre determinat de voltes sense moure’s de lloc canviant la velocitat de rotació al principi o al final............................................................................16

2.9. Canvi del punt de rotació (gir) en una interpolació de moviment................................................18

3. Interpolacions complexes.................................................................................................................19

3.1. imatges estàtiques i en moviment..............................................................................................23

3.2. interpolacions amb fusió............................................................................................................26

4. Treballant amb fotogrames...............................................................................................................29

5. Interpolació de moviment amb text, separant i distribuint en capes..................................................34

6. Exercici de repàs..............................................................................................................................38

Convencions

Els símbols utilitzats en aquest text són:

Activitats d’introducció

Activitats completament guiades amb exposició gradual de continguts, que permetin assegurar els continguts mínims de la programació del mòdul de formació.

Activitats de consolidació i reforç:

Aquestes activitats presenten una dificultat un poc superior ja que no són tan guiades i permetran un millor domini dels temes estudiats.

Activitats d’entrega obligada

Les activitats que vénen marcades per aquesta icona s’hauran d’entregar obligatòriament per tal de superar el curs de formació.

Activitats opcionals

Activitats d’ampliació de coneixements que permetin aprofundir en la temàtica tractada.

Recomanacions o comentaris

Recomanacions o comentaris que permetran una millor realització de les activitats encomanades.

Ajuda

Per a algunes activitats, si la seva resolució presenta problemes, es podrà consultar l’ajuda, que donarà pistes per facilitar-ne la realització.

Recursos addicionals

Per poder ampliar els coneixements, es posa a la disposició dels alumnes una documentació complementària de consulta o d’ampliació.

Curs de Macromedia Flash Mòdul III Les animacions

1. LA LÍNIA DE TEMPS

Quan s’obre el Flash, la línia de temps reflexa el contingut de la primera escena,

El flash funciona com una pel·lícula, amb fotogrames que van passant i donen sensació de continuïtat i moviment, com al cinema. Igualment la pel·lícula pot està organitzada en una sola escena o bé en diverses.

Inicialment quan encara no has posat res a l’escenari apareixerà a la zona de capes només una capa (Capa 1)

I a aquesta capa 1 hi haurà un fotograma clau buit a la zona de fotogrames:

Jesús Arbués – Joan Gelabert – Ernest Prats 5

Curs de Macromedia Flash Mòdul III Les animacions

Un fotograma clau buit (cercle blanc), ens indica que en aquest fotograma no hi ha res

Quan col·loquis alguna cosa a l’escenari el fotograma clau buit es convertirà en un fotograma clau ple.

Un fotograma clau ple (cercle negre, ens indica que en aquest fotograma hi hem col·locat alguna cosa.

A la línia de temps hi ha un rectangle vermell amb una línia recta que s’anirà desplaçant conforme avanci la nostra pel·lícula. Aquest rectangle és el capçal lector.

Si el capçal lector està en la posició de la imatge de l’esquerra, a l’escenari veurem el contingut del fotograma 1

En aquest cas a l’escenari veuríem el contingut del fotograma 18

La línia de temps també ens dóna informació del document, entre d’altre, la velocitat de reproducció, indicada en fotogrames per segon (fps).

Fent doble clic sobre la velocitat de reproducció, en aquest cas (12,0 fps) s’obre el quadre de diàleg de les propietats del document. També hi podem accedir des del menú Modificar> Documento

Jesús Arbués – Joan Gelabert – Ernest Prats 6

Curs de Macromedia Flash Mòdul III Les animacions

A aquest quadre podem fixar les dimensions de la pel·lícula, en funció del seu objectiu. Per exemple, ens pot interessar fer un bànner de 500X40, una pel·lícula de 800X600, un botó d’una pàgina web de 20x20 o bé una pàgina web completa.

Tenir clares les dimensions de la pel·lícula

És molt convenient tenir clar les mides de la pel·lícula que volem fer i fixar-les de bon començament, això ens ajudarà a col·locar correctament els objectes a l’escenari. Aquestes mides es poden canviar en qualsevol moment de l’elaboració de la pel·lícula.

A la carpeta Propiedades_documento dins d’arxius flash del mòdul 3 trobareu uns arxius de mides diferents: “banner_525_per_100” “banner_700_per_200”, “pantalla_800_per_600” i “botó_128_per_128”..

En aquest quadre de propietats es pot fixar també el color de fons de la pel·lícula (blanc per defecte).

Una altra variable molt important és la velocitat de reproducció (nombre de fotogrames per segon). La velocitat per defecte és, com ja s’ha comentat, de 12 fps, això vol dir que passarem del fotograma 1 al 12 en un segon o també que si volem que una cosa aparegui a l’escenari 3 segons després d’haver començat la reproducció de la pel·lícula l’hem de col·locar al fotograma 36.

Com a dada curiosa el cine mut funcionava a 18 fps i les pel·lícules convencionals ho fan a 24 fps

La línia de temps té moltes altres utilitats: pots inserir fotogrames, copiar-los, enganxar-los, tallar-los, etc. Tot això ho practicaràs en una activitat posterior.

Et serà molt útil la incorporació de capes a la línia de temps, això et permetrà per exemple, tenir el fons en una capa i el personatge o objecte principal en una altra. Tot això ho aniràs provant també més endavant.

2. CREAR UNA INTERPOLACIÓ DE MOVIMENT

A aquest apartat del tutorial aprendràs a moure un objecte des d’un punt de l’escenari a un altre, simplement fixant la posició inicial i la final.

Crea un nou document de Flash

Jesús Arbués – Joan Gelabert – Ernest Prats 7

Curs de Macromedia Flash Mòdul III Les animacions

A la línia del temps escull el primer fotograma, que està buit i té un aspecte de rectangle blanc amb una circumferència (fotograma clau buit). El seleccionarem clicant sobre ell. El fotograma inicial (fotograma clau per defecte) ja està seleccionat; ara incorporarem qualsevol cosa a l’escenari.

Per exemple: Incorpora una pilota a l’escenari..

La interpolació de moviment es pot fer amb qualsevol element: figura, text i/o imatge. Ho feim amb una pilota, perquè, és més senzill.

Empra l’eina de dibuixar ovals; recorda que perquè surtin cercle cal prémer simultàniament la tecla de les majúscules.

Tria un color per a la línia i un altre pel farcit

Opcionalment, ho pots fer emprant degradats

Per fer la pilota, has d'emprar l'eina del cercle, per fer el degradat has d'emprar la finestra del mezclador de colores.

Recorda que al mòdul 2 ja es va explicar com crear i modificar un degradat.

Jesús Arbués – Joan Gelabert – Ernest Prats 8

Curs de Macromedia Flash Mòdul III Les animacions

En el moment d’incorporar algun element, el fotograma (on ja hi ha alguna cosa) es transforma en un fotograma amb punt negre (fotograma clau ple).

Ara posa’t sobre el primer fotograma.

Selecciona’l i clica amb el botó dret del ratolí, i executa la primera opció Crear interpolación de movimiento.

Observaràs que la figura que hi havia a l’escenari s’ha vist emmarcada en un quadrat (o rectangle, segons la forma) de color blau.

Ara escull un fotograma qualsevol (es pot calcular el temps de l’animació en funció del nombre de fotogrames i la velocitat de reproducció). Per exemple, per a tres segons de pel·lícula caldrà anar al fotograma 36.

Quan hagis decidit la durada, selecciona el fotograma corresponent i pitja el botó dret del ratolí.

A la llista que apareix, escull l’opció Insertar fotograma clave.

T’apareixerà el següent:

Per veure in situ la projecció de les diapositives pitja la tecla INTRO. Tal com ho tens ara no veuràs cap animació, ja que la posició inicial i final de l’objecte és la mateixa (la pilota està al mateix lloc al fotograma inicial i al final).

Jesús Arbués – Joan Gelabert – Ernest Prats 9

Curs de Macromedia Flash Mòdul III Les animacions

Per a crear un moviment és suficient desplaçar de lloc la pilota en un dels dos fotogrames claus, per exemple en el darrer. Per fer-ho selecciona a la línia de temps el darrer fotograma i a l’escenari arrossega la pilota fins una altra posició. Si vols que l’objecte es mogui en línia recta pitja la fletxa de majúscules al mateix temps que arrossegues l’objecte.

Alguns consells referits a la línia de temps

Quan s’utilitza aquest programa, les primeres vegades, és molt fàcil equivocar-se. Quan tingueu algun problema tanqueu l’arxiu i comenceu de nou. De vegades no ens adonem i ens saltem un pas o el canviem d’ordre.

En aquest apartat de les interpolacions si et trobes en algun moment amb aquesta imatge:

Vol dir que estàs en una pantalla diferent a la principal. Estàs dins de la línia de temps pròpia de l'element que has posat a l’escenari (això s’explicarà més endavant). Vist que això pot complicar les coses el millor que pots fer es clicar sobre Escena 1 i continuar o si et veus amb més complicacions, tanca l’arxiu i comença de nou.

Activitat d’introducció 1

Seguint les instruccions que acabam d’exposar, crea una interpolació de moviment que vagi d’un costat a l’altre de l’escenari.

Pots comprovar el correcte funcionament a pantalla pitjant la tecla INTRO. A continuació, crea una carpeta amb el nom de Pràctiques i guarda’l amb el nom de inter1.fla.

De moment només hem creat el fitxer fla. Tal com s’havia explicat abans, s’ha de crear un fitxer swf que és el que funciona de manera autònoma i es pot incloure a una pàgina web. Per fer això, el més senzill és pitjar al mateix temps [CONTROL+INTRO]. Si tot funciona correctament, passaràs a una altra pantalla on ja s’executarà el fitxer swf. Per sortir d’aquesta pantalla i tornar a la d’edició, selecciona Archivo > Cerrar.

Ara pots anar a la carpeta on has guardat el document de Flash i comprovar que hi ha dos fitxers amb el mateix nom, però amb extensió diferent. Fixa’t en les seves dimensions: el fitxer fla és sempre molt més voluminós que el swf, que és el que s’emprarà finalment. Si fas doble clic al damunt del fitxer inter1.swf veuràs com es visualitza a pantalla emprant el FlashPlayer.

2.1. DESPLAÇAMENT D’UN OBJECTE EN DIVERSES LÍNIES RECTES.

Obre el fitxer inter1.fla, en el que tenim un moviment en línia recta. Podem fer més complex el moviment inserint punts intermedis al moviment.

Jesús Arbués – Joan Gelabert – Ernest Prats 10

Curs de Macromedia Flash Mòdul III Les animacions

Per fer-ho selecciona un fotograma intermedi, (per exemple el 10), clicant a la línia de temps al damunt d’aquest fotograma.

Si ara mous la pilota a una altra posició a l’escenari, automàticament es crearà un fotograma clau nou.

Pitja INTRO i veuràs el moviment que has generat.

Pots crear tots els punts intermedis que vulguis, per a crear la trajectòria del moviment desitjat.

Activitat d’introducció 2

Obre el fitxer que hem creat a l’activitat anterior. Insereix diferents punts intermedis, i observa el resultat a pantalla. Desa’l amb el nom d’inter2.fla. Amb el mateix sistema emprat a l’activitat d’introducció 1, crea també el fitxer swf.

2.2. CREAR UNA INTERPOLACIÓ DE MOVIMENT AMB CANVI DE DIMENSIONS

De vegades, et pot interessar que l’objecte creixi per donar la sensació que s’apropa o disminueixi per donar sensació que s’allunya.

Obre un document nou de Flash, i dibuixa al primer fotograma una pilota en l’extrem inferior esquerre de l’escriptori.

Crea una interpolació de moviment i converteix en clau el fotograma 12

A aquest fotograma 12 desplaça la pilota al centre de l’escenari i amb l’eina de transformació lliure fent-la més gran.

Jesús Arbués – Joan Gelabert – Ernest Prats 11

Curs de Macromedia Flash Mòdul III Les animacions

Per fer-ho tria l’eina de transformació lliure

Marca la pilota i estira des d’un dels quadrets.

Si vols escalar la figura (fer-la més gran o més petita però sense deformar-la) caldrà que arrosseguis des d’una cantonada de la figura mantenint la tecla majúscula pitjada.

Prova l’animació que has produït pitjant l’INTRO

Pots fer que la figura creixi o es redueixi sense canvi de lloc. Pot estar en el mateix lloc i pot tenir mides diferents en el primer i en el darrer fotograma.

Activitat d’introducció 3

Crea una interpolació de moviment amb canvi de dimensions. Desa-la amb el nom d’inter3.fla. Amb el mateix sistema emprat a l’activitat d’introducció 1, crea també el fitxer swf.

Línia discontínua a la interpolació

Quan a una interpolació apareix una línia discontínua vol dir que hi ha algun problema. De vegades el millor és tornar a començar.

2.3. INTERPOLACIÓ DE MOVIMENT AMB ACCELERACIÓ O FRENADA.

A les interpolacions que hem anat creant fins ara, la velocitat del moviment és uniforme. És a dir, la pilota va a la mateixa velocitat en qualsevol moment de la pel·lícula.

Obre el fitxer inter1.fla que hem creat anteriorment, i a partir d’ell anirem fent els canvis necessaris.

Marca el primer fotograma i obre, si no ho està, la finestra Propiedades modifica el paràmetre Borrar (no ens demaneu per quin motiu té aquest nom!!!)

Jesús Arbués – Joan Gelabert – Ernest Prats 12

Curs de Macromedia Flash Mòdul III Les animacions

Clica al paràmetre Borrar i fixa’l a 100.

Clica sobre el fotograma final i observa que el paràmetre Borrar segueix a 0. En conseqüència, el primer fotograma té un valor 100 i el darrer un valor zero.

Prova la pel·lícula i observa els efectes produïts pels canvis. Fes canvis al teu gust al paràmetre

Borrar, tant al fotograma inicial com al final.

Aquesta possibilitat del programa ens permetrà treballar amb acceleracions i desacceleracions dels objectes que tenguem a l’escenari, aconseguint efectes molt interessants, especialment quan hi ha diferents objectes en moviment al mateix temps.

2.4. INTERPOLACIÓ DE MOVIMENT AMB DESAPARICIÓ GRADUAL D’UNA IMATGE FENT-LA TRANSPARENT

Per a aquest apartat, necessitarem en primer lloc que creïs una interpolació de moviment d’un objecte. El pots deixar al mateix lloc al primer i darrer fotograma, no és necessari que es mogui.

En aquest cas el que es pretén aconseguir és que l’objecte desaparegui (o dit d’altra manera, que es torni transparent així com avança l’animació).

Situa’t al darrer fotograma i selecciona l’objecte.

A Propiedades desplega la llista de Color i selecciona Alfa.

Si no apareix el quadre de diàleg de Propiedades tal com apareix a la il·lustració anterior, deselecciona l’objecte i torna’l a seleccionar.

Deixa el paràmetre Alfa a 0 i prova l’animació.

Més endavant treballarem amb aquesta opció, i podrem aconseguir les aparicions de mica en mica de diverses imatges seguides a partir d’allò que en el cinema en diuen fosos encadenats.

Jesús Arbués – Joan Gelabert – Ernest Prats 13

Curs de Macromedia Flash Mòdul III Les animacions

Activitat d’introducció 4

Crea una interpolació de moviment amb desaparició fent-la transparent. Desa-la amb el nom d’inter4.fla. Amb el mateix sistema emprat a l’activitat d’introducció 1, crea també el fitxer swf.

2.5. INTERPOLACIÓ DE MOVIMENT, OBJECTE QUE ES DESPLAÇA EN LÍNIA RECTA I GIRA.

A aquesta interpolació el que volem aconseguir és que al mateix temps que l’objecte es desplaça giri sobre si mateix un angle determinat.

En primer lloc, crearem un nou document de Flash

Dibuixa a l’escenari un rectangle

Crea una interpolació de moviment, i desplaça el rectangle al fotograma final.

Situa’t al darrer fotograma i clica a l’eina de Transformación libre

Jesús Arbués – Joan Gelabert – Ernest Prats 14

Curs de Macromedia Flash Mòdul III Les animacions

En el rectangle apareixeran els estiradors, acosta’t a qualsevol dels quatre cantons fins que el cursor es

transformi en una fletxa corba

Clica i arrossega el cursor i provocaràs un gir del rectangle.

Comprova el resultat

2.6. INTERPOLACIÓ DE MOVIMENT, OBJECTE QUE ES DESPLAÇA EN LÍNIA RECTA I GIRA UN NOMBRE DETERMINAT DE VEGADES.

Si el que volem és que doni un nombre determinat de voltes, però que es mantengui a la mateixa posició del fotograma inicial, no ho podem fer com a l’exemple anterior, ja que la posició de l’objecte, pel que fa a inclinació, al fotograma inicial i al final és la mateixa i per tant flash entendrà que no ha de fer gir, només farà la translació.

Per aconseguir aquest moviment amb un nombre de voltes determinat, ho hauràs de fer així:

Crea un document nou de flash, repeteix els tres primers passos de l’exemple anterior. El que has fet, fins ara és una interpolació de moviment, on un rectangle es desplaça en línia recta.

Ara el que faràs és afegir un gir de l’objecte al mateix temps que fa el desplaçament.

Situa’t al fotograma inicial i fes visible si no ho està el panell Propiedades.

Com obrir el panell de Propiedades

El panell de Propiedades està situat a la part inferior de la pantalla. Si no el tens obert, simplement pitja al triangle en horitzontal que hi ha a la seva dreta i aquest es desplegarà.

De les possibilitats de rotació (Girar) triaràs CMR (cap a la dreta) i a Veces posa el valor 1.

Jesús Arbués – Joan Gelabert – Ernest Prats 15

Curs de Macromedia Flash Mòdul III Les animacions

Comprova el resultat.

Activitat d’introducció 5

Crea una interpolació de moviment amb un objecte que es desplaça en línia recta i gira un nombre determinat de vegades. Desa-la amb el nom d’inter5.fla. Amb el mateix sistema emprat a l’activitat d’introducció 1, crea també el fitxer swf.

2.7. INTERPOLACIÓ DE MOVIMENT, L’OBJECTE GIRA UN NOMBRE DETERMINAT DE VEGADES SENSE MOURE’S DE LLOC

Escriu una lletra a l’escenari (Times New Roman 96)

Crea una interpolació de moviment, però no canviïs de posició l’objecte

Assenyala el fotograma inicial i a Propiedades defineix el tipus de gir que desitges que faci la lletra, per exemple CCMR 3 veces.

Pel que fa a aquestes confuses sigles, has de tenir present que:

CCMR comporta gir cap a l’esquerra

CMR comporta gir cap a la dreta

Comprova el resultat

2.8. INTERPOLACIÓ DE MOVIMENT, L’OBJECTE GIRA UN NOMBRE DETERMINAT DE VOLTES SENSE MOURE’S DE LLOC CANVIANT LA VELOCITAT DE ROTACIÓ AL PRINCIPI O AL FINAL.

Jesús Arbués – Joan Gelabert – Ernest Prats 16

Curs de Macromedia Flash Mòdul III Les animacions

De la mateixa manera que ho has fet als desplaçaments pots aplicar acceleracions o frenades als girs, modificant el paràmetre Borrar

Activitat d’introducció 6

Crea una interpolació de moviment amb un objecte (per exemple, una lletra gran) que giri un nombre determinat de vegades sense moure’s del lloc canviant la velocitat de rotació. Desa-la amb el nom d’inter6.fla. Amb el mateix sistema emprat a l’activitat d’introducció 1, crea també el fitxer swf.

Jesús Arbués – Joan Gelabert – Ernest Prats 17

Curs de Macromedia Flash Mòdul III Les animacions

2.9. CANVI DEL PUNT DE ROTACIÓ (GIR) EN UNA INTERPOLACIÓ DE MOVIMENT.

Per defecte, el punt de rotació està situat sempre al centre dels objectes, però això es pot canviar.

Crea un document nou de flash.

Dibuixa a l’escenari un rectangle.

Marca el primer fotograma i clica el botó dret del ratolí, i selecciona crear interpolación de movimiento.

Abans de fer res més, fes clic sobre l’eina Transformación libre.

Al rectangle hi apareixeran uns punts de control.

Jesús Arbués – Joan Gelabert – Ernest Prats 18

Curs de Macromedia Flash Mòdul III Les animacions

El puntet blanc del centre és el que controla el centre de gir. Arrossega’l fins a l’extrem inferior dret.

En aquest moment (i no abans) inserim un fotograma clau per fixar el fotograma final de l’animació. Per exemple, al 40.

.

Amb el fotograma 40 seleccionat, clica sobre l’eina de transformació lliure i provoca un gir al rectangle

Si et situes a l’extrem del rectangle, un poc per fora, el cursor es convertirà en una fletxa circular, fent clic sobre el cursor i arrossegant faràs girar el rectangle, fins a deixar-ho pla.

Prova l’animació i fixa’t on té l’angle de gir.

Activitat d’introducció 7

Fes una animació amb el centre de gir fora de l’objecte. Desa-la amb el nom d’inter7.fla.

3. INTERPOLACIONS COMPLEXES

Els fitxers de pràctiques

Per a fer aquesta pràctica, en primer lloc has d’anar a la carpeta complexes que trobaràs dins arxius flash del mòdul 3. Hi trobaràs dues carpetes més: imatges, on hi ha tot allò que és necessari per a la realització de les pràctiques, i arxius_fla, on hi trobaràs fitxers en format swf amb les pràctiques resoltes, perquè puguis veure quins són els resultats a aconseguir.

Importarem una imatge, grup1.jpg o grup2.jpg, i crearem a la capa 1 una interpolació de moviment.

Alerta amb la importació d’imatges acabades en un número

Quan s’intenta importar una imatge que acaba en un número, Flash interpreta que forma part d’una seqüència d’imatges, i ofereix la possibilitat d’importar-les totes. Això

Jesús Arbués – Joan Gelabert – Ernest Prats 19

Curs de Macromedia Flash Mòdul III Les animacions

ens serà molt útil més endavant, però de moment has de respondre no quan t’ofereixi aquesta possibilitat.

Farem que al primer fotograma clau la imatge estigui a l’àrea de treball, però fora de l’escenari i que al darrer fotograma estigui al mig de l’escenari. Pots veure el resultat aconseguit fins aquí a l’arxiu complexa1.swf . Intenta fer el mateix.

Aquesta interpolació fa que aparegui a l’escenari una imatge. Ara farem que es mantingui temps al mateix lloc.

Si seleccionam el fotograma clau final i li demanam al programa d’incorporar-ne un altre, ens trobarem que tenim dos fotogrames claus seguits i amb el mateix contingut.

La mateixa operació es pot aconseguir de forma molt més ràpida amb les tecles ràpides, en aquest cas inserir un fotograma clau es fa amb la tecla F6.

Ara podrem eliminar la característica de moviment d’aquest segon fotograma clau.

Aquí tenim dos fotogrames claus idèntics.

Assenyalam el segon i amb el botó dret del ratolí escollirem Eliminar interpolación.

Farem que la presència “estàtica” d’aquesta imatge duri un temps. Escollim un fotograma qualsevol (pots fer els càlculs que vulguis per determinar el temps de presència). Aquí hem escollit el fotograma 50. La imatge es mourà del 0 al 30 i estarà quieta del 31 al 50.

Jesús Arbués – Joan Gelabert – Ernest Prats 20

Curs de Macromedia Flash Mòdul III Les animacions

Assenyalam el fotograma 50 i amb el botó dret del ratolí escollim insertar fotograma (aquesta mateixa operació es pot fer amb la tecla F5).

Ara si reproduïm l’arxiu notarem que la imatge arriba al centre i es deté un moment.

El que hem aconseguit ha estat treure el moviment a la imatge. Tenim una estona d’interpolació de moviment, de color blau i una altra de presència de la imatge a l’escenari (imatge estàtica) de color gris.

Pots veure el resultat aconseguit fins aquí a l’arxiu complexa2.swf . Intenta fer el mateix.

Ara incorporarem una capa nova, la capa 2 i farem que apareguin unes lletres. Hem escollit com a text “Plantes”. Farem que apareguin les lletres no al principi, sinó quan la imatge ja estiguin aturada. Per aquest motiu cal introduir un fotograma clau buit en el lloc concret on volem incorporar el text.

Objectes i fotogrames clau

Els objectes només es poden posar a la línia de temps on hi hagi un fotograma clau.

Al principi de cada capa, al fotograma 1 hi ha sempre un fotograma clau. Si nosaltres no posem cap més fotograma clau, qualsevol cosa que es posi a l’escenari anirà a parar (per defecte) al fotograma clau del principi.

Serà necessari incorporar un fotograma clau buit al final d’aquesta segona capa, el fotograma 31 que és el moment en què la imatge de la capa 1 està aturada.

Assenyalam el fotograma 31.

Jesús Arbués – Joan Gelabert – Ernest Prats 21

Curs de Macromedia Flash Mòdul III Les animacions

Amb el botó de la dreta (o amb la tecla F6) incorporam un fotograma clau buit.

Fixa’t com queda la capa 2. Del fotograma 1, que conté un fotograma clau buit fins el 30 hi ha un espai buit. Podem incorporar coses a aquesta capa i ho podrem fer tant en el fotograma 1 com en el 31 ja que aquest tenen fotogrames claus buits.

Assenyalarem el fotograma clau buit i escriurem el text.

Recordau que volíem posar “Plantes”.

Hem escollit aquest tipus de lletra, mida i color i hem escrit el que volíem.

Pots veure el resultat aconseguit fins aquí a l’arxiu complexa3.swf .

Activitat d’introducció 8

Crea una interpolació de moviment complexa tal com acabam d’explicar Desa-la amb el nom de plantes.fla. Amb el mateix sistema emprat a l’activitat d’introducció 1, crea també el fitxer swf.

Jesús Arbués – Joan Gelabert – Ernest Prats 22

Curs de Macromedia Flash Mòdul III Les animacions

3.1. IMATGES ESTÀTIQUES I EN MOVIMENTAnem a fer una nova interpolació, però aquesta vegada farem que hi hagi una imatge estàtica durant un temps a l’escenari i que després es desplaci.

Per fer aquesta feina començarem creant un escenari de 400 per 138 que és la mida de la imatge que posteriorment importarem.

Importam la imatge grup1.jpg.

La situam al centre a partir del panell alinear.

Ara el que farem serà mantenir aquesta imatge durant un temps en pantalla, per exemple farem que estigui estàtica 3 segons (a 12 fotogrames per segon), el que representa 36 fotogrames.

Anam al fotograma 36, l’assenyalam i inserim un fotograma.

Jesús Arbués – Joan Gelabert – Ernest Prats 23

Curs de Macromedia Flash Mòdul III Les animacions

Com pots veure la part de color gris arriba fins el fotograma 36.

Variar el nombre de fotogrames d’una capa

Si vols escurçar o allargar aquesta tira de color gris ho pots fer de forma ràpida clicant sobre l’extrem final (on sembla un rectangle blanc) i mantenint pitjada la tecla “Control” pots arrossegar a la dreta o esquerra. Els fotogrames es reduiran o augmentaran.

Hi ha d’altres maneres: inserir fotogrames (F5) o esborrar fotogrames (Majúscules + F5). Els objectes només es poden posar a la línia de temps on hi hagi un fotograma clau.

Al principi de cada capa, al fotograma 1 hi ha sempre un fotograma clau. Si nosaltres no posem cap més fotograma clau, qualsevol cosa que es posi a l’escenari anirà a parar -per defecte- al fotograma clau del principi..

Ara el que farem serà crear una interpolació de moviment al fotograma 37. Aquesta imatge, en aquest moment concret començarà a fer un moviment cap a baix fins a desaparèixer.

Jesús Arbués – Joan Gelabert – Ernest Prats 24

Curs de Macromedia Flash Mòdul III Les animacions

Assenyalarem el fotograma 37.

Inserirem un fotograma clau

L’assenyalarem i amb el botó dret del ratolí li afegirem una interpolació de moviment.

Anirem a un fotograma posterior, que pot variar, segons la durada que vulguem, i el seleccionarem. Aquí hem escollit el fotograma 90. Inserirem un fotograma clau.

Sempre hi ha d’haver un fotograma clau al principi i un altre al final quan hi ha una interpolació de moviment.

Si una imatge ha d’estar a l’escenari un temps determinat sense moviment pot tenir un sol fotograma clau.

Ara veuràs la franja blava que indica moviment, amb la seva fletxa negra corresponent.

Jesús Arbués – Joan Gelabert – Ernest Prats 25

Curs de Macromedia Flash Mòdul III Les animacions

Al darrer fotograma desplaçarem la imatge fins que estigui fora de l’escenari.

Recorda que si vols desplaçar una peça en línia recta l’has d’arrossegar mantenint premuda la tecla de majúscules.

Pots veure el resultat aconseguit fins aquí a l’arxiu complexa6.swf.

Activitat d’introducció 9

Crea una interpolació de moviment de la manera que acabam d’explicar. Desa-la amb el nom de complexa.fla. Amb el mateix sistema emprat a l’activitat d’introducció 1, crea també el fitxer swf.

Les visualitzacions dels fitxers swf al Flash

Quan crees un fitxer swf al Flash, emprant Control+Intro, la visualització es fa sempre a pantalla completa, emprant per tant tota la pantalla del teu monitor.

En el cas que la pel·lícula, com la que acabes de crear, tengui unes dimensions inferiors a la de la pantalla, no es mostra bé.

Per evitar això, el millor que pots fer és anar a la carpeta on has desat el fitxer fla i en trobaràs un amb el mateix nom, però amb l’extensió swf. Executa aquest darrer per veure el resultat final.

3.2. INTERPOLACIONS AMB FUSIÓAnem a fer una nova interpolació, però aquesta vegada farem una fusió de dues imatges, com al cinema. Passarem d’una imatge a l’altre a partir d’una interpolació amb canvi de transparència.

Com en el cas anterior, el primer que hem de fer és crear un escenari adaptat a la imatge més gran a emprar. En aquesta pràctica, 300x438 píxels.

Jesús Arbués – Joan Gelabert – Ernest Prats 26

Curs de Macromedia Flash Mòdul III Les animacions

Per a la realització d’aquesta pràctica necessitaràs dues imatges, 1.jpg i 2.jpg, que trobaràs a la carpeta imatges dins complexes.

Incorporam al fotograma 1 la imatge 1.jpg i la centrarem emprant el panell alinear. Recorda que hi pots accedir des del menú Ventana > Alinear.

Cream una interpolació de moviment que duri 30 fotogrames.

De moment, la imatge està encara al mateix lloc

.

Assenyalam el fotograma 60 i marcam un fotograma clau (és convenient acostumar-se a fer-ho amb la tecla ràpida F6)

S’haurà creat una nova interpolació. Tendràs dues fletxes, una de l’1 al 30 i una altra del 31 al 60. Anam a fer-la més llarga. Marca el fotograma 90 i torna a incorporar un fotograma clau. Ara ja tens tres fletxes.

Ens posam al primer fotograma i seleccionam la imatge que tenim en pantalla (clicant al damunt). Al panell de Propiedades hem de modificar la visibilitat: alfa. Per a fer la imatge invisible, posam 0 al nivell d’alfa.

Anam al darrer fotograma i posam també el canal alfa.

Els dos extrems de la interpolació seran transparents.

Jesús Arbués – Joan Gelabert – Ernest Prats 27

Curs de Macromedia Flash Mòdul III Les animacions

.

Reprodueix el que has fet fins ara: comença apareixent una imatge, està uns moments i torna a desaparèixer.

Per tant, visibilitat 0 al principi, després 100 i finalment 0.

Activitat d’introducció 10

Crea una interpolació amb fusió de la manera que acabam d’explicar. Desa-la amb el nom de fusio.fla. Amb el mateix sistema emprat a l’activitat d’introducció 1, crea també el fitxer swf. Pots veure el resultat final al fitxer complexa4.swf.

Seguim treballant amb el mateix fitxer. Incorporam una nova capa, la Capa 2. Assenyalam el fotograma 30 i afegim un fotograma clau buit.

A aquest fotograma incorporarem la segona imatge (2.jpg). Com en el cas anterior, centram la imatge a l’escenari.

Emprant el mateix sistema que amb la imatge de la capa 1, la centrarem emprant l’eina alinear.

Si et fixes veuràs que automàticament aquesta imatge incorporada en el fotograma 30 s’ha estès fins el darrer fotograma de la capa inferior. Això s’ha de tenir present per a d’altres situacions. Sempre que s’incorpora una imatge, aquesta agafa la màxima presència possible, arriba fins al final.

Ara tenim a la capa 2 una imatge estàtica. Anem a donar-li moviment, anem a crear una interpolació.

Si marcam que al fotograma 30 hi hagi una interpolació de moviment, el programa interpreta que hi ha un error, per aquest motiu surten les línies discontínues. Cal tenir un fotograma clau al principi i al final de les interpolacions, per aquest motiu com encara no tenim el fotograma clau final ens dóna aquest error.

La solució és ben senzilla, anam al fotograma 60 i cream un fotograma clau (amb F6).

Jesús Arbués – Joan Gelabert – Ernest Prats 28

Curs de Macromedia Flash Mòdul III Les animacions

Fixa’t que ara està tot bé del fotograma 30 al 60 però després encara no. S’ha anar al fotograma 90 i introduir un altre fotograma clau.

Seguim a la mateixa capa 2 i posam un darrer fotograma clau al 120. Així les dues interpolacions tenen la mateixa durada.

Acabarem fent una interpolació de moviment exactament igual la de la capa 1 que la de la capa 2; amb els mateixos nivells d’alfa amb l’única diferència que la capa 1 comença en el fotograma 1 i la capa 2 comença en el fotograma 30. La capa 1 acaba en el 90 i la 2 en el 120.

Activitat d’introducció 11

Obre el fitxer fusio.fla que has creat a l’activitat anterior. Completa la fusió entre les dues imatges, tal com acabam d’explicar. Amb el mateix sistema emprat a l’activitat d’introducció 1, crea també el fitxer swf. Pots veure el resultat final al fitxer complexa5.swf.

4. TREBALLANT AMB FOTOGRAMESPrimer de tot, aprofitarem per repassar algunes de les coses que hem après fins ara, i aprendrem a crear animacions sense emprar interpolacions, com hem fet fins ara.

Farem un document nou

El fotograma 1 té l’aspecte d’un fotograma buit.

Un rectangle amb una circumferència indica que el fotograma no conté cap element.

Un fotograma clau és aquell que conté un element o on és defineix un canvi d’aquest element (canvi de mida, de color, etc.).

Jesús Arbués – Joan Gelabert – Ernest Prats 29

Curs de Macromedia Flash Mòdul III Les animacions

Escriu la lletra “a” (arial 96 color negre) a qualsevol lloc de l’escenari. Centra-la a l’escenari emprant el panell alineamiento.

La circumferència que ens indicava fotograma buit es converteix en un cercle negre que ens diu que el fotograma clau té algun contingut. (una lletra en aquest cas)

Si vols que aquesta lletra estigui a l’escenari durant 1 segon (recorda que la velocitat de reproducció de la pel·lícula és de 12 fotogrames per segon, per defecte), insereix un fotograma clau buit al fotograma 12 (emprant el menú contextual i seleccionant Insertar fotograma clave vacío).

De moment, estarà buit i després ja hi posaren d’altres objectes.

L’aspecte de la línia de temps quedarà com pots veure a la imatge adjunta.

Al fotograma 1 (cercle negre) hi ha contingut que no canviarà fins al fotograma 12. (Entre l’1 i el 12 no hi ha cap fotograma clau). Al fotograma 12 hi tens un fotograma clau buit (rodona petita). Si proves la pel·lícula (pitjant la tecla INTRO) el que observaràs és la persistència de la lletra a durant un segon, i després queda l’escenari buit.

Ara repetiràs el procés amb la lletra “b”. Assenyala el fotograma 12 i utilitzant l’eina text escriu la lletra; insereix un fotograma clau buit al fotograma 24 i prova la pel·lícula.

Escriu la lletra c al fotograma 24 i insereix un fotograma clau buit al 36 i prova la pel·lícula. La línia de temps tindrà aquest aspecte.

Jesús Arbués – Joan Gelabert – Ernest Prats 30

Curs de Macromedia Flash Mòdul III Les animacions

En aquest flash tens els fotogrames 1, 12 i 24 que són fotogrames claus amb contingut, el fotograma 36 que és un fotograma clau buit i la resta són uns fotogrames de contingut idèntic al clau anterior.

Si t’interessa allargar la durada de la presència de la lletra “a”, per exemple, l’únic que hauries de fer és seleccionar un fotograma entre l’1 i el 12 i inserir fotogrames (fixa’t que insereixes ara fotogrames, no fotogrames clau).

Es poden inserir també fotogrames amb tecla ràpida F5. Per si tens un element al fotograma clau numero 1 i vols que la presència d’aquest element duri fins el fotograma 300 (per posar un exemple) només caldrà anar al fotograma 300 i pitjar F5.

Si insereixes, per exemple, 6 fotogrames, la línia de temps quedaria així.

Comprova els efectes d’aquest canvi pitjant la tecla INTRO. Ara la lletra “a” apareix durant 1,5 segons, i la “b” i la “c“ durant 1 segon.

Els fotogrames

Com ja has vist, Flash treballa amb tres tipus de fotogrames:

• Fotograma clau: És aquell que té un contingut, sigui del tipus que sigui: objecte, imatge, so, vídeo... El seu contingut es mantendrà a la línia de temps fins a trobar un altre fotograma clau. Es pot inserir un fotograma clau, amb el mateix contingut que els anteriors, per a fer modificacions a tot allò que hi ha a l’escenari, tal com hem fet a apartats anteriors.

• Fotograma clau buit: És un fotograma clau on, en principi, no hi ha res (tots els documents de Flash comencen amb un fotograma clau buit). Si se li posa un contingut diferent al del fotograma clau anterior, hi haurà un canvi a la pel·lícula.

• Fotograma normal: És un fotograma que es limita a repetir el contingut del fotograma clau anterior. De tota manera, i tal com hem vist en parlar de les interpolacions, aquest pot anar variant per a crear diferents efectes: moviment, rotació, desaparició...

Continuant amb l’exemple anterior, si vols eliminar els sis fotogrames que has afegit per fer que la lletra a tengués una presència de 1,5 segons i deixar-ho com abans, 1 segon (12 fotogrames) cada

Jesús Arbués – Joan Gelabert – Ernest Prats 31

Curs de Macromedia Flash Mòdul III Les animacions

lletra: marca sis fotogrames, que estiguin entre l’1 i el 18, fent clic sobre el primer a seleccionar, manté pitjada la fletxa de majúscules i clica al darrer fotograma a seleccionar.

Com a exemple: amb el fotograma marcat (en aquest cas el 7), manté pitjada la tecla de les majúscules i clica sobre el fotograma 13 (en total hauràs seleccionat set fotogrames).

Amb el conjunt de fotogrames a eliminar seleccionats pitjam el botó de la dreta del ratolí i escollim Eliminar fotogramas.

També es poden esborrar fotogrames a partir de les tecles ràpides: Majuscules + F5

La línia de temps quedarà com abans d’afegir els fotogrames que allargaven la permanència de la “a”.

També es pot copiar/tallar i enganxar un conjunt de fotogrames. Prendrem com a exemple que volem que la seqüència de les lletres sigui “a”, “c" i “b”.

El que pots fer és tallar els fotogrames corresponents a la “b” (des del 13 fins al 24) i enganxar-los al final de la pel·lícula, recordant sempre fer la selecció dels fotogrames a retallar tenint pitjada al mateix temps la fletxa de majúscules

Jesús Arbués – Joan Gelabert – Ernest Prats 32

Curs de Macromedia Flash Mòdul III Les animacions

Una altra opció és emprar l’ordre retallar (Cortar fotogramas), però en aquest cas aconseguiràs un espai buit igual al nombre de fotogrames que hagis retallat. Pots provar-ho, si vols, sempre pots tornar en darrera amb Edición > Deshacer (tecles ràpides: Control+Z).

En pitjar INTRO, veuràs que l’ordre d’aparició és ara, “a” “c” “b”.

Activitat d’introducció 12

Crea un fitxer amb les lletres a, b i c, que vagin canviant, tal com acabam d’explicar. Després, canvia'l, perquè el seu ordre sigui a, c i b. Guarda’l amb el nom d’abc.fla. Amb el mateix sistema emprat a l’activitat d’introducció 1, crea també el fitxer swf..

Recordant les tecles ràpides

Afegir fotogrames F5

Esborrar fotogrames Majuscules + F5

Inserir fotograma clau buit F7

Crear un fotograma clau copiant el contingut del fotograma anterior

F6

Jesús Arbués – Joan Gelabert – Ernest Prats 33

Curs de Macromedia Flash Mòdul III Les animacions

5. INTERPOLACIÓ DE MOVIMENT AMB TEXT, SEPARANT I DISTRIBUINT EN CAPES

El que faràs és una interpolació de moviment, on les lletres apareixeran des de l’exterior per acabar configurant un rètol.

Crea un nou document de flash.

Clica sobre l’eina de text

Escriu a l’escenari la paraula menta amb els següents paràmetres: Arial 66 punts, negreta, color verd 009933

Centra el rètol a l’esce-nari.

Recorda que per centrar el rètol a l’escenari, t’has d’ajudar del panell alinear. Si no és a l’àrea de treball, el pots fer aparèixer seleccionant Ventana > alinear o bé amb la combinació de tecles CTRL+K.

Apareixerà el panell, amb el rètol seleccionat i després de marcar en escenario (1) has de clicar sobre l’alineament horitzontal (2) i vertical (3)

Amb aquestes instruccions el que aconseguim és centrar verticalment i horitzontalment a l’escenari l’objecte que tenguem marcat.

El rètol quedarà col·locat així a l’escenari

Jesús Arbués – Joan Gelabert – Ernest Prats 34

Curs de Macromedia Flash Mòdul III Les animacions

Selecciona el rètol menta, si no ho està.

Ha de quedar envoltant per un rectangle blau cel.

Ves al menú modificar i selecciona Separar, el rètol apareixerà així:

Torna al menú Modificar i selecciona Distribuir en capas. Fixa’t el que ha passat a l’espai de les capes, ha creat una capa per a cada lletra.

Amb tots els primers fotogrames seleccionats, tal com apareix a la imatge anterior, situa’t sobre un d’ells i amb el botó dret del ratolí selecciona Crear interpolación de movimiento.

Ara, situa’t al fotograma 25 de la capa m i selecciona’l

Pitja la fletxa de majúscules per fer una selecció múltiple i amb el ratolí clica al fotograma 25 de la lletra a, d’aquesta manera seleccionam els 5 fotogrames.

Jesús Arbués – Joan Gelabert – Ernest Prats 35

Curs de Macromedia Flash Mòdul III Les animacions

Situa’t amb el ratolí sobre un d’ells i clica el botó dret i selecciona insertar fotograma clave

Apareixeran les fletxes que indiquen interpolació

Ara el que has de fer és modificar les propietats (localització, mida...) de cada una de les lletres en el fotograma inicial.

Per exemple en el primer fotograma, la situació podria ser semblant a aquesta.

Comprova el resultat.

Activitat d’introducció 13

Crea un rètol en moviment amb el text menta tal com l’acabam d’explicar. Guarda’l amb el nom de menta.fla. Amb el mateix sistema emprat a l’activitat d’introducció 1, crea també el fitxer swf..

Si vols que al final abans de tornar a començar la interpolació de moviment el rètol quedi uns instants aturat, ho pots fer de la següent manera.

Situa’t sobre el darrer fotograma de la capa m i clicant el botó dret del ratolí, selecciona eliminar interpolación.

Jesús Arbués – Joan Gelabert – Ernest Prats 36

Curs de Macromedia Flash Mòdul III Les animacions

D’aquesta manera li deim que la interpolació de la lletra m s’acaba aquí.

Inserim un fotograma en el fotograma 40 de la capa m

La línia de temps canvia i ens indica que fins al fotograma 25 hi ha una interpolació i després la m resta a l’escenari.

Repeteix el procediment amb les altres capes i aconseguiràs que després de la interpolació el rètol quedi aturant uns instants i després torni a començar la interpolació

.

Jesús Arbués – Joan Gelabert – Ernest Prats 37

Curs de Macromedia Flash Mòdul III Les animacions

Fotograma 1

Del 1 al 25 interpolació

Moviment

Fotograma 25

Del 25 al 40

Imatge estàtica

Fotograma 40

Activitat d’introducció 14

Realitza els canvis que acabam d’explicar al fitxer menta.fla. Guarda’l. Amb el mateix sistema emprat a l’activitat d’introducció 1, crea també el fitxer swf..

Pots veure una mostra d’un possible resultat final de l’exercici al fitxer interpolacio_text.swf a la carpeta interpolacio_lletres dins d’arxius_flash del mòdul 3.

6. EXERCICI DE REPÀSLa proposta és fer una taula de billar amb un parell de boles. Una bola es mou i xoca amb l’altre que estava quieta. Les boles cauen als forats de les cantonades i desapareixen. Aquest exercici ens permetrà recuperar els coneixements d’interpolacions, fotogrames claus, fotogrames estàtics, etc.

Dins de la carpeta billar dins d’arxius_fla del mòdul 3, trobaràs els diferents exercicis que se’t demanen. Si tens algun problema pots recórrer a les solucions; aquestes estan numerades en funció del procés de creació.

Començarem modificant l’escenari: canvi de mides, 600x450

Canvi de color de fons: negre.

Amb les tecles ràpides CONTROL+2 aconseguirem centrar l’escenari.

Recupera les ajudes al dibuix i fes aparèixer els regles, la quadrícula (que has de deixar a 25x25) i activa ajustar a quadrícula.

A la capa 1 li canviarem el nom i l’anomenarem Taula.

Jesús Arbués – Joan Gelabert – Ernest Prats 38

Curs de Macromedia Flash Mòdul III Les animacions

Incorporarem línies guia al centre de l’escenari. Posarem una guia horitzontal al punt 225 i una guia vertical al punt 300.

Per precisar el lloc exacte t’aconsellam utilitzar la lupa.

Dibuixa un rectangle de color marró que ocupi tot l’escenari.

A sobre del rectangle marró dibuixa, a la mateixa capa, un altre rectangle, de color verd. Les dimensions aconsellades són 500x350 (pots controlar les mesures exactes dels objectes des del panell de Propiedades). Intenta que et quedi centrat respecte al rectangle marró. Si veus que t’ha quedat descentrat sempre pots tornar endarrere (control + Z) i tornar a intentar-ho.

Jesús Arbués – Joan Gelabert – Ernest Prats 39

Curs de Macromedia Flash Mòdul III Les animacions

Ara farem un gradient radial per a pintar el tapís del billar. Selecciona el rectangle central i aplica-li el gradient de colors verds, si el resultat no és molt adient pensa en la possibilitat de modificar el gradient emprant Mezclador de colores o l’eina de Transformación de relleno.

Crea una bola per a fer a forats per superposició. Per això, dibuixa un cercle sense contorn i amb color sòlid. Un diàmetre vàlid del cercle podria ser de 62 píxels. És molt important dibuixar el cercle fora de l’escenari.

A la mateixa capa has de tenir el cercle i els rectangles (el contorn de la taula i el tapís verd).

Si seleccionam el cercle i l’arrosseguam a una cantonada del tapís (recorda que tenim ajustar a quadrícula activat) el podrem situar exactament a la cantonada. El deseleccionam i el tornam a seleccionar. En haver estat un moment les dues peces en contacte, aconseguim separar una forma de l’altra.

Jesús Arbués – Joan Gelabert – Ernest Prats 40

Curs de Macromedia Flash Mòdul III Les animacions

L’objectiu és aconseguir que apareguin, per superposició, els sis forats que tens a la imatge següent.

.

Ara ja no necessitam els regles, ni les guies ni la quadrícula: pots desactivar-ho tot. Per comoditat en la feina posterior també cal que tinguis desactivat Ajustar a objetos del menú Ver.

Activitat d’introducció 15

Guarda la feina amb el nom Exercicibillar1.fla. Aquest arxiu ens servirà per poder fer els diferents exercicis d’aquesta pràctica. Recorda crear el fitxer final en format swf pitjant CONTROL+INTRO.

Seguirem treballant amb el nostre billar. La següent pràctica consistirà en fer desplaçar una bola d’un lloc a un forat i que en el moment de caure, desaparegui.

Ara faràs la primera bola. La faràs en una capa independent a la de la taula.

Jesús Arbués – Joan Gelabert – Ernest Prats 41

Curs de Macromedia Flash Mòdul III Les animacions

Seleccionar la capa correcta per a col·locar els objectes

És molt important mirar sempre quina és la capa activa abans de crear un nou objecte (recorda que és aquella que té un fotograma de color negre).

Si no ho has fet així, és segur que tendràs problemes, especialment quan se superposin diferents objectes.

Crea la capa bola 1. La bola ha de ser més petita que el forat (per exemple, de 56 píxels). Més endavant dibuixarem noves boles i cada vegada les farem a capes independents. Aquesta és la millor manera de tenir un major control sobre la feina. Posa la bola a un punt proper al centre de la taula.

A continuació, farem que la bola es mogui des d’on està fins a un dels forats.

Si crees la interpolació de moviment i assenyales un fotograma clau on s’acabarà aquest moviment, t’adonaràs que no es veu la taula ja que aquesta només està al fotograma numero 1.

Per això, primer hem de fer visible la taula abans de fer el moviment de la bola.

Per allargar la presència de la taula caldrà que posis fotogrames a la capa on tens la taula de billar. Ves fins el fotograma que vulguis i amb F5 afegeix fotogrames. Per a aquest exemple, hem fet que la taula estigui a l’escenari fins el fotograma 25.

Crea ara una interpolació de moviment i fes coincidir al final del moviment amb el moment en què la bola està sobre un forat. Això ha de passar al fotograma 25.

Per fer-ho més real farem que la bola desaparegui al darrer fotograma, que no es vegi bola quan està sobre el forat. Eliminarem un fotograma de la interpolació de moviment. No ha de ser el darrer; se n’ha de treure un, però no ho facis amb el darrer ja que et donarà problemes. Elimina un fotograma qualsevol.

Aquí pots veure com hem assenyalat el fotograma 15 i clicant amb el botó de la dreta escollim Eliminar fotograma.

Jesús Arbués – Joan Gelabert – Ernest Prats 42

Curs de Macromedia Flash Mòdul III Les animacions

Si proves la pel·lícula veuràs que la bola quan arriba al darrer fotograma desapareix, però quasi no dona temps a contemplar-ho, perquè es repeteix cíclicament. El que farem serà allargar la presència de la taula uns fotogrames més.

Hem seleccionat el fotograma 40 de la capa de la taula i amb F5 hem aconseguit allargar la presència d’aquesta a la línia de temps.

Activitat d’introducció 16

Guarda la feina amb el nom Exercicibillar2.fla. Aquest arxiu ens servirà per poder fer els diferents exercicis d’aquesta pràctica. Recorda crear el fitxer final en format swf pitjant CONTROL+INTRO.

Pots visualitzar el resultat final al fitxer billar2.swf que tens a la carpeta billar.

La següent pràctica consistirà en tenir una bola estàtica a l’escenari i una altra que es mou fins tocar la primera, llavors totes dues es desplacen i cauen per forats diferents, desapareixent.

En primer lloc, recupera l’arxiu exercicibillar1.fla (no el del darrer exercici, sinó el de l’anterior, que no té cap bola).

Crea un parell de capes amb noms de bola1 i bola2.

Dibuixa dues boles de colors diferents, una a cada capa i separades en l’espai.

Per aconseguir boles de la mateixa mida pots recórrer a l’inspector de propietats. Recorda que la mesura que proposam és de 56 píxels.

Allarga la línia de temps de les tres capes fins al fotograma 25 (pots emprar la tecla F5).

Fes ara la interpolació de moviment de la bola que tenguis a l’esquerra de la pantalla fins al fotograma 20. La bola ha d’estar al primer fotograma en el lloc en què l’has posat i al 20 ha d’estar (l’has de desplaçar) tocant l’altra bola.

Jesús Arbués – Joan Gelabert – Ernest Prats 43

Curs de Macromedia Flash Mòdul III Les animacions

Podria ser una cosa semblant el que pots veure a aquesta imatge.

Ara s’ha de fer la part més complicada ja que una bola ha de començar el seu moviment (la blava) i l’altre ha de continuar-lo (la vermella).

Si la línia de temps ens arriba fins el fotograma 25 el que podem fer, per fer-ho més senzill, serà continuar el moviment de la bola que ja hem desplaçat fins un forat en aquest fotograma.

Tendrem una bola que al fotograma 1 es posava en marxa, en el 20 tocava l’altre i en el 25 cau en un forat.

Serà necessari seleccionar el fotograma 25 de la línia de temps de la bola vermella i incorporar-hi un fotograma clau.

Amb aquests passos has aconseguit tenir un fotograma clau al final del recorregut de la bola.

Ara, és necessari (tenint seleccionat el fotograma clau 25) arrossegar la bola a un forat.

Jesús Arbués – Joan Gelabert – Ernest Prats 44

Curs de Macromedia Flash Mòdul III Les animacions

Hem arrossegat la bola vermella a sobre d’un forat al darrer fotograma.

Ara anam a moure la bola que ha d’estar una estona estàtica, del fotograma 1 fins al 20, i que s’ha de desplaçar dels fotogrames 20 al 25.

Seleccionam el fotograma 20 de la línia de temps que correspon a la segona bola.

Inserim un fotograma clau (que ens permetrà incorporar la interpolació en aquest punt exacte). També es pot fer emprant la tecla F6.

Apareix el puntet que ens indica que el fotograma és un fotograma clau.

Assenyalam amb el boto dret del ratolí i incorporam una interpolació de moviment a partir del fotograma 20.

Jesús Arbués – Joan Gelabert – Ernest Prats 45

Curs de Macromedia Flash Mòdul III Les animacions

Seleccionarem el darrer fotograma i incorporarem un altre fotograma clau.

Ara pots moure la segona bola (amb el darrer fotograma clau seleccionat) fins col·locar-la sobre un forat.

Pots intentar fer una disposició de les boles al darrer fotograma semblant a aquesta imatge.

Prova la pel·lícula i notaràs que torna a passar el mateix que teníem a l’exercici anterior: cal fer desaparèixer les boles un cop estiguin sobre els forats.

A l’exercici anterior el que havíem fet era esborrar un fotograma de la interpolació de moviment d’una bola. Ara el que farem serà allargar la presència de la taula en la seva línia de temps. Incorporarem fotogrames a la capa “taula”. Nosaltres hem seleccionat el fotograma 40 i amb F5 hem incorporat uns fotogrames més.

Jesús Arbués – Joan Gelabert – Ernest Prats 46

Curs de Macromedia Flash Mòdul III Les animacions

Quan provis la pel·lícula notaràs que les boles van molt ràpides un cop han xocat, però ara el que interessa és que ho aprenguis a fer. Pots incorporar fotogrames, treure’n... i aconseguir que sigui més real. Per veure els seus efectes a pantalla, crea el fitxer swf amb CONTROL+INTRO.

Activitat d’entrega obligada 1

Guarda tota la feina que has fet fins ara amb el nom d’exercicibillar3.fla. Envia aquest fitxer al teu tutor o tutora. No el perdis, perquè a un proper mòdul tornarem a treballar amb ell.

Activitat opcional 1

Pots fer un nou exercici, amb el nom d’exercici4.fla, amb la presència de tres o més boles a l’escenari i que aquestes vagin a parar als forats en moments diferents. Complica la cosa tant com vulguis (o puguis)

En pots trobar un parell d’exemples als fitxers billar4.swf i billar5.swf.

Activitat de consolidació i reforç 1

Flash permet treballar amb una tauleta digitalitzadora, el que facilita la tasca de fer dibuixos, i permet fins i tot que el gruix del traç canviï, segons la pressió que es dóna al llapis. Una de les seves possibles utilitzacions està en el calcat de dibuixos i la seva posterior manipulació.

Dins la carpeta Tauleta del mòdul 3 tens el document d’ampliació Tauleta.pdf i el fitxer Calvia.swf que és el resultat del que s’explica al document. És molt interessant la seva consulta.

Jesús Arbués – Joan Gelabert – Ernest Prats 47