Integració de Flash en altres programes de disseny
 
 
     
  La potència de Flash es pot veure molt augmentada quan integrem els projectes amb altres programes de disseny com ara el Fireworks o el Dreamweaver.
     
 

El Fireworks és un programa de disseny gràfic capaç de treballar tant amb imatges vectorials com amb imatges de mapa de bits. Per al treball i coneixement del programa disposeu del curs de formació que podeu trobar en diferents llocs:

  
     
 

El Dreamweaver és un editor de pàgines web molt potent que permet integrar perfectament les pel·lícules SWF fetes amb Flash. Per al treball i coneixement del programa disposeu del curs de formació que podeu trobar en diferents llocs:

  
     
  En les properes dues pràctiques creareu una interfície utilitzant un editor gràfic i un editor de pàgines web. Evidentment podeu utilitzar el que us vagi millor o el que ja conegueu, però les indicacions que trobareu tot seguit es referiran únicament a Fireworks i a Dreamweaver que són els programes dels quals s'ofereixen cursos dins del marc de Formació del Professorat.  
     
 

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

  • Optimitzar les imatges amb el Fireworks per utilitzar-les amb el Flash i així evitar crear fitxers massa grans.
  • Utilitzar l'acció getURL per obrir fitxers externs a la pel·lícula SWF.
  
     
  El verb Get s'utilitza en el sentit d'aconseguir, en aquest cas per obtenir una determinada URL o adreça electrónica. Aquesta acció rep el nom d'hipervincle.  
     
  Aquest hipervincle no ha de ser necessàriament una pàgina web, també pot ser una altra pel·lícula Flash, un executable o qualsevol cosa que existeixi a Internet o que tingueu al vostre ordinador, sempre que sapigueu la seva adreça URL.  
     
  La sintaxi d'aquesta acció, que s'ha d'associar a un botó, en general és:  
     
 
on (release) {
getURL("enllaç");
}
 
   
 
Desenvolupament de la pràctica
  
   
 » Descarregueu-vos el fitxer interfície.zip i descomprimiu-lo a la vostra carpeta de treball. No modifiqueu la seva estructura perquè l'haureu d'enviar com a exercici final del mòdul després d'haver-hi fet les modificacions oportunes.
   
 
  • Fixeu-vos que conté un fitxer anomenat fons_original.jpg que és el que haureu d'utilitzar en aquesta pràctica.
  
 
  • També teniu un fitxer inici.htm que necessitareu per a la pròxima pràctica.
  
     
  Optimització de les imatges  
     
   » Executeu el Fireworks i obriu el fitxer fons_original.jpg.  
     
 

Es tracta d'una imatge feta amb una càmera fotogràfica digital, d'unes mides de 3334 x 2500 px, i amb una resolució de 300 ppp. El que haureu de fer és canviar la seva mida i modificar-ne la resolució per tal d'aconseguir que el fitxer resultant no sigui tan gran.

