Aplicació de funcions trigonomètriques per controlar els moviments i l'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 desenvolupar una aplicació força curiosa en la qual simulareu una eina (compàs) que, de forma virtual, dibuixarà circumferències amb radis definits per l'usuari/ària.
 
      
  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.zip.  
      
      
   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 que cal fer per a l'element corresponent perquè faci aquestes simulacions:

  • Dibuixar circumferències.
  • Obrir i tancar el compàs amb intervals curts o de forma contínua.
  • Girar el compàs amb intervals curts o de forma contínua.
  • Arrossegar el compàs per la pantalla.
  • Preparar el color del traç de la circumferència (es veurà en un altre mòdul).
 
  Per facilitar la comprensió de la pràctica i del codi corresponent, observeu els aspectes següents:  
      
 
  • El compàs consta de diversos clips integrats dins el clip de pel·lícula amb el nom d'instància compas.
  • Els braços del compàs tenen el punt de registre en un extrem per facilitar la rotació.
  • A les puntes dels braços hi ha els clips agull i rotring que serviran per determinar les distàncies entre els dos extrems del compàs que utilitzareu per traçar la circumferència amb aquest radi.
  • Dins el compàs hi ha un botó al qual es dotarà d'accions perquè faci el traç de la circumferència (cargol vermell del compàs).
  • Fora de l'escenari hi ha un clip bola que, amb les duplicacions corresponents, traçarà els punts que formaran la circumferència.
  • També hi ha un clip fora de l'escenari que us servirà 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 anireu 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 codi següent 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 utilitzant la variable g. En els tres botons, les variables corresponents actuen com a interruptors per activar o desactivar les accions que hauran de fer.
  
»  Inseriu el codi següent al clip que es troba fora de l'escenari i que controlaran les accions activades pels botons de 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, perquè l'obertura, tancament, gir... siguin continuats, les accions s'inclouen dins la incidència enterFrame, respectivament.

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

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

Com que un clip de pel·lícula no és sensible, en principi, a les accions del ratolí, i sí a les incidències, l'arrossegament del clip de pel·lícula el podreu aconseguir amb la incidència mouseDown i mouseUp quan es detecti la col·lisió del ratolí sobre el compàs.

» Inseriu el codi següent 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);
}

 

  

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

Per finalitzar, programeu 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. Feu el mateix amb el clip rotring per conèixer les seves coordenades globals.

3. Calcular la distància entre aquests 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ètriques sin() i cos(), i amb la corresponent conversió a graus, situar el clip de pel·lícula fent la duplicació necessària i traçar els punts que formaran la circumferència.

  
  Ara s'inclou el codi d'aquestes quatre 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 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 sigui correcte.

Mereix especial atenció el quart bloc del codi on l'acció que es repeteix 360 vegades situa el clip bola a 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 radiants i s'ha de convertir en graus ((a/180)*Math*PI).

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

 
    

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

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ó, com es pot veure en el programa que es mostra en aquesta pràctica.

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

 
      
  En aquesta pràctica, heu utilitzat un sisitema de fer circumferències i línies amb duplicacions de clips, per poder fer aplicacions i veure aquest sistema. Però amb la nova API de dibuix a partir de la versió MX, es poden crear corbes, circumferències, arcs, el·lipses... utilitant el mètode curveTo();  
  

lineStyle(3,0xFF6600,100);
moveTo(100,200);
// 50=referència centre de corba x;
// 10= referència punt de corba y;
// 450 y 200 punt final
curveTo(50,10,450,200);

  
  Obriu un document nou i poseu, en el primer fotograma de la línia de temps, aquest codi anterior, on es crea l'estil de línia en primer lloc, ubiqueu el punt de registre on començarà la línia, i traceu la corba segons els paràmetres explicats com a comentari en el mateix codi.