Creació de figures amb l'API (Opcional)
 
     
  Creació dinàmica del rectangle de la pràctica anterior  
     
  En comptes de tenir el clip rectangle i jugar amb la seva escala podem generar-lo dinàmicament amb el FlashMX.
Per a dibuixar els costats només cal fer servir les ordres lineTo(gruix , color i alpha) , moveTo(coordenada_x, coordenada_y) i lineTo(coordenada_x, coordenada_y) amb les coordenades dels diferents vèrtexs fins a tornar al començament.
Per a farcir-lo de color, l'ordre beginFill (color i alpha)
.
 
   L' objectiu bàsic és:  
 

• Repassar els coneixements sobre les possibilitats que té l'objecte /Math/, propietats matemàtiques, els mètode /.random/ i les opcions de l'API de dibuix

 
     
  Pràctica acabada  
     
   
     
 Desenvolupament de la pràctica  
   
Obriu l'arxiu m7_p3.fla i desueu-lo com a m7_p41.fla.  
   
Només us eliminar els escripts emmarcats.  
     
     
  Deixem de posar el clip retangle de la bibioteca al clip contenidor i la seva escala.  
     
  I introduir els següents  
     
  L'ordre clear() esborra el clip .
Amb beginFill() farcim el recinte que es genera amb dos paràmetres; color, amb el seu codi hexadecimal 0x33FF i alpha, 60:
Amb lineStyle() dibuixem el contorn del recinte, amb tres paràmetres(gruix de la línia, color , alpha)
L'ordre move,To() comença a dibuixar segons les coordenades indicades, en aquest cas el (0,0).
Amb lineTo() anem dibuixant linies rectes seguint els vèrtexs del rectangle (a,0) , (a,b) (0,b) fins acabar altre cop al (0.0).
Amb endFill acabem el farcit.
 
     
     
  Codi final.  
     
  La resta de l'aplicació funciona amb el matix codi.  
     
  System.useCodepage=true;
contador_exercicis = 0;
errades_perimetre = errades_superficie=0;
_root.clip_contenidor.attachMovie("rectangle", "rectangle", 1);
function calcula_costats() {
a = random(300)+50;
b = random(210)+30;
}
function posa_exercici() {
contador_exercicis++;
calcula_costats();
while (b>2*a/3 || b<a/2) {
calcula_costats();
}
_root.clip_contenidor.rectangle._xscale = 100*a/250;
_root.clip_contenidor.rectangle._yscale = 100*b/150;
_root.clip_contenidor.attachMovie("clip_dades", "dades_a", 2);
_root.clip_contenidor.dades_a._x = a+45;
_root.clip_contenidor.dades_a._y = b/2;
_root.clip_contenidor.dades_a.d = "a ="+a;
_root.clip_contenidor.attachMovie("clip_dades", "dades_b", 3);
_root.clip_contenidor.dades_b._x = a/2;
_root.clip_contenidor.dades_b._y = b+15;
_root.clip_contenidor.dades_b.d = "b ="+b;
ex = "<B><I>Exercici "+contador_exercicis+"</I></B>: Calcula el perímetre i la superfície d'aquest rectangle";
_root.clip_contenidor.attachMovie("perimsuperf", "perimetre", 4);
_root.clip_contenidor.perimetre.d = "Perímetre: ";
_root.clip_contenidor.perimetre._x = 50;
_root.clip_contenidor.perimetre._y = b+50;
_root.clip_contenidor.attachMovie("perimsuperf", "superficie", 5);
_root.clip_contenidor.superficie.d = "Superfície: ";
_root.clip_contenidor.superficie._x = 50;
_root.clip_contenidor.superficie._y = b+90;
_root.clip_contenidor.attachMovie("resposta", "resposta_perimetre", 6);
_root.clip_contenidor.resposta_perimetre.gotoAndStop(1);
_root.clip_contenidor.resposta_perimetre.r = "";
_root.clip_contenidor.resposta_perimetre._x = 155;
_root.clip_contenidor.resposta_perimetre._y = b+50;
_root.clip_contenidor.attachMovie("resposta", "resposta_superficie", 7);
_root.clip_contenidor.resposta_superficie.gotoAndStop(1);
_root.clip_contenidor.resposta_superficie.r = "";
_root.clip_contenidor.resposta_superficie._x = 155;
_root.clip_contenidor.resposta_superficie._y = b+90;
perimetre = 2*(a+b);
area = a*b;
control_perimetre=control_superficie=0;
}
posa_exercici();
function corregir() {
if (_root.clip_contenidor.resposta_perimetre.r == perimetre) {
_root.clip_contenidor.resposta_perimetre.gotoAndStop(2);
control_perimetre = 1;
} else {
_root.clip_contenidor.resposta_perimetre.gotoAndStop(3);
errades_perimetre++;
control_perimetre = 0;
}
if (_root.clip_contenidor.resposta_superficie.r == area) {
_root.clip_contenidor.resposta_superficie.gotoAndStop(2);
control_superficie = 1;
} else {
_root.clip_contenidor.resposta_superficie.gotoAndStop(3);
errades_superficie++;
control_superficie = 0;
}
}
function continuar() {
control = control_perimetre*control_superficie;
if (control == 1) {
posa_exercici();
} else {
stop();
}
} function acabar() {
control = control_perimetre*control_superficie;
if (control == 1) {
gotoAndStop(2);
resum = "Has fet <B>"+contador_exercicis+"</B> exercicis<BR><BR>Amb <B>"+errades_perimetre+" </B> errades en el càlcul dels perímetres<BR><BR>I amb <B>"+errades_superficie+"</B> errades en el càlcul de les superfícies";
} else {
stop();
}
}
stop();
 
     
  Deseu l'arxiu, publiqueu-lo i comproveu el seu funcionament.  
     
  Creació dinàmica d'un triangle  
     
  Pràctica acabada.  
     
   
     
  Amb l'API de dibuix es poden crear quantes figues vulguem, el problema és que cal un domini importat de l'aparell matemàtic per a poder calcular les coordenades dels diferents vèrtexs o fer servir equacions algebraiques o paramètriques de corves cosa que surt del marc d'aquest curs.