Si coneixeu el programa i voleu aplicar-hi més canvis, ho podeu fer, però a la pràctica no es detalla cap més actuació atès que això ja formaria part del curs Dibuix i recreació d'imatges amb el Fireworks.

 
   
   » Activeu el menú Modificar | Lienzo | Tamaño de la imagen.  
     
 
 
     
   » Apliqueu-hi una resolució de 72 ppp (píxels/polzada) i unes dimensions de 650 x 488 px per tal de mantenir la proporció. Feu-ho en aquest ordre, perquè quan hagueu de canviar-hi la resolució, el mateix Fireworks modificarà la mida del fitxer.  
     
 
 
 
 
 
  • Quan es tracta d'imatges per a la web, no es recomana posar-hi més resolució perquè la qualitat de la imatge ja no pot millorar, i en canvi el pes del fitxer augmentaria molt. Per tant, recordeu sempre de posar totes les imatges d'una web a 72 ppp de resolució.

 
 

 
 
 » Premeu el botó Aceptar.
 
 
   » Activeu el menú Archivo | Exportar i exporteu-lo amb el nom fons.jpg.  
     
   » Obriu l'Explorador i compareu el pes de les dues imatges fons_original.jpg i fons.jpg. Hi ha molta diferència entre l'una i l'altra?  
     
 
  • Mentre el fitxer fons_original.jpg té un pes de 446 KB, el fitxer fons.jpg pesa només 44.2 KB. Si feu una pel·lícula Flash amb moltes imatges i no les optimitzeu, podeu arribar a crear un fitxer tan gran que no es pugui consultar. Tingueu-ho sempre present.
  
     
   » Feu clic al botó Aceptar.  
     
     »  Exporteu el fitxer, amb el nom fons.jpg, amb el menú Archivo | Exportar.  
 
 
  • Ara ja teniu preparada la imatge que utilitzareu de fons, de manera que no us augmenti innecessàriament el pes de la pel·lícula SWF.
 
     
  Treball amb Flash  
 
 
 
 » Activeu el menú Archivo | Nuevo per crear un nou fitxer. Canvieu les mides de l'escenari a 650 x 487 i poseu-hi un fons blanc.
  
     
   » Deseu la pel·lícula amb el nom llengues.fla.  
     
  El resultat final haurà de ser aproximadament així:  
     
 
 
     
 
 » Canvieu el nom de la Capa 1 pel de Fons.
  
   
 

 » Activeu el menú Archivo | Importar | Importar a escenario (o premeu Ctrl+R) i importeu la imatge fons.gif que acabeu d'optimitzar amb el Fireworks. Bloquegeu la capa.

  
 
 
   » Creeu una capa nova i anomeneu-la Rectangle. Dibuixareu un rectangle amb unes mides de 650 x 40 px que serà la base dels botons de navegació. Agrupeu-lo i situeu-lo a la part superior. Recordeu sempre de bloquejar les capes que no utilitzeu.
 
 
 
 » Creeu una capa nova i anomeneu-la Menú. En aquesta capa hi posareu els textos que serviran de menú.
 
 
  
 
 » Feu tres quadres de text i escriviu-hi: Català, Castellà i Llengües estrangeres, respectivament. Centreu-los en relació al rectangle i distribuïu-los horitzontalment. Podeu assignar-hi la font Arial amb una mida de 15.
  
 
 
 
 » Convertiu els textos en botons. Podeu fer-ho com més us agradi, però recordeu que s'ha d'assignar una zona activa a cada botó que abasti tot el text que hi teniu en repòs.
 
 
 
 
 » Confegiu-los de manera que cada un dels estats que formen el botó siguin diferents.
  
 
 
 
 » Creeu un nova capa i anomeneu-la Enllaços. En aquesta capa haureu d'afegir els textos i les imatges que constituiran el cos de l'aplicatiu.
 
 
 
 
 » Finalment creareu una última capa que estarà reservada a les accions. Anomeneu-la Accions.
 
 
 
 
 » Torneu a la capa Enllaços. Assegureu-vos que totes les altres capes estan bloquejades.
 
 
 
 
Fixeu-vos en la imatge de mostra anterior. Es tracta d'una recopilació d'enllaços a diferents pàgines per treballar la llengua catalana, castellana i estrangera. Tots els que podeu veure a l'exemple s'han obtingut de les pàgines de recursos de la XTEC.
 
 

  

 
 
 » Cerqueu per Internet diferents pàgines per treballar aquestes llengües i crear una petita base d'enllaços per l'alumnat del centre on esteu treballant. No cal que siguin les mateixes de l'exemple.
  
 
 
 
  • Tot seguit creareu el primer dels enllaços seguint els passos indicats a continuació:
  
 
 
 
 » Aneu a la Escola oberta de la XTEC: http://www.xtec.net/escola/index.htm.
  
 
 
 
 » Entreu a la secció de Llengua Catalana i seleccioneu una de les fitxes. Cerqueu per exemple la d' Un rellotge Català. Una vegada l'hagueu trobat, seleccioneu i copieu la informació que ofereix la fitxa, poseu el cursor al final de la data, cliqueu el botó principal del ratolí i arrossegueu-lo cap a dalt, fins al principi del títol.
  
 
 
 
 » Un cop seleccionat, copieu-lo al portapapers amb Ctrl+C, o seleccionant l'opció Copiar del menú de context que apareix en prémer el botó secundari del ratolí.
  
 
 
   » Torneu al Flash. Situeu-vos al segon fotograma de la capa Enllaços i afegiu-hi un fotograma clau buit (F7).  
     
   » Enganxeu-hi el que teniu al portapapers, amb Ctrl+V o seleccionant l'opció Pegar del menú de context que apareix en prémer el botó secundari del ratolí.  
     
 

 » Torneu a la pàgina de recursos de Llengua Catalana, feu clic amb el botó secundari del ratolí sobre la imatge del rellotge i trieu l'opció Copia la imatge.

Una altra solució seria fer Desa la imatge com a..., desar-la en el disc dur i després importar-la des del Flash.

