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 en Flash. Manipulareu els fotogrames d'una animació ja feta: els moureu, els esborrareu i en creareu de nous.

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  
 
La línia de temps
 

Quan s’obre el Flash, la línia de temps presenta sempre la mateixa configuració:

  • Mostra el contingut de la primera escena (una animació -o pel·lícula Flash- pot estar organitzada en una sola escena o bé en vàries).
  • Mostra una sola capa (Capa 1) que conté un fotograma clau buit.

El Flash funciona com una pel·lícula, amb fotogrames que van passant i fan sensació de continuïtat i moviment, com en el cinema.

 
 
Fotograma clau buit. Indica que en aquest fotograma no hi ha res.
 
Fotograma clau ple. Indica que aquest fotograma conté algun objecte (dibuix, clip...).
 

La línia de temps també dóna informació del document, entre d’altres, de la velocitat de reproducció de la pel·lícula (fotogrames per segon).

Podeu obrir el quadre de les propietats del document fent doble clic sobre la velocitat de reproducció o des del menú Modificar | Documento.

 
 

En aquest quadre podeu establir diferents paràmetres:

  • Fixar les mides de la pel·lícula en funció de l'objectiu a assolir: un banner de 500x40, una pel·lícula de 800x600, un botó d’una pàgina web de 20x20, o bé una pàgina web completa.
  • Fixar el color de fons de la pel·lícula (blanc per defecte).
  • Establir la velocitat de reproducció de fotogrames per segon.
    • La velocitat per defecte és 12 fps i això vol dir que es visualitzen 12 fotogrames en un segon, o també que per fer aparèixer una cosa a l’escenari 3 segons després d’haver començat la reproducció de la pel·lícula s'ha de situar al fotograma 36. Una curiositat: el cine mut funcionava a 18 fps i les pel·lícules convencionals ho fan a 24 fps.
 
Ajustem les finestres
 

 » Obriu el Flash i recupereu el fitxer volca.fla que vau emprar en el mòdul 1. Enregistreu-lo amb el nom m3p1.

 » Per tal de veure totes les capes que formen la pel·lícula, podeu eixamplar la finestra de la línia de temps: situeu el ratolí sobre la barra inferior de la línia de temps per fer aparèixer un cursor de doble fletxa .

 » Cliqueu i arrossegueu avall fins a veure totes les capes.

 

 » Obriu el desplegable de la part superior dreta per poder veure tot el dibuix a l'àrea de treball.

 » Seleccioneu l'opció Mostrar todo. Experimenteu amb la resta d'opcions.

 
 

 » També podeu fer servir l'eina de Zoom per a engrandir o disminuir l'àrea de treball.

 » Premeu les tecles M o Z per activar aquesta eina de forma ràpida.

 
     
  La finestra de línia de temps  
 
 

Observeu les diferents parts i configuracions de la finestra de línia de temps: a la part superior hi ha el regle que indica les unitats de temps o fotogrames amb què treballareu; sobre aquesta línia es mou el capçal lector, que marca gràficament el fotograma que s'està visualitzant; i, a la part inferior es mostren diferents informacions relacionades amb la pel·lícula: paper de ceba, fotograma actual...

 
   
 

 » Feu clic sobre qualsevol dels fotogrames del regle: el capçal es situarà sobre el fotograma que heu clicat.
 
 » Feu clic i moveu el capçal lector al llarg del el regle i veureu com la pel·lícula es va reproduint.

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

En el seu desplegable trobareu diferents opcions per poder veure els fotogrames. Les cinc primeres opcions es refereixen a l'amplada dels fotogrames.
L'opció 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 identificar els diferents tipus de fotogrames.
Les 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 en funció del 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-.

La línea de temps està dividida en una graella de contenidors de fotogrames numerats de 5 en 5.

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 negre a la part inferior de la casella i tenen un color gris.

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

 
     
 
 
 
 

 » Observeu com està feta l'animació del volcà.
 
 » Feu servir l'opció Mostrar/ocultar capa, activant el punt que hi ha sota l'ull,  per veure què conté cada capa.
   
 » Anomeneu les capes per poder identificar de forma ràpida el seu contingut: feu doble clic sobre el nom de la capa i canvieu-lo. Podeu indicar aquests noms: cel, terra, volca_darrere, lava, volca_davant i lava1.

 
     
 

• Com podeu observar, les capes que tenen un sol fotograma clau són: Capa 1 (cel), Capa 2 (terra), Capa 3 (volca_darrere) i Capa 5 (volca_davant). A més del fotograma clau, aquestes capes contenen 29 fotogrames normals.

• Les capes que tenen diferents fotogrames clau són: Capa 4 (lava) i Capa 6 (lava1). Són les capes on hi ha l'animació, per això contenen diferents fotogrames clau.

 
     
  ·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 amb 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.

 
     
 

 » Desbloquegeu les capes cel (primera) i lava1 (sisena).

 » Feu clic sobre el fotograma 1 de la capa cel i feu un canvi en el 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ó.

 » Cliqueu sobre el fotograma 11 de la capa lava1. Seleccioneu l'eina Pincel i pinteu una mica més de lava que llisca. Observeu que aquesta modificació actua només sobre aquest fotograma (compareu-lo amb el fotograma 12).

 
     
 

