Una aplicació arrossegant un clip  
 
 
 

 

En aquesta aplicació es tracta d'aplicar el què heu aprés a la pràctica del trencacosques per a fer una aplicació basada el la identificació del nom d'una fruita arrossegant-lo sobre la seva imatge si la identificació és correcta es queda com en la pràctica anterior i si no torna al seu lloc inicial. Es tracta d'un model d'aplicació que es pot rendibilizar a moltes àrees.
En carregar la pel·licula es dtecten les posicions de les imatges de les fruites convertides en clips.
Els nom de les fuites en conveeteixen en clips i es declara la seva posició. Un cop convertits el clips en botons utilitzem els "eventos" de ratoli i en quan es toca es fa arroseegable. Amb un una funció comparem les posicions dels clips nom i imatge en quan deixem de premer el ratolí, si les seves coordenades compleixen una condició de proximitat amb un cert error el clip es queda sobre el nom de la fruita i si no s'en torna al seu lloc inicial.
Farem servir una notació de clips semblant a la pràctica anterior.

 


 

 
 
Desenvolupament de la pràctica
   
Creeu un nou arxiu Flash i deseu-lo amb el nom m8p2.fla. De la carpeta imatges_fruites importeu a l'escenari les sis imatges i situeules en posiocions semblants a les de la mostra a la capa 1 que podeu anomenar fons.  
     
   
     
 

La posició en què es posen les fruites és irrellevant, cal però que hi hagi concordància en els noms dels clips imatge i nom corresponets a cada una de les fruites.
Un cop importades les imatges les alinieu i repartiu en l'ecenari en posicions semblants a les de la figura.

 
     
   
     
 

Anem ara a convertir les imatges en clips:

Seleccioneu amb el cursor la imatge de la pera i aneu al menu Modificar | convertir en simbolo. Trieu la opció clip de pelicula i anomeneu_lo fons2.

Sobre tot fixeu-vos en que el clip estigui centrat, ja que la posició d'un clip és la del punt de registre del seu centre, que pot coincidir, com en aquest cas amb el seu centre geomètric, però en altres casos com en la pràctica de la pissara el punt de registre del seu centre és situa en canto esquerre superior.

 
     
   
     
  D'aquesta manera tenim a la biblioteca el clip fons2. Cal que a l'escenari també l'anomeneu de la mateixa manera.
Si poseu el cursor sobre la imatge de la pera veure que ja és un clip.
 
     
 
 
     
  Amb el panell propiedades obert anomenue-lo fons2.
Perquè la programació funcioni cada clip que hi hagi a l'escenari ha de tenir un nom que l'identifiqui, no n'hi ha prou amb el seu nom a la biblioteca. A vegades s'utilitzen moltes instàncies d'un mateix clip i han de ser perfectament identificabes.
 
        
  Repetiu la mateixa operació amb les diferents imatges amb els següents noms:
  • taronja: fons4
  • raïm: fons6
  • tomàquet: fons1
  • plàtan: fons5
  • taronja: fons3
 
     
  De moment ja hem posat les imatges que serviran per arrossegar-hi a sobre els noms. Com que els hem convertit en clips cada un d'ells té unes coordenades pròpies fàcilment identificables per el Flash.  
     
  Anem ara a escriure els noms de les fruites, els hem de transformar també en clips i posteriorment en botons.
Perquè els botons funcionin bé el text s'ha de transformar en gràfic. Si no ho fem bé hi ha problemes a l'hora de definir la zona d'influència del botó: si convertim un text en botó directament l'area d'influència del botó només és el marc.
 
     
  Amb l'eina de text activada creeu un quadre de text estàtic. Trieu el tipus de lletra i color que més us agradin i millor amb negreta ja que és veu millor.  
     
 

 
     
  Amb el text seleccionat anue al menú Modificar | Separar.  
     
   
     
  El resultat ha de ser aquest.  
     
   
     
  Torneu altr vegada al menú Modificar | Separar i us quedarà així:  
     
   
  Sense deixar de seleccionar el gràfic aneu al menú Modificar | Convertir en símbolo i l'opció Clip de película.  
     
   
     
  Anomeneu_lo clip_tomaquet per a la biblioteca.
Si observeu el símbol ja és un clip. A l'escenari el nom ha de ser a1.
 
     
 

 

 
     
  Repetiu la mateixa operació amb els altres noms de les fruites.
Anomeneu-los d'aquesta manera a la bibioteca i a l'escenari:
 
     
   
fruita nom clip biblioteca nom clip a l'escenari
     
