Petit Taller de Flash

N'hi ha prou amb fer una volta per la web per adonar-se'n de que Flash és una part gairebé essencial de les pàgines web. Moltes pàgines inclouen aquestes pel.lícules, que aporten interactivitat, vistosos efectes i amb una qualitat magnífica: un aspecte suau, colors nítids...


Certament, Flash té molt que oferir. També és cert que en molts casos els dissenyadors l'empren injustificadament --i molt malament. No és extrany trobar pàgines que triguen una eternitat en carregar-se; tot per veure una ridícula animació en Flash, mal optimitzada i pitjor dissenyada, que no aporta res a la navegació o a l'experiència interactiva del visitant. Una bona pàgina amb Flash ha de ser ràpida en carregar-se i oferir quelcom que amb l'alternativa de html més gif/jpg no sigui possible.

Com crear pel.lícules Flash.
El propietari del format, Macromedia, té les aplicacions més emprades per aquesta tasca: Director i Flash. Director està més aviat pensat per a la creació de projectes multimèdia ( estil cd-rom ); Flash és el producte encarregat de la preparació de les animacions flash per a la web.


Flash és un programa comercial ( Macromedia http://www.macromedia.com.) Una mostra del frenètic ritme de canvi de les aplicacions per a la web és el fet de que en un any hagin aparegut dues versions del programa... Macromedia sempre deixa tastar els seus programes durant 30 dies (sense limitacions), de manera que hom pot haver tengut Flash al seu abast durant quasi mig any, només amb les versions demo.

Una imatge estàtica de Flash.
Si pitgeu el botó dret, tindreu l'opció d'ampliar-la i veure-la en detall.

 

Flash és l'estàndard en vectors per a la web. A manca d'altres alternatives, convé aprofitar-lo i explorar les seves innegables qualitats. Alguns exemples són particularment impressionants. Els seus fitxers són molt compactes. Per exemple, aquesta il.lustració té només 5K. Un GIF a aquest tamany inicial tendria un tamany comparable, però... què passa si en volem una vista en detall. Flash ens permetrà ampliar a voluntat sense la més mínima pèrdua de definició.

 
Però és en el terreny de les animacions i la interactivitat on Flash mostra de debò la seva excel.lència. Per animacions complexes, amb molts canvis d'algunes formes bàsiques, no hi ha altra solució. Flash soluciona amb un fitxer petitíssim i amb gran qualitat allò que un GIF animat faria amb un enorme fitxer, i sense tanta definició. Les darreres versions inclouen la possibilitat de so en format mp3, formularis de text... i tot plegat les possibilitats creatives estan limitades tan sols per la imaginació del dissenyador.

Sembla que amb les darreres versions, Flash va en la direcció d'una interfície més professional i amb més simplicitat d'ús. La manera en què maneja els vectors és molt particular. En haver dibuixat, per exemple, un cercle, separa el contorn de l'interior, de manera que seleccionant un dels dos, l'altra part queda enrera... I dibuixar una forma per sobre d'una altra, automàticament hi fa un buit! Tot això és irritant perquè pot arruinar un treball sencer.

 

L'espai de treball de Flash no es gaire diferent d'altres aplicacions de disseny; el que té de particular és el timeline, on es representa l'acció que duran a terme els símbols de la pel.lícula. En horitzontal tenim la successió de fotogrames al llarg del temps, i en vertical una sèrie de capes per organitzar els objectes de l'animació.  


Els conceptes bàsics.
Assumim que tindreu una versió demo en anglès, pel que citam aquests termes en la seva versió original. Si estudieu en detall --abans d'instal·lar la demo-- com es maneja el programa ( per exemple, llegint algun article introductori com aquest, i després descarregant el complet tutorial en pdf que trobem en les pàgines de Macromedia), durant el període de prova us donarà temps de crear un munt d'animacions: probablement més de les que pugueu utilitzar en la vostra web.


L'animació que crea Flash es diu "movie"; per a facilitar la seva creació, una pel·lícula flash pot estar formada per diverses seqüències o escenes "scenes", que es posen una a continuació d'altra per a formar una pel·lícula completa. Una escena també serveix com resposta a una acció (per exemple, pot reproduir-se al fer clic en un botó, o al passar el ratolí per damunt.) També podem usar una acció animada independent del temps, el que s'anomena "movie clip". Si inserim un clip en la línia d'acció, passarà a representar-se, amb independència del resta de l'acció.

 

La interfície del programa
Flash no difereix molt d'altres programes. Vegem la figura més amunt. L'espai de treball és el "stage" o escenari. En Flash, el més peculiar és el quadre de el "Timeline": està format per frames o fotogrames que se succeeixen al llarg del temps (en horitzontal.); a més hi tenim diferents capes o "layers" per a distribuir els objectes de l'animació. És molt important entendre que en Flash cada objecte animat ha de tenir la seva pròpia capa.

Un frame en el que succeeix alguna cosa es denomina Keyframe. Per exemple, per a definir el moviment d'un objecte, usam dos keyframes que indiquen les posicions inicial i final.

 

La paleta de símbols serveix per organitzar els elements de l'animació d'una forma molt còmoda i potent.

 

Els objectes que formen part de l'animació poden ser de diversos tipus: text, imatges vectorials (dibuixades directament amb els útils del programa o importades d'altres aplicacions), i també imatges en bitmap. Flash treballa al màxim de les seves capacitats i crea arxius de mínim tamany si empram imatges vectorials, i especialment si aprofitam la seva capacitat de crear símbols.