No obstant si escollim bé les variables podem dibuixar dinàmicament un triangle amb dades aleatòries. En el nostre cas pendrem com a variables la seva altura i les projeccions dels dos costats sobre la base tal com s'indica a la imatge:
 
     
   
     
 Desenvolupament de la pràctica  
     
  Creeu un nou document de Flash i deseu-lo com a m7_p42.fla.  
     
  A l'escenari amb el menú Insertar | nuevo simbolo creu un clip buit i anomeneu-lo contenidor.  
     
   
     
  Torneu a l'escena, arrossegue-lo a l'escenari i la instància del clip anomeneu-la contenidor.  
     
   
     
  Aneu a la biblioteca i vinculeu-lo amb el nom contenidor.  
     
   
     
  Si observeu a les porpietats de la biblioteca ara surt aquest nom com a opció d'exportació.  
     
   
     
  Creeu una nova capa, anomeme-la accions i poseu-hi el següent codi:  
     
  _root.contenidor.attachMovie("contenidor","origen",1);
function calcula_dades() {
a1 = random(150)+30;
a2 = random(150)+30;
b = random(120)+40;
}
function dibuixa_triangle() {
calcula_dades();
_root.contenidor.origen.beginFill(0x0033CC,60);
_root.contenidor.origen.lineStyle(2, 0x0033CC, 100);
_root.contenidor.origen.moveTo(-a1, 0);
_root.contenidor.origen.lineTo(0,-b);
_root.contenidor.origen.lineTo(a2, 0);
_root.contenidor.origen.lineTo(-a1, 0);
_root.contenidor.origen.endFill;
}
dibuixa_triangle()
 
     
  Cal tenir en compte que les coordenades verticals són negatives ja que com més alt sigui el vèrtex superio més petita serà la seva coordenada..
