Utilització del panell "Acciones" | ||
|
||
El panell |Acciones| permet crear i editar accions d'un objecte o d'un fotograma. | ||
Els objectius d'aquesta pràctica són: | ||
|
||
Normalment el panell d'accions apareix en la part inferior de l'escenari. Pot estar tancat, si ho està apareixerà només la barra del titol. Per obrir-lo heu de fer clic damunt del títol. | ||
El títol del panell canvia a |Acciones - Botón|, |Acciones - Clip de película| o |Acciones - Fotograma|, depenent del lloc què tenim seleccionat. | ||
Si no el trobeu el panell en la part inferior de l'escenari podeu accedir-hi anant al menú |Ventana|Paneles de desarrollo|Acciones| i aquest apareixerà a la part inferior de l'escenari. Sempre hi ha una drecera, en aquest cas podeu prèmer la tecla |F9|. | ||
Un cop obert el panell té el seguent aspecte. | ||
El panell |Acciones| ens permet distintes maneres de crear o escriure un script. Pels que esteu acostumats a treballar a |Modo Normal|, possibiltat que ens oferia Flash 5, heu de saber que el Flash MX no ofereix aquesta opció, es per això que durant aquest curs només fareu servir el |Modo Experto|. | ||
Això vol dir que escriureu el codi directament, encara que es manté la possibilitat d'arrosegar accions des de la caixa d'eines o fent dervir el botó d'afegir accions. | ||
El Flash MX ha incorporat algunes millores en el panell d'accions que ajuda en la tasca de buscar les accions i inserir el codi. Anirem parlant d'aquestes millores al llarg del mòdul. | ||
Abans de començar amb els scripts anem a familiaritzar-nos amb algunes de les parts més interesants del panell. | ||
Caixa d'eines | ||
A la part esquerra del panell d'accions hi ha la caixa d'eines. La caixa d'eines conté tota la llista d'accions. Aquestes accions estan ordenades en distints apartats, |Funciones globales|, |Propiedades generales|, |Sentencias|, |Operadores| ... i al final de tot un interesant índex on hi ha totes les accións ordenades alfabèticament. | ||
Si deixeu la fletxa del ratolí damunt d'una acció de la llista , apareixerà una petita finestra on us explica de forma abreviada per a què serveix. | ||
Navegador de scripts | ||
A la part esquerra, on esta la caixa d'eines, també podem trobar el navegador de scripts. Per obrir el navegador heu de fer clic damunt del botó que hi ha sota de la caixa d'eines o pujar la barra inferior amb el ratolí. | ||
Quan la pel·lícula té molts scripts i aquests estan distribuirts en diferents objetes o fotogrames de la linia de temps. el navegador és un element interesant, ja que permet buscar l'ubicació de les ActionScritps dins de l'arxiu .FLA. | ||
Per veure el seu funcionament heu de prèmer damunt de qualsevol element del navegador i si té un script associat apareixerà a la part dreta. | ||
Panell de scripts | ||
A la part dreta de l'editor d'accions està el panell de scripts que serveix per escriure el codi. El seu funcionament és similar a un tractament de textes, desfà, talla, copia, elimina... | ||
Damunt del panell de scripts, tant a la dreta com a l'esquerra, podeu trobar una sèrie de botons que us permeten accedir a diferents opcions. | ||
El primer botó permet inserir automàticament accions. L'avantatge de fer servir aquesta aplicació és que podeu tancar la caixa d'eines, que té la mateixa funció i d'aquesta manera l'espai per escriure els scripts serà més ampli. | ||
Per agregar el script només heu de navegar pel menú emergent fins cercar l'opció desitjada i fer clic al damunt. | ||
El segon botó serveix per cercar paraules dins del contingut del script. Prement-lo s'obre un quadre de diàleg on es pot introduir l'expresió que es vol cercar. | ||
El tercer botó serveix per cercar i substituir una expresió. | ||
El tercer botó obre un petit navegador que ens permet inserir rapiament la ruta de desti, de l'objecte al que ens estem referint al script. | ||
El quart botó revisa la sintaxis del script i ens avisa quan hi ha algun error, obrint un panell on concreta quin error és i on es troba. És una aplicació molt útil quan no es domina el llenguatge dels scripts. | ||
El cinqué botó permet el format automàtic, això vol dir que ordena el script que nosaltres escrivim de la manera que té estaberta. Aquesta aplicació és pot configurar amb diferents opcions de format automàtic. | ||
El sisé botó ens mostra consells sobre el codi. Més endavant veurem la seva utilitat. | ||
Fent clic al botó que hi ha al costat dret de la barra superior del panell s'obre un menú emergent amb un bloc d' opcions. Algunes d'aquestes opcions ja estan incloses en els botons de la part superior del panell i ja han estat comentades. | ||
|
||
De totes les opcions que apareixen en el menú emergent, de moment en destacaren dues: |Importar script| i |Exportar script|. Aquestes opcions ens permeten crear arxius .AS, que és el format en que es poden guardar externament els script i incoorporar-los a la pel·lícula SWF amb una crida. | ||
Abans d'acabar fixeu-vos en en la part inferior del panell d'accions, hi ha un petit sortint en forma de fitxa. Aquest espai de color blanc és l'encarregat d'assenyalar-nos quin element de la pel·lícula tenim seleccionat i si aquest és subceptible de contenir scripts. | ||
Al costat de la pestanya hi ha una petita xinxeta. Aquesta xinxeta serveix per fixar i alliberar el script. Si fixeu un script aquest romandrà present en la finestra d'accions, encara que seleccioneu altres objectes. Es poden fixar més d'un script alhora. | ||
Desenvolupament de la pràctica | ||
Abans de començar cal comentar que la manera d'incorporar script a l'arxiu .FLA del Flash MX difereix una mica del Flash 5. | ||
En el Flash 5 els script s'inserien en el fotograma o en l'objecte si es tractava d'un botó o un clip de pel·lícula. Amb el Flash MX es manté aquesta manera de fixar els script damunt dels objectes, però s'amplia a altres dues modalitats que poden ser més recomenables a la llarga. | ||
Per a que pogueu entendre aquesta evolució, tant els que veniu del Flash 5 com els que us estreneu de nou, trobareu en aquest mòdul una introducció al tema, on s'anirà combinant les distintes modalitats de situar els script dins l'arxiu .FLA. |
||
Per veure les distintes modalitats d'inserir el codi, començarem amb un script que ja vau coneixer en el curs D99, és senzill i força entenedor. | ||
Inserir el script dins de l'objecte | ||
Obriu l'arxiu ac_boto.FLA que trobareu dins de la carpeta mat_m3 del mòdul núm. 3. | ||
Selecioneu el botó número 1 que està en el primer fotograma a la part inferior dreta del dibuix, aneu al panell de propietats i poseu-li com a nom d'instància boto1_btn. | ||
Abans de continuar, uns comentaris pels que veniu del Flash 5. Una altra novetat del MX és què; els botons, el so i el video, també poden tenir nom d'instància a l'escenari. | ||
És important que el nom d'instància porti un sufix que identifiqui l'objecte al que pertany, així doncs les instàncies han de quedar de la següent manera: | ||
|
||
|
||
|
||
|
||
La inclusió del sudfix en el nom de la instància aporta aventatges: | ||
Per un costat ens permet identificar de quin objecte es tracta quan veiem un codi. Heu de pensar que a partir d'ara tots els scripts d'un arxiu .FLA poden estar inserits en un sol fotograma de la línia de temps o en un arxiu extren del tipus .AS. | ||
Per l'altre costat el panell d'accions reconeix l'objecte pel sufix i ens aporta suggeriments que ens fan molt més fàcil la programació.Al llarg de la pràctica veureu aquests avantatges. | ||
Obriu el panell |Acciones - Botón|, aneu a la icona |Añadir un nuevo elemento...| i seleccioneu |Funciones globales|Control de clip de película|on|. | ||
Apareixerà automàticament menú emergent |Mostrar consejos sobre códigos| seleccioneu l'acció |press| | ||
|
||
Per continuar poseu el cursor darrera del primer signe de clau |{| i aneu a |Añadir un nuevo elemento...| i seleccioneu |Funciones globales|Control de la línia de tiempo|gotoAndStop|.Per acabar escriviu el número 10 dins del parentesi, que és el fotograma al que anirà el capçal en fer clic al botó. | ||
Premeu l'opció |Formato automático| i el script us ha de quedar semblant al que es veu a continuació, | ||
|
||
|
||
Per acabar seleccioneu el primer fotograma, aneu al panell |Acciones - Fograma| i inseriu |stop();|. Podeu escriure el codi directament o navegant per l'opció |Añadir un nuevo elemento...| | ||
Publiqueu la pel·lícula per comprovar el seu funcionament. | ||
Inserir el script dins del primer fotograma | ||
En primera part del a pràctica heu creat una pel·lícula on els script han estat repartits entre el boto boto01_btn i el primer fotograma. | ||
En la segona part inserireu els mateixos scripts però, aquests només estaran agrupades en el primer fotograma de la pel·lícula. | ||
Obriu l'arxiu ac_fotogra.FLA que trobareu dins de la carpeta mat_m3 del mòdul núm. 3. | ||
|
||
Selecioneu el botó número 1 que està en el primer fotograma a la part inferior dreta del dibuix, aneu al panell de propietats i poseu-li com a nom d'instància boto1_btn. | ||
Abans de continuar, és el moment de parlar dels comentaris que es poden escriure dins d'un script. Quan un script és complexe o molt llarg és convenient afegir-li un petit comentari que ens pot servir més endavant per desxifrar-lo. | ||
Per inserir un comentari i que l'interpet d'actionScript el passi de llarg teniu dues opcions: | ||
La primera és fer servir la sintaxis // davant del comentari si aquest ocupa només una línia. | ||
La segona possibilitat és fer servir la sintaxis /* al començament del comentari i */ al final. Aquesta fórmula és la que heu de fer servir quan s'ocupa més d'una filera. | ||
Tant en un cas com en l'altre el text del comentari apareixerà de color gris, si no és així el script us mostrarà error. Els comentaris no afecten la programació | ||
Seleccioneu el primer fotograma de la capa accions, aneu al panell |Acciones - Fograma| i inseriu |stop();| |
||
Paseu a la línia dos del script i escriviu un comentari semblant aquest //botó fotograma 10 | ||
Paseu a la següent línia i escriviu |boto1_btn.| i quan s'obri el panell emergent feu clic damunt de l'expressió |onPress|. | ||
Inseriu el signe igual |=| i busqueu en botó |Sentencias|Funciones definidas por el usuario|function|. | ||
Poseu el cursor darera del primer signe de clau |{| i haneu a |Añadir un nuevo elemento...| i seleccioneu |Funciones globales|Control de la línia de tiempo|gotoAndStop|. Per acabar escriviu el número 10 dins del parentesi, que és el fotograma al que anirà dirigida l'acció. | ||
Premeu l'opció |Formato automático| i el script us ha de quedar semblant al que es veu a continuació, | ||
|
||
Explicació del script | ||
La primera línia no té cap secret, l'acció |stop()| atura la pel·lícula en el primer fotograma. | ||
La segona línia conté el comentari que heu escrit. | ||
La tercera linia comença amb el nom d'instància del botó |boto1_btn| separada amb un punt |.| d'una incidència de botó |onPress|. | ||
A continuació es crea una funció definida per l'usuari |= function()| que conté entre dues claus |{}| l'acció |{gotoAndStop(10);};| | ||
Resumint, quan és prem el botó s'ejecuta l'acció que està definida per la funció, que en aquest cas és enviar el cap lector de la pel·lícula al fotograma núm. 10. Aquestes funcions s'anomenen, en l'argot de la programació "CALLBACKS" | ||
Abans de donar per acabada aquesta segona part de la pràtica, creareu un arxiu en format .AS que fareu servir en l'última part d'aquesta pràtica.. | ||
» Amb la finestra d'accions de fotograma oberta, aneu el panell emergent , seleccioneu l'opció |Exportar script| i guardeu l'arxiu amb el nom de boto1.AS dins la carpeta mat_m3 del mòdul núm. 3. | ||
Inserir el script dins d'arxius externs .AS | ||
Fins aquest moment heu inserit els script dins del arxiu .FLA. El que ara treballareu és la possibilitat de guardar els script en arxius externs de format .AS i incorporar-los al arxiu .FLA mitjançant la sentència |#include|. | ||
Obriu l'arxiu ac_as.FLA que trobareu dins de la carpeta mat_m3 del mòdul núm. 3. | ||
Selecioneu el botó número 1 que està en el primer fotograma a la part inferior dreta del dibuix, aneu al panell de propietats i poseu-li com a nom d'instància boto1_btn. | ||
Seleccioneu el primer fotograma de la capa accions, aneu al panell |Acciones - Fograma| i escriviu |#include ""| directament o feu servir l'opció |Añadir un nuevo elemento...|Directivas de compilador|. | ||
Entre les cometes de la sentència |#include ""| afegiu el nom del fitxer |"boto1.AS"| que heu guardat abans. | ||
#include "boto1.as" |
||
Guardeu la pel·lícula i seguidament la publiqueu per comprovar el correcte funcionament. | ||
És important recordar que el codi dels arxius externs es compila en l'arxiu SWF cada cop que es publica la pel·lícula, per aquest motiu cada cop que es modifica un arxiu extern s'ha de guardar i tornar a publicar la pel·lícula. | ||
Perquè aquest concepte quedi clar modificareu un arxiu extern. | ||
Podeu modificar el fitxer utilitzant les opcions |Importar script| per obrir-lo i |Exportar script| per guardar-lo. Però en aquesta ocasió fareu servir el Bloc de notes o qualsevol tractament de text similar. | ||
Obriu l'arxiu boto1.AS que teniu dins de la carpeta mat_m3.amb el Bloc de notes i modifiqueu l'acció |gotoAndStop(10)| per |gotoAndStop(20)| i torneu a guardar l'arxiu. | ||
Torneu a publicar l'arxiu ac_as.FLA perquè tinguin efecte les modificacions i comproveu que la pel·lícula funciona correctament. | ||
Aquesta manera de treballar, aprofitant la programació d'arxious extrens .AS, pot ser de molta utilitata l'hora de crear paquets d'activitats. | ||