Aplicació de funcions trigonomètriques per a controlar els moviments i la orientació dels clips de pel·lícula. Continuació.  

 
    
En aquesta quarta pràctica continuareu amb les funcions trigonomètriques i coneixements adquirits en les primeres pràctiques (distàncies, punts de registre, girs...) per a desenvolupar una aplicació força curiosa en la que simulareu una eina (compàs) que de forma virtual dibuixarà circunferències amb radis definits per l'usuari.
 
    
Els objectius d'aquesta quarta pràctica són:

 
    
    • Aplicació de la funció sin() i cos() per a la ubicació exacta de clips de pel·lícula en trajectòria circular.

    • Control de distàncies entre clips en diferents nivells de jerarquia.
    • Tècniques de control dinàmic de moviments d'objectes per mitjà de botons.
       
     
 
Per dur a terme aquesta pràctica necessitareu l'arxiu compas0.FLA.  
    
    
 Desenvolupament de la pràctica  
 
 Creació d'una aplicació de simulació d'un compàs virtual.  
 
 
    

Com podeu observar jugant una mica amb el programa que es mostra, es tractarà de programar les accions a realitzar per a l'element corresponent per a que faci aquestes simulacions:

  • Dibuixar circumferències.
  • Obrir i tancar compàs amb intèrvals curts o de forma contínua.
  • Girar el compàs amb intèrvals curts o de forma contínua.
  • Arrossegar el compàs per la pantalla.
  • Peparar el color del traç de la circumferència (es veurà en un altre mòdul)
 
Per tal de facilitar la comprensió de la pràctica i del corresponent codi observeu els aspectes següents:  
    
  • El compàs consta de varis clips integrats dins del clip de pel·lícula amb el nom de instància compas.
  • Els braços del compàs tenen el punt de registre en un extrem per a facilitar la rotació.
  • A les puntes dels braços hi ha els clips agull i rotring que serviran per a determinar les distàncies entre els dos extrems del compàs que utilitzareu per traçar la circunferència amb aquest radi.
  • Dins del compàs hi ha un botó al que es dotarà d'accions per a que faci el traç de l circumferència (cargol vermell del compàs).
  • Fora de l'escenari hi ha un clip bola que amb les duplicacions coresponents traçarà els puns que formaran la circumferència.
  • També hi ha un clip fora de l'escenari que ens sevirà de contenidor del codi per controlar les accions d'obrir, tancar i girar compàs.
 
      
  » Inseriu el codi d'inicialització de les variables que s'utilitzaran al programa i que nireu esbrinant a mesura que es vagi programant el codi:  
    

n=15;
x=0;
y=0;
x1=0;
y1=0;
mx=0;
my=0;
coordenades=0;
coordenades2=0;
j=0;jj=0;
nivell=0;
g=0;
mycolor=0;

 
  
» Inseriu el següent codi a les accions del botó amb la icona de compàs tancat:
  

on (press) {
_root.jj = 1;
}
on (release) {
_root.jj = 0;
}

  
» Feu el mateix al segon botó (compàs obert), però utilitzant la variable j i el mateix amb el botó de gir utilitant la variable g. En els tres botons les variables corresponents actuen com a interruptors per activar o desactivar les accions que hauran de realitzar.
  
» Inseriu el següent codi en el clip que es troba fora de l'escenari i que controlaran les accions activades pels botons: tancar, obrir, girar.
    

onClipEvent (enterFrame) {
if (_root.j == 1) {
if (_root.n>-1) {
_root.compas.braç1._rotation--;
_root.compas.braç2._rotation++;
_root.n--;
}
}
}


onClipEvent (enterFrame) {
if (_root.jj == 1) {
if (_root.n<90) {
_root.compas.braç1._rotation++;
_root.compas.braç2._rotation--;
_root.n++;
}
}
}


onClipEvent (enterFrame) {
if (_root.g == 1) {
_root.compas._rotation++;
}
}

       
 

Observeu que per a que l'obertura, tancament, gir... siguin continuats les accions s'inclouen dins l'evento enterFrame respectivament.

En cas de que les varibles interruptors estiguin activades realitzaran les accions d'obrir o tancar el compàs fins el límit posat per la condició (no més de 90 graus d'obrtura ni menys de 0 graus de tancament).