Ara escurçareu la pel·lícula esborrant els darrers fotogrames fins a deixar el final de l'animació en el fotograma 25.

Les parts finals dels fotogrames clau tenen un símbol que ens indica que aquell fotograma pot ser mogut.

 
     
 

 » Situeu-vos en el fotograma 30 de la capa cel (Capa 1). Poseu el ratolí sobre aquest fotograma final mantenint premuda la tecla Ctrl i, quan aparegui una doble fletxa, arrossegueu-lo fins el fotograma 25. 

 » Premeu les tecles Ctrl+Retorn i fixeu-vos què ha passat amb l'animació.

 » Feu el mateix amb la resta de capes que estan formades per un sol fotograma  clau (capes 2, 3 i 5): situeu el darrer fotograma en la posició 25.

 
      
 
 
     
 

Ara, per equilibrar la durada de temps, treureu els 5 fotogrames finals de la capa lava1 (Capa 6) i de la capa lava (Capa 4). En aquest punt, cal fer una distinció entre esborrar el contingut d'un fotograma clau i eliminar-lo físicament de la línia de temps.

La manera més senzilla d'esborrar fotogrames és clicar-hi a sobre amb el botó principal del ratolí i triar una de les opcions que interessi del menú de context que hi apareix: Quitar fotogramas (elimina físicament els fotogrames), Borrar fotograma clave, Cortar fotogramas o Borrar fotogramas (esborra el contingut dels fotogrames, però no els elimina físicament).

També es pot esborrar el contingut d'un fotograma clau prement Supr després de seleccionar-lo: en quedarà un fotograma clau buit.

Tingueu en compte també que podeu fer una selecció de diversos fotogrames per esborrar-los tot arrossegant el ratolí per sobre mantenint premut el botó principal.

Una altra manera d'accedir a les opcions esmentades anteriorment és a través del menu Edición | Línea de tiempo.

 
     
 »  Esborreu tots els fotogrames del 26 al 30.
  
 
Creació d'una animació fotograma a fotograma  
     
 

Ara creareu nous fotogrames i els modificareu.

 
   

 » Cliqueu sobre el fotograma clau 25 de la capa lava1 (si és el cas, desbloquegeu la capa traient el cadenat per tal de poder-hi pintar).

 » Activeu l'opció del menú Insertar | Línea de tiempo | Fotograma clave o premeu F6. Apareixerà un nou fotograma clau en la posició 26. Fixeu-vos que les altres capes també han avançat un fotograma nou.

 » Seleccioneu l'eina Pincel i pinteu -en aquest fotograma 26- una petita variació de la lava que llisca.

 » Activeu l'eina del Papel cebolla a la barra d'estat de la línia de temps per veure la variació que esteu fent en referència al fotograma anterior . Penseu que en tenir aquesta opció activada veureu els objectes dels fotogrames anteriors, però no actuareu sobre aquests objectes.

 » Repetiu consecutivament els passos anteriors d'afegir un fotograma clau i modificar-lo, fent petites deformacions en la lava que llisca. Podeu arribar fins al fotograma 30.

 » Deseu els canvis.

 
 
 
 
Una animació començant pel final  
   
 

En aquesta pràctica us proposem una manera diferent de crear una animació fotograma a fotograma. Es tracta de simular la realització pas a pas d'un procés (en aquest cas un dibuix) fins al seu acabament, quan en realitat la tècnica seguida en l'elaboració de l'animació ha estat a l'inrevés: partir del dibuix ja acabat i anar-lo descomponent en passos tot esborrant cada vegada una part del que hi ha fet.

 
     

 » Activeu el menú Archivo | Nuevo... per crear un nou document.

 » Feu clic sobre el botó Tamaño de la finestra de Propiedades i modifiqueu les mides de l'escenari. Indiqueu els següents valors: anchura 400 x altura 200 i Velocidad de fotogramas 6 fps.

 » Seleccioneu l'eina Lápiz i dibuixeu un cargol semblant al que es proposa com a model.

 » Feu clic sobre el fotograma 1 de la línia de temps i inseriu-hi un fotograma clau (F6); d'aquesta manera, dupliqueu el fotograma anterior.

 » Seleccioneu l'eina Borrador i esborreu un trosset del dibuix del fotograma que heu duplicat.

 
 

Alerta! Assegureu-vos que esteu esborrant el dibuix del fotograma que acabeu d'inserir.

 
 »  Repetiu les accions d'afegir un fotograma clau i esborrar un tros de dibuix del fotograma següent fins que en el darrer fotograma hi quedi només una petíta línia del dibuix inicial.
 

• Podeu allargar l'animació fins al fotograma 36, per exemple; així, la pel·lícula, a una velocitat de 6 fps, tindrà una durada de 6 segons.

 

 » Seleccioneu tots els fotogrames que hàgiu creat: feu clic sobre el nom de la capa o arrossegueu per sobre els fotogrames.

 » Activeu el menú Modificar | Línea de tiempo | Invertir fotogramas.

 » Premeu Ctrl+Retorn per provar la pel·lícula.

 » Deseu la pràctica amb el nom de cargol.