Aplicació educativa amb l'API del Flash  
 
 
  Els Flash ens permet fer aplicacions molt visuals. El seu mòdul de dibuix és potent i tal com heu vist a la pràctica anterior relativament fàcil de programar. En aquesta pràctica es tracta d'identificar el nom d'una fruita amb la seva imatge traçant una línia entre les dues.
Hi ha moltes aplicacions educatives que es basen en aquest tipus d'acivitats, ja sigui identificar noms i imatges, ja si qui relacionant noms de dues columnes o bé imatges amb imatges. Tot allò que la vostra creativitat us sugeriexi. La part de programació sempre segueix la mateixa lògica.
En la pràctica només és dibuixa la línia quan la identificació és correcta.
 
     
     
  Objectiu de la pràctica.  
     
  Amb aquesta imatge us podeu per una idèa del que es pretén.  
     
     
     
  Mostra de la pràctica un cop acabada  
     
 
     
  Comproveu el seu funcionament.  
   
  Desenvolupment de la pràctica  
 
Creeu un nou document de Flash i deseu-lo amb el nom de m7_p2.fla.
 
Importeu a l'ecenari les imatges de les sis fruites, escribiu els noms i poseu el quedre de text estàtic con a l'imatge següent:
 
   
     
  La posició de les fuites i dels noms és estàtica per a no complicar la programació, però amb més codi es podrìen posar aleatòriament.
Si voleu fer una altra composició podeu fer-ho peró cal matenir les programacions de cada fruita i de cada nom. En acabar la pràctica podeu comprovar-ho canviant les posicions de fruites i noms.
 
     
  Conversió de les imatges en clips.  
     
  Cliqueu sobre la imatge de la pera i convertiu-la en un clip de pelicula. Modificar | Convertir en simbolo.
 
     
   
     
  Anomeneu-lo clip_pera per a la bibioteca i b2 a l'escenari.  
     
   
     
  Repetiu la mateixa operació amb les altres imatges seguint aquesta nomenclatura.

 
 
Imatge fruita Nom clip a la biblioteca Nom clip a l'escenari
Pera
clip_pera
b2
Taronja
clip_taronja
b1
Poma
clip_poma
b3
Plàtan
clip_plàtan
b6
Tomàquet
clip_tomaquet
b5
Raïm
clip_raim
b4
 
 

En acabar el procés heu de tenir aquests 12 elements a la bibioteca
 
     
   
     
  Conversió dels clips en botons.  
     
  Cliqueu dos cops sobre el clip_pera(b2), la seva imatge queda selecionada, i convertiu-lo en un botó. Modificar | Convertir en simbolo. És important que la imatge de la pera estigui seleccionada per a converitir-la en botó tal com mostra la figura. Anomeneu-lo boto_pera  
     
   
     
  Cliqueu sobre el boto_pera i a la seva línia de temps inseriu un totograma clau f6 a cada un dels estats del botó.  
     
   
     
  Es podrien modificar els fotogrames de les diferents posicions del botó, canviant la seva tansparència (alpha) o qualsevol altre element de disseny que us sembli adient per a augmentar la sensació d'interactivitat, però de moment ho deixem així.
És molt important que aquesta operació la feu correctament. Primer el clip i després el botó a dins.
Repetiu la mateiza operació amb els altres clips, convertiu-los en botons i anomeneu-los seguint l'esquma botó_nom_fruita.
En acabar heu de tenir aquests 18 elements a la biblioteca.
 
     
   
     
  Identificació de la posició dels clips_fruites  
     
  En quant s'executa una aplicació, en arribar a un fotograma el FlashMX llegeuiex tot es les instrucions que hi ha als clips que es trobem a l'escenari.
Posteriorment, com que dins de cada clip hi ha un botó aquest serà sensible a les accions que programem per a cada botó. Si sou experts en FlashMX aquesta no és la única opció possible, quan es programa sempre hi ha diferents solucions, ja que també es podríen progamar accions per als difererents"eventos" en quan el ratolí toca al clip.
 
     
  Codi a cada un dels clips.  
     
  Cada clip sempre té una posició this._x i this._y. Amb l'ordre onClipEvent (load) és llegueix aquesta posició. Discriminem les posicions afegint a la variable posició x i posició y el nom del clip, posxnomclip i posynomclip seguint el patró . Afegim que tinguin caràter global perquè no hi problema al localitzar-les.
Afegiu a cada un dels clips aquest codi.
 
     
 
