6.-Animació

1. Macromedia Flash 6.-Animació

2. Objectius del tema 6 L’objectiu del tema 6 és que l’alumne conegui els diferents dipus d’animació, així com les eines que disposa Flash per a el disseny i la implementació de les animacions. Al finalitzar el tema, l’alumne serà capaç de realitzar animacions més o menys complexes aplicant els conceptes d’interpolació de moviment i de forma, i de fer servir màscares i guies de moviment entre d’altres.

3. Tema 6 - Animació 1.- Conceptes bàsics 2.- Interpolació de Forma 3.- Interpolació de Moviment 4.- Guies de Moviment 5.- Màscares

4. Tema 6 - Animació 1.- Conceptes bàsics

5. 1.- Conceptes bàsics Animació en Flash: Variació al llarg del temps d’algun element. La qualitat de l’animació ve determinada per la qualitat del gràfic i per la fluïdesa, que depèn del numero de fotogrames per segon (fps) i del temps que duri l’animació (el número de fotogrames que ocupi). Animació fotograma per fotograma: Cada fotograma indiquem com han de variar les coses. Farà exactament el que nosaltres volem, però la pel·lícula pesarà més. Animació interpolada: Indiquem com volem que sigui el primer fotograma i com volem que acabi. Flash interpola aquests dos fotogrames i crea l’animació.

6. 1.- Conceptes bàsics Interpolació de forma: Es dibuixa una forma en el primer fotograma i una altra en el darrer. Flash crea una seqüència similar a una transformació d’un en l’altre. Interpolació de moviment: Per modificar la posició o algunes propietats de les instàncies de símbol utilitzades s’aplica la interpolació de moviment.

7. 1.- Conceptes bàsics Fotograma: És una fracció de segon que s’utilitza com a mesura del temps en animació. És responsable de la fluïdesa de la pel·lícula. Correspon a una divisió de la línia de temps. Fotograma Clau: És aquell fotograma en el que podem indicar com volem exactament que sigui la pel·lícula. Habitualment són els que més ocupen i es representen mitjançant un cercle (buit si no hi ha contingut gràfic, negre si n’hi ha). Fotograma de continuació (o, simplement, fotograma): Tot aquell fotograma que no és clau. Serveixen per indicar la duració de l’animació, o per a esperar un temps amb una imatge fixa.

8. 1.- Conceptes bàsics Representació dels fotogrames: Fotograma clau sense contingut Fotograma clau amb contingut gràfic Fotograma clau amb nom Fotograma clau amb codi associat Fotograma clau amb un so associat Interpolació de moviment Interpolació de moviment interrompuda Interpolació de forma Interpolació de forma interrompuda

9. 1.- Conceptes bàsics Capes: Les capes ens serveixen per organitzar la pel·lícula, i per superposar animacions. Si volem moure dos objectes hem de crear dues animacions separades cada una en una capa. Per crear una nova capa fem click sobre el botó Nueva Capa, o sobre Nueva Carperta per a crear una nova carpeta. Per ficar una capa dintre de una carpeta només cal arrossegar-la Per canviar el nom a una capa o a una carpeta només hem de fer doble click sobre el nom

10. Tema 6 - Animació 2.- Interpolació de forma

11. 2.- Interpolació de forma Per aprendre a fer una interpolació farem un exemple pas a pas: En primer lloc, en el primer fotograma, necessitem una forma. En aquest cas, posarem un quadre de text amb un 1 i el descompondrem per que es consideri una forma (botó dret i Separar)

12. 2.- Interpolació de forma A continuació creem un fotograma clau en el fotograma 20 (botó dret i Insertar Fotograma Clave Vacío) i posem un altre quadre de text amb un dos i el descomponem.

13. 2.- Interpolació de forma Finalment, seleccionem el primer fotograma clau o un dels fotogrames entremitjos, i al panell de propietats seleccionem Forma del desplegable Animar. A sota veiem el resultat.

14. 2.- Interpolació de forma Si el resultat no és del tot satisfactori, podem controlar una mica més la interpolació de dues formes. Una és afegint un fotograma clau en mig i inserint una forma intermèdia. Per veure les diferències sense haver de publicar la pel·lícula, ho farem en una nova capa. Primer creem una capa nova Seleccionem tots els fotogrames de la capa anterior i botó dret  Copiar Fotogramas Seleccionem tots els fotogrames de la capa nova i botó dret  Pegar Fotogramas