Un símbol és un objecte que es pot reutilizar tantes vegades com es vulgui, sense engrandir el fitxer final. Cada símbol, a més pot presentar-se en diferents variants (per exemple, canviant la seva orientació, grandària o color): son el que Flash anomena instances --ho podríem traduir per variants o models. Els símbols estan organitzats en una paleta específica, la biblioteca de símbols ( symbol library ). Des d'aquí s'arrosseguen i es deixen anar a un lloc de l'escenari.

Dibuixar i modificar formes.
Les eines de dibuix de Flash són semblants a les d'altres aplicacions vectorials. S'accedeix a elles a partir de les icones situats en la caixa d'eines (veure imatge). El dibuix a mà alçada en Flash dóna formes suaus; amb una mica de perícia es poden aconseguir interessants resultats. La principal precaució que cal adoptar amb les formes dibuixades està en el ja comentat detall que les formes que se superposen sobre altres es retallen de la que queda immediatament a sota.

Les formes dibuixades o importades (Flash admet pràcticament qualsevol format vectorial) poden girar-se, escalar-se o esbiaixar-se sense major dificultat; també es poden agrupar i desagrupar objectes, i el text pot descompondre's en les seves formes (convertir-se a corbes editables.)
Flash també admet bitmaps, però no és molt aconsellable recórrer a ells, excepte si cal afegir alguna fotografia. Per als bitmaps no estan disponibles la majoria d'efectes que poden utilitzar-se amb els vectors --i fan augmentar el fitxer final.

 

Utilitzar símbols. Aprofitar els dingbats.
La forma més pràctica i eficient d'organitzar els elements de l'animació és recórrer als símbols ( definits més amunt.) Per a definir un símbol, simplement hi ha que seleccionar un objecte i en el menú Insert | Create Symbol. Apareix un quadre en el que donarem un nom descriptiu i seguidament quedarà disponible en la biblioteca de símbols. Flash maneja quatre tipus de símbols: gràfics, botons i movieclips.


Un símbol normal és un gràfic; un botó té associada una acció determinada, normalment amb el ratolí o el teclat. Un movieclip pot tenir la seva pròpia animació independent.
 

Qualsevol modificació que fem en un símbol afectarà totes les seves variants. Aquesta capacitat és molt poderosa, però també pot ser una font d'equivocacions si no es té en compte. Per a modificar una variant concreta del símbol, el que s'ha de retocar es una Instance ( Modify | Instance ) o bé directament en l'àrea de treball, escalar, rotar...


Algú ha dit que Flash i els dingbats semblen fets l'un per a l'altre. I efectivament, els dingbats suposen una variada font de símbols llests per a utilitzar. Basta teclejar el caràcter necessari, convertir a corbes i crear el símbol. Després, les possibilitats són infinites.

 

Una animació com aquesta, contràriament al que sembla, ( la podeu veure anant a aqui  )és molt simple. Consisteix només en una forma ( els colors del cap de frenologia de més amunt ); aquest símbol s'ha col.locat en diferents capes i s'han definit automàticament els moviments. Vegeu el text per aprendre com es fa... és fàcil. I aquest fitxer només té 6k.

 

 

 

Flash val la pena realmente per coses així-- imaginant usos concrets que se'n puguin fer. Una animació semblant amb gif animat seria un fitxer gegantí i hauria costat una eternitat crear-lo.

 

Animacions senzilles.
Per a veure com crear una animació senzilla, vegem la capacitat de Flash per generar automàticament totes les formes intermèdies entre dos fotogrames (el que es diu tweening.) També és possible crear animacions fotograma a fotograma, però és molt més eficient i ràpid recórrer a la tècnica de tweening.


En el quadre del timeline, definim dos fotogrames clau (dos keyframes) separats per un cert temps, per exemple, dos segons. Basta fer clic sobre el quadre corresponent i en el menú Insert | Keyframe. Anem al primer d'ells i col.locam un símbol de la nostra biblioteca, que haurem creat abans. A continuació, afegim l'altre símbol en el segon Keyframe, i modifiquem un poc el seu aspecte, per exemple, el girem, canviem el seu color... a Modify | Instance. Per a crear l'animació, se selecciona amb el ratolí tot el segment entre els dos keyframes utilitzats, i prement el botó dret, elegim Create Tweening. Hi ha diversos tipus de intercalar les formes intermèdies:


Per a provar l'animació, anem al menú: Control | Test Movie.
Si estem satisfets dels resultats, ja esporguem exportar la pel.li en format SWF per a incloure-la després en una pàgina web. si volem una mica més sofisticat, afegirem noves capes amb altres símbols que segueixen el seu pròpia animació. El format que devem guardar les pel·lícules per a treballar en elles en diverses sessions distintes és el Flash ( fitxers amb una extensió .fla)
Altres possibilitats de Flash relacionades: crear una animació al llarg d'un trajecte; rotar l'objecte al llarg del recorregut; accelerar o frenar...

