Aplicació d'actionscript per a crear gràfics dinàmics.
La finalitat d'aquesta pràctica és començar a treballar amb el concepte d'aleatorietat, aplicarem les possibilitats creatives . La funció d'aleatorietat ens dóna resultats sempre diferents, que ens permeten donar molta varietat a una mateixa aplicació. |
||
Els objectius són: | ||
|
||
El resultat final de la pràctica és la següent aplicació: Un rectangle, amb les mides generades aleatòriament que es dibuixa respectant les proporcions dels seus costats. S'en demana el càlcul del seu perímetre i la seva àrea. En acabar s'ofereix un resum de l'activitat. |
||
Proveu-la. No es pot continuar ni acabar fins que els dos resultats són correctes. Si es vol polir l'activitat els quadres de text ha de tenir un tractament si la resposta no és correcta, o be esborrar la variable o bé posar clips_resposta com al mòdul 5. |
||
Desenvolupament de la pràctica | ||
En primer lloc crearem un clip que anomenarem rectangle. Creeu un nou document de Flash i deseu-lo com a m7p3. Aneu al menú /Insertar nuevo símbolo i escolliu l'opció de Clip de pelicula. |
||
![]() |
||
Un cop creat, seleccioneu l'opció rectangulo de la barra d'eines i dibuixeu un rectangle de 250x150 sense vores, amb el farcit que us agradi i amb el punt de regitre del clip en el vèrtex superior esquerre. | ||
![]() |
||
![]() |
||
És importat tenir clar el paper que juga el punt de registre d'un clip, ja que si el volem posar dinàmicament en l'escenari és necesari saber-ho, ja que representa la posició a partir de la qual es carregarà. En aquest cas situar-lo en el vèrtex superior esquerre ens facilita la feina. Si oberveu en l'ecenari no hi ha res, el clip es troba a la bibioteca. Quan posem un clip a l'escenari el primer que fem és donar-li un nom. Si és a la biblioteca cal que el Flash el reconegui en quan es cridi desde la programació. Aquesta acció s'en diu vincular un clip. Aneu a la biblioteca, cliqueu sobre el clip rectangle i premeu el botó dret del ratolí. S'obre un panell, escolliu l'opció Vinculación. |
||
![]() |
||
Com a identificador mantenim el nom de rectangle amb les dues opcions de vinculació activades. | ||
![]() |
||
A continuació crearem un nou clip, buit que anomenarem clip_contenidor. |
||
![]() |
||
Un cop creat torneu a l'escena, i des de la biblioteca arrossegueu el clip_contenidor a l'escenari. El podeu posar a la posició x=60, y=60. | ||
![]() |
||
"attach" del clip_rectangle dins el clip_contenidor. | ||
Anem ara a posar el clip rectangle dins el clip contenidor. Farem servir l'ordre attachMovie() que té tres paràmetres, el nom del clip de la biblioteca que volem carregar, el nom amb el què el volem identificar com a instància a l'escenari i el seu ordre de profunditat. Creeu una nova capa i anomeneu-la accions. Al primer fotograma hi poseu el següent script. |
||
/* la sintaxi és nom del clip, attachMovie i els tres paràmetres. En aquest cas hi poseu profunditat 1, per exemple. Recordeu que no hi pot haber dos clips a la mateixa profunditat*/ |
||
Comproveu, provant la pel·licula, que el rectangle es coloca en el lloc adeqüat. | ||
Generació aleatòria de les mides del rectangle. Funció random(). | ||
El Flash porta predeinides un seguit de funcions metemàtiques encabides dins l'objecte Math. . Hi podreu trobar la majoria de les funcions matemàtiques usuals en qualsevol llenguatge de programació. Nosaltres emprarem ara Math.random() o senzillament random(). Si posem en un script random(10), per exemple, es genera on nombre aletori entre 0 i 9. A nosaltres ens interessa tenir unes dimensions del rectangle acceptables segons les mides de la pantalla. Podeu posar que el llarg estigui entre 50 i 350 i l'ample entre 30 i 240. Amb aquests valors calculem els costats del triangle. Afegiu aquesta funció a la programació. |
||
function calcula_costats() { a = random(300)+50; b = random(210)+30; } |
||
Un cop calculades les dimensions del nou rectangle hem de poder modificar les mides del rectangle primer que surt a l'escenari. Hi ha les propietats _xscale i _yscale que modifiquen l'escala del clip en les dues dimensions. En aquest cas tenim em compte les del rectangle original, clip_rectangle, 250x150. Aquestes dues propietats valen per a qualsevol instància del clip que tenim l'escenari. Aquesta és la raó de per què hem convertit el rectangle en un clip, per poder modificar-lo. Afegiu aquesta funció a la capa accions. |
||
function posa_exercici() { contador_exercicis++; calcula_costats(); _root.clip_contenidor.rectangle._xscale = 100*a/250; _root.clip_contenidor.rectangle._yscale = 100*b/150; } */cridem a la funció*/ posa_exercici() |
||
Poseu un botó a l'escenari. Recordeu Ventana |Otros paneles |Bibliotecas comunes |Botones. Trieu-ne un que us agradi o bé el podeu personalitzar al vostre gust. | ||
![]() |
||
|
||
A les accions del botó poseu-hi aquest escript que crida a la funció posa_exercici(). | ||
![]() |
||
Deseu l'arxiu, i proveu el resultat. Com que les dimensions dels rectangle són aleatòries dins uns rangs, cada vegada que cliquem el botó el rectangle canvia. Ara bé, a vegades ens surt un rectangle o molt ample o molt alt. Per a evitar-ho hem de posar un filtre que ens garanteixi que la forma del rectangle és més armònica. Podem exigir, per exemple que l'ample estigui entre la meitat i les dues terceres part del llarg. Feren servir l'ordre while (mentre). La seva sintaxi és: while( condició que s'ha de complir ){ accions a fer mentre es compleixi la condició } La condició és que mentre l'ample sigui més gran que els 2/3 del llarg ó bé més petit que la meitat del llarg torni calcular les dades, activar la funció calcula_costats(). El ó lògic es representa per el símbol ||. Afegiu aquest escript a la funció: |
||
while (b>2*a/3 || b<a/2) { calcula_costats(); } La funció ha de quedar així: function posa_exercici() { */cada cop que posem un nou exercici incrementem en una unitat aquest comptador*/ 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; } |
||
Proveu de nou la pel·lícula apretant moltes vegades el botó. Si el resultat no us satisfà, queda massa petit o massa gran, podeu modificar les dimensions del rectangle definides a la funció calcula_costats(). | ||
Visualització de les mides del rectangle en clips dinàmics. | ||
Com que les dimensions del rectangle varien a cada exercici,els caps de text del llarg l'ample, que ens premetran calcular el seu perímetre i la seva àrea, no les poden ser quadres de text estàtics, ja que o bé ens queden molt separats o bé sota el rectangle. Perquè ens quedin bé els podem posar lligats a les mides del nousrectangle, aproximadament a la meitat de cada un dels dos costats. Haurem de crear un nou clip per a posar aquestes dades. Amb un sol clip a la biblioteca en tindrem prou, ja que "el vincularem" al clip_contenidor amb noms diferents. Aquesta opció és interessant quan es volen posar dinàmicamant mots clips iguals a l'escenari. |
||
Creeu un quadre de text dinàmic, amb la font que vulgueu, mida no massa gran, 16 i de 70x24 per exemple, amb el nom de la variable d. Si al provar-ho no us agrada, sempre podreu modificar-lo al vostre gust. |
||
![]() |
||
Convertiu_la en clip amb el nom clip_dades. A la biblioteca vinculeu-lo amb el nom de clip_dades. Esborreu-lo de l'escenari. |
||
![]() |
||
Verifiqueu que el punt de registre del cip es trova en el seu centre. Ens serà necessari saber on és per situar-lo correctament. ![]() Com que l'hem situar dins el clip_contenidor cal recodar que aquest és un clip buit. Fem coincidir els punts de referència en el vèrtes superior esquerre del clip_rectangle. Mireu aquesta imatge de com els volem posar: |
||
![]() |
||
A la funció posa_exercici afegiu aquest codi: | ||
_root.clip_contenidor.rectangle._xscale = 100*a/250; _root.clip_contenidor.rectangle._yscale = 100*b/150; */vinculem el clip_dades amb el nom de dades_a i amb profunditat 2*/ _root.clip_contenidor.attachMovie("clip_dades","dades_a",2); */posem les coordenades del clip dades_a segons l'esquema anterior*/ _root.clip_contenidor.dades_a._x=a+45; _root.clip_contenidor.dades_a._y=b/2; */el clip porta un quadre de text dinàmic que te una variable d que prendrà el text "a =" + el valor de la variable a*/ _root.clip_contenidor.dades_a.d="a ="+a; */vinculem el clip_dades amb el nom de dades_b i amb profunditat 3*/ _root.clip_contenidor.attachMovie("clip_dades","dades_b",3); */posem les coordenades del clip dades_b segons l'esquema anterior*/ _root.clip_contenidor.dades_b._x=a/2; _root.clip_contenidor.dades_b._y=b+15; */ donem valor a la variable d del clip dades_b*/ _root.clip_contenidor.dades_b.d="b ="+b; |
||
Deseu l'arxiu fla i comproveu el resultat provant la pel·licula. Si no us fa el pes la posició de les dades podeu modificar el codi segons les vostres preferències. |
||
Hem posat al clip_contenidor amb l'ordre attachMovie() dues instàncies del mateix clip. Com podeu comprovar no hi cap dificultat en treballar amb clips imbricats sempre que especifiquem correctament les rutes dels clips i de les seves variables per controlar-ne el contingut. | ||
Per acabar la part de presentació, creeu un quadre de text dinàmic, amb una lletra de mida 16, HTML activat , i amb el nom de la varible ex. | ||
![]() |
||
Afegiu aquest codi al coemençament de la programació: | ||
System.useCodepage=true; */iniciem el comptador d'exercicis, i els d'errades en el càlcul del perímetre i l'àrea que emprarem després*/ contador_exercicis = 0; errades_perimetre = errades_superficie=0; |
||
Ens cal ara donar valor a la variable ex. Afegiu aquestes dues de codi al final de la funció posa_exercici: |
||
_root.clip_contenidor.dades_b.d = "b ="+b; */Usem les etiquetes HTML per a posar en negreta <B> i cursiva<I> el començamant de l'enunciat, tanquen les etiquetes HTML, afegim la variable contador_exercicicis i afegim el text final amb la demanda del càlculs del perímetre i l'àrea"*/ ex = "<B><I>Exercici "+contador_exercicis+"</I></B>: Calcula el perímetre i la superfície d'aquest rectangle"; } |
||
Deseu l'arxiu fla, proveu la película i feu els ajustos necessaris. Fixeu-vos que al moure el clip_contenidor tot es desplaça. Situe-lo on us sembli mésa adient. |
||
Muntatge de la part de correcció | ||
Un cop enllestida la presentció de les dades ens queda muntar la estructura per a la correció. Si volem, com en la presentació de dades, que tot funcioni d'una manera dinàmica i s'adapti a les mides de la figura ens cal posar quatre clips nous a l'escenari, dos amb un text estàtic que indiqui on s'han d'introduir les dades del perimetre i de l'àrea i dos clips, amb tres fotogrames on intruduir les dades que es demanen a l'aplicació. Aquests clips tindran el text en diferents colors en cada situació, blau per entrar dades, vermell si la resposta és incorrecta i verd si aquesta és correcta. |
||
Clip perimsuperf |
||
Creeu un quadre de text dinàmic de mides semblants a les de la figura i nom de la variable d. (Si el nom de la variable us sembla massa abastcte la podeu anomenar dades perimetre_superfície, per exemple ja que emprarem dues instàncies d'aquest clip, una per al perímetre i una altra per la superfície). |
||
![]() |
||
Convertiu-lo en clip i anomenu-lo perimsuperf i vinculeu-lo amb aquest nom. | ||
![]() |
||
Clip resposta. | ||
Creu un quadre de text d'entrada, amb vores de mides semblants a les de l'imatge, el nom de la variable r | ||
![]() |
||
Convertiu-lo en clip, anomeneu-lo resposta. Com vareu fera l mòdul 5, entreu dins el clip i a la línia de temps afegiu dos fotogrames clau. Al segon fotograma poseu el text de color verdl i en el tercer de color vermell. Afegiu una capa i a cada fotograma poseu-hi un stop(). Un cop enllestit esborreu el clip de l'escenari i vinculeu-lo amb aquest nom clip_resposta.. |
||
![]() |
||
Programació per a colocar els clips que hem construit | ||
Afegiu aquest codi a la funció posa_exercici(). | ||
*/vinculem el clip perimsuperf amb el nomperimetre i profunditat 4*/ _root.clip_contenidor.attachMovie("perimsuperf", "perimetre", 4); */A la variable del clip li donem el valor "Perímetre:"*/ _root.clip_contenidor.perimetre.d = "Perímetre: "; */posem les coordenades del clip*/ _root.clip_contenidor.perimetre._x = 40; _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 = 40; _root.clip_contenidor.superficie._y = b+90; */vinculem el clip resposta amb nom de resposta_perimetre i profunditat 6*/ _root.clip_contenidor.attachMovie("resposta", "resposta_perimetre", 6); */En posar l'exercici el clip resposta ha d'estar en el primer fotograma*/ _root.clip_contenidor.resposta_perimetre.gotoAndStop(1); */la seva variable r ha d'estar sense cap valor, aixi quan es torna a posar l'exerici el quadre apareixerà buit*/ _root.clip_contenidor.resposta_perimetre.r = ""; */coordenades del clip*/ _root.clip_contenidor.resposta_perimetre._x = 145; _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 = 145; _root.clip_contenidor.resposta_superficie._y = b+90; |
||
Per acabar cal calcular el perímetre i la superfície per poder fer la correcció. Afegiu aquest codi al final de la funció. |
||
perimetre = 2*(a+b); area = a*b; } |
||
Deseu el document proveu la pel·licula i ajusteu les coordenades dels clips al vostre gust. | ||
Codi que hi ha al fotograma 1 . | ||
En el fotograma 1, a la capa accions hi ha d'haber aquest codi, sense comentar, llevat de les modificacions que hagueu pogut fer en les posicions dels diferents clips. | ||
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(); stop();
| ||
Funcions i botons corregir, continuar i acabar. | ||
Per acabar ens falten definir les funcions que faran la correcció, permetran continuar i en acabar fer el resum de l'activitat. | ||
Funció corregir. | ||
Afegiu aquesta funció a la programació: | ||
function corregir() { */comparem les dues variables, si son iguals posem un 1 al comptador_perimetre i anem al fotograma 2 del clip, de color verd*/ if (_root.clip_contenidor.resposta_perimetre.r == perimetre) { _root.clip_contenidor.resposta_perimetre.gotoAndStop(2); control_perimetre = 1; */si les variables no coincideixen augmentem en 1 el comptador d'errades en el càlcul del perímetre i deixen el comptador_perimetre en 0.*/ } 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; } } |
||
Per a facilitar les proves poseu dos quadres de text dinàmic amb els noms de les variables perimetre i area. Us donaran els valors i no haureu de calcular-les cada cop. Afegiu tres quadres de text estàtics amb corregir, continuar, acabar i tres botons que cridaran les funcions respetives. |
||
![]() |
||
Al botó corregir poseu-hi aquest codi: | ||
on(press){ corregir(); } |
||
Funció continuar. | ||
function continuar() { */si els dos controls són =1 el seu producte serà 1 i es posa un nou exercici. Si un d'ells val 0, hi ha un error, el producte és 0 i no es pot continuar*/ control = control_perimetre*control_superficie; if (control == 1) { posa_exercici(); } else { stop(); } } |
||
Quan continuem l'activitat control_perimetre i control_superfície valen 1. En quan es posa un nou exercici han de valer 0. Heu d'afegir aquesta línia de codi al final de la funció posa_exercici(). | ||
area = a*b; control_perimetre=control_superficie=0; |
||
Al botó correponent crideu a la funció: | ||
on(press){ continuar(); } |
||
Funció acabar. | ||
Per acabar l'activitat, inseriu un fotograma clau buit al fotograma 2. A la capa accions poseu-hi un stop(): | ||
![]() |
||
Al fotograma 2 creue un quadre de text dinàmic, multiliea sin ajuste, HTML i nom de la variable resum. | ||
![]() |
||
Afegiula següent funció al fotograma 1. | ||
function acabar() { control = control_perimetre*control_superficie; if (control == 1) { */en quan els dos resultats són correctes anem al fotograma 2 on hem posat la variable resum. Ho fem utilitzar etiquetes HTML per resaltar el què ens interessa*/ 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(); } } |
||
Deseu el document, proveu la peli·licula, Un cop comprovat el seu funcionament esborreu els dos quadres de text de control, torneu a desar el document i publiqueu-lo. | ||
Amb un domini mes gran de la programació usant PHP i MySQL o qualsevol gestor de bases de dades la variable resum es podria guardar en una BBDD que permetria fer un seguiment de les activitats del vostre alumnat. | ||
Codi final del fotograma 1. | ||
Aqui teniu tota la programació sencera. Al fer tants comentaris i modular la programació de les funcions afegint cada cop més codi és fàcil que es perdi alguna línia. | ||
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(); |
||
Esquema dels elements de l'aplicació | ||
![]() |
||