Autoedició amb StarOffice

Materials de formació

Introducció al Macromedia Flash

Mòdul VI

Interactivitat - Publicació

Jesús Arbués García del Moral

Joan Gelabert Vich

Ernest Prats García

Setembre 2005

Mòdul IV: Interactivitat - Publicació

Autors: Jesús Arbués García del Moral, Joan Gelabert Vich i Ernest Prats García

Servei de Formació Permanent del Professorat

Direcció General d’Ordenació, Innovació i Formació del Professorat

Govern de les Illes Balears

Conselleria d’Educació i Cultura

Setembre de 2005

obra de Jesús Arbués Garcia del Moral, Joan Gelabert Vich i Ernest Prats García

està subjecta a una llicència de Reconeixement-No comercial-Compartir amb la mateixa llicència 3.0

Espanya de Creative Commons

http://weib.caib.es/Formacio/distancia/Material/flash/guia.htm

http://creativecommons.org/licenses/by-nc-sa/3.0/es/

http://creativecommons.org/licenses/by-nc-sa/3.0/es/

Taula de continguts

1. Interactivitat (I) .............................................................................................................................. 5

1.1. Accions a un botó.................................................................................................................... 13

1.1.1. Instruccions per a Flash Mx 2004 .................................................................................... 17

1.2. Aturant al primer fotograma .................................................................................................... 19


2. Interactivitat (II) ........................................................................................................................... 21

2.1. Afegint accions als botons de navegació ................................................................................ 23


3. Publicació de les pel·lícules de Flash ......................................................................................... 27

3.1. El fitxer swf pròpiament dit ...................................................................................................... 27

3.2. La conversió a altres formats .................................................................................................. 27

3.3. Creació d’una pàgina web amb un fitxer Flash amb Dreamweaver ....................................... 33

3.4. Creació d’una pàgina web amb un fitxer Flash amb OpenOffice ........................................... 36

Convencions

Els símbols utilitzats en aquest text són:

Activitats d’introducció

Activitats completament guiades amb exposició gradual de continguts, que permetin

assegurar els continguts mínims de la programació del mòdul de formació.

Activitats de consolidació i reforç:

Aquestes activitats presenten una dificultat un poc superior ja que no són tan guiades

i permetran un millor domini dels temes estudiats.

Activitats d’entrega obligada

Les activitats que vénen marcades per aquesta icona s’hauran d’entregar

obligatòriament per tal de superar el curs de formació.

Activitats opcionals

Activitats d’ampliació de coneixements que permetin aprofundir en la temàtica

tractada.

Recomanacions o comentaris

Recomanacions o comentaris que permetran una millor realització de les activitats

encomanades.

Ajuda

Per a algunes activitats, si la seva resolució presenta problemes, es podrà consultar

l’ajuda, que donarà pistes per facilitar-ne la realització.

Recursos addicionals

Per poder ampliar els coneixements, es posa a la disposició dels alumnes una

documentació complementària de consulta o d’ampliació.

Curs de Macromedia Flash Mòdul 6

Jesús Arbués – Joan Gelabert – Ernest Prats 5

A aquest mòdul recuperarem tots els coneixements que hem anat estudiant i farem un parell

d’aplicacions més complexes. Apareixerà la interactivitat amb botons i aconseguirem crear uns en-

torns web per poder navegar.

1. INTERACTIVITAT (I)

Aquesta primera feina consisteix en fer una pàgina web amb uns botons que contindran accions i

faran possible una petita navegació: anar passant d’una pàgina a una altra. Passarem d’un fotograma

a un altre, i cada fotograma tendrà coses diferents.

Hi haurà uns botons que crearàs, unes imatges que ja estan preparades i que caldrà importar (carpe-

ta “illes” dins de la carpeta “imatges”), uns textos (que ja tens, carpeta “textos”) i unes accions que

hauràs de posar als botons.

Les accions, la programació, es farà a partir del sistema de programació del programa: Actionscript.

Només utilitzarem 3 o 4 ordres, però pensa que estàs davant un llenguatge de programació molt

complex i potent, que pot arribar a fer moltes coses. Això supera, i de molt, el contingut d’aquest curs.

L’estructura del fitxer de Flash serà la següent (l’anirem comentant poc a poc):

Fotograma1 Fotograma2 Fotograma3 Fotograma4

Capa Acció

Stop Stop

Capa

Títol Només aquí Res Res Res

Capa Mallorca Res Aquí

Imatge i text Res Res

Capa Menorca Res Res Aquí

Imatge i text Res

Capa Eivissa

Formentera Res Res Res

Aquí

Imatge i text

Capa Botons Els botons han de ser-hi presents tota l'estona. Han d’estar tots els fotogrames.

S’ha de poder anar a qualsevol fotograma en qualsevol moment.

Alguns exemples de les fases de resolució de l’exercici

Si vas a la carpeta interactivitat1 dins d’Arxius_fla trobaràs diferents fitxers en

format swf que mostren algunes de les fases de la resolució de l’exercici.

El primer que hauries de fer, abans de fer res, és visualitzar l’arxiu amb el resultat

final de l’exercici. Es diu web1.swf i el podeu trobar a la carpeta abans esmentada.



Per a la realització d’aquest exercici, proposam unes dimensions de pàgina de 600x550.

El primer pas serà crear els botons. En faràs tres: un per Mallorca, un per Menorca i un tercer per

Eivissa i Formentera.

Recorda que es fa des d’Insertar > nuevo sím-

bolo... i al primer li posarem com a nom botó

mallorca.

Assegura’t que has seleccionat el comporta-

ment Botón.

Nosaltres hem fet la forma del botó a partir d’un rectangle amb les cantonades arrodonides.

Hem creat una forma una mica allargada per

poder escriure després el text a sobre. Hem

escollit una forma una mica gran. Seleccionam

la forma i la centram. Recorda que ho has de

fer des de Ventana > Alinear.

Després de creat el botó, anomenam forma a

la seva capa, i a continuació n’hem creada una

altra amb el nom de text, on posarem el nom

de l’illa.

A la capa inferior va la forma arrodonida i a la

superior el nom de l’illa.

Introduïm el text. Cal cercar un color que con-

trasti una mica amb la forma de sota.



A continuació, centram el text.

Pel segon estadi, Sobre hem canviat una mica el color del botó fent-lo més fosc. Volem que es noti

una mica que es passa per sobre.