15. 2.- Interpolació de forma Ocultem la Capa 1 fent click sobre el punt sota l’ull Inserim un fotograma clau buit en el fotograma 10, i dibuixem una rodona petita que ens servirà de punt mig. Temporalment, ens sortirà que la interpolació ha estat interrompuda Un cop hem dibuixat la rodona (molt important fer-ho sense línia), tornem a veure la interpolació de forma correcta en la línia de temps

16. 2.- Interpolació de forma El resultat en aquest cas és més atractiu. Podríem inserir més fotogrames clau per anar perfeccionant la transició, però hem de tenir en compte que quants més fotogrames clau més pesarà la nostra pel·lícula. abans ara

17. 2.- Interpolació de forma La segona manera de controlar la interpolació és mitjançant els Consells de forma. Els consells de forma són com marcadors, que ens permeten seleccionar un punt en el fotograma inicial i indicar com ha de quedar en el fotograma final. Amb un exemple s’entendrà. Creem una capa nova, tornem a copiar els fotogrames de la Capa 1, i ocultem també la capa 2 per que no es vegi

18. 2.- Interpolació de forma Per afegir un nou consell de forma hem d’anar a Modificar  Forma  Añadir Consejo de Forma. Apareixerà un punt a la pantalla amb una lletra. Anem al primer fotograma, i posem el punt allà on vulguem. Per moure el punt només cal fer click i arrossegar-lo En el darrer fotograma movem el punt fins allà on volem que vagi a parar el punt indicat en el fotograma incial.

19. 2.- Interpolació de forma Afegim tants consells com vulguem fins a obtenir el resultat desitjat. En el nostre cas hem necessitat quatre. Si en algun moment canviem l’eina ens desapareixeran els consells de l’espai de treball. Per reactivar-los, anem a Ver  Mostrar Consejos de Forma

20. 2.- Interpolació de forma Aquí tenim els tres resultats de la interpolació de forma. El primer fent la interpolació directament. El segon, afegint un punt entremig i, el darrer utilitzant els consells de forma. Tots tres tenen la mateixa duració. Interpolació directa Interpolació amb un punt entremig Interpolació amb consells de forma

21. Tema 6 - Animació 3.- Interpolació de moviment

22. 3.- Interpolació de moviment Igual que hem fet amb la interpolació de forma, veurem la interpolació de moviment amb un exemple, que serà una pilota que bota. En el primer fotograma crearem un dibuix d’una pilota de bàsquet, i la convertirem en un clip de vídeo (recordem que la interpolació de moviment només funciona amb instàncies de símbols, i per tant hem de convertir el dibuix en un símbol). Situarem la pilota en la part superior de la pantalla. En el fotograma número 10 crearem un fotograma clau i mourem la pilota fins a la part inferior, i en el fotograma 20 tornarem a posar un fotograma clau i posarem la pilota en la mateixa posició inicial.

23. 3.- Interpolació de moviment A continuació, seleccionem el primer fotograma i al panell de propietats escollim Movimiento en el desplegable Animar. Fem el mateix en el fotograma 10 i obtenim el resultat

24. 3.- Interpolació de moviment El moviment és una mica brusc, així que aprofitarem les propietats de la interpolació per millorar l’efecte. La interpolació de moviment també ens permet modificar la forma, això sí, amb algunes limitacions. Quan una pilota bota es deforma lleugerament sent més xata horitzontalment en la part inferior i més allargada verticalment en el punt més alt. En el primer i en l’últim fotograma reduirem una mica l’amplada de la pilota (utilitzant l’eina Transformación Libre o mitjançant el panell de propietats) i en el fotograma d’entremig reduirem l’amplada.

25. 3.- Interpolació de moviment Una altra possibilitat és modificar l’acceleració de la interpolació. Com tots hem observat, quan una pilota cau hi ha una acceleració, i quan rebota i puja hi ha una desceleració. Per simular aquest efecte, seleccionem el primer fotograma i seleccionem una acceleració de -100 (per que hi hagi acceleració) i en el segon fotograma clau posem 100 (per simular la desceleració). Altra opció de la interpolació és la de girar l’objecte interpolat, tot i que nosaltres no la farem servir

