En aquesta pràctica us introduireu en el llenguatge de programació ActionScript.

Realitzareu dues pel·lícules en les quals utilitzareu algunes de les accions bàsiques que us permetran dotar-les d'interactivitat. En la primera pel·lícula creareu dos botons, un per engegar l'acció i l'altre per aturar-la. En la segona, afegireu nous botons que possibilitaran avançar, retrocedir o desplaçar-se a un punt concret de la línia de temps.

L'objectiu d'aquesta pràctica és:

• Saber usar les accions bàsiques del llenguatge de programació ActionScript.
• Saber crear interactivitat en una pel·lícula Flash.

Preparació de l'animació

 » Descarregueu el fitxer aeri.zip i descomprimiu-lo a la vostra carpeta de treball.

 » Obriu el Flash. Activeu el menú Archivo | Abrir... i cerqueu el fitxer aeri.fla que acabeu de descomprimir.

• Tot i que en aquesta pràctica us trobeu amb un escenari buit, veureu que ja us hem facilitat part de la feina: observeu que teniu definida l'estructura de capes de la pel·lícula amb un fotograma clau buit a cadascuna i que a la Biblioteca hi ha els símbols que utilitzareu. El que haureu de fer és crear l'animació i els botons que us permetran controlar-la.

 » Indiqueu un color blau per al fons de l'escenari.

 » Feu la composició inicial de la pel·lícula arrossegant a l'escenari els símbols de la Biblioteca. Recordeu de protegir les capes.

• Pareu atenció de situar cada símbol dins la seva respectiva capa. Observeu també que la casa s'ha posat sobre l'aeri per amagar-lo i simular que surt de dins.

 » Seleccioneu l'eina Línea i dibuixeu una línia que uneixi l'aeri amb la muntanya. Podeu amagar la casa per treballar amb més comoditat. Feu coincidir el punt de control del clip de l'aeri amb l'extrem de la línia.

 » Activeu l'eina Selección i corbeu la línia: feu que simuli el cable del telefèric. En acabar, cliqueu-hi a sobre amb el botó secundari del ratolí i copieu-la.

 » Cliqueu sobre el fotograma 1 de la capa Guía: aeri per seleccionar-lo. Tot seguit, cliqueu a l'escenari amb el botó secundari del ratolí i seleccioneu Pegar in Situ. D'aquesta manera ja teniu la guia de moviment per l'aeri idèntica a la línia anterior que simula el cable.

 » Allargueu la línia de temps de les capes terra, muntanyes, cable, Guia: aeri i casa. Cliqueu sobre el fotograma 60 de cada capa amb el botó secundari del ratolí i seleccioneu l'opció Insertar fotograma (F5).

 » Cliqueu sobre el fotograma 1 de la capa aeri amb el botó secundari del ratolí i seleccioneu l'opció Crear Interpolación de movimiento.

 » Cliqueu sobre el fotograma 60 i inseriu-hi un fotograma clau (F6). Desplaceu l'aeri fins a la muntanya i feu-lo més petit. Torneu a fer coincidir el punt de control del clip de l'aeri amb l'extrem de la línia.

 » Premeu Ctrl+Retorn per provar la pel·lícula.

• Ara, per arrodonir l'efecte, fareu que el viatge de l'aeri sigui d'anada i tornada i que estigui uns moments aturat a la muntanya.

 » Cliqueu sobre el fotograma 80 i inseriu-hi un fotograma clau (F6).

 » Cliqueu sobre el fotograma 140 i inseriu-hi un fotograma clau (F6). Desplaceu un alatra vegada l'aeri fins a la casa.

• Recordeu que podeu saber la mida i la posició exacte que tenia si cliqueu sobre l'aeri del fotograma 1 i mireu el panell de Propiedades.

 » Allargueu la línia de temps de les capes terra, muntanyes, cable, Guia: aeri i casa fins al fotograma 140.

 » Torneu a provar la pel·lícula. Enregistreu-hi els canvis