Recorda que per copiar una cosa d’un fotograma al següent la manera més fàcil és amb F6 que co-

pia exactament el que tens; després modifiques el color.

A Presionado hem optat per fer la forma una mica més petita. El text l’hem deixat igual a tots els

estadis.

Ara ja tenim a la biblioteca un botó.

Ara hem de fer els altres dos.

Per aconseguir els altres botons que ens falten podem tornar a començar el mateix procés d’abans:

Insertar nuevo símbolo... i tot el que segueix, o bé, el que et proposam ara.



Clicant en els puntets del final de la dreta del

panell de la biblioteca ens apareixen noves

possibilitats. Entre elles la de Duplicar que

crea un símbol exactament igual a l’anterior.

Tot serà igual: forma, color, tipus de lletra...

Apareix una finestra amb la informació de què

està fent una còpia del símbol escollit, en el

nostre cas la còpia del botó Mallorca.

Li canviam el nom, i li posam botó menorca.

Volem tenir un nou símbol, un nou botó que

ens serveixi com a botó per Menorca.

Ara tendràs a la biblioteca dos botons exacta-

ment iguals amb noms diferents. Caldrà editar

aquell botó que és incorrecte.

Senyalarem el botó Menorca i li canviarem el

text que no li correspon; d’aquesta manera

garanteixes la mida del botó, el tipus de color,

el tipus de lletra, etc.

Només canviem el text.

Cliquem dues vegades sobre el botó Menorca

que tenim a la biblioteca i entrem en l’entorn



d’edició.

Hem de canviar el text que posa Mallorca per

un de nou que posi Menorca.

Assenyalarem la capa Text.

Escriurem el nou text i el centrarem.

I ja tenim un nou botó.

Tornam a l’escenari, on encara no tenim res.

Farem el mateix per aconseguir el tercer botó

amb la particularitat que en tenir un text tant

llarg caldrà canviar dimensions de les lletres.

Si ho féssim amb el mateix tipus de lletra, de

mida, trobaríem que les lletres surten de

l’espai inferior.

En el nostre cas, havíem treballat amb una

mida 26 i ara la canviam per una 20.



A continuació, centram el text.

Ja tenim els tres botons.

Després de creats els botons, podem importar les imatges. Si ho fem per ordre i seguint l’esquema

haurem de crear capes noves a l’Escena 1. Una capa per cada imatge, una capa per posar un títol i

una capa pels botons.

De moment no tenim res a l’escenari, només hem creat els llocs on posar les coses i els botons que

tenim a la biblioteca.

Cal crear fotogrames claus per evitar que les coses que posem estiguin totes al fotograma 1.

Farem que a capa corresponent a una illa (o grups d’illes) li correspongui un fotograma clau en un

moment diferent de la línia de temps.



Clicant sobre el fotograma corresponent i amb el botó dret del ratolí seleccionam incorporar foto-

grama clave vacío. Podem fer el mateix amb la tecla F6 A la capa Mallorca li hem assignat el foto-

grama 2, a la capa Menorca el 3 i a Eivissa-Formentera el 4.

Ara importarem les imatges a cada fotograma clau. Les importarem i les centrarem. La imatge de

Mallorca, en ser més gran, cal que la posis a la part superior de l’escenari.

Volem tenir imatges en fotogrames claus, perquè estiguin només a un fotograma. Si per algun motiu

una de les imatges ocupa diversos fotogrames, s’hauran d’esborrar (amb majúscules + F5).

Les imatges les tens a la carpeta illes dins imatges.

Ara tens una imatge a cada fotograma: al fotograma dos imatge de Mallorca, al tres Menorca i al

quatre Eivissa-Formentera.

Ara a la capa Títol, al seu fotograma 1, afegirem el text Illes Balears.

Arrossegarem els tres botons que tenim a la biblioteca a la capa botons

Posa’ls on creguis convenient, nosaltres els hem posat a la part de sota.



És molt important que estiguin ben alineats (emprant el panell alineamiento).

Recorda d’anar desant cada vegada la feina feta. Més que res, per aplicació de la llei de Murphy.

No provis de reproduir la pel·lícula, no pararà i acabaràs amb un mareig. De tota manera, pels que no

els puguin estar de conèixer el que tenim fet fins ara poden obrir el fitxer web1_accions_tres.swf

que està a la carpeta interactivitat1 dins d’Arxius_fla. Els fotogrames es reprodueixen un rere l’altre,

a una velocitat de vertigen.

Si desplaces el capçal lector, (la línia vermella) notaràs que els botons només estan al primer foto-

grama i que en el dos, tres i quatre desapareixen.

Els botons han de ser a tots els fotogrames, per poder tenir interactivitat. Aquesta és la situació actu-

al:

Aquesta és la que necessitam. Amb F5 es clica al darrer fotograma de la capa botons i s’incorpora el

contingut de la capa a tots els fotogrames.

Ara ja tenim botons tota l’estona.

Ara posaràs les accions necessàries per poder-se moure pels diferents fotogrames.

Escollirem un botó de l’escenari. Començarem pel botó Mallorca. L’assenyalarem i, en aquest cas el

farem és quan es pitgi ens porti al fotograma on tenim la imatge de Mallorca, que és al fotograma 2.

Volem posar una acció que li digui a Flash: quan et cliquin ves al fotograma número 2 i atura’t.

Això es fa de la següent manera:

Seleccionam el botó a l’escenari.

Fixa’t bé que no has d’estar en la pantalla d’edició del botó. Has d’estar a l’Escena 1.

Obrirem el panell Acciones, des de Ventana >

Acciones o amb tecla ràpida F9.

S’obre un panell prou gran. Cal que comproveu en primer lloc que el que surt a la línia superior és

Acciones - Botón. És important que et fixis en aquest detall, perquè el programa permet posar pro-

gramació, (el que ell coneix com a accions), en dos llocs diferents: en els botons i en la mateixa línia

de temps. Per tant, a la part superior hi ha d’haver això:



Segons com estigui configurat el programa el panell d’accions et pots trobar amb dues maneres dife-

rents de treballar: mode normal i mode expert. Per començar serà millor utilitzar el mode normal.

El mode normal no existeix a Flash 2004

Per alguna fosca raó que només els caps pensants de Macromedia deuen conèixer, a

la versió Flash 2004 el mode normal desapareix. Per a solucionar aquest problema,