Ara necessiteu que el compàs es pugui arrossegar per l'escenari.

Com un clip de pel·lícula no es sensible en principi a les accions del ratolí, i si als eventos, l'arrossegament del clip de pel·lícula el prodreu aconseguir amb l'evento mouseDown i mouseUp quan es dectecti la col·lísió del ratolí sobre el compàs.

» Inseriu el següent codi a les accions del clip de pel·lícula compàs:

 
     

onClipEvent (mouseDown) {
if (this.hitTest(_root._xmouse, _root._ymouse, true)) {
this.startDrag("");
}
}
onClipEvent (mouseUp) {
if (this.hitTest(_root._xmouse, _root._ymouse, true)) {
this.stopDrag("");
}
}
onClipEvent (load) {
_root.compas.swapDepths(10000000);
}

 

 

En l'evento load s'utilitza el mètode swapDepths() ja explicat en el mòdul 3 amb la finalitat de que el compàs estigui sempre per sobre de les línies que dibuixa.

Per a finalitzar programareu l'acció de dibuixar la circumferència. Això implica seguir un procediment que constarà de quatre fases:

1.- Convertir les coordenades locals del clip agull a coordenades globals de l'escenari. Per fer això s'utilitza la funció getBouns() ja explicada al mòdul 4.

2.- Fareu el mateix amb el clip rotring per a coneixer les seves coordenades globals.

3.- Calcular la distància entre aquets dos clips de pel·lícula (agull, rotring) utilitzant les seves coordenades de l'escenari. (Recordeu el teorema de Pitàgores).

4.- Traçar la circumferència amb un bucle finit de repetició que utilitza les funcions trigonomètirques sin() i cos() i amb la corresponent conversió a graus, situa el clip de pel·lícula fent la necessària duplicació i traça els punts que formaràn la circumferència.

  
Ara s'inclou el codi de aquestes 4 fases en blocs.  
    

on (release) {

// Bloc 1
_root.coordenades = _root.compas.braç1.agull.getBounds(_root);
_root.mx = _root.coordenades.xMin;
_root.my = _root.coordenades.yMin;
_root.x = _root.mx;
_root.y = _root.my;

// Bloc 2
_root.coordenades2 = _root.compas.braç2.rotring.getBounds(_root);
_root.mx2 = _root.coordenades2.xMin;
_root.my2 = _root.coordenades2.yMin;
_root.x1 = _root.mx2;
_root.y1 = _root.my2;

// Bloc 3
if (_root.x1>_root.x) {
var n1 = _root.x1-_root.x;
} else {n1 = _root.x-_root.x1;}
if (_root.y1>_root.y) {
var n2 = _root.y1-_root.y;
} else {n2 = _root.y-_root.y1;}
var dist = Math.sqrt((n1*n1)+(n2*n2));

// Bloc 4
for (var a = 0; a<361; a += 1) {
_root.bola._x = _root.x+Math.cos((a/180)*Math.PI)*dist;
_root.bola._y = _root.y+Math.sin((a/180)*Math.PI)*dist;
_root.bola.duplicateMovieClip("bola"+a, _root.nivell++);
}
}

 
   

Observeu que el bloc tres té les condicions necessàries per a evitar errors en cas que el compàs estigui girat de forma que les coordenades dels clips de pel·lícula agull i rotring pugin ser de signe negatiu i el càlcul de les distàncies no seria correcte.

Mereix especial atenció el quart bloc del codi, on l'acció que es repeteix 360 vegades situa el clip bola en les coordenades X i Y, utilitzant la funció cos() que fa referència a l'eix X i sin() que fa referència a l'eix Y. Ja que la funció Math.cos() treballa en radians s'ha de convertir en graus ((a/180)*Math*PI).

El radi de l circumferència ve donat per la distància calculada i el centre de la mateixa ve donat per les variables globals x, y.

 
    

Una vegada es situa el clip de pel·lícula bola es procedeix a la seva duplicació en el seu nivell correponent.

Observeu que no heu dotat de codi els botons de colors, ja que aquest apartat de tractament de colors es treballarà al mòdul 7 on podeu completar tota l'aplicació como es pot veure en el programa que es mostra en aquesta pràctica.

Deseu l'arxiu després de comprovar el seu funcionament amb el nom compas1.