26. Tema 6 - Animació 4.- Guies de moviment

27. 4.- Guies de moviment Les guies de moviment ens permeten orientar les interpolacions de moviment, de forma que el símbol que es desplaça no ho faci en línia recta, sinó que segueixi el recorregut que nosaltres vulguem. Partirem de una interpolació de moviment senzilla com la de sota. Es tractarà de fer que l’avió faci una pirueta. De moment tenim la línia de temps com es mostra en la figura.

28. 4.- Guies de moviment El primer pas serà crear una nova capa de tipus guia de moviment. A continuació, només hem de dibuixar en aquella capa el recorregut que vulguem que faci el nostre avió

29. 4.- Guies de moviment Ara seleccionem l’avio i, mirant que la opció imant està activada, en el primer fotograma l’arrosseguem fins que s’enganxi al començament de la linia que hem dibuixat, i en l’últim fem el mateix però al final de la línia.

30. 4.- Guies de moviment Ja hem creat el moviment amb guia. Observeu que la línia de la guia no és visible en el resultat final. El moviment que queda no és del tot satisfactori, ja que l’avió no varia la seva posició (idealment, hauria de posar-se cap avall).

31. 4.- Guies de moviment Per acabar d’arreglar-ho modificarem les propietats de la interpolació, clicant al primer fotograma i en el panell de propietats marcant la opció Orientar según trazado. També podem jugar amb la acceleració creant un fotograma intermig, com en fet en el punt anterior.

32. Tema 6 - Animació 5.- Màscares

33. 5.- Màscares Les màscares no formen part estrictament de l’animació, tot i que s’utilitzen molt en aquest camp. La idea de una màscara es crear una finestra que ens permetrà veure només una part de l’objecte emmascarat. Però funciona al reves que una finestra: la part ombrejada és la que es veu, mentre que el que sigui buit no es veurà. L’exemple d’aquest capítol consistirà en un text il·luminat per un focus que projecta sobre el fons una ombra. Per poder fer-ho, ens cal una estructura de capes que es descriu en la pàgina següent. El resultat final serà el que es mostra a continuació

34. 5.- Màscares Necessitarem 5 capes: Text_ilum: Conté el text amb un color una mica llampant. Text_ombra: Conté el text amb un color fosc, i situat quatre o cinc píxels per sobre i cap a l’esquerra respecte al de la capa anterior. Text_3d: Conte el text amb un color més clar i situat un parell de pixels per sota i a la dreta del text en la capa Text_ilum Llum: Conté un rectangle d’un color similar al del fons però més clar Text_fosc: Conté el text en la mateixa posició que el de la capa Text_ilum i d’un color similar però una mica més fosc. El fons de la pel·lícula no ha de ser blanc.

35. 5.- Màscares Text_ilum: Conté el text amb un color una mica llampant. Text_ombra: Conté el text amb un color fosc, i situat quatre o cinc píxels per sobre i cap a l’esquerra respecte al de la capa anterior. Text_3d: Conte el text amb un color més clar i situat un parell de pixels per sota i a la dreta del text en la capa Text_ilum Llum: Conté un rectangle d’un color similar al del fons però més clar Text_fosc: Conté el text en la mateixa posició que el de la capa Text_ilum i d’un color similar però una mica més fosc.

36. 5.- Màscares A continuació creem una nova capa a sobre de totes les altres, i li diem màscara. En ella dibuixem un cercle de diàmetre similar al rectangle de color mes clar (el de la capa Llum), i la situem en la part esquerra de l’escenari.

37. 5.- Màscares En el fotograma 30 creem un nou fotograma per a totes les capes, i en la capa Màscara fem que sigui clau (en els altres només un fotograma normal), i posem el cercle en la part de la dreta del dibuix, i creem la interpolació de moviment.

38. 5.- Màscares A continuació fem clic amb el botó dret sobre el nom de la capa màscara i seleccionem Máscara. La capa màscara passa a ser ara com una carpeta, i arrosseguem les altres capes (excepte la de Text_fosc) dintre de la màscara.

39. 5.- Màscares Si bloquegem totes les capes que emmascarades i la pròpia màscara, podrem veure en temps real la aparença final de la nostra animació movent-nos per la línia de temps. Per bloquejar una capa cal clicar sobre el candau que hi ha al costat del nom de la capa.