Com sempre, l'elecció d'un mètode o un altre depèn del dissenyador/a. En aquest cas es més fàcil el primer mètode.

 
     
   » Torneu al Flash. Situeu-vos en el segon fotograma de la capa Enllaços i enganxeu-hi la imatge amb Ctrl+V o seleccionant l'opció Pegar del menú de context que apareix en prémer el botó secundari del ratolí.  
     
   » Situeu la imatge a sota del quadre de text anterior.  
     
 
  • Ara convertireu aquesta imatge en un botó per permetre la navegació.
  
     
   » Amb aquesta imatge seleccionada, premeu F8 per convertir-la en un símbol de botó. Anomeneu-la Rellotge. En aquest cas, no us cal que la imatge canviï quan passi el ratolí per sobre; per tant, amb el fotograma de l'estat Reposo n'hi haurà prou.  
     
 
  • Ara haureu d'afegir les accions necessàries per tal que, quan cliqueu a sobre de la imatge, s'obri la pàgina que heu seleccionat.
  
     
   » Obriu el panell Acciones i obriu la carpeta d'accions Control de clip de película.  
     
   » Seleccioneu l'acció on fent-hi doble clic i tot seguit seleccioneu l'opció Release també fent-hi doble clic.  
     
   » Situeu-vos al final de la línia, just després del claudàtor, i premeu la tecla Retorn per fer un salt de línia.  
     
   » Obriu la carpeta d'accions Navegador/Red.  
     
   » Seleccioneu l'acció getURL fent-hi un doble clic.  
     
 
  • El cursor s'haurà col·locat entre uns parèntesis. Aquí hem d'escriure l'adreça que volem obrir. Si la sabeu de memòria la podeu escriure directament, entre cometes. Si no la sabeu, que és el més normal, l'haureu de copiar i enganxar.
 
     
   » Torneu a la pàgina de recursos de Llengua catalana i busqueu l'hipervincle de la pàgina. El reconeixareu perquè el cursor es transforma en una mà. Quan el tingueu localitzat (en aquest cas n'hi ha dos: el del títol i el de la imatge), premeu el botó secundari del ratolí i seleccioneu l'opció Copia la ubicació de l'enllaç. D'aquesta manera, l'adreça web on hi ha el recurs us quedarà copiada al portapapers.  
     
 
 
     
   » Torneu al Flash i situeu-vos una altra vegada on éreu, és a dir entre els parèntesis de l'acció getURL.  
     
 
 » Escriviu unes cometes, enganxeu l'enllaç i torneu a posar cometes per tancar l'enllaç. Recordeu que si no poseu les cometes no us funcionarà.
 
     
  El script final ha de quedar així:  
     
 
on (release) {
  getURL("http://www.comunicaciodigital.com/rellotge_catala");
}  
 
     
   » Busqueu per Internet un parell més de llocs web que treballin la llengua catalana i afegiu-los a la mateixa capa. Podeu utlitzar les pàgines de recursos de la XTEC o la de l'Edu365. Escriviu un petit text descriptiu i una petita imatge de cada un.  
     
   » Proveu la pel·lícula amb Ctrl+Retorn per comprovar que els enllaços funcionen correctament.  
     
   » Deseu la pel·lícula.  
     
 
  • Heu d'inserir dos fotogrames més, un per als enllaços de castellà i un altre per al de llengua estrangera. Però ara fareu una petita variació en el mètode:
 
     
   » Seleccioneu el tercer fotograma de la capa Enllaços i assegureu-vos que sigui l'única capa desbloquejada.  
     
   »  Inseriu un Fotograma clave vacio (F7).  
     
 
  • Fixeu-vos que s'ha inserit un fotograma nou a la capa Enllaços.
  
     
  Ara heu d''allargar el nombre de fotogrames de les altres capes, afegint-hi nous Fotogramas (F5), per tal que en tinguin el mateix nombre i tant el fons com els botons es vegin durant tota la pel·lícula.  
     
 
  • Hi ha un altre mètode per evitar aquest últim pas:
 
     
   » Desfeu tot el que heu fet per inserir el tercer fotograma prement el botó Deshacer fins que torneu a tenir només dos fotogrames a totes les capes.  
     
   » Seleccioneu el segon fotograma de la capa Enllaços i assegureu-vos que sigui l'única capa desbloquejada.  
     
   » Inseriu un Fotograma clave vacio (F7).  
     
   » Fixeu-vos que ara s'ha inserit un fotograma nou a totes les capes.  
     
   »  Ja podeu omplir de contingut aquest tercer fotograma. Seguint el mateix mètode dels enllaços de català, busqueu dues o tres adreces que us permetin treballar la llengua castellana.  
     
   »  Feu el mateix amb el quart fotograma i poseu-hi dos o tres enllaços de llengua estrangera.  
     
   » Deseu la pel·lícula. La necessitareu per a la pròxima pràctica i per a l'exercici final del mòdul.