Inserir pel·lícules del Flash

Què és el Flash?

Amb l'expansió d'Internet, l'esforç dels dissenyadors s'ha dirigit, entre d'altres aspectes, a aconseguir llocs web amb continguts presentats d'una manera al més dinàmica i ràpida possible. Un dels programes més utilitzats per aconseguir aquest propòsit és el Flash. 

Aquest programa utilitza la tecnologia vectorial per crear llocs webs impactants, que inclouen imatges en moviment, so i interactivitat, tot això amb arxius de mides reduïdes. Els objectes del Flash, i en concret les pel·lícules creades a partir d'aquest programa, són un dels recursos externs més utilitzats per incloure aquesta interactivitat i aquest dinamisme a les pàgines web d'última generació.

Per poder visualitzar les pel·lícules Flash, cal tenir instal·lat el connector (plug-in) Flash Player. Si no el teniu, podeu descarregar-lo des del web de Macromedia a l'adreça www.macromedia.com.

El Dreamweaver MX 2004 permet crear objectes Flash del tipus botó i text a partir de la barra Común, i també ofereix la possibilitat d'inserir els continguts elaborats directament amb el Flash, és a dir, els arxius amb extensió .swf.

Inserir una pel·lícula del Flash

La finalitat d'aquesta pràctica és inserir una pel·lícula del Flash a una pàgina i crear els botons de control per reproduir-la.

A l'interior de la carpeta m7, creeu una nova carpeta. Anomeneu-la animacio. Copieu en aquesta carpeta l'arxiu titella.swf que es troba a ../materials/m7/animacio.

Obriu el Dreamweaver MX 2004. Apareixerà una pàgina en blanc. Definiu l'aspecte general de la pàgina amb l'opció de la barra de menú Modificar I Propiedades de la página. Poseu el títol de la pàgina Pel·lícula Flash i doneu les directrius següents de color de fons, text, colors dels vincles, marges...: Fondo #FFFFFF, Texto #000066, Márgen izquierdo 0, Margen superior 0, Ancho de margen 0, Alto de margen 0.

A continuació, inseriu una taula mitjançant el botó Tabla de la categoria Común de la barra Objetos o activeu el menú Insertar I Tabla. Apareixerà el quadre de diàleg Insertar tabla. Modifiqueu els valors que apareguin (recordeu que el quadre de diàleg sempre manté els valors de la configuració més recent introduïda per a una taula) pels següents: Filas 5, Columnas 3, Ancho 700 píxeles, Borde 0, Relleno de celda 2, Espacio de celda 1.

Situeu el cursor a l'interior de la cel·la central de la taula i cliqueu el botó Media: Flash de la barra Común.

S'obrirà la finestra de diàleg Seleccionar archivo. Indiqueu la ruta i el nom de l'arxiu que s'ha d'inserir, en aquest cas, titella.swf. L'objecte s'introduirà a la cel·la i el símbol central indicarà que és un objecte Flash.

Per comprovar el funcionament de la pel·lícula, activeu Vista previa en... a la barra d'eines i visualitzeu la pel·lícula en els navegadors. Interactueu amb l'animació, activant o desactivant els gràfics situats a la part superior de la pel·lícula. 

Podeu veure el funcionament de la pel·lícula titella.swf a continuació:

Ateses les característiques d'aquesta animació, també podeu activar-la directament si cliqueu al botó Reproducir que apareix a la finestra Propiedades i utilitzeu els gràfics esmentats.

La finestra Propiedades habilita tota una sèrie d'opcions per manipular l'aparença de l'arxiu Flash que heu inserit:

• Nombre: Especifíca el nom que identifica la pel·lícula. Escriviu titella.
• An.: Permet definir l'amplada de l'objecte en píxels. Escriviu 400.
• Al.: Permet definir l'alçada de l'objecte en píxels. Escriviu 300.
• Alinear: Possibilita arrenglerar l'objecte.
• Fnd.: S'usa per ajustar els colors de fons de l'objecte.
• Reproducir / Detener: Permeten activar/desactivar la funció de reproducció de l'objecte Flash i comprovar-ne el funcionament.
• Calidad: Ajusta la qualitat final de la pel·lícula i afecta directament el nivell d'antialiasing. Com més gran és la qualitat, més exigència ha de tenir el processador. Seleccioneu Alta.
• Escala: Permet ajustar el contorn de la pel·lícula quan apliqueu una reducció o un redimensionament de l'objecte.
• Bucle: Repeteix la pel·lícula en un cicle sense fi. En aquest cas, podeu deixar aquesta opció desactivada. 
• Rep. automática: Reprodueix la pel·lícula una vegada s'ha carregat la pàgina. Com que la vostra pel·lícula requereix la interacció de l'usuari/ària, podeu deixar aquesta opció desactivada.