Nom clip (nom escenari) Codi
clip_pera (b2)
onClipEvent (load) {
_global.posxb2 = this._x;
_global.posyb2 = this._y;
}
clip_taronja (b1)
onClipEvent (load) {
_global.posxb2 = this._x;
_global.posyb2 = this._y;
}
clip_poma (b3)
onClipEvent (load) {
_global.posxb3 = this._x;
_global.posyb3 = this._y;
}
clip_platan (b6)
onClipEvent (load) {
_global.posxb6 = this._x;
_global.posyb6 = this._y;
}
clip_tomaquet (b5)
onClipEvent (load) {
_global.posxb5 = this._x;
_global.posyb5 = this._y;
}
clip_raim (b4)
onClipEvent (load) {
_global.posxb4 = this._x;
_global.posyb4 = this._y;
}
 
     
  Creació dels clips nom.  
     
  Creeu els quadres de text amb el nom de les fruites, amb el tipus de lletra i color que us agradi i situe-los en posicion semblants a les de la imatge  
     
 
     
  Si volem seguir el mateix procés que amb les imatges, convertir-los en clips i a dins un botó, quan es treballa amb text hi ha un pas previ, el text s'ha de convertir en un gràfic ja que si no es fa aixi a l'hora de transformar-lo en un botó hi ha problemes per a definir la seva àrea activa. Només funciona com a botó quan el ratoli passa per sobre de les lletres. Podeu fer proves en un nou arxiu de flash i comprovar-ho.  
     
  Situeu el cursor sobre una de les les paraules, per exemple taronja i amb el menú Modificar | convertir en simbolo convertiu-lo en gràfic amb el nom gr_taronja.  
     
   
     
  A continuació cliqueu dos cops sobre el gràfic i convertiu-lo en un clip amb el nom clip_ptaronja a la bibioteca i a1 a l'escenari  
     
  Fixeu-vos en la capçalera de l'aplicació.  
   
   
     
   
     
  Clicant dos cops sobre el clip_ptaronja convertiu-lo en un botó amb el nom boto_ptaronja i entreu a le seva línia de temps.  
     
   
  Inseriu un fotograma clau als fotogrames buits del botó.(f6)
 
   
   
     
  Un cop arribat al l'últim fotograma del botó, el que defineix la zona activa, seleccioneu l'eina rectangle i amb el color de farcitr dibuixeu un rectangle d'una mida aproximada a la de la paraula sense vores.  
     
   
     
  Deseu l'arxiu proveu la pel·licula i comproveu que quan el ratolí passa per sobre la paraula es comporta com un botó, canvia el cursor.
Repetiu la mateixa operacio amb cada un dels noms seguin aquesta nomenclatura:
 
     
 
Paraula Nom gràfic Nom clip a la biblioteca Nom clip a l'escenari Nom botó
Pera gr_pera clip_ppera
a2
boto_ppera
Taronja gr_taronja clip_ptaronja
a1
boto_ptaronja
Poma gr_poma clip_poma
a3
boto_ppoma
Plàtan gr_platan clip_pplatan
a6
boto_pplatan
Tomàquet gr_tomaquet clip_ptomaquet
a5
boto_ptpmaquet
Raïm gr_raim clip_praim
a4
boto_praim
 
     
  Cal fer una apreciació important sobre l'anomenament, en codi, dels gràfics, botons i clips. Hem posat una codificació, per a ferr-la més intuitiva, que no és la que us trobareu si lleguiu llibres de programació: en lloc de gr_pera hauria de dir pera_gr, en loc de clip_ppera, ppera_mc i en lloc de boto_ppera, ppera_btn, emprant gr per a gràfics, mc (movieclip) per a clips i btn per als botons.  
     
  Codi per als diferents clips.  
     
 