Pera
clip_pera
a2
Taronja
clip_taronja
a3
Poma
clip_pom
a4
Plàtan
clip-platan
a5
Raïm
clip_raim
a6
 
 
     
  La biblioteca us ha de quedar amb aquests 18 elements:  
     
   
     
  Programació als clips  
     
  Al clip a1, tomàquet poseu-hi el següent codi:  
     
  onClipEvent (load) {
*/aquesta ordre llegueix el clip al carregar al carregar la pel·lícula */
_global.posxa1 = this._x;
_global.posya1 = this._y;
*/aquestes dues ordres defineixen les coordenades de posició del clip amb caràcter global, no com a variables del clip*/
}
*/Cal fer menció sobre el diferent caràcter del les variables amb les que treballa el Flash.
Al definir una variable en un clip, si no s'explicita el seu caràcter global s'enten com una variable local del mateix clip i després la programació es complica.
La experiència ens demostra que és un error molt fàcil de cometre i que fa perdre molt de temps en adonar-s'en */
 
     
  Programació al clip a2:  
     
  onClipEvent (load) {
_global.posxa2 = this._x;
_global.posya2 = this._y;

}
 
     
  Programació al clip a3:  
     
  onClipEvent (load) {
_global.posxa3 = this._x;
_global.posya3 = this._y;

}
 
     
  Programació al clip a4:  
     
  onClipEvent (load) {
_global.posxa4 = this._x;
_global.posya4 = this._y;

}
 
     
  Programació al clip a5:  
     
  onClipEvent (load) {
_global.posxa5 = this._x;
_global.posya5 = this._y;

}
 
     
  Programació al clip a6:  
     
  onClipEvent (load) {
_global.posxa6 = this._x;
_global.posya6 = this._y;

}
 
     
     
  Conversió dels clips en botons  
     
  Per aconseguir que els clips responguin a les accions amb el ratoli aquests han de ser botons.
Anem doncs, a posar un botó dins de cada un dels clips.
 
     
  Seleccioneu el clip a1, tomàquet. Clicant amb el ratoli sobre el clip entreu dins del clip. Un cop heu entrat aneu al menú Modificar | Convertir en simbolo i convertiu-lo en un botó amb el nom boto_tomàquet.  
     
   
     
  Cliqueu ara sobre el botó i entreu a la seva línia de temps.  
     
   
     
  Cal que definim ara els diferents estats del botó. Per a no complicar_ho inserteu un fotograma clau a cada un dels estats del botó, Sobre, Presi onado i Zona Activa. Podeu fer-ho prement la tecla F6 o bé apretant el botó dret del ratoli i seleccionat l'opció Insertar fotograma clave.  
     
   
     
  Un cop inserits els fotogrames clau hem de definir la zona activa del botó de manera que no siguin solsament les lletres.
Aneu a l'últim fotograma del botó, Zona activa.
Amb l'eina rectangle activada, sense vores i un color sòlid dibuixeu un rectangle per sobre les lletres.
 
     
   
     
  Torneu a l'Escena, proveu la pel·lícula i comproveu que en posar el cursor sobre el botó canvia i ja és el simbol d'un botó. (una má).  
     
  Un cop comprovat el comprtament com a botó del clip heu de repetir la matixa operació convertint en botons els altres clips amb els segünets noms:  
     
 
nom clip nom botó
a2
boto_pera
a3
boto_taronja
a4
boto_poma
a5
boto_platan
a6
boto_raim

 

 
  Encara que sembli complicada la nomenclatura dels noms val la pena seguir una mateixa lògica a l'hora d'anomenar-los.
Quan s'ha de treballar amb un nombre petit d'elements, tenir-los ben identificats ens facilita la feina, sobre tot en un curs d'iniciació a la programació.
Els/les que continueu aprofondint en la programació ja trovareu altres opcions en les variables indexades, que permeten una programació més global, peró llunyana del marc d'aquest curs.

Comproveu, provant la pel·licula, que tots els clips tenen comportament de botó.
Ara a la biblioteca hi teniu sis elements més.
 
     
   
     
  Funcions que controlen el moviement dels clips i la correcció de la seva posició.  
     
  Cada uns dels clips que tenim a l'escenari està perfectament identificat: Hi ha sis clips que fan el paper de fons i sis que corresponen amb el nom de les fruites.
