IES Arnau Cadell
Informàtica pel batxillerat
Creació de pàgines WEB
exercici

Basat en el curs D99 del Departament d'Ensenyament de Albert Criado, Roger Rey i Joan Solé

 

 

El concepte d'animació .

Com la majoria de paraules romàniques, animació prové del llatí "animus" que vol dir donar vida. L'animació és una mena de simulació de la vida. Seria com una simulació de la realitat però amb unes lleis i uns objectes que li són propis i en alguns casos diferents a la pròpia realitat. En el nostre cas, a partir de la creació de dibuixos o de la digitalització d' imatges i sons reals, i mitjançant les tecnologies informàtiques, podem donar vida a unes imatges creades o retocades per nosaltres

  La línea de temps, tipus de fotogrames i animació fotograma a fotograma
   
 

Aquesta pràctica servirà per a introduir-vos en la línea de temps i els fotogrames, les eines bàsiques per a desenvolupar animacions a Flash. Com a fitxers de treball farem servir un dels exemples que incorpora el programa Flash, anomenat Animación. Manipulareu els fotogrames d'aquesta animació i en desenvolupareu una de nova. Creareu una animació fotograma a fotograma.

Els objectius d'aquesta pràctica són:

   » Comprendre i conèixer la línia del temps.
   » Comprendre què és un fotograma.
   » Conèixer els diferents tipus de fotogrames i les seves característiques.
   » Conèixer i experimentar amb l'animació fotograma a fotograma.
   
Desenvolupament de la pràctica
 
Ajustem les finestres
 

 » Obriu el fitxer Ayuda/muestras/animación.
  
 » Deseu-lo a la vostra carpeta subcarpeta flash canviant el nom pel de papallona.

 

Si voleu treballar més comodes podeu fer diverses adaptacions de les finestres. Per tal de veure totes les capes podeu eixamplar la finestra de la línia de temps. Situant el cursor en la barra inferior de la línia de temps apareixerà la icona .
 

 » Feu clic i estireu fins a veure totes les capes.

Per tal de poder veure tot el dibuix a la finestra de l'escriptori podeu obrir el desplegable que està a la part inferior dreta.

 » Seleccioneu mostrar todo. Experimenteu amb les diferents opcions.

  
 »
 També podeu fer servir l'eina de Zoom ( M,Z) per a engrandir o prement ALT per disminuir l'àrea de treball de l'escriptori.
    
 
  La Finestra de línia de temps
 
 

. Ara treballareu les diferents parts i configuracions de la finestra de línia de temps. A la part superior trobarem el regle que ens marca les unitats de temps (els fotogrames) amb què treballareu. Sobre aquesta línia es mou el capçal de reproducció. El capçal i la línia de reproducció ens marquen gràficament el fotograma que estem visualitzant.
 

 

 » Feu clic sobre qualsevol dels fotogrames del regle i veure com el capçal es va situant al lloc on vulgueu.
 
 » Feu clic i arrossegueu el cursor sobre el regle i veureu com la pel·lícula es va reproduïnt.

   
 

A la part inferior central de la línia de temps trobareu la barra d'estat de la línia de temps. Està formada per tres caselles on trobem diferents digits amb informacions. El primer ens marca el fotograma actual. el segon ens marca la velocitat de l'animació i el tercer ens diu el temps transcorregut en segons.
 

 
 
Barra d'estat
    
   » Feu clic dues vegades sobre la barra d'estat a la casella de velocitat dels  fotogrames. Se us obrirà la finestra de Propiedades de la película, des d'on  podreu modificar els paràmetres de la vostra pel·lícula.
   
 

• A la part superior dreta de la línia de temps trobareu el botó: Ver fotogramas  

En el seu desplegable trobareu diferents opcions per a veure els fotogrames. Les cinc primeres opcions es refereixen a l'amplada dels fotogrames.
La segona casella ( Corto) es refereix a l'alçada dels fotogrames de les capes.
L'opció fotogramas coloreados està activada per defecte i cal que la deixem així, ja que ens ajudarà a definir els diferents tipus de fotogrames.
La darreres opcions de la finestra serveixen per visualitzar les imatges de cada fotograma a la línia de temps.

Desplegable del botó
Ver fotogramas
   
  Els fotogrames
   
 

El fotograma és la unitat mínima de treball en la majoria de mitjans audiovisuals. Cada segon pot tenir diferents fotogrames segons el mitjà: (vídeo o TV pal 25 frames per segon, sistema de televisió americà NTSC 29 fps, cinema 24 fps, vídeo digital configurable, i Flash configurable).

   
 

En la línea de temps el fons està dividit en una graella de contenidors de fotogrames amb una columna blava cada 5 fotogrames.

Els fotogramas clave o Keyframes són les primeres unitats d'edició. És allà on succeeix un canvi visual o d'acció. Estan representats per un punt a la part inferior de la casella i tenen un color blau.

Els fotogramas o frames sempre estan darrere els fotogrames claus i acostumen a tenir les mateixes propietats que aquests. En realitat són l'extensió o durada d'un fotograma clau.
   

 
 
 
   
 

 » Observeu com està fet l'animació de la papallona
 
 » Feu servir l'opció Mostrar/ocultar capa, activant el punt que hi ha sota l'ull,  per veure què conté cada capa.
 

 » Podeu alternar entre les opcions ver fotograma i previsualizar per veure les  diferències.
 
 » El nom de les capes el teniu en anglès, canvieu-lo per enrecordar-vos del seu   contingut. Feu clic dos cops damunt el nom i el podreu canviar.

 » Quines són les capes compostes d'un sol fotograma clau?

