|
|
| Desenvolupament de la pràctica |
|
| |
|
|
El que heu de fer en aquesta pràctica és crear, a
partir d'uns gràfics ja donats, l'animació d'uns elements.
El resultat d'aquesta pràctica també ha de formar
part d'una pràctica posterior i de l'exercici final del mòdul.
Al final de tot el procés, heu de tenir una animació
d'una perspectiva axonomètrica esclatada d'un fragment d'un
motor similar a la imatge lateral.
|
|
Des del Fireworks MX 2004 recupereu la imatge explo.png
de la carpeta d'imatges d'aquest mòdul. Com pot observar-se
ràpidament, a primer cop d'ull, es tracta d'un arxiu amb
una sèrie d'elements col·locats de forma desordenada
sobre l'escenari. A partir d'ara, es fa servir la paraula escenari
per fer referència a la superfície de l'arxiu.
|
|
| |
|
| |
Obriu la Persiana de capas
i observeu que l'arxiu conté set capes a més de la capa web.
Dins cada una d'aquestes capes, hi ha un grup d'elements gràfics,
cadascun dels quals pertany a un dels dibuixos que teniu a l'escenari. L'ordre
en què s'han disposat les capes s'ha fet segons el desenvolupament
que ha de tenir la vista esclatada. |
| |
Aquest ordre és el que cal fer servir per fer l'animació. |
| |
|
|
|
Recordeu que, per animar dins el Fireworks MX 2004, el primer
que heu de fer és convertir en símbol l'element que hagueu
de moure. Aquells que no recordeu quèés un símbol,
podeu clicar a la icona lateral i accedir a una breu descripció que
us pot ajudar a entendre millor com funcionen aquests elements. |
| |
|
| |
Per començar, doncs, convertiu cadascun dels grups
de traçats que teniu en pantalla en símbol. |
| |
Seleccioneu un únic objecte de tots els que hi ha
en pantalla. Aquest serà el primer que passareu a símbol.
|
| |
Tot seguit, podeu triar entre tres vies per fer la conversió
en símbol: bé sigui amb l'opció Convertir
a símbolo del menú Modificar
| Símbolo, bé mitjançant la mateixa opció
que apareix amb el menú contextual del botó secundari del
ratolí, o bé prement F8. |
| |
|
| |
|
| |
|
| |
En el quadre de diàleg emergent, d'entre els diferents
tipus de símbols que podeu crear, trieu l'opció Gráfico,
poseu com a nom el mateix que el de la capa seguit del sufix _gr,
i accepteu el quadre de diàleg. |
| |
|
| |
|
| |
|
| |
Obriu la Biblioteca i fixeu-vos
que aquest element que acabeu de crear ha passat ara a formar-ne part. |
| |
Si mireu també la Persiana
de capas, veureu que el Fireworks MX 2004 ha identificat com a Símbolo
gráfico els traçats que fins ara estaven identificats
com a grup. |
| |
Repetiu aquest procés de conversió en símbol
amb cadascun dels elements de la imatge. |
| |
|
| |
Un cop ho hagueu fet, situeu-vos a la Persiana
de capas i creeu-ne una de nova. |
| |
Al quadre de diàleg de Nueva
capa que el Fireworks MX 2004 obre quan creeu aquesta nova capa,
activeu-hi la casella Compartir en fotogramas,
i adjudiqueu a aquesta capa el nom de juntagran. |
| |
|
| |
|
| |
|
| |
Des de la mateixa Persiana de capas,
reubiqueu-la entre la capa anomenada carter
i la capa biela. |
| |
Obriu la Biblioteca i, fent
un clic sobre la imatge del gràfic junta_gr,
arrossegueu una instància a l'escenari. Ara n'hi ha d'haver dues
de juntes, a l'escenari: la que ja teníeu d'origen i la que acabeu
de posar-hi. |
| |
Des de la Persiana de capas,
comproveu que aquesta instància que heu arrossegat de la Biblioteca
a l'escenari ha anat a parar dins la capa que acabeu de crear. Si
no és així, poseu-la-hi vosaltres arrossegant-la entre capes
de forma manual. |
| |
|
| |
| Mantenint seleccionada la instància de junta_gr
que acabeu de posar a l'escenari, cliqueu a l'Inspector
de propiedades i modifiqueu-ne les mides. |
|
| Doneu-hi una amplada de 50 píxels
i una altura de 28. Per veure la darrera modificació, cal que
premeu Retorn, o bé feu clic amb el botó primari
del ratolí a l'espai de l'escenari. |
|
| |
|
| |
Un cop fetes totes aquestes transformacions en símbols
i modificada la instància que hi heu incorporat, cal col·locar
els elements en la disposició que han de quedar al final de l'animació.
Això és així per dues raons: |
| |
| |
La primera és per fer-vos una idea del resultat
que s'ha d'obtenir. |
| |
I la segona és molt més important encara que l'anterior:
perquè per poder fer l'animació amb una mica de sentit,
es necessiten unes dades que és el mateix Fireworks MX 2004
el que us les ha de proporcionar. Ningú no està gaire
avesat a mesurar les coses directament a la pantalla, i menys encara
amb una unitat de mesura tan estranya com és el píxel.
|
|
| |
|
| |
Feu activa la capa carter
i seleccioneu-ne el contingut. Desplaceu-vos a l'Inspector
de propiedades, i a les caselles de coordenades x i
y introduïu per teclat els següents valors:
X = 25 i Y = 330. |
|
| Tot seguit, premeu Retorn per activar
la darrera dada que heu entrat. Llavors, podeu veure que la imatge
continguda en aquesta capa queda reubicada a la part inferior de la
imatge. |
|
| |
|
| |
Activeu ara la capa culata,
que es troba per sobre de tot. Seleccioneu-ne l'element contingut i, també
des de l'Inspector de propiedades, introduïu
els valors de X = 20 i Y = 10. |
| |
Torneu a prémer Retorn per activar la darrera
dada i observeu que aquesta imatge s'ha desplaçat ara a la part superior. |
| |
Distribuïu a ull la resta d'elements entre els dos que
heu col·locat per teclat. En fer-ho, respecteu les capes de manera
que l'element que s'aproximi més al carter
sigui el que es troba en la capa immediatament superior, que en aquest cas
és la instància de juntagran_gr,
i, per damunt d'aquest, el de la capa següent. Aneu-ho fent així
successivament fins a arribar a l'element culati_gr,
que ha d'estar just sota la instància culata_gr.
No us amoïneu per ajustar-ho sobre un eix vertical hipotètic
que relacioni tots els objectes, ni per espaiar-ho de forma equivalent.
Ho fareu de seguida. |
| |
|
| |
Quan els hagueu disposats de la forma indicada, seleccioneu-los
tots. Podeu fer-ho manualment, una a una, des de la Persiana
de capas, o bé prémer Control + A. Mitjançant
les icones d'alineament del menú Ventana
| Alinear, alineeu-los respecte al centre
i distribuïu l'espai entre objectes. La imatge que heu de tenir en
pantalla s'ha de semblar a la que teniu al començament de la pràctica. |
| |
Desseleccioneu tots els elements clicant fora de l'espai
de l'escenari. |
| |
|
| |
|
|
Recordeu que uns paràgrafs enrere
es diu que es necessiten unes dades que el Fireworks MX proporciona?
Doncs ara és el moment de prendre nota d'aquestes dades. Agafeu
llapis i paper i feu el següent: seleccioneu un element i mireu
a l'Inspector de propiedades la posició
respecte de l'eix Y. Anoteu al paper el nom de l'objecte i
el número que el Fireworks MX 2004 us dóna a la casella
d'aquesta coordenada. |
|
| |
|
| |
Molt probablement aquestes dades seran iguals que aquestes: |
| |
|
| |
|
| |
|
| |
Bé, ja teniu les dades que es necessiten. Ara ja podeu
iniciar l'animació. |
| |
| Seleccioneu tots els elements excepte el
més inferior de tots, que es troba dins la capa carter,
i amb l'ajut de la icona d'alineació pertinent, alineeu tots
els objectes per la base. |
|
|
| |
|
|
Això fa desplaçar tots els
elements a la part inferior de la imatge. Sense desseleccionar-los,
cliqueu a l'Inspector de propiedades
i introduïu un valor 300 a la coordenada de l'eix Y. |
| Ara, si mireu la imatge, talment sembla
que tingueu el motor muntat. Fantàstic, eh? |
|
| |
|
| |
Si encara no ho està, activeu la finestra Fotogramas
mitjançant l'opció de menú Ventana
| Fotogramas o prement Maj + F2. |
| |
|
| |
|
| |
|
| |
En aquesta finestra és on queden disposats els fotogrames
de l'animació que heu de fer. A diferència d'altres programes
que disposen d'una línia de temps, el Fireworks MX 2004 mostra els
fotogrames disposats un sota l'altre. La variació de l'ordre disposat
passa simplement per clicar sobre el fotograma que heu de desplaçar
i arrossegar-lo fins al lloc nou que ha d'ocupar. |
| |
|
| |
|
| |
|
| |
Situeu-vos dins aquesta finestra i cliqueu sobre el desplegable
superior de la dreta. Trieu l'opció Duplicar
fotograma. |
| |
|
| |
|
| |
|
| |
Al quadre de diàleg emergent, indiqueu que voleu fer
19 duplicacions. Cal que introduïu aquesta dada per teclat, ja que,
si ho feu mitjançant l'slider,
el Fireworks MX 2004 només us deixarà posar un màxim
de 10, amb la qual cosa hauríeu de repetir l'operació. |
| |
|
| |
|
| |
|
| |
Quan hagueu introduït el nombre de duplicacions, accepteu
el quadre de diàleg. Ara heu de tenir vint fotogrames en total. Comproveu-ho
i, sense sortir d'aquesta mateixa finestra, activeu el Fotograma
1. |
| |
|
| |
Atenció: Tot
i que en aquesta pràctica en concret no afectaria gaire el resultat,
és molt important que, quan treballeu amb més d'un fotograma,
estigueu sempre molt atents a quin teniu seleccionat, ja que qualsevol error
en el moment de triar el fotograma pot donar resultats ben diferents dels
esperats. |
| |
|
| |
Desplaceu-vos ara a la Persiana
de capas i feu activa la capa culata.
Seleccioneu-ne el contingut i seguiu el mateix procés que abans quan
heu creat el símbol gràfic a partir del menú Modificar
| Símbolo | Convertir en símbolo. En aquest cas, tanmateix,
en lloc d'aquesta mena de símbol, trieu un Símbolo
de animación. |
| |
Anomeneu aquest nou símbol culata_ani
i accepteu el quadre de diàleg. |
| |
En acceptar el quadre de diàleg de conversió
en símbol, se n'obrirà un de nou com el de la imatge inferior.
De moment no hi modifiqueu res, simplement accepteu-lo. |
| |
|
| |
|
| |
|
| |
Fixeu-vos com a la finestra de la Biblioteca
us ha aparegut ara aquest element nou: |
| |
|
| |
|
| |
|
| |
Reconvertiu a símbols d'animació cadascun dels
altres elements de la imatge excepte la instància de
carter_gr. Aquesta ha de romandre estàtica durant tota l'animació. |
| |
|
| |
Feta aquesta reconversió, accediu a la
Persiana de capas, trieu la capa culata
i seleccioneu-ne el contingut. Ara heu d'introduir les dades necessàries
per a cadascun dels símbols d'animació que acabeu de crear. |
| |
Desplaceu-vos damunt la imatge i, sense desseleccionar aquest
element, feu un clic amb el botó secundari del ratolí. Del
menú emergent, trieu l'opció Animación
| Configuración. |
| |
|
| |
|
| |
|
| |
Això us obre el mateix quadre de diàleg que
us ha sortit en triar Símbolo de animación. |
| |
|
| |
|
| |
|
| |
A l'apartat Fotogramas,
cal que n'hi poseu 20, perquè són els que es corresponen amb
els que teniu creats en l'animació. |
| |
A la casella Dirección,
poseu 90, ja que aquest és l'angle en què voleu que faci el
desplaçament l'objecte que esteu animant. El Fireworks MX 2004, per
defecte, sempre fa els desplaçaments en horitzontal, d'esquerra a
dreta, i, si voleu modificar-ho per teclat, com és el cas, heu de
considerar que llegeix els angles en sentit contrari al de les agulles del
rellotge. |
| |
Així, doncs, si, per exemple, el que volguéssiu
fos que aquest element es desplacés verticalment cap a la part inferior,
hauríeu d'introduir en aquesta casella el número 270; i, si
el que volguéssiu fos que anés de dreta a esquerra, hauríeu
de posar 180. Tot i aquesta possibilitat de treballar per teclat, el Fireworks
MX ofereix, també, la possibilitat d'orientar l'angle de desplaçament
de forma molt més intuïtiva mitjançant una rodeta que
es fa visible en clicar al desplegable d'aquest apartat, o simplement arrossegant
l'inici i el final directament a la imatge. |
| |
La darrera casella que us cal modificar és la de Mover.
En aquesta casella, heu d'introduir el número que obtingueu després
de fer el càlcul del valor que té ara cadascun dels elements
que esteu animant a la coordenada Y menys el número que tenia
abans a la mateixa coordenada, que és el que havíeu anotat
al paper. |
| |
|
| |
Tal com heu fet abans, tot seguit teniu aquestes dades. Tot
i això, és molt important que entengueu d'on provenen, més
que no pas conèixer la dada en si. |
| |
|
| |
|
| |
|
|
|
En aquest punt, i per a aquells que no sigueu gaire experts
en treballs amb símbols, és recomanable que llegiu el contingut
complementari que pot trobar-se clicant a la icona del costat. |
| |
En el contingut complementari, hi ha una explicació
raonada de quines relacions guarden el punt de registre del símbol
i la lectura que el Fireworks MX 2004 fa d'un símbol en relació
amb la seva posició en les coordenades que regeixen el document actiu. |
| |
|
| |
| Fixeu-vos que ara, a la imatge, s'ha generat
una mena de cadeneta amb un punt verd i un de vermell. Recordeu que
ja havíeu vist aquesta mena de representacions a la cinquena
pràctica del tercer mòdul. |
|
| Aquesta cadena correspon al desplaçament que
ha de fer l'objecte. |
| |
| El punt verd fa referència
directa al fotograma inicial, aquell on es troba ara l'objecte, el
punt vermell va referit al fotograma
final, és a dir, fins allà on es desplaçarà,
i els punts blaus representen la resta de fotogrames creats. |
| Com més lluny es troba un punt de l'altre, més
ràpid és el desplaçament d'imatges i més
salts dóna la imatge mentre es va reproduint. Com més
a prop estan els punts, més lent és el moviment i més
continuïtat visual té la representació. |
| Si voleu, podeu provar-ne el desplaçament. Quan
ho hagueu vist, assegureu-vos de tornar al Fotograma
1. |
|
| |
|
| |
Repetiu l'operació d'animar cadascuna de les diferents
instàncies d'animació que teniu a l'escenari. |
| |
|
| |
Fet això, obriu la finestra Fotogramas
i fixeu-vos que al marge dret hi ha escrit un 7.
Aquest número fa referència al temps que serà visible
cadascun dels fotogrames. |
| |
|
| |
Per defecte, el Fireworks MX 2004 assigna aquest valor a
cadascun dels fotogrames. La relació que estableix és del
7% de la durada d'un segon, d'aquí l'origen del número 7.
Aquesta relació equival a poc més de 14 fotogrames per segon.
Tanmateix, el Fireworks MX permet modificar aquest valor i fer que cada
fotograma duri el que l'usuari/ària desitgi. |
| |
Així, doncs, situeu-vos en el darrer fotograma i feu
un doble clic damunt aquest valor de temps. Això us obre una finestra
on podeu introduir el valor que necessiteu. |
| |
|
| |
|
| |
|
| |
Com que, en aquest cas, es pretén que el darrer fotograma
estigui estàtic durant vint segons, heu d'introduir el número
2.000. Assegureu-vos d'activar la casella Incluir
al exportar, ja que, si no es fa, la condició de temps introduïda
no és efectiva i el temps de durada d'aquest fotograma és
el predeterminat. |
| |
Per accelerar una mica la resta de fotogrames i fer que el
moviment sembli més continuat, seleccioneu-los tots menys el darrer
i, fent clic sobre el número 7, substituïu-lo per un valor
de 5. Així, el temps quedarà substituït d'un sol cop
en tots els fotogrames seleccionats. Pareu atenció altre cop a la
casella Incluir al exportar. |
| |
Per seleccionar un nombre concret de fotogrames, cal que
feu un clic sobre el primer de la sèrie i un altre al darrer que
vulgueu seleccionar mentre manteniu premuda la tecla de majúscules. |
| |
|
| |
| Situeu-vos, ara, al Fotograma
1 i proveu l'animació. Vegeu com aquesta passa ràpidament
i, al final, s'està estàtica durant els vint segons
indicats. Posteriorment, es reinicia un altre cop. |
|
| Aneu de nou a la finestra Fotogramas
i cliqueu damunt la icona Bucle,
situada a la part inferior. |
| En el desplegable que s'obre, trieu l'opció
Siempre. D'aquesta manera, l'animació
es reprodueix contínuament. |
|
| |
|
| |
Deseu l'arxiu i, a la finestra del document, indiqueu que
voleu veure la vista 2-arriba. |
| |
|
| |
|
| |
|
| |
Seleccioneu la finestra Optimizar.
Indiqueu-hi els paràmetres de la imatge inferior i, després,
cliqueu sobre el botó Exportar.
|
| |
|
| |
|
| |
|
| |
De la mateixa manera que a l'exportació que heu fet
abans, al començament d'aquesta pràctica, ara també
hi ha algunes coses especialment importants que heu de tenir en compte:
que el format triat sigui un GIF animado,
que tingui una Pérdida no superior
al 30%, que estigui activa la casella que permet la Transparencia
alfa i que a la casella Mate hi
figuri sense color. |
| |
|
| |
Trieu l'opció de menú Archivo
| Exportar; tot seguit s'obre el quadre de diàleg on heu d'indicar
el nom de l'arxiu. Anomeneu-lo explo.gif
i, a l'opció de Guardar como archivos de
tipo, indiqueu-hi HTML e imágenes.
|
| |
|
| |
|
| |
|
| |
Ara, a la carpeta indicada per vosaltres, ja hi teniu un
arxiu HTML que porta incorporat el GIF animat que acabeu de fer. |
| |
Per acabar, i independentment de l'exportació que
heu fet, deseu l'arxiu que heu estat treballant amb el format PNG originari,
per si més endavant us cal retocar algunes coses. |
| |
|
| |
|
 |
| |
|
| |
|