veuràs que donarem instruccions específiques per a les versions Mx i Mx 2004

Si emprau la versió Flash 5 els canvis són més aviat visuals, i disposa dels dos

modes. Per tant, podeu seguir les instruccions per a la versió Mx.

De tota manera, els usuaris de Flash Mx 2004 heu de mirar l’apartat general on

s’explica el procés de creació de la programació dels diferents elements de la

pel·lícula, per després mirar l’apartat dedicat a Flash Mx 2004, on només s’explicaran

les diferències.

1.1. ACCIONS A UN BOTÓ

Per saber quin tipus tenim predefinit has de cercar la icona que assenyalem a continuació:

Aquesta icona és la que ens determina quin tipus de

mode estem emprant.

Si cliques, et sortiran els dos modes i quin està activat. Selecciona el mode normal.



Pantalla mode expert.

Pantalla mode normal.



Tenint seleccionat el botó a l’escenari i anam a posar-hi accions.

No t’espantis. Hi ha moltes accions, però només n’emprarem unes poques. Per aprendre ActionScript

amb un cert nivell d’aprofundiment caldria un curs només dedicat a això.

Activitat de consolidació i reforç 1

Tens un document, mode_expert.pdf, amb les explicacions de com introduir les ac-

cions en mode expert. És un document d’ampliació.

Per començar t’aconsellam que segueixis amb el mode normal.

Clicarem a Acciones.

S’obrirà una nova relació.

Nosaltres només treballarem amb algunes de

les opcions de Control de Película.

Clicarem a Control de Película i tendrem la

relació d’accions possibles.

Bàsicament són: Vés a i ..., en passar per

sobre..., en marxa, atura’t, atura tots els sons

...

Assenyala l'acció “on”. Estam a un botó i vo-

lem que quan algú passi per sobre (“on”)

executi alguna acció



La paraula “on” està desactivada

Si la paraula “on” t’apareix desactivada, com a la imatge

del costat, serà que no tens seleccionat cap botó a

l’escenari.

Aquesta acció és només per a botons.

Per incorporar una ordre, una acció a la part dreta del panell accions s’ha de

clicar dues vegades seguides o arrossegar l’acció a la part dreta. Si en algun

moment t’equivoques pots esborrar l’acció senyalant-la i clicar la icona de

restar

A la part dreta del panell accions hauria de sortir això:

Són les diferents possibilitats que ens poden oferir els botons: en clicar (Presionar), en clicar i deixar

de fer-ho (Liberar), en deixar de clicar fora de la zona activa (Liberar Afuera), en passar per sobre

(Situar sobre Objeto)...

Un cop seleccionat Liberar (“release”) cal dir-li el que ha de fer. En el nostre cas és anar al fotogra-

ma número 2. Escollim “goto” (anar a...).

Ens apareixeran les següents informacions.



Per defecte, quan seleccionam “goto” surt sempre Ir a y reproducir.

Caldrà seleccionar Ir a y detener, per fer que quan cliquem el botó, vagi al fotograma que volem i

s’aturi. I a l’apartat Fotograma assenyalar el que volem. En el nostre cas, el número 2 per aquest

botó.

Hem donat les següents ordres:

“On”, acció de botó.

“Release”, clicar i deixar anar el botó.

“GotoAndStop”, anar fins un lloc i aturar.

“2”, nombre del fotograma on s’ha d’aturar la reproducció.

S’ha de fer el mateix dels altres botons: pel botó de Menorca el fotograma serà el 3 i pel botó

d’Eivissa-Formentera el fotograma serà el 4.

1.1.1. INSTRUCCIONS PER A FLASH MX 2004

Passarem ara les particularitats que presenta Flash Mx 2004 pel que fa a la programació de les acci-

ons.

El primer que hem de mirar és la distribució dels elements al panell de funcions, que presenta dife-

rències amb les versions anteriors.



Fixa’t que a la part esquerra de la pantalla tens dos apartats diferents:

El primer, d’aspecte semblant al del Flash Mx, ens permet accedir a les funcions disponibles,

classificades segons la seva tipologia.

El segon ens presenta els elements que formen part de la nostra pel·lícula. El que és més im-

portant que sempre ens mostra quin és l’element que tenim seleccionat. Això és molt impor-

tant, perquè així ens podem estalviar molts errors.

A la part dreta apareix la zona de programació, on s’aniran introduint les diferents accions que selec-

cionem. També podem accedir a aquestes a partir del símbol [+] que hi ha a la part superior d’aquesta

zona.

Seleccionarem el primer fotograma de la capa botons, i dins ella el botó Mallorca. Comprovarem que

aparegui a Selección actual.

Anirem a Funciones Globales – Control de clip de película. Farem doble clic per a seleccionar

l’opció on. A la part dreta apareix l’ordre i una llista desplegable on apareixen diferents opcions. Esco-

llirem release.