• Començareu per crear dos botons, play i stop, sobre els quals, posteriorment, implementareu l'acció a realitzar.

 » Creeu una capa nova per sobre de la capa casa i anomeneu-la accions.

 » Seleccioneu l'eina Rectángulo, activeu el modificador Rádio de rectàngulo redondeado , indiqueu un valor de 4, per exemple, i dibuixeu-hi un quadrat.

 » Feu un doble clic sobre el dibuix del quadrat per seleccionar-lo. Premeu F8 per convertir-lo en un símbol, indiqueu Botón per al comportament i anomeneu-lo Engegar.

 » Feu un doble clic sobre el botó per editar-lo. Afegiu-hi una nova capa. Poseu els noms fons i dibuix a les capes.

 » Dibuixeu un triangle a l'estat Reposo de la capa dibuix. Inseriu un fotograma normal (F5) en l'estat Presionado d'aquesta capa.

 » Inseriu un fotograma clau (F6) a l'estat Sobre de la capa fons i canvieu el color del farciment. Repetiu aquestes accions en els estats Presionado i Zona activa.

 » Dupliqueu el símbol del botó Engegar de la Biblioteca i anomeneu-lo Parar. Editeu el símbol i canvieu el triangle que hi ha a la capa dibuix per un quadrat. Arrossegueu una instància d'aquest botó a l'escenari.

 » Utilitzeu el panell Alinear per situar correctament els botons a l'escenari. Varieu la seva mida, si cal.

• Ara, a través del panell de Acciones, afegireu les accions ActionScript als botons.

 » Activeu el menú Ventana | Paneles de desarrollo | Acciones, o premeu F9 per fer-hi aparèixer el panell de Acciones.

 » Cliqueu sobre el botó Engegar per seleccionar-lo. D'aquesta manera, assegureu que les accions que posareu resten lligades al botó i no cal que les escriviu en un altre lloc.

 » Cliqueu sobre Funciones globales del panell de Acciones per accedir a les diferents opcions. Cliqueu tot seguit sobre l'opció Control de clip de película i feu un doble clic sobre l'acció on per escriure aquesta acció.

 » Feu un doble clic sobre el paràmetre release perquè quedi escrit dins del paréntesi.