Són les capes Marc ( Frame), Test ( Pot) i Fons (Background).

 » Quants fotogrames normals contenen?

Els mateixos que tota la pel·lícula: 81fotogrames.

 » Quines són les capes compostes de diferents fotogrames claus?

Són les capes de la planta ( plant) i la papallona ( butterfly)

 » Què és el que hi succeix?

Són les capes on hi ha l'animació, per això contenen diferents fotogrames claus.

   
 
  Manipulació de fotogrames
    
 

Per manipular fotogrames primer cal que els activeu. Ho podeu fer amb un clic sobre l'objecte de l'escenari que conté el fotograma o fent un clic sobre el fotograma a la línia de temps.

Recordeu que és probable que hàgiu de desactivar l'opció Bloquejar/desbloquejar de la capa per tal de poder editar-la. És preferible que mantingueu les altres capes bloquejades per tal d'activar només la que voleu editar.

 » Desbloquejeu les capes del marc (primera) i la planta (tercera).

 » Activeu el fotograma del marc. Feu alguna variació sobre el dibuix: Deformar o canviar de color. Per canviar el color , si teniu l'objecte seleccionat, només caldrà escollir-ne un de nou a l'eina color de relleno.

Fixeu-vos com la deformació actua sobre tota l'animació.

 » Activeu el primer fotograma de la planta i feu alguna deformació. Aquesta actua només sobre el primer fotograma, ja que és un fotograma clau.
 

 

Ara aneu a treure els darrers fotogrames fins a deixar el final de l'animació al fotograma 50.

 » Situeu-vos en el fotograma 81 de la primera capa. Les parts finals dels fotogrames claus tenen un símbol que ens indica que aquell fotograma pot ser mogut. Feu clic mantingut sobre aquest fotograma final i arrossegueu-lo fins al fotograma 50. Fixeu-vos què ha passat amb l'animació.
 

 »
 Feu el mateix amb la resta de capes que estan formades per un sol fotograma  clau. Situeu-les totes al fotograma 50.

    
 

Ara caldrà que esborreu els fotogrames claus de la planta. Hi ha diferents maneres d'esborrar fotogrames claus.

 » La manera més senzilla d'esborrar fotogrames serà fent servir l'opció Insertar/eliminar fotograma (Maj. F5). També apareixerà fent clic al botó secundari del ratolí en el menú emergent. Podeu fer una selecció de diversos fotogrames per esborrar-los prement la tecla Majúscules o arrossegant i prement el cursor sobre uns quants fotogrames.

 » Un altra manera serà situant el cursor sobre el darrer fotograma, quan apareix la icona d'una mà feu clic sobre el fotograma i seleccioneu-lo tot.

 » Esborreu-lo prement la tecla Supr. El fotograma haurà quedat seleccionat amb un color blau fort.

 » Desactiveu-lo fent clic a qualsevol altre lloc de la línia de temps. La superficie esborrada del darrer fotograma apareixerà amb una superfície blanca, això vol dir que heu esborrat el contingut del fotograma però no el fotograma en si. És un fotograma clau buit.

 » Caldrà tornar-lo a seleccionar i esborrar-lo.

 » És més recomenable per senzilla i més pràctica la primera opció.

    
 

 » Esborreu tots els fotogrames del 50 al 81.

    
 
Creació d'una animació fotograma a fotograma
 

Un cop esborrats tots els fotogrames claus del 50 al 81 anem a fer un final diferent per aquesta animació. Us proposem que feu una animació de com la flor es deforma.

 » Activeu el fotograma clau 50 corresponent a la flor.

   

Ara creareu i deformareu nous fotogrames

 » Situats sobre el fotograma 50 de la planta, activeu l'opció Insertar fotograma clave o premeu F6. Apereixera un nou fotograma clau a la 51. Fixeu-vos que a més del fotograma 51 de la planta, les altres capes on hi havia fotograma també han avançat un de nou.

 » En el fotograma 51 feu una petita variació de la flor, tal com vareu fer  al crear l'arbre. Recordeu de deseleccionar per tal de poder deformar l'objecte.

Podeu fer servir l'eina del Papel de cebolla per veure la variació que esteu fent en referència al fotograma anterior . Aquesta eina s'activa des del segon botó que trobeu a la part inferior de la línia de temps. Els altres botons serveixen per variar les opcions del paper de ceba. Penseu que en tenir aquesta opció activada veureu els objectes dels fotogrames anteriors però no actuareu sobre ells.

 » Repetiu consecutivament els dos passos anteriors fent petites deformacions en la flor. Podeu simular que la flor es transforma en forma de Papallona o qualsevol altra forma.

 » Quan acabeu deseu els canvis. al fitxer papallona.fla

 » Exporteu la película per tal de tenir-la també en format flash-player: papallona.swf
 

 
 
a la portada dels exercicis al menú anterior        actualitzat el 28/11/2004        © Enric Brasó 1990-2004