Torneu a visualitzar la pel·lícula amb els canvis efectuats. Com que n'heu redimensionat la mida, caldrà també fer el mateix amb la cel·la on es troba inserida. Deixeu-hi, però, un contorn al voltant. Afegiu un fons de color a la cel·la.

Guardeu l'arxiu amb el nom lliure.htm. Comproveu-ne la visualització als navegadors.

Controlar el Flash

Podeu incorporar més control sobre la reproducció de la pel·lícula del Flash que heu inserit aprofitant els recursos de la finestra Comportamientos. Afegireu unes icones que imitin el funcionament d'un reproductor elemental de vídeo. 

Recupereu les imatges retro.gif, aturar.gif, i avan.gif  i guardeu-les a la carpeta animacio on esteu fent aquesta pràctica. 

Dividiu la cel·la que es troba a sota de l'objecte Flash en columnes i inseriu a cada una de les noves cel·les les imatges que formaran el botonari:

Seleccioneu la imatge retro.gif. Obriu la finestra Comportamientos dins el pannell Inspector de etiquetas, cliqueu la icona + i seleccioneu l'acció Controlar Shockwave o Flash. Apareixerà la finestra del mateix nom. Al camp Película trobareu película "titella". Activeu l'opció Rebobinar i accepteu-la.

És molt probable que el programa incorpori per defecte l'esdeveniment (evento) onLoad a l'acció. Per generar un efecte més realista, canvieu (onLoad) per (onClick) des de la finestra Comportamientos:

Guardeu l'arxiu i comproveu el funcionament dels botons de control que heu afegit. Recordeu que, segons les característiques de la pel·lícula, podreu afegir més controls si ho creieu necessari. Aquest seria l'aspecte final del treball:

Podeu aplicar més efectes als botons de reproducció si encara en teniu ganes. Un dels més utilitzats és Intercambiar imagen, que genera una imatge canviant (rollover) molt similar a la que heu treballat al mòdul 6 amb Definir Imagen de barra de navegación. De tota manera, no oblideu que hauríeu d'elaborar les imatges que apareixerien en activar l'efecte. 

El FlashPaper

El FlashPaper és una utilitat que s'instal·la conjuntament amb el programa Contribute 3. Aquesta aplicació permet convertir qualsevol document en un fitxer swf (o pdf) que es pot afegir a una pàgina web.

El primer que cal fer, si no ho fet amb anterioritat, és instal·lar el programa Contribute 3. Si inseriu el CD, veureu que no hi ha cap problema: el programa s'instal·la i només deixa decidir en quina carpeta fer-ho. Quan executeu el programa per primera vegada, us demanarà el número de sèrie que es troba a la part posterior de la funda del CD.

Una vegada acabada la instal·lació, veureu que teniu una nova impressora instal·lada amb el nom Macromedia FlashPaper. A partir d'aquest moment, ja podeu generar els arxius swf i pdf.

Ara convertireu un document en format rtf que teniu a ../materials/m7. El mom del document és accessibilitat.rtf. Com podeu veure, és un recull de normes d’ús i accessibilitat.

Hi ha formes diferents de fer la conversió; vegem-ne dues:

Obriu el document amb el programa Word. Aneu a Archivo | Imprimir i escolliu com a impressora Macromedia FlashPaper.

Quan cliqueu a Aceptar, veureu que el programa comença a funcionar i surt una finestra com la de la dreta. Després d'una estona, el document ja està preparat per ser arxivat.

Observareu que teniu dues posibilitats:Guardar como Macromedia Flash o Guardar como PDF. Escolliu la primera opció.

Deseu el document a la carpeta c:\cursd98\m7\ amb el nom accessibilitat.swf.

El procés per inserir aquest document en una pàgina web és el mateix que per a qualsevol altre document de flash.

Obriu un arxiu nou amb el Dreamweaver MX 2004. Deseu aquest document amb el nom accessibilitat.htm dins la carpeta c:\cursd98\m7\ i inseriu l'arxiu accessibilitat.swf amb Insertar | Media : Flash. Deseu el document. Observareu que el resultat serà similar a aquest:

Podeu canviar les mides arrossegant unes de les cantonades de l'objecte Flash inserit.

Observareu que el menú superior té opcions molt útils per visualitzar o imprimir el document.

L'opció >>, que es troba a la part superior dreta, permet ajustar i navegar pel document a la vostra conveniència.

Una forma més fàcil de convetir un arxiu a swf és fent ús del Menú contextual que s'ha generat en instal·lar Contribute 3.

Si feu clic amb el botó de la dreta sobre un arxiu des de l'explorador del Windows, observareu que s'obre un menú com aquest:

Quan escolliu una acció, l'aplicació us demanarà que doneu un nom a l'arxiu i automàticament escollirà el programa associat per generar el pdf o swf.

Recomanem aquesta forma de convertir els documents, ja que és molt més simple i sol funcionar millor.