Importar i calcar imatges.
Els útils de dibuix de flash són bons, però amb freqüència aprofitarem altres fitxers ja preparats. Flash admet una gran varietat de fitxers vectorials o de mapa de bits. Per a col·locar un fitxer extern, sols devem col·locar-lo amb l'opció File | Import.
 

També té una generosa col·lecció de formats de sortida, tant vectorials com de mapa de bits. Per a això, tenim l'opció Export.  Una utilitat interessant que té Flash és la capacitat de calcar automàticament una forma *vectorial per sobre d'un mapa de bits que hàgim importat. Aquesta opció es troba en el menú Modify | AutoTrace. Si volem aprofitar les possibilitats d'animació i efectes al màxim, caldria efectuar aquesta operació; deurem tenir en compte, no obstant això, que el auto-calcat serà més efectiu en imatges simples i amb pocs colors, o en blanc i negre.

 

Interactivitat.
Si Flash tan sols servís per a crear animacions, seria un afegit poc funcional per a les pàgines web. No obstant això, Flash és un autèntic entorn de creació multimèdia. Podem incloure so i una sèrie d'accions preestablertes o interactives que fan de les pel·lícules Flash quelcom molt útil per al disseny web.
La interactivitat es fonamenta sobretot en l'ús de botons per a dur a cap una acció (per exemple, dirigir-se a una pàgina web), i en la incorporació de formularis. Els efectes de interactivitat són molt potents i configurables i es tracta d'un tema ja per a usuaris avançats: planificar i crear una complexa animació interactiva no és tasca d'una estona.
Flash és utilitzat amb freqüència per a crear menús emergents, que es despleguen a mesura que l'usuari prem sobre les diferents opcions. Un bon exemple és la pròpia pàgina de Macromedia.

Per crear un botó interactiu, n'hi ha prou amb definir un objecte com a botó, i assignar les propietats que es vulguin per als diferents estats del botó.

Els efectes de mouseover també són fàcils d'aconseguir. Un botó es defineix com un tipus especial de símbol. De seguida apareix un quadre en el que elegim el gràfic que apareixerà en els estats up, over, down, i hit. És a dir, què s'ha de mostrar en l'estat normal, quan passa el ratolí per damunt, al prémer i quin és l'àrea que pot respondre (pot ser una àrea menor, igual o major segons les necessitats.) Cada un dels estats pot dibuixar-se directament, importar un gràfic o col·locar altre símbol.

Incloure Flash en les pàgines web.
Naturalment, les pel·lícules de Flash les tenim en la majoria d'ocasions com part d'una pàgina web. Aquestes pel·lícules (un fitxer .*SWF) s'enllacen al codi html mitjançant una etiqueta específica. No entrarem en detalls aquí; qualsevol editor d'html actual pot generar les etiquetes d'html necessàries perquè la pel·lícula es mostri correctament.
Si el fitxer de Flash és estàtic (pot tenir sentit, per exemple, per a un mapa o qualsevol gràfic que interessi poder observar en detalls ampliats), serà convenient que avisem d'alguna manera que es tracta d'una imatge flash; si no, passarà totalment desapercebut als visitants, que no podran distingir-lo d'una imatge normal.
Devem tenir en compte que les dimensions de l'animació poden definir-se a voluntat; no afegirà complexitat ni augmentarà la grandària final del fitxer. Els elements crítics són el text per a llegir o els bitmaps que s'hagin col·locat, ja que aquests elements poden perdre qualitat o visibilitat en canviar les dimensions.

Recursos sobre Flash i alternatives.
Han proliferat les pàgines web on s'ofereix informació sobre Flash (tutorials, eines relacionades, novetats, consells, exemples). N'hi haurà prou amb recomanar-ne una petita selecció. La primera aturada pot ser la mateixa pàgina de Macromedia.
Altres recursos: www.extremeflash.com, www.flashlite.net, www.flashplanet.com, www.flashzone.com o www.flashkit.com
Swish és una senzilla aplicació que crea pel.lícules Flash només amb text. Ara bé, els efectes que pot aplicar al text són sorprenents ( i seria molt difícil crear-los amb el propi Flash. )

Alternatives a Flash.
Ens podem estalviar l'apartat. De moment, no hi ha alternativa! No n'hi haurà mai? Això ja no és tan segur. Llegiu també l'article sobre el nou format vectorial SVG...
Per una altra banda, us aconsellam donar un cop d'ull a un format vectorial que... ha fracasat: el Flare (.Web) de Xara. Un fracàs degut a la manca de poder de la companyia, no a la manca de qualitat. Els vectors flare tenen una excel.lent qualitat i un tamany molt reduït. El plugin per veure'ls només té uns 200K i es pot obtenir de la web de Xara.

[ Nota: Aquest text s'ha traduit del castellà amb l'ajut del programa pilot de la Universitat d'Alacant  ( http://www.softcatala.org/traductor/ o http://www.internostrum.com/). Han calgut just unes poques correccions. ]