Possibilitats de l' API de dibuix del Flash | |||
|
|||
Creació d'una pissarra | |||
Dins d'aquesta pràctica veureu com es pot crear una pissarra per dibuixar fent servir l'API de dibuix del flash MX 2004. | |||
![]() |
|||
![]() |
Creació dels botons | ||
Obriu
un nom document fla i anomeneu-lo biblioteca_pissarra.fla. Creeu quatre botons que serviran per canviar el color del llapis per pintar a la pissarra. El tamany de cadascun d'aquest botons podría ser de 31.5 x 31.5 píxels i la seva aparença als tres estats de la seva linia de temps, la que apareix a la imatge següent. Aquest botons els posareu a una capa que anomenareu botons. |
|||
![]() |
|||
A la mateixa capa creeu un altre botó que serà el que borrarà tot el dibuix creat a la pissarra. | |||
![]() |
![]() |
||
Reposo |
Sobre Presionado Zona activa |
||
A la biblioteca de la pel.licula tindreu cinc botons. | |||
![]() |
|||
Creació del clip pissarra |
|||
El requadre on es pintarà és un clip de pel.lícula que anomenareu pissarra. | |||
![]() |
|||
Dibuixeu un rectangle amb un fons de color blanc i una bora de color blau. Les seves dimensions poden ser de 420.9 x 278.9 píxels. | |||
![]() |
|||
Obriu el pannell Ventana|Paneles
de diseño| Información i fent un clic amb el ratolí
poseu l'origen a la part superior esquerra. Fixeu-vos en ![]() |
|||
Seleccioneu el requadre i
premeu f8 per transformar-lo en un clip de pel.licula.
Senyaleu el Registro: ![]() |
|||
![]() |
|||
Us quedarà un clip pissarra amb el seu origen a la part superior esquerra. Ja tindreu tots els símbols necessaris a la biblioteca. Enregistreu el resultat amb el nom biblioteca_pissarra.fla. | |||
![]() |
|||
Creació de l'estructura de l'aplicació | |||
Obriu l'arxiu biblioteca_pissarra.fla. i
amb Archivo|Guardar como... anomeneu-lo pissarra.fla.
Tindreu l'escenari buit però si obriu la seva Biblioteca trovareu
els sis símbols
creats a l'apartar anterior. Creeu la estructura de capes de la imatge
clicant amb el ratolí a la part inferior esquerra de la Línea
de tiempo.
A la capa botons posareu els botons, a la capa clip pissarra poseu el
clip pissarra, a la capa accions posareu la programació
|
|||
![]() |
|||
![]() |
|||
Observeu que la capa que conté al clip pissarra està Enmarcarada per la capa de màscara mascara clip pissarra. Recordeu que per crear aquesta capa de máscara heu de senyalar la capa i clicant al botó dret del ratolí, seleccioneu Propiedades... | |||
![]() |
|||
Us sortirà un pannell per canviar el Tipo de capa i seleccioneu Máscara. | |||
![]() |
|||
A les propietats de la capa clip pissarra poseu Tipo: Con máscara. | |||
![]() |
|||
Dibuixeu
a la capa mascara
clip pissarra un rectàngle
sense contorn i de les mateixes dimensions que el clip pissarra (420.9
x 278.9 píxels).
Aquest rectàngle
serà el forat (máscara) que deixarà veure el que
hi hagui a la capa enmascarada. |
|||
La máscara es posa per limitar la zona en que sortirà el que es dibuixi a la pissarra. | |||
![]() |
|||
Enregistreu el resultat amb el nom pissarra.fla | |||
Variables globals - variables locals | |||
Les
variables són globals quan són accessibles des de qualsevol objecte
de la pel·lícula sense necessitat de especificar el seu camí. La definició
d'aquestes variables fa servir una nova propietat de l'ActionScript _global.
La declaració d'una variable global de nom "jugades" tindria
la següent sintaxi _global.jugades; Una variable és local quan es accessible dins de l'àmbit en que s'ha definit. En l'ActionScript les variables són locals quan es defineixen dins d'una funció, d'aquesta manera existeixen mentre s'està executant la funció i són destruïdes quan finalitza l'execució de la funció. |
|||
Programació de l'aplicació | |||
![]() |
Programació al primer fotograma de la línia de temps | ||
El primer
que fareu és crear dinàmicament un clip de pel.lícula
buit dins (imbricat) del clip pissarra. Aquest clip buit s'anomenarà linia
i estarà al nivell
1. La creació d'aquest clip buit és obligatori per poder
dibuixr amb l'API del Flash.
|
|||
_root.pissarra.createEmptyMovieClip("linia", 1); | |||
A continuació definiu una variable de text que contindrà el color en hexadecimal. "0x000000" correspon al color negre. | |||
_global.color_actual = "0x000000"; | |||
Ara crearem la funció pinta amb un paràmetre
d'entrada que serà la variable color_actual, que és una cadena de text
("string"). La funció otorgarà al clip buit "linia" un gruix de traç
d'1 píxel, un color (color_actual) i una opacitat alpha del 100% . Fixeu-vos que quan introduïm el paràmetre de la funció, l'identifiquem com una cadena "string". Aquesta és la manera d'identificr el tipus de variable amb ActionScript 2, la versió última del llenguatge a partir del Flash MX 2004. |
|||
pinta = function (color_actual:String)
{ _root.pissarra.linia.lineStyle(2, color_actual, 100); }; |
|||
El resum de tota la programació el teniu a la següent imatge. | |||
![]() |
|||
Programació als botons per escollir el color | |||
Poseu-vos damunt el botó de color groc i poseu la següent programació. Fixeu-vol que "0xFFFF00" correspon al color groc en hexadecimal. | |||
//botó groc on (release) { _global.color_actual = "0xFFFF00"; _root.pinta(color_actual); } |
|||
Feu el mateix amb la resta de botons. | |||
//botó vermell on (release) { _global.color_actual = "0xFF3300"; _root.pinta(color_actual); } //botó blau on (release) { _global.color_actual = "0x0066CC"; _root.pinta(color_actual); } //botó verd on (release) { _global.color_actual = "0x009900"; _root.pinta(color_actual); } |
|||
![]() |
|||
Podeu provar altres colors o ampliar la paleta. | |||
Programació al botó per esborrar la pissarra | |||
El primer que fareu serà borrar tot el
contigut que sigui dins del clip linia (_root.pissarra.linia.clear();) A continuació posareu el color negre una altre vegada per que sempre, en començar a dibuixar abans de clicar a cap botó de color, el traç sigui de color negre. En aquest cas, sense _global l'aplicació no funcionarà. |
|||
on(release){ _root.pissarra.linia.clear(); _global.color_actual = "0x000000"; } |
|||
Programació al clip pissarra | |||
Per poder treballar amb el clip pissarra haureu d'amagar la capa mascara clip pissarra. Premeu amb el ratolí en el punt que està sota el icono Mostrar/ocultar todas las capas. | |||
![]() |
|||
Seleccioneu el clip pissara de l'escenari i en el pannell Propiedades poseu el nom pissarra. | |||
![]() |
|||
Com que posareu la programació en la instància del clip pissarra (atenció, no entreu dins la seva línia de temps), heu de posar onClipEvent(enterFrame). En aquest cas el que poseu a continuació dins de {...} s'executarà de forma contínua a la velocitat en fps del clip de pel.lícula. | |||
En funció de la
aplicació que esteu programant, l'actionScript ofereix diferents possibilitats.
L'altre cas que més surt durant tot el curs D105 és onClipEvent(load).
En aquest cas, l'acció que poseu entre {...} s'execuatarà al moment en
que es carregui el clip de pe.lícula. |
|||
onClipEvent (enterFrame) {...} | |||
Aquí en teniu una llista amb totes les possibilitats: | |||
onClipEvent(unload){...} onClipEvent(load){...} onClipEvent(enterFrame){...} onClipEvent(mouseDown){...} onClipEvent(mouseMove){...} onClipEvent(mouseUp){...} onClipEvent(keyDown){...} onClipEvent(keyUp){...} onClipEvent(data){...} |
|||
//En pressionar el ratolí, se executa
la funció onMouseDown = function () { //es crida a la funció que establirà el format del traç _root.pinta(color_actual); /*es fixa l'origen de la línia però, al moment de moure el ratolí, quedarà fixat el final però, com que manteniu premut el mousse, seguirà fixant-se l'origen. Les línies seran tan curtes que pràcticament seran un punt i el traç resultarà suau */ _root.pissarra.linia.moveTo(_xmouse, _ymouse); onMouseMove = function () { _root.pissarra.linia.lineTo(_xmouse, _ymouse); }; }; /* En aixecar el boto del ratolí la funció que indica el final de la línia quedarà inactiva. La línia no es dibuixarà */ onMouseUp = function () { onMouseMove = null; }; } |
|||
Resum de tot el codi que heu de posar al clip de pel·lícula pissarra. | |||
![]() |
|||