Deseu l'apliació i proveu-la. Podeu modificar els colors tan dels costats com del farcit així com la seva alpha fins que us sembli adequat.
Ara ens cal dibuixar l'altura del triangle. Va millor fer-ho en altre clip ja que si la dibuixem en el clip origen on es dibuixa el triangle el farcit no funciona bé.
Afegiu el codi senyalat amb vermell a la programació
 
     
   
     
  Si voleu que l'apliació funcioni moltes vegades cal que s'esborri el què ja s'ha dibuixat afegiu a les funcions que dibuixen l'ordre clear() amb el codi següent  
     
  function dibuixa_altura() {
*/per esborrar el què hi ha /*
_root.contenidor.altura.clear();
_root.contenidor.altura.lineStyle(2, 0xFF0000, 100);
 
  i  
  function dibuixa_triangle() {
_root.contenidor.origen.clear();
calcula_dades();
 
     
     
  Codi sencer.  
     
  _root.contenidor.attachMovie("contenidor", "origen", 1);
_root.contenidor.attachMovie("contenidor", "altura", 2);
function dibuixa_altura() {
_root.contenidor.altura.clear();
_root.contenidor.altura.lineStyle(2, 0xFF0000, 100);
_root.contenidor.altura.moveTo(0, 0);
_root.contenidor.altura.lineTo(0, -b);
}
function calcula_dades() {
a1 = random(150)+30;
a2 = random(150)+30;
b = random(120)+40;
a = a1+a2;
}
function dibuixa_triangle() {
_root.contenidor.origen.clear();
calcula_dades();
_root.contenidor.origen.beginFill(0x0033CC, 60);
_root.contenidor.origen.lineStyle(2, 0x0033CC, 100);
_root.contenidor.origen.moveTo(-a1, 0);
_root.contenidor.origen.lineTo(0, -b);
_root.contenidor.origen.lineTo(a2, 0);
_root.contenidor.origen.lineTo(-a1, 0);
_root.contenidor.origen.endFill;
dibuixa_altura();
}
dibuixa_triangle();
 
     
  Per povar l'aplicació reiteradament poseu un botó qualsevol a l'escenari cridant a la funció dibuixatriangle()  
     
   
     
  Deseu l'apliacció amb el nom m7_p4_2.fla, publiqueu-la i comproveu el seu funcionament.  
     
  Si us sembla adient, podeu posar hi les dades, la base l'altura amb clips dades dins el clip contenidor. A l'hora de fer preguntes podeu demanarne el càlcul de la superfície i segons el nivell si l'alumnat coneix el teorema de Pitàgores el seu perímetre etc.  
     
  Creació dinàmica d'altres figures  
     
  Amb funcions semblants és relativament fàcil crear dinàmicament moltes figures i proposar diferents exercicis segons el nivell al que estiguin adreçades..  
     
  Dibuix d'un rombe, variables les dues diagonals.  
     
  Obriu el docuement m7_p4_2.fla i deseu_lo amb el nom de rombe. Subtiiu el codi del fotograma 1 per aquest:  
     
  _root.contenidor.attachMovie("contenidor", "origen", 1);
function calcula_diagonals() {
d1 = random(250)+100;
d2 = random(250)+100;
/* si volem que la diagonal gran estigui sobre l'eix vertical i la petita sobre l'horitzontal, utilitzem els mètodes Math.max() i Math.min() de la classe Math() */
a = Math.max(d1, d2);
b = Math.min(d1, d2);
}
function dibuixa_rombe() {
_root.contenidor.origen.clear();
calcula_diagonals();
_root.contenidor.origen.beginFill(0x0033CC, 60);
_root.contenidor.origen.lineStyle(2, 0x0033CC, 100);
_root.contenidor.origen.moveTo(b/2, 0);
_root.contenidor.origen.lineTo(0, -a/2);
_root.contenidor.origen.lineTo(-b/2, 0);
_root.contenidor.origen.lineTo(0,a/2);
_root.contenidor.origen.lineTo(b/2, 0);
_root.contenidor.origen.endFill;
}
dibuixa_rombe();
 
     
  En el botó de l'escenari crideu a la funció dibuixa_rombe():  
     
  on (press){
dibuixa_rombe()
}
 
     
  Mostra de l'aplicació:  
     
   
     
  Deseu l'arxiu, publiqueu-lo i comproveu el seu funcionament.  
     
  Dibuix d'un polígon regular, variables el radi de la cincumferència circumscrita i el nombre de costats.  
     
  Si en comptes de treballar amb variables retangulars ho fem amb coordenades polars, distància a l'origen i angle que forma el vector de posició amb l'eix x podem dibuixar qualsevol polígon regular i amb un nombre gran de costats una circumferència.  
     
  Relació entre coordendes rectangulars i polars:  
     
   
     
  Obriu l'arxiu rombe.fla i deseu-lo com a poligon.fla. Subtituiu el codi per el següent:  
     
  _root.contenidor.attachMovie("contenidor", "origen", 1);