Ara posarem el cursor just a continuació del símbol { , anirem a la part esquerra de la pantalla i selec-

cionarem el grup d’accions Control de la línea de tiempo. A dins d’aquesta ens interessa Goto-

AndStop, que seleccionarem amb doble clic. A la part dreta la pantalla veurem que el cursor està a

dins d’un parèntesi, on s’ha d’entrar el número de fotograma. Escriurem, en el cas d’aquest botó, el

valor 2.



La cosa ha de queda tal com es mostra a la

imatge de la dreta. És molt important controlar

sempre la posició del cursor quan s’introdueixen

les accions o els seus valors, o bé la cosa no

funcionarà i apareixeran errors en reproduir la

pel·lícula.

Recorda que s’ha de fer el mateix dels altres botons: pel botó de Menorca el fotograma serà el 3 i pel

botó d’Eivissa-Formentera el fotograma serà el 4.

1.2. ATURANT AL PRIMER FOTOGRAMA

Si poses en marxa la pel·lícula, pràcticament no veuràs res, perquè va reproduint-se sense parar. Cal

aturar-la i posar-li una nova acció, just al principi per aturar aquest moviment constant.

El que anem a fer ara és incorporar una acció, però aquesta vegada no en un botó, sinó en un foto-

grama clau. Recorda que es poden posar accions en dos llocs: a la línia de temps (dins de fotogra-

mes clau) i als botons, com ja has fet.

Així doncs, crearem una nova capa i, per defecte ens crearà un fotograma clau en el primer fotogra-

ma. A aquest fotograma li posarem l’ordre “Stop”.

Cream una nova capa i li posam com a nom

Stop,

Per poder posar accions en un fotograma clau

cal tenir-lo seleccionat. S’ha de clicar sobre el

fotograma clau buit. Es posarà en negre com

la imatge.

Si tenim tancat el panell accions l’obrirem. Si ja el tenim ha d’aparèixer el següent:

És molt important que vegis la diferència entre el que hi ha ara i les accions dels botons. Abans



tenies al panell accions això:

Explicat això, anam a posar l’ordre “Stop”.

A la capa assenyalarem sobre “Stop”.

A la capa Stop li apareixerà una lletra “a” mi-

núscula que ens indica que hi ha una progra-

mació en aquest fotograma.

Ara ja pots provar la teva feina i observaràs que funciona correctament, l’únic problema que pots tenir

és que el títol només es veu al principi ja que no hem creat cap botó que ens porti al fotograma núme-

ro 1.


Recorda que el primer que has de fer, tal com s’acaba d’explicar, és crear una nova capa amb el nom

d’stop.

Seleccionarem la nova capa stop (que no té cap element), despleglarem la llista de funcions de Con-

trol de la línea de tiempo, i amb doble clic farem que aquesta aparegui a la part dreta de la pantalla,

on hi ha les accions a aplicar al fotograma actiu.

Fixat’ que, en aquest cas, les accions afecten al conjunt del fotograma i no a un element concret d’ell,

com era el cas anterior (s’aplicaven a un botó). Ho pots comprovar mirar l’apartat Selección actual

de la part esquerra de la pantalla.

“Stop” permet aturar qualsevol arxiu

Pensa que aquesta acció tan senzilla, aturar un mo-

viment, et pot servir per tots els arxius que has fet

durant el curs i que no volies que es repetissin cons-

tantment. Si hi poses un “stop” al final quan arribi a

aquest punt s’aturarà.



Activitat d’entrega obligada 1

Crea un fitxer seguint les instruccions que hem anat donant fins ara. Desa’l amb el

nom de web.1fla i envia’l al teu tutor o tutora. Primer, com sempre, crea el fitxer swf i

comprova el seu correcte funcionament.

Activitat opcional 1

Ampliant l’exercici anterior, hauràs d’introduir uns clips de pel·lícula a cada fotograma,

un per cada lloc: un per Mallorca, un per Menorca...

Aquests clips han de tenir un text que pots trobar a la carpeta textos d’aquest mòdul.

Utilitza els que vulguis, però intenta aconseguir un efecte semblant al que et propo-

sem a l’arxiu web_text.swf de la carpeta interactivitat1.

Per a aconseguir l’efecte, s’ha aplicat una màscara a un text que té una interpolació

de moviment avall - amunt.

2. INTERACTIVITAT (II)

Farem un nou entorn de navegació amb programació i botons, però amb opcions diferents a les ante-

riors.

Incorporaràs diverses imatges a l’escenari i crearàs uns botons que et permetin passar al fotograma

següent i a l’anterior. Crearàs una petita galeria d’imatges.

Necessitaràs un parell de botons i unes imatges. Les imatges les pots trobar a la carpeta imat-

ges_plantes dins interactivitat2.

Veuràs que hi ha cinc imatges de plantes: llorer, carxofera, fonoll, alfàbrega i llimonera.

El resultat final de com ha de quedar l’exercici el tens a l’arxiu web2.swf a la carpeta interpolaci-

ons2.

L’esquema de la feina hauria de ser així:



Fotograma1 Fotograma2 Fotograma3 Fotograma4 Fotograma5 Fotograma6

Capa Acció

Stop Stop

Capa Títol Aquí posa el

títol

Capa

Imatges Imatge 1 Imatge 2 Imatge 3 Imatge 4 Imatge 5

Capa

Botó més Botó per poder passar al fotograma següent. Aquí no!

Botó menys Aquí no! Botó per poder passar al fotograma precedent.

Com les imatges són grans, et recomanam que l’escenari també ho sigui: 800 per 750.

Abans de posar res a l’escenari cal que tinguis organitza-

da la biblioteca, que creïs un parell de botons i que impor-

tis les imatges (després d’importades es poden esborrar

de l’escenari).

En projectes ja una mica complicats, és molt important

tenir-ho tot molt ordenat. Per això classifica els objectes

de la biblioteca creant dues carpetes.

Abans de posar res a l’escenari caldrà crear totes les

capes necessàries.

Fixa’t que hem creat dues capes pels botons.

A la capa imatges hem incorporat uns fotogrames clau buits (amb F6), un per cada imatge menys al

primer on no hi haurà res.

Hem arrossegat cada imatge al seu fotograma. Les hem centrat.



Els botons que necessites han de ser com tu vulguis, però que assenyalin el fet de passar endavant o

endarrere. Crea uns botons específics per aquesta feina.

Pensa en la possibilitat de crear un sol botó, de duplicar-lo i després girar-lo.

Hem arrossegat un botó més i un botó menys. Fixa’t que no és necessari que el botó més apare-

gui al darrer fotograma, no tendria sentit tenir un botó de passar endavant si no hi ha res més. El

mateix passa amb el botó menys, no té sentit que estigui al primer fotograma.

Per allargar la presència d’un element a l’escenari cal utilitzar F5 i per esborrar fotogrames majúscu-

les+F5.

Quan tenguem els botons posats a l’escenari, els assenyalarem l’un després de l’altre per poder-hi

afegir les accions.

2.1. AFEGINT ACCIONS ALS BOTONS DE NAVEGACIÓ

Als botons els donam l’ordre “on” i després la de “goto” ...

El botó més haurà de tenir la següent programació:

En lloc d’anar a un número de fotograma concret, el que farem serà seleccionar on posa tipo i escollir

fotograma siguiente. D’aquesta manera el botó ens enviarà al fotograma següent i es pararà.



Ha de quedar d’aquesta manera.

El botó menys tendrà la següent:

Assenyalarem el botó a l’escenari. Obrirem el panell Acciones. Escollirem “on” i “goto” i a l’apartat

Tipo seleccionarem fotograma anterior.

Ha de quedar d’aquesta manera.

Ens falta incorporar un “stop” al principi de la pel·lícula i un títol a la capa corresponent. Títol que

només ha d’aparèixer al primer fotograma.




Recordem el que hem de fer: afegir als dos botons de navegació que hem creat les accions d’anar al

fotograma anterior (botó menys) o següent (botó més), segons correspongui.

Començarem pel botó més, que ens ha de portar al fotograma següent. Com sempre, la primera

cosa que haurem de fer és seleccionar el botó i que aquest aparegui com a tal a la part esquerra de la

pantalla.

A continuació, desplegarem la llista d’accions de Control de clip de película i a ella seleccionarem,

amb doble clic, on. De la llista d’opcions que apareix a la part dreta de la pantalla, escollirem release.


cionarem el grup d’accions Control de la línea de tiempo. A dins d’aquesta ens interessa nextFra-

me, que seleccionarem amb doble clic. En aquest cas, i malgrat dels parèntesis que hi ha a continua-

ció de l’acció, no s’ha de posar cap paràmetre.

Després d’assignar les accions al botó més, passarem a fer el mateix amb el botó menys. Tot es fa

d’una manera semblant, és a dir, començarem per seleccionar el botó, després desplegarem la llista

d’accions de Control de clip de película i a ella seleccionarem, amb doble clic, on. De la llista

d’opcions que apareix a la part dreta de la pantalla, escollirem release.




cionarem el grup d’accions Control de la línea de tiempo. A dins d’aquesta ens interessa prevFra-

me, que seleccionarem amb doble clic.

Ara ja només ens falta incorporar un “stop” al principi de la pel·lícula i un títol a la capa corresponent.

Títol que només ha d’aparèixer al primer fotograma.

Activitat d’entrega obligada 2

Crea un fitxer seguint les instruccions que hem anat donant fins ara. Desa’l amb el

nom de web2.fla i envia’l al teu tutor o tutora. Primer, com sempre, crea el fitxer swf i

comprova el seu correcte funcionament.



3. PUBLICACIÓ DE LES PEL·LÍCULES DE FLASH

La finalitat darrera de les pel·lícules (és a dir, dels fitxers swf) creades amb Flash és la seva publica-

ció, perquè així puguin ser visualitzades per tercers.

Existeixen fins a quatre sistemes que permeten aquesta publicació:

El fitxer swf pròpiament dit

La conversió a altres formats

La seva inclusió a una pàgina web

La creació d’un fitxer executable (un exe)

3.1. EL FITXER SWF PRÒPIAMENT DIT

Només podran reproduir el fitxer els que tenguin instal·lat el programa Flash, perquè aquest instal·la

una versió executable del reproductor, que no necessita cap navegador. S’empra principalment per a

la visualització de les pel·lícules a les seves dimensions reals, i per fer proves amb elles.

3.2. LA CONVERSIÓ A ALTRES FORMATS

El Flash dedica un apartat específic a l’exportació dels seus fitxers a altres formats gràfics. Però cap

d’ells ofereix les possibilitats que té el format original.

Hi accedirem des d’Archivo > Configuración de la publicación. La finestra que apareix té, per defecte,

tres pestanyes: Formatos (on seleccionarem aquells que volem per al nostre fitxer), Flash (permet

configurar aspectes concrets del fitxer swf) i HTML (per a poder configurar una pàgina web que con-

tendrà el nostre fitxer swf).



Després de feta la configuració del format (o formats) de publicació, pitjarem el botó Publicar. A la

carpeta on hi ha el fitxer fla es desaran els que acabam de crear. També ho pots fer des d’Archivo >

Publicar.

Passarem ara a comentar les diferents possibilitats que ens ofereix la finestra de Configuración de

publicación. Començarem per la primera d’elles, Formatos.

Apareix un llistat de tots els formats disponibles per a la publicació. Per defecte, estan preseleccionats

Flash i HTML. Si en volem d’altres, simplement els hem d’activar. Quan es fa en la gran majoria dels

formats s’obre una nova pestanya per a la configuració d’aspectes concrets de l’exportació.

Flash: Es refereix a paràmetres concrets de la publicació del fitxer swf. En general, els valors que allí

es proposen són perfectament vàlids, i no és necessari canviar-ne cap.



Només comentar l’apartat de Proteger frente a la importación. Si no està activada aquesta casella,

els fitxers swf es poden importar (amb Archivo > Importar). De tota manera, s’importa simplement una

successió de fotogrames. Es perden els objectes individuals i tota la programació desapareix. Però si

fins i tot així un és prou gelós de la intimitat dels seus fitxers, pot activar la casella i posar una contra-

senya. El fitxer es pot reproduir normalment, però no importar.

HTML: Si bé el més habitual és emprar un editor de pàgines web per a la inclusió d’un fitxer swf a

una pàgina HTML, en cas de necessitat es pot fer directament des de Flash. La pàgina resultant in-

clourà només el fitxer swf. De tota manera, i com veurem més endavant, el fitxer HMTL que crea

Flash ens pot servir de punt de partida per a la seva posterior modificació. A pestanya de Formatos,

s’hauran de seleccionar swf i html.

A més de crear la pàgina web amb el fitxer swf, podrem controlar tota una sèrie de paràmetres de

presentació i reproducció:

Reproducción: És l’apartat més important de tots, perquè ens permetrà seleccionar diferents

valors, com per exemple Pausa al comienzo (si la pel·lícula té un sistema de control de navega-

ció, com per exemple un botó); Reproducir indef. (si la deseleccionam qualsevol dels fitxers que

hem creat que no tenien programació i, per tant, no s’aturaven, ara només es reproduiran una ve-

gada; Visualizar menú (permet que l’usuari tengui un cert control en la reproducció del fitxer amb

el menú que apareix quan es pitja el botó dret del ratolí damunt la pel·lícula, però si el desactivam

no podrà fer res. La darrera de les opcions Fuente de dispositivo, no convé tocar-la, perquè po-

dria afectar a la visualització del text amb determinades fonts que no estiguin instal·lades a

l’ordinador on es repodueixi.

Alineación HTML: En teoria, controla l’alineació de la pel·lícula respecte al document HMTL. El

valor per defecte, Predeterminado, segons el programa, centra el fitxer, però en realitat el deixa

a l’esquerra, perquè el valor d’alineació apareix buit al codi font HTML. El que si funciona correc-

tament és l’alineació a la dreta. Els altres valors tampoc canvien res.

Pel que fa a la resta de paràmetres, els podem deixar com estan.



Activitat d’introducció 1

Converteix els fitxers menta.fla i web1.fla a format HTML. Visualitza’ls amb un

navegador, i, si vols, pots intentar canviar alguns dels seus paràmetres.

GIF: Amb aquesta opció podrem exportar el fitxer de Flash a format gràfic GIF. Entre les opcions dis-

ponibles, podem seleccionar que es mantengui l’animació original del fitxer, o escollir el nombre de

vegades que s’ha de repetir. Si es vol fer aquesta exportació, s’ha de canviar l’apartat tipo de paleta i

seleccionar Websnap adaptable, per a millorar la qualitat. De tota manera s’han de tenir presents

dues coses:

Els fitxers GIF permeten un màxim de 256 colors i si tenim fotografies al fitxer la qualitat minvarà

molt.

Un fitxer swf que ocupa 3 Kb es pot convertir en un GIF de 52 Kb. Per tant, si s’ha d’incloure a

una pàgina web, la càrrega de la imatge serà molt més lenta.

El format GIF només és aconsellable en el cas d’haver de posar una animació a una pàgina alternati-

va per a aquells que no tenguin instal·lat el reproductor de Flash.

L’animació només s’exportarà correctament si el fitxer de Flash té l’animació completa a la línia de

temps de l’escena. Dit d’altra manera, només exporta els fotogrames, no intenta executar el que s’ha

inserit com a símbol.


Agafa un fitxer fla dels que has creat al llarg del curs i converteix-lo a format GIF.

Compara els dos fitxers resultants: swf i GIF



JPEG: Poca cosa a comentar. El JPG és un format d’imatge estàtic, per la qual cosa simplement

s’exportarà el fotograma que estigui seleccionat en aquell moment. Les opcions són molt escasses, i

es limiten a les dimensions i el grau de compressió de la imatge.

PNG: Altra vegada un format d’imatge estàtic, per tant, només permet l’exportació d’un determinat

fotograma de la pel·lícula. De tota manera, en ser un format molt més potent que el JPG o el GIF,

podrem escollir moltes més opcions, com pot ser, per exemple, la transparència alfa del fons de la

imatge.

Proyector Windows / Macintosh: Aquesta opció, que no té cap paleta de paràmetres és molt inte-

ressant, perquè ens permetrà un fitxer executable a partir de qualsevol fitxer de Flash, i que per a la

seva reproducció a un altre ordinador no necessitarà cap reproductor extra ni navegador web. Sim-

plement seleccionam aquesta opció, i en publicar ja tendrem el fitxer creat. Només té l’inconvenient

que el fitxer augmenta la seva grandària en un 800 Kb, però ens pot ser molt útil per a la creació de



projectes relativament complexos i que vulguem distribuir, per exemple, en CD-ROM, sense necessi-

tat de saber si el que l’executarà té instal·lat o no el Macromedia Flash Player. Si seleccionam el

Proyector Macintosh es crearà un fitxer amb extensió hqx que es podrà reproduir als ordinadors

amb aquest sistema operatiu. Com a curiositat podem dir que aquest segon reproductor afegeix més

de 1,4 Mb al fitxer original.

Activitat d’introducció 2

Converteix els fitxers menta.fla i web1.fla a format de projector de Windows.

Comprova la seva grandària i prova’ls.

QuickTime: Aquest format permet exportar un fitxer de Flash a una pel·lícula en format QuickTime (si

es té instal·lat el reproductor). En tractar-se d’una pel·lícula, es podria reproduir tot allò que hi hagués

al fitxer original, mantenint fins i tot la interactivitat. Dit d’altra manera, els botons funcionen perfecta-

ment.

El primer que haurem de fer, serà anar a la pestanya Flash i

seleccionar a Versión Flash Player 4. Per un problema de com-

patibilitat entre Flash i QuickTime, si no es fa aquest canvi apa-

reix un missatge d’error. Les darreres versions de QuickTime

(6.5) ja suporten el Flash Player 5. Només es tracta de provar.

Tornam a la pestanya de QuickTime. Els paràmetres de publicació dependran del contingut i la finali-

tat de la pel·lícula:

A l’apartat Controlador, podrem seleccionar el sistema de botons de control de pel·lícula que

volem que apareguin en reproduir. Ninguno, no en mostrarà cap, si bé ens quedarà la possibilitat

de controlar amb els menús del QuickTime. Estándar, presenta el sistema de control habitual als

reproductors.



A l’apartat Reproducción, podrem seleccionar Reproduir indefinidamente, si volem que la

pel·lícula es reprodueixi contínuament, o Pausa al comienzo, que haurem de seleccionar per a

aquells fitxers que contenguin interactivitat.


Converteix els fitxers menta.fla i web1.fla a format QuickTime. Com el primer d’ells

no té interactivitat, pots seleccionar Reproduir indefinidamente. El segon, en canvi,

si que en té, per la qual cosa hauràs d’escollir Pausa al comienzo. Pel que fa als

controladors, pots fer que en tengui i l’altre no. Visualitza els fitxers resultants.

3.3. CREACIÓ D’UNA PÀGINA WEB AMB UN FITXER FLASH AMB

DREAMWEAVER

Macromedia Dreamweaver està considerat un dels millors editors de pàgines web en mode visual

(allò que anam creant és el que es visualitzà després al navegador) que hi ha actualment al mercat.

En realitat, permet crear tot un lloc web de la complexitat que es vulgui.

Com ha estat creat per la mateixa empresa que el Flash, ambdós programes treballen perfectament

coordinats.

Aquí no farem un curs de Dreamweaver i s’ha de suposar que els que vulguin seguir aquest apartat ja

tenen un cert coneixement del programa.

De fet, a la barra de botons Común apareix un botó específicament

dedicat a la inclusió de fitxers de Flash.

També hi podem accedir des de la barra Media, que a més d’incloure

fitxers de Flash ja existents, ens permetrà crear botons o textos en

aquest format, sense la necessitat de tenir instal·lat el mateix Flash.

Per estalviar problemes posteriors, convé tenir tres coses ben clares:

Els fitxers en format swf han d’estar a la mateixa carpeta que el nostre lloc web, o bé a una que

estigui inclosa a dins aquesta. Si no es fa així, Dreamweaver intentarà solucionar el problema co-

piant-lo ell mateix, però convé no arriscar-se.

Els fitxers fla, com ja hem dit diferents vegades, només serveixen per al propi programa Flash.

Dreamweaver no pot fer res amb ells. Això és només un avís per a despistats.

Sempre, abans de començar a incloure objectes de qualsevol tipus a una pàgina web, s’ha de

guardar. La raó és que tots aquests objectes (imatges, sons, fitxers swf, vídeos...) han de conèi-

xer la localització d’aquesta pàgina. Com sempre, Dreamweaver intentarà solucionar el problema

si no es fa així, però val més no fer proves.



Suposarem, per tant, que ja teniu creada (i

desada) la pàgina, i que pitjau el botó per a

incloure un fitxer swf.

Apareix un quadre de diàleg on es mostra

el contingut de la carpeta principal del vos-

tre lloc web. Podeu navegar per ella o per

les seves subcarpetes fins a trobar el fitxer

swf que s’ha d’incloure.

No és que vulguem ser pesats, però anau

alerta i no equivocar-vos posant el fitxer fla

en lloc del swf. De fet, els fitxers fla no

haurien d’estar a la carpeta del lloc (ja sa-

bem que nosaltres hem incomplit aquesta

norma).

El que apareix a pantalla és una cosa com aquesta:

Com podeu veure, de moment el fitxer de Flash està representat per un requadre de

color gris amb el símbol del programa que l’ha creat al centre. Per defecte, apareix

alineat a l’esquerra, però si el volem centrar, posam el cursor a la dreta del fitxer, a

la mateixa línia a la barra de Propiedades del Dreamweaver, seleccionam

l’alineació de text centrada.

Ara, si selecciona l’objecte de Flash, veurem que la barra de Propiedades ens ofereix moltes possibi-

litats de control del fitxer:



Si ens fixam bé, veurem que molts dels paràmetres que aquí es controlen són els mateixos que es

permetia fer la publicació en format HTML des del mateix Flash. Però ara ho tenim a la nostra pròpia

pàgina web, on hi ha moltes més coses i el fitxer Flash és només un element més d’un conjunt

d’objectes. Comentarem alguns d’ells:

Bucle: Fa que la pel·lícula es reprodueixi de manera continuada. Si a la programació s’inclou

alguna ordre d’aturada, tal com explicat abans a aquest mòdul, és indiferent el que es posi aquí.

Rep. autom.: Posa en funcionament la pel·lícula en carregar la pàgina. Només es canvia el valor

per defecte quan volem controlar l’inici de la reproducció des d’un altre objecte de la mateixa pà-

gina: botó, un altre fitxer de flash, línia de temps...

Espacio V / H: Permet controlar l’espai en blanc, en píxels, entre l’objecte de Flash i la resta

d’objectes de la pàgina (per exemple, el text).

Calidad: Controla la qualitat de reproducció de la pel·lícula. El millor és deixar el valor com està,

perquè no convé reduir la qualitat per aconseguir un petit augment de velocitat. De tota manera,

en general, la velocitat de reproducció dels fitxers és prou elevada.

Escala: Com en el cas anterior. Millor no tocar.

Alinear: Permet canviar l’alineació de l’objecte de Flash respecte a altres, com pot ser el text, una

altra imatge, les cel·les d’una taula. En aquest cas, els resultats són els mateixos que amb una

imatge qualsevol.

Fnd: Permet establir un color de fons per a la pel·lícula. Convé fer proves per estalviar problemes.

A més, hi ha quatre botons: Editar (obre el Flash per a modificar el fitxer fla, demanant prèvia-

ment on és el fitxer, si és que no s’ha posat això abans a l’apartat origen); Restab. Tamaño (re-

cupera les dimensions originals del fitxer, si hem canviat aquestes i el resultat no ens agrada);

Reproducir (posa en funcionament la pel·lícula a la pàgina, perquè es vegi el resultat, i la podrem

aturar amb el mateix botó).

Paràmetros: Permet afegir més paràmetres de control de la reproducció de la pel·lícula, a més

dels que ja acabam de comentar. Ens sembla que això ultrapassa el contingut d’aquest curs

d’iniciació.

Després de fetes les proves pertinents, guardarem la pàgina web i la provarem al navegador.


Crea dues pàgines web, una amb el fitxer menta.swf i l’altra amb el fitxer web1.swf.

Afegeix d’altres elements, a més dels fitxers de Flash. Varia els seus paràmetres i

prova-les al navegador.



3.4. CREACIÓ D’UNA PÀGINA WEB AMB UN FITXER FLASH AMB

OPENOFFICE

El paquet ofimàtic OpenOffice inclou també un editor de pàgines web, al qual aprendrem a afegir fit-

xers swf a dins d’una pàgina HTML.

S’ha d’advertir, abans de començar, que OpenOffice no ofereix les facilitats ni les prestacions d’un

programa com Macromedia Dreamweaver, especialitzat en l’edició de pàgines web. De tota manera,

com veurem, podrem afegir sense massa problemes objectes de Flash a un document HTML..

Recordarem, abans de començar, les mateixes tres coses que ja hem dit fent referència a la creació

de pàgines web amb Dreamweaver:

Els fitxers en format swf han d’estar a la mateixa carpeta que nostre lloc web, o bé a una que

estigui inclosa a dins aquesta. En cas contrari, funcionarà tot al nostre ordinador, per enviar-la al

servidor remot, el fitxer no es visualitzarà. Estarà molt tranquil al nostre ordinador, però no

l’haurem enviat.

Els fitxers fla, com ja hem dit diferents vegades, només serveixen per al propi programa Flash.

OpenOffice no pot fer res amb ells. Això és només un avís per a despistats.

Sempre, abans de començar a incloure objectes de qualsevol tipus a una pàgina web, s’ha de

guardar. La raó és que tots aquests objectes (imatges, sons, fitxers swf, vídeos...) han de conèi-

xer la localització d’aquesta pàgina. OpenOffice ho intentarà corregir, però val més no arriscar-se.

Desactivar la visualització d’imatges.

Quan ja tenim l’editor de pàgines web a punt, la primera cosa que haurem

de fer és deshabilitar la visualització d’imatges.

La raó es troba en el fet que, quan inserim un objecte de Flash (un fitxer

swf), aquest es posa en funcionament de seguida, i ja no el podrem ma-

nipular de cap de les maneres. Estau aviats

A més de la deshabilitació d’imatges, haurem de fer algunes modificacions al codi font de la nostra

pàgina web. No us heu d’espantar. Si voleu, aquestes són mínimes i les pot fer qualsevol, per molt

que no tengui coneixements de llenguatge HTML.

Després de feta la desactivació d’imatges, ens anirem a la posició on voler inserir l’objecte de Flash.

Per raons de comoditat, és convenient deixar com a mínim una línia en blanc abans i una altra des-

prés de la seleccionada per al fitxer swf, Seleccionarem Insereix > Objecte > Extensió.

Al quadre de diàleg que apareix pitjarem el botó Navega. N’apareixerà un altre, per seleccionar el

fitxer. A la part inferior d’aquest, desplega la llista de Tipus de fitxer i selecciona Shockwave Flash.

Ara només ha de cercar el fitxer swf que t’interessa i seleccionar-lo. En tornar al quadre de diàleg

d’Insereix un connector confirma amb D’acord.



A pantalla apareix un quadrat, que és fitxer de Flash. Més o menys una cosa com aquesta:

Fixa’t que l’objecte, tengui la forma que tengui, apareix com a un quadrat. Això ho haurem de modif i-

car ara mateix.

Si accedim a les propietats de l’objecte (amb l’objecte seleccionat, botó dret del ratolí, seleccionant

Objecte, i després anant a la pestanya Tipus), veurem que les dimensions es poden posar en centí-

metres, en percentatge i en altres mesures, però no en píxels (que és com treballar Flash). La con-

versió de píxels a centímetres sempre serà relativa, perquè no són mesures realment comparables.



Per tant, no ens quedarà altre remei que anar a la barra d’eines lateral i seleccionar el botó

Font HTML (el darrer de tots).

No s’han d’espantar aquells que no tenguin coneixement de llenguatge HTML, perquè la

modificació a fer és mínima. Però hem de saber les mesures en píxels del fitxer swf. Si

ombrin el fitxer fla original es tracta només de mirar la grandària de l’escenari (per defecte,

550x400 píxels).

Fixa’t que al codi font has de tenir una línia com aquesta:

Els valors a modificar són els dels apartats WIDTH (amplada) i HEIGHT (alçada). Posa els del fitxer

original, per exemple, 550x400. La cosa hauria de quedar així:

Ara les dimensions són ja les correctes.

Per fer d’altres modificacions, ho haurem de fer, amb l’objecte de Flash seleccionat, des de la barra

d’objectes (a la part superior de la pantalla.

Hem seleccionat aquelles opcions que pensam que ens seran especialment útils:

Alineació: Permet posar la imatge a l’esquerra o la dreta de la pàgina web.

Ajustament: Marca per on desplaçarà el text al voltant de la imatge. Podem seleccionar cap (el

text no envolta la imatge), esquerra o dreta (en aquests casos, el text l’envolta pel costat corres-

ponent). Si volem que la cosa funcioni, haurem de fer coincidir els valors d’ajustament del text i de

l’alineació. O tots dos dreta, o tots dos esquerra.

Propietats: Permet accedir al quadre de propietats de l’objecte i modificar qualsevol altre parà-

metre, com, per exemple, la distància entre l’objecte i el text. Però això ja és cosa vostra.

Si ho fem tot bé, ara ja podem tornar a desar la pàgina (de fet, convé fer-ho sovint per estalviar pro-

blemes), i visualitzar-la al navegador. Felicitacions si tot funciona correctament.

No hem parlat en cap moment de com centrar un objecte de Flash a una pàgina, simplement perquè

no es pot en mode gràfic. Per fer-ho haurem de modificar directament el codi font.

Accedirem al codi font de la mateixa manera que ho hem fet anteriorment.



El punt de partida seria, per exemple, aquest:

Haurem de fer els següents canvis:

Canviar el valor de la marca de paràgraf <P> que hi ha abans de l’EMBED que controla l’objecte

de Flash per <P ALIGN=CENTER>. És a dir, li manam que centri el paràgraf.

Canviar el valor <ALIGN=LEFT> de l’objecte de Flash per <ALIGN=MIDDLE>. Ara el que estam

fent és manar que centri l’objecte pròpiament dit.

El resultat final hauria de ser, més o menys, aquest:

Si tornes a la pantalla de visualització la cosa hauria d’haver funcionat i l’objecte hauria d’estar cen-

trat. Torna a desar la pàgina.

De tota manera, si proves la pàgina amb el Mozilla o el Firefox t’emportaràs la sorpresa de què el

centrat no funciona, per una incompatibilitat amb les ordres HTML que hem emprat.

Podem fer encara una nova modificació, però s’ha d’anar molt alerta en fer aquesta la darrera de to-

tes, i després desar, sense fer més canvis. OpenOffice té la mania de treure del codi font de la pàgina

web allò que no li agrada, i ho tornarà a deixar com abans.

Tornam altra vegada a la pantalla de codi font. Tendrem més o menys el que hi ha una mica més

amunt.

Haurem de fer el següent:

Canviar el <P ALIGN=CENTER> que hi ha abans de l’EMBED que controla l’objecte de Flash per

<DIVA ALIGN=CENTER>.

Canviar el tancament de paràgraf </P> que hi ha després de l’EMBED que controla l’objecte de

Flash per un tancament del DIV, o sigui per </DIV>.

Aquest sistema funciona, en teoria, als dos navegadors.


Crea dues pàgines web, una amb el fitxer menta.swf i l’altra amb el fitxer web1.swf.

Afegeix d’altres elements, a més dels fitxers de Flash. Varia els seus paràmetres i

prova-les al navegador.



Algunes pàgines més fetes amb Flash

Si un es dedica a cercar coses per Internet, de vegades es pot trobar vertaderes

meravelles fetes amb Flash. I si no, mirau aquesta i disfrutau:

http://www.tibao.fr

Quan aconseguiu fer una cosa semblant, ja podreu dir que dominau el Flash.

També podeu veure tota una sèrie de petits jocs, on hi trobaràs també aplicacions

didàctiques, tots ells creats amb Flash i traduïts al català a:

http://www.jocsweb.com/

Com podeu comprovar, aquestes són més senzilles que l’anterior.

Activitat de consolidació i reforç 2

Consulta el document d’ampliació dedicat a l’ús del mode expert en la introducció

d’ordres d’ActionScript. Porta el nom de Flash6_expert.pdf i el trobaràs a la carpeta

Documents.

http://www.tibao.fr/

http://www.jocsweb.com/