Nom clip (nom escenari) Codi
clip_ppera (a2)
onClipEvent (load) {
_global.posxa2 = this._x;
_global.posya2 = this._y;
}
clip_ptaronja (a1)
onClipEvent (load) {
_global.posxa1 = this._x;
_global.posya1 = this._y;
}
clip_ppoma (a3)
onClipEvent (load) {
_global.posxa3 = this._x;
_global.posya3 = this._y;
}
clip_pplatan (a6)
onClipEvent (load) {
_global.posxa6 = this._x;
_global.posya6 = this._y;
}
clip_ptomaquet (a5)
onClipEvent (load) {
_global.posxa5 = this._x;
_global.posya5 = this._y;
}
clip_praim (a4)
onClipEvent (load) {
_global.posxa4 = this._x;
_global.posya4 = this._y;
}
 
     
  Funció dibuixa linia.  
     
  Afegiu una nova capa, anomeneu-la accions i poseu¨hi aquest codi que es la funció que ens dibuixarà la línia. Depen de quatre paràmetres les coordenades ax i ay del seu origen i les bx i by del seu extrem.  
     
  function dibuixa_linia(ax, ay, bx, by) {
_root.linia._visible=false;
*/definim l'estil de linia, (gruix=2, color = blau(0x0000CC),i alpha 100)/*
_root.lineStyle(2, 0x0000CC, 100);
*/ començar la línia a (ax,ay)/*
_root.moveTo(ax, ay);
*/ gtraçar la linia fins a (bx,by)/*
_root.lineTo(bx, by);
}
stop();
 
     
  Programació dels botons.  
     
  Només ens falta posar la programació als botons. En clicar un botó donem nom a una variable de control les de les fruites son b1, b2, b3 , b4, b5 i b6 que es corresponen amb els noms dels clips. Les de les paraules a1, a2, a3, a4, a5 i a6.  
     
  Accions al boto_ptomaquet.  
     
  Cliqueu sobre la paraula tomàquet i després sobre el clip. Poseu aquest codi al botó.  
     
     
  Accions al clip_tomaquet.  
     
  Cliqueu sobre el clip que correspon a la imatge del tomàquet i poseu aquest codi al botó  
         
   
     
  Cada un dels dos clips cooreposnents porta un número de control en aquest cas 5,quan coincideixen els dels dos clips es dibuixa la linia que unueix les posicions de cada un del dos clips, d'aqui els quatre paràmetres de la funció.
Deseu l'aplicacació proveu-la i veureu que si cliquem el nom del tomàquet i desprès la fruita o a l'inrevés la linia es dibuixa.
 
     
     
  Programació al botons que corresponen als noms de les fruites  
     
 
Nom botó
(nom clip a l'escenari)
Codi
boto_ppera (a2)
on (press) {
_root.controla = 2;
/* amb aquest if controlem si la identificació entre paraula i imatge és correcta i si ho és dibuixar la línia */
if (_root.controla == _root.controlb) {
_root.dibuixa_linia(posxa2, posya2, posxb2, posyb2);
}
}
boto_ptaronja (a1)
on (press) {
_root.controla = 1;
if (_root.controla == _root.controlb) {
_root.dibuixa_linia(posxa1, posya1, posxb1, posyb1);
}
}
boto_ppoma (a3)
on (press) {
_root.controla = 3;
if (_root.controla == _root.controlb) {
_root.dibuixa_linia(posxa3, posya3, posxb3, posyb3);
}
}
boto_pplatan (a6)
on (press) {
_root.controla = 6;
if (_root.controla == _root.controlb) {
_root.dibuixa_linia(posxa6, posya6, posxb6, posyb6);
}
}
boto_ptomaquet (a5)
on (press) {
_root.controla = 5;
if (_root.controla == _root.controlb) {
_root.dibuixa_linia(posxa5, posya5, posxb5, posyb5);
}
}
boto_praim (a4)
on (press) {
_root.controla = 4;
if (_root.controla == _root.controlb) {
_root.dibuixa_linia(posxa4, posya4, posxb4, posyb4);
}
}
 
     
Programació als botons que corresponen a les imatges.  
     
 
Nom botó
(nom clip a l'escenari)
Codi
boto_pera (b2)
on (press) {
_root.controlb = 2;
if (_root.controla == _root.controlb) {
_root.dibuixa_linia(posxa2, posya2, posxb2, posyb2);
}
}
boto_taronja (b1)
on (press) {
_root.controlb = 1;
if (_root.controla == _root.controlb) {
_root.dibuixa_linia(posxa1, posya1, posxb1, posyb1);
}
}
boto_poma (b3)
on (press) {
_root.controlb = 3;
if (_root.controla == _root.controlb) {
_root.dibuixa_linia(posxa3, posya3, posxb3, posyb3);
}
}
boto_platan (b6)
on (press) {
_root.controlb = 6;
if (_root.controla == _root.controlb) {
_root.dibuixa_linia(posxa6, posya6, posxb6, posyb6);
}
}
boto_tomaquet (b5)
on (press) {
_root.controlb = 5;
if (_root.controla == _root.controlb) {
_root.dibuixa_linia(posxa5, posya5, posxb5, posyb5);
}
}
boto_raim (b4)
on (press) {
_root.controlb = 4;
if (_root.controlb == _root.controlb) {
_root.dibuixa_linia(posxa4, posya4, posxb4, posyb4);
}
}
 
   
  Deseu la pràctica, publiqueu-la i comproveu el resultat