/* per començar definim el nombre de costats com a 3 */
n=3;
function calcula_radi() {
r = random(150)+50;
}
function dibuixa_poligon() {
_root.contenidor.origen.clear();
calcula_radi();
_root.contenidor.origen.beginFill(0x0033CC, 60);
_root.contenidor.origen.lineStyle(2, 0x0033CC, 100);
/* situem el primer punt sobre l'eix y per matenir-ne la simetria */
_root.contenidor.origen.moveTo(0, -r);
/*cada punt nou ha de girar l'enésima part de 360*/
increment=360/n;
/*fem una iteració fins al penúltim punt */
for (i=0; i<=(360-increment/2); i=i+increment) {
/* passem l'angle a radians ja utilitzant el mètode Math.PI ja que la classe Math() no treballa amb graus. Com que hem desplçat el primer punt 90º ho hem de tenir en compte per a cada un dels punts */
angle = (i*Math.PI/180)+Math.PI/2;
/*Utilitzarem els mètodes Math.PI, Math.sin() i Math.cos() de la classe Math()*/
_root.contenidor.origen.lineTo(r*Math.cos(angle), -r*Math.sin(angle));
}
/* situem l'últim punt del polígon sobre el primer */
_root.contenidor.origen.lineTo(0, -r);
_root.contenidor.origen.endFill;

}
dibuixa_poligon();
 
     
  Al botó hi posem la crida a la funció dibuixa_poligon().  
     
  on (press){
dibuixa_poligon()
}
 
     
  Si volem modificar el nombre de costats afegiu a l'escenari un quadre de text d'introducció de text i nom de la variable n, tal com hi a la mostra:  
     
  Mostra de l'aplicació:  
     
   
     
  Deseu l'aplicació, publiqueu-la i comproveu el seu funcionament. Quan el nombre de costats és gran el que és visualitza és una circumferència.  
     
     
  Dibuix d'una elipse, variables els dos semieixos.  
     
  Per a dibuixar una elipse farem servir les seves equacions paramètriques, per raons d'estètica situarem l'eix major sobre la horitzental. Com que la elipse és una corva tancada, hem d'aproximarla per una poligonal. Prendrem com a variable l'angle sobre l'eix amb increments de cinc graus. Cal tenir en compte que treballem en radian i que hem de fer-ne la conversió.  
     
  Obriu l'arxiu rombe.fla i deseu-lo com a elipse.fla. Subtituiu el codi per el següent:  
     
  _root.contenidor.attachMovie("contenidor", "origen", 1);
function calcula_radis() {
r1 = random(150)+50;
r2 = random(100)+50;
/*triem el més grans dels dos semieixos per situar-lo sobre l'eix x */
a = Math.max(r1, r2);
b = Math.min(r1, r2);
}
function dibuixa_elipse() {
_root.contenidor.origen.clear();
calcula_radis();
_root.contenidor.origen.beginFill(0x0033CC, 60);
_root.contenidor.origen.lineStyle(2, 0x0033CC, 100);
_root.contenidor.origen.moveTo(a, 0);
/* Dibuixem una poligonal amb aquesta iteració. Prenem com a variable l'angle i l'anem incrementant de 5 en 5. De fet dibuixem un polígon de 72 costats però visulment ens fa l'efecte d'una corva contínua. Podeu variar aquest paràmetre i veure què passa.*/
for (i=0; i<=360; i=i+5) {
/* convertin l'angle a radians */
angle = i*Math.PI/180;
/* utilizem les coordenades paramètiques de l'elipse */
_root.contenidor.origen.lineTo(a*Math.cos(angle), -b*Math.sin(angle));
}
_root.contenidor.origen.endFill;
}
dibuixa_elipse();
 
     
  Igualment al botó cal cridar a la funció corresponent, dibuixa_elipse()  
     
  on (press){
dibuixa_elipse()
}
 
     
  Deseu l'aplicació, publiqueu-la i comproveu-ne el seu foncionament.  
     
  Mostra de l'aplicació:  
     
   
     
  Deseu l'aplicació, publiqueu-la i comproveu el seu funcionament.