Hem de definir dues funcions que controlin tan el moviement del clip com si la seva posició és la correcta o no.
Per a moure un clip només ens cal que amb els eventos de ratoli s'identifiqui el seu nom i la seva posició.
Per a comprovar la correcció de la posició necessitem 4 paràmetres, el nom del clip, el del fons corresponent i les posicions inicials del clip en cas que la seva posició en deixar d'arrossegar-lo no siguin les correctes, per a retornar-lo-hi.
 
     
  Afegiu una nova capa i anomeu-la accions.  
     
   
     
  Poseu_hi el codi següent:(Aqui estem en un moment delicat i cal tenir-ho clar:
Posem primer les fucions que controlen abans de la dels botons ja que aquesta crida a les funcions. Fins posades les dues no podreu comprovar el resultat.
 
     
  i = 0;
*/aquest comptador de les vegades que es toca un clip ens permetrà controlar el nivell on es veu el clip amb l'ordre nom.swapDepths(i).
L'iniciem amb el valor 0.
Cal recordar que en un mateix nivell, no confondre amb capes, no hi pot haber dos clips. Aquesta matització és important i font d'ensutts i pèrdues de temps */

function mou_clip(nom) {
*/aquesta funció ens permet moure el clip que té el botó incorporat*/
i++;
*/incrementem en 1 el valor de la variable i */
nom.startDrag(false);
*/permet moure el clip*/
nom.swapDepths(i);
*/fa visible al clip al nivell i*/
}
*/ aquesta funció, com hem comentat, la lliguem a quatre paràmetres, els nom dels clip, nom i del clip fons, nomf,i les coordenades de la posició inicial del clip nom, posx i posy*/function controla(nom, nomf, posx, posy) {
nom.stopDrag();
*/aturem que el clip es pugui arrossegar */
margeError = 15;
*/definim el marge d'error en pítxels per a cada una de les coordenades*/
if (Math.abs(nom._x-nomf._x)<margeError && Math.abs(nom._y-nomf._y)<margeError) {
nom._x = nomf._x;
nom._y = nomf._y;
*/Si el clips estan propers, en funció del marge d'error que definim, el nom es queda a la mateixa posició que el fons*/
_root.contador++;
*/incremenem el comptador d'encerts*/
} else {
nom._x = posx;
nom._y = posy;
*/si la posició del nom no és la correcta retorna al seu lloc*/
}
}
stop();

 
     
  Programació als botons  
     
  Cliqueu sobre el clip a1, tomàquet i cliqueu f9 per posar-hi les accions, compte, cal posar la programació en el botó, no en la línia de temps del botó.  
     
   
     
  Un cop el les accions dl botó poseu-hi aquest codi:  
     
  on (press) {
nom = _root.a1;
nomf = _root.fons1;
_root.mou_clip(nom);
*/en apretar el botó, carreguem les variables nom, nomf, i podem arrossegar el clip amb la funció mou_clip(). Observeu que com la funció es troba en la linia te temps principal, _root, cal especifircar-ho*/
}
on (release) {
_root.controla(nom, nomf, posxa1, posya1);
}
*/en deixar anar el botó actua la funció controla amb els quatre paràmetres*/
 
     
  Deseu l'aplicació i comproveu el seu funcionamament.  
     
   
     
  Cal posar ara la programació als altres botons:  
     
  Programació al clip-boto a2, pera:  
     
  on (press) {
nom = _root.a2;
nomf = _root.fons2;
_root.mou_clip(nom);
}
on (release) {
_root.controla(nom, nomf, posxa2, posya2);
}
 
     
  Programació al clip-boto a2, pera:  
     
  on (press) {
nom = _root.a2;
nomf = _root.fons2;
_root.mou_clip(nom);
}
on (release) {
_root.controla(nom, nomf, posxa2, posya2);
}
 
     
  Programació al clip-boto a3, taronja:  
     
  on (press) {
nom = _root.a3;
nomf = _root.fons3;
_root.mou_clip(nom);
}
on (release) {
_root.controla(nom, nomf, posxa3, posya3);
}
 
     
  Programació al clip-boto a4, poma:  
     
  on (press) {
nom = _root.a4;
nomf = _root.fons4;
_root.mou_clip(nom);
}
on (release) {
_root.controla(nom, nomf, posxa4, posya4);
}
 
     
  Programació al clip-boto a5, plàtan:  
     
  on (press) {
nom = _root.a5;
nomf = _root.fons5;
_root.mou_clip(nom);
}
on (release) {
_root.controla(nom, nomf, posxa5, posya5);
}
 
     
  Programació al clip-boto a6, raïm:  
     
  on (press) {
nom = _root.a6;
nomf = _root.fons6;
_root.mou_clip(nom);
}
on (release) {
_root.controla(nom, nomf, posxa6, posya6);
}
 
     
  Deseu l'aplicació, publiqueu-la i comproveu el resultat.