» Situeu el cursor al final de la línia on (release) {| i premeu Retorn per fer un salt de línia i poder escriure entre les dues claus: { }.

 » Cliqueu ara sobre l'opció Control de la línea de tiempo i feu un doble clic sobre l'acció play per escollir-la. Esborreu la línia en blanc sobrant, si és el cas.

• Les ordres que heu escrit us han d'haver quedat com a l'exemple:

• La traducció de les accions ActionScript que heu posat seria la següent:

 » Cliqueu ara sobre el botó Aturar de l'escenari i repetiu els passos anteriors per associar-hi l'acció stop.

• Observeu que la pel·lícula s'ha engegat sense necessitat de clicar sobre el botó Engegar tot i que els botons funcionen bé. Per arreglar aquest problema afegireu una acció que aturi la pel·lícula en el moment que aquesta engegui.

 » Cliqueu sobre el fotograma 1 de la capa accions.

 » Cliqueu tot seguit sobre l'opció Control de la línea de tiempo del panell Acciones i feu un doble clic sobre l'acció stop.

• En aquest cas, a diferència de les accions associades als botons, heu associat l'ordre stop(); a un fotograma.

 » Torneu a provar la pel·lícula.

 » Deseu la pel·lícula.

• En aquesta segona pràctica realitzareu una presentació de retrats d'artistes -obra de Josep Malagarriga- tot simulant l'exposició en una galeria d'art. Com en la pràctica anterior, ja us trobareu amb la interfície iniciada i el que haureu de fer consistirà en completar l'animació i crear els botons que us permetran controlar-la.

 » Descarregueu el fitxer galeria.zip i descomprimiu-lo a la vostra carpeta de treball.

 » Activeu el menú Archivo | Abrir... i cerqueu el fitxer galeria.fla que acabeu de descomprimir.

• Observeu l'estructura de capes de la pel·lícula: la capa marc conté el requadre groc, la capa quadres conté 22 fotogrames clau que inclouen els 21 retrats -excepte el fotograma 1 que actua de portada-. La resta de capes són buides: a la capa artistes escriureu els seus noms, a la capa títol posareu el nom de la galeria d'art i a la capa accions situareu els diferents botons.

 » Seleccioneu tots els fotogrames de la capa artistes, cliqueu amb el botó secundari del ratolí sobre la selecció i trieu l'opció Convertir en fotogramas clave.

 » Activeu una altra vegada l'eina Texto i seleccioneu el tipus de lletra, la mida i el color. Tot seguit aneu clicant sobre cada fotograma clau -heu de començar pel segon- i escriviu-hi el nom de l'artista que pertoqui. Utilitzeu el panell de Propiedades per ajustar la posició exacta (X: Y:) d'aquests noms en tots els fotogrames.

• També podeu crear el primer nom. Una vegada creat, copieu-lo, cliqueu amb el botó secundari del ratolí sobre l'escenari en el proper fotograma i trieu Pegar in Situ. Tot seguit canvieu el contingut de la caixa de text i passeu al següent fotograma.

• Prenent com a base els botons que heu fet en la pràctica anterior, heu de confegir quatre botons que permetin navegar per la galeria d'imatges: un per avançar, un per retrocedir i dos per accedir a fotogrames concrets. Aquí teniu una proposta de disseny:

	Avançar un fotograma.		Saltar a un fotograma pel seu número.
	Retrocedir un fotograma.		Saltar a un fotograma per l'etiqueta.

Botons avançar i retrocedir

 » Cliqueu sobre el botó Avançar per seleccionar-lo. Obriu el panell de Acciones.

 » Cliqueu sobre Funciones globales per accedir a les diferents opcions. Cliqueu sobre l'opció Control de clip de película i feu un doble clic sobre l'acció on.

 » Feu un doble clic sobre el paràmetre release perquè quedi escrit dins del paréntesi.

 » Cliqueu darrere del signe { de la línia on (release) { i premeu Retorn per deixar una línia en blanc i poder així escriure entre les dues claus: { }.

 » Cliqueu ara sobre l'opció Control de la línea de tiempo i feu un doble clic sobre l'acció nextFrame per escriure-la. Esborreu la línia en blanc sobrant, si cal.

• Repetiu aquestes accions per al botó Retrocedir, però seleccionant l'opció prevFrame en el darrer pas.

• En aquesta part de la pràctica aprendreu a accedir a un fotograma concret de la línia de temps. Aquesta acció es pot fer de dues formes: indicant el número de fotograma o referenciant l'etiqueta associada al fotograma.

• Una etiqueta de fotograma és un nom que queda associat a les propietats del fotograma i que serveix per identificar-lo de la resta de fotogrames de la línia de temps. Quan un fotograma duu una etiqueta mostra una petita bandera vermella a dins del quadre.

 » Inseriu una etiqueta en el fotograma 8 de la capa artistes: cliqueu sobre aquest fotograma i escriviu gauguin en el quadre Fotograma del panell de Propiedades.

 » Repetiu els passos anteriors per afegir les accions corresponents a cada botó. En el darrer pas seleccioneu les accions gotoAndPlay i gotoAndStop respectivament.

• Per a l'acció gotoAndPlay, indiqueu el fotograma 19 dins el parèntesi; per a l'acció gotoAndStop, escriviu l'etiqueta "gauguin" amb les cometes incloses.

• Observeu que la pel·lícula no s'atura fins que no cliqueu sobre els botons avançar, retrocedir i etiqueta. Tot i que els botons funcionen bé, el botó número de fotograma salta al fotograma indicat però no atura la pel·lícula: el perquè s'explica en la diferència del codi emprat:

-gotoAndPlay(), vol dir "vés fins on et demanen i engega".
-gotoAndStop(), vol dir "vés fins on et demanen i atura't".

• Tal com heu fet en la pràctica anterior per arreglar aquest efecte no desitjat, afegireu accions que aturin la pel·lícula.

 » Cliqueu sobre el fotograma 1 de la capa accions.

 » Cliqueu sobre l'opció Control de la línea de tiempo del panell Acciones i feu un doble clic sobre l'acció stop.

 » Cliqueu sobre el fotograma 19 de la capa artistes.

 » Cliqueu sobre l'opció Control de la línea de tiempo del panell Acciones i feu un doble clic sobre l'acció stop.

 » Torneu a provar la pel·lícula.

 » Deseu la pel·lícula.