Duplicació de clips per simular traçament de línies | ||
|
||
Amb aquesta pràctica, veureu altres possibilitats i aplicacions de la duplicació de clips. Com a programadors en altres llenguatges, segurament us haureu preguntat on són els píxels i com es pot treballar amb segments o línies. Altres llenguatges de programació disposen de funcions especials per controlar aquests aspectes. En el Flash podeu crear els píxels o simular-los a partir dels clips de pel·lícula. Sí, la veritat és que sempre s'acaba treballant amb clips de pel·lícula. Un clip de pel·lícula amb dimensions d'1 d'amplada per 1 d'alçada podria simular un píxel, però seria un píxel més aviat vectorial i, a més, un objecte amb les seves propietats. En aquesta pràctica, treballareu amb un altre mètode que us permetrà, també, duplicar clips de pel·lícula, però aquesta vegada directament des de la biblioteca. Es tracta del mètode attachMovie. |
||
L'objectiu d'aquesta pràctica és començar a crear un geoplà, la creació d'aquest instrument serà molt interessant per sintetitzar molts dels procediments i tècniques que heu treballat en aquest mòdul. Deixem la part final d'aquesta activitat com a exercici del mòdul. | ||
Desenvolupament de la pràctica | ||
En aquesta pràctica, es tracta de crear un petit programa que permeti el dibuix de línies rectes sobre un escenari. Comenceu presentant el mètode nou attachMovie. Si recordeu, en el mètode duplicateMovieClip, la duplicació depèn del fet que els dos clips de pel·lícula, el pare i el fill, estiguin en el mateix entorn, és a dir, a l'escenari o a dintre d'un altre clip. Però si el que voleu és crear un clip de pel·lícula nou directament a partir d'un clip de pel·lícula original de la biblioteca, podeu utilitzar el mètode attachMovie. |
||
Per utilitzar aquesta acció nova, primer necessitareu crear una vinculació en el clip de la biblioteca a partir del qual es vol fer la duplicació. | ||
» Activeu la biblioteca i creeu un símbol nou (una línia) de clip de pel·lícula des del menú Opciones / Nuevo símbolo de la mateixa biblioteca. Per veure la informació del punt de registre de la línia, activeu el menú Ventana / Paneles de diseño / Información, on us sortirà un panell com a aquest. Podeu veure, també, aquestes dades al tauler de Propiedades. |
||
Imatge
núm. 2
|
||
» Observeu com ha de quedar situat el punt de registre, ja que és important aquesta ubicació perquè la línia es pugui escalar correctament després. | ||
Ara, creeu una vinculació per exportar aquest símbol i que es pugui utilitzar directament a l'escenari. Seleccioneu a la biblioteca el clip de pel·lícula línia i activeu el menú contextual amb el botó secundari del ratolí. |
||
|
||
Imatge
núm. 2
|
||
|
||
» Seleccioneu l'opció Exportar para ActionScript del quadre de diàleg, tal com es mostra a la imatge 2. | ||
» Inseriu al camp Identificador un nom significatiu, per exemple, linia. | ||
Ara ja teniu preparat el clip de pel·lícula línia perquè es pugui treballar amb el llenguatge de programació sense la necessitat de crear una instància. | ||
|
||
Quan
s'utilitza aquest mètode, heu de tenir clar que no podeu adjuntar
accions associades a la incidència onClipEvent, ja que el
clip de pel·lícula apareix solament a l'escenari en temps
d'execució, que és quan s'exporta la pel·lícula.
Una solució a aquest problema és adjuntar el clip de pel·lícula
dins un altre que actuaria com a embolcall; i és aquí, en
el clip pare, que fa de contenidor, on es podrien inserir les accions.
El que sí que es pot fer és inserir accions en la línia
de temps de la pel·lícula, en un fotograma clau.
|
||
»
Proveu el funcionament
d'aquest mètode. Inseriu aquesta ordre al primer fotograma de la
línia de temps principal:
|
||
|
||
_root.attachMovie("linia",
linia1,1);
|
||
|
||
Aquesta
acció crea un duplicat directament de clip de pel·lícula
anomenat linia1 que teniu creat a la biblioteca (linia)
sense la necessitat d'haver creat cap instància. Si observeu, també
té un segon paràmetre, com el mètode duplicateMovieClip,
per especificar el nivell de profunditat del clip.
|
||
|
||
»
Ara que ja teniu preparada
l'exportació del clip de pel·lícula, creeu una funció
que permeti generar duplicats de línies rectes a partir del clip
de pel·lícula que heu creat a la biblioteca. Però
aquesta funció haurà de fer més coses: haurà
de tenir en compte les coordenades on s'inicia el segment i també
on finalitza aquest segment.
|
||
|
||
»
Inseriu al fotograma
clau de la línia de temps principal el codi següent:
|
||
|
||
_root.x=0; _root.y=0;
crealinia(); |
||
|
||
Com podeu observar, al principi del codi es creen i s'inicialitzen les variables x i y. Aquestes variables tindran la funció d'emmagatzemar les coordenades d'inici del segment. L'acció _root.attachMovie("línia", "linia"+_root.i, _root.i); com ja s'ha comentat abans, fa una còpia del clip línia de la biblioteca a l'escenari i la situa en el nivell 1. |
||
Amb les accions eval("_root.linia"+_root.i)._x = _root.x; i eval("_root.linia"+_root.i)._y = _root.y; s'ubica l'extrem inicial de la línia duplicada, és a dir, on es troba el punt de registre, a les coordenades emmagatzemades en les variables x i y. Aquestes variables prendran el seu valor quan l'usuari/ària faci clic amb el ratolí per dibuixar una línia, per tant, necessitareu programar més endavant una incidència onClipEvent (mouseDown). Amb l'acció eval("_root.linia"+_root.i)._xscale = _root._xmouse-_root.x; i la eval("_root.linia"+_root.i)._yscale = _root._ymouse-_root.y; el que fareu serà ajustar l'extrem final de la línia a les coordenades on es troba el punter del ratolí. La tècnica utilitzada és escalar la línia prenent com a valors les coordenades de les propietats de la pel·lícula principal, _xmouse, _ymouse, menys les coordenades inicials de la línia, que vénen determinades per les variables x i y. |
||
Per últim, s'incrementa el valor del comptador_root.i. Si us hi fixeu, aquest comptador té dues funcions: primer, serveix per crear el nombre de la línia duplicada, i després per incrementar el nivell de profunditat. | ||
Per finalitzar, s'executa la funció que crearà la primera línia. Però fins ara, l'usuari/ària encara no podrà dibuixar correctament. Necessiteu crear les incidències adients. | ||
Primer, heu de controlar que l'usuari/ària només comenci a dibuixar quan faci clic amb el ratolí. | ||
» Creeu un clip de pel·lícula per inserir accions i situeu-lo fora de l'escenari. »
Afegiu una incidència
onClipEvent (load) per inicialitzar a false la
propietat visible de la primera línia. |
||
|
||
» El segon pas serà crear una incidència onClipEvent (mouseDown). | ||
|
||
|
||
Fins ara, esteu treballant amb el clip pare linia, aquest clip solament s'està utilitzant com a instrument visual que ajudi l'usuari/ària a dibuixar. Per veure dinàmicament com s'escala la línia, heu d'incloure una nova incidència onClipEvent (enterFrame) amb el codi següent: | ||
|
||
Amb aquest codi, s'estableix l'ajustament de la línia segons el moviment i la direcció del punter del ratolí. | ||
Però ara ja necessiteu dibuixar realment les línies, és a dir, fer un còpia cada vegada que l'usuari/ària allibera el ratolí. » Per tant, heu de crear una incidència onClipEvent (mouseUp). |
||
|
||
|
||
Ara ja sí que s'habilita l'usuari/ària per poder crear i dibuixar les línies que vulgui. El primer que fareu serà amagar la línia mare, que és la que serveix per veure l'orientació (_root.linia._visible = false) i executar la funció _root.crealinia(); per crear una línia nova. | ||
Podeu desar ja la pel·lícula al vostre disc dur. | ||
Una altra forma de crear línies és, tal com s'ha dit, utilitzar l'API nova de dibuix. Com a exemple, podeu crear un document nou i posar al primer fotograma de la línia de temps principal el codi següent: |
||
|
||
En aquest codi es defineix l'estil de línia amb tres paràmetres: el primer paràmetre (3) defineix el gruix de la línia, el segon paràmetre (0xFF6600) és el color, i el tercer paràmetre correspon a l'efecte alpha de transparència que, en el vostre cas, és el 100%. | ||
En la segona línia de codi amb el mètode moveTo(225, 200), li dieu que el punt de registre d'inici de línia estigui a les coordenades x=225, y=200. | ||
I per finalitzar en les tres línies següents, es crea una funció que cada vegada que es cliqui amb el ratolí a l'escenari, farà una línia des del punt anterior fins on heu fet clic amb el ratolí. Aquest procés es farà cada vegada que cliqueu amb el ratolí. | ||
Aprofitem per fer constar que, en las versions anteriors al Flash MX, totes les incidències s'havien de posar dins el clip, i com podeu veure, en aquest cas, a la incidència onMouseDown se li ha assignat una funció que no cal que estigui dins el clip. Si està a la línia de temps de la pel·lícula principal podrà funcionar des d'aquest lloc. | ||