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: a la part superior esquerra per que l'origen del clip estigui en aquesta pòsició. Anomeneu-lo pissarra.
 
     
 
 
     
  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.