Navegabilitat d'una aplicació. Arxius externs i simplificació de la línia de temps.  
 
 
     
 

Si una aplicació educativa ha de ser en format web, el seu "pes" és essencial. Si porta associat imatges, sons i consta de molts fotogrames el seu pes en Kb por ser gran i que tardi en carregar-se. No és aconsellable que l' usuari/a estigui veient el rellotge o una precàrrega massa temps.
Per a alleugerir-la és aconsellable que en qualsevol moment només es facin crides als arxius necessàris, no sobrecarregar la línia de temps amb molts fotogrames quan en cada moment només es treballa només en un de sol.
A la pràctica anterior hem introduït la programació amb funcions, anem ara a treballar dos nous aspectes de millora:

  • Utilització d' arxius externs.
  • Estalvi de fotogrames.
 
     
  Desenvolupament de la pràctica  
     
  Obriu l' aplicació m5_p3.fla i deseu-lo com a m5_p4.fla.  
  Al començament de la capa accions del fotograma 1 poseu aquest codi:  
     
 

ajut_acumulat = 0;
errors = 0;
/*Ara declararem totes les variables en el primer fotograma i creem un array que enmagatzemarà els arrays de les sil·labes. També obrim un nou array amb la paraula sencera.*/
p_silabes = [["to-", "mà-", "quet"], ["ta-", "ron-", "ja"],["ra-","ïm"],["po-","ma"],["plà-","tan"],["pe-","ra"]];
paraules =["tomàquet","taronja","raïm","poma","plàtan","pera"];
pagina = 1;

 
     
  Elimineu la imatge del tomàquet i en el seu lloc, a la capa clip, poseu-hi un clip i anomeneu-lo clip_imatge. Si convé desplaceu el quadre de text de l' enunciat cap a la dreta  
     
   
     
  En aquest clip hi anirem carregant dinàmicamentles diferents imatges externes de les fruites.  
     
 

Hem de modificar la funció inicia() perquè:

  • identifiqui les variables dins el nou array.
  • cridi a la imatge adequada.
 
     
 

function inicia() {
ajut = 0;
/* com que hem agrupat en un sol array totes les sil·labes, cridem a l'element de l'array corresponent a la primera sil·laba. La variable que controla l' activitat és la variable pagina. L' hi hem de restar un 1 ja que a la pàgina li correspon el primer element de l'array que sempre és el 0*/
silabes_paraula = p_silabes[pagina-1];
*/el mateix per a la paraula*/
paraula = paraules[pagina-1];
iparaula = "";
silabes = "";
/* amb aquesta ordre fem que al clip_imatge s' hi posi la imatge corresponent. Cal construir la ruta on trovar-la; és la carpeta imatges_fruites i el nom el de la fruita corresponent afegint-hi l' extensió .jpg". Aquí hem de fer una precisió, en el nom de les fruites hi hem posat accents. No és massa ortodox que el nom d'un arxiu, en aquest cas nom_fruita.jpg porti accents.Ho hem provat amb diferents navegadors i amb el servidor de la XTEC i funciona. La única raó es aprofitar codi i no sobrecarregar la programació. Si no us funciona amb un altre servidor cal fer un nou array amb els nom de les fruites sense accent*/
clip_imatge.loadMovie("imatges_fruites/"+paraules[pagina-1]+".jpg");
_root.clip_resultat.gotoAndStop(1);
ex = "<B><I>Exercici </I></B>"+pagina;
stop();
}

 
     
  Com que hem canviat l' array de les sil·labes cal modificar la funció ajuda(), poseu-hi aquest codi:  
     
  function ajuda() {
/* ara les sil·les es troben en l' array silabes_paraula*/
if (ajut<silabes_paraula.length) {
ajut++;
ajut_acumulat++;
silabes = silabes+silabes_paraula[ajut-1];
}
}
 
     
  Deseu l' aplicació amb el nom practica3_4.fla i comproveu que funciona correctament fins a la última fruita. Si les imatges de les fruites no queden ben alineades desplaceu el clip_imatge. Cal tenir em cpmte que el punt de registre del clip és el seu centre.  
     
  Com que hem modificat l' estructura de fotogrames hem de modificar també la programació del botó continuar_acabar  
     
  Per començar seleccioneu els tots els fotogrames des del 2 al 9 i elimine u-los  
     
   
     
  La línia de temps us ha de quedar així:  
     
   
     
  Només amb dos fotogrames. En el primer hi aniran sortint les diferents fruites, en el segon hi sortirà l'informe final de l'activitat.
Com que tenim un sol fotograma el quadre de text continuar en quan arribi a la última fruita ha de dir acabar. Ho resoldrem convertint el quadre de text estàtic amb la paraula continuar en un clip amb dos fotogrames, en el primer fotograma dirà continuar i en el segon acabar. Després ja modificarem la funció inicia() perquè adreçar-lo a on ens convingui.D'aqueta manera en un sol fotograma hi tenin totes les activitats, quan s'acabi el nombre de fruites el text continuar es canviarà per acabar.
 
     
  Amb el quadre de text seleccionat aneu al menú Modificar|convertir en simbolo i seleccioneu la opció clip de pelicula.  
     
   
     
  Si cliqueu sobre el quadre veureu que s'ha convertit en un clip. Amb el panell Propiedades obert anomeneulo clip_continuar.  
     
   
     
  Si cliqueu dos cops sobre el clip s' obre la seva línia de temps. Hi afegiu una nova capa on hi posarem els stop().  
     
   
     
  Seleccioneu les dues capes del fotograma 2 i inseriu un fotograma clau buit.  
     
   
     
  Copieu el quadre de text del fotograma 1, aneu al fotograma 2 i amb el menú Edición|Pegar in situ l'enganxeu al fotograma 2 en la mateixa posició. Canvieu el text continuar per acabar.  
     
   
     
  Als dos fotogrames de la capa 2 hi poseu un stop() i torneu a l' escena.
Amb això ja tenim els dos fotogrames del clip. Fins arribar a la pàgina 5 el clip ha d'estar en el fotograma 1, és a dir continuar l' activitat. Quan arribi a la pàgina 6 ha de passar al fotograma 2 i dir acabar.
Haurem de tornar a modificar la funció inicia() amb un nou script que ho contempli.
 
     
  Afegiu a la funció inicia() aquest codi abans de l'stop().  
     
  /* Un cop més la variable pàgina és la que juga un paper fonamental, ja que ens permet discriminar els fotogrames del clip_continuar. En quan s' acaben els exercicis, anar al fotograma 2.Comproveu que l'escript funciona i que en arribar a la pera surt el text acabar.*/
ex = "<B><I>Exercici </I></B>"+pagina;
if (pagina<6) {
_root.clip_continuar.gotoAndStop(1);
} else {
_root.clip_continuar.gotoAndStop(2);
}
stop()
 
     
     
  L' activitat està pràcticament enllestida, només ens falta donar entrada al fotograma 2 on hi ha l'infrome de l' activitat quan aquesta estigui acabada.  
     
  Modifiqueu la funció continuar_acabar() amb aquest codi:  
     
  function continuar_acabar() {
if (pas == "Si") {
if (pagina<6) {
pagina++;
inicia();
} else {
gotoAndStop(2);
}
} else {
stop();
}
 
     
  Al botó continuar_acabar hi ha d'haber la crida a la funció.

 
  Aneu a la biblioteca i elimineu els arxius que corresponen a les imatges de les fruites.  
     
   
     
  Deseu l' activitat amb el nom practica3_4.fla, publiqueu-la i comproveu el seu funcionament.  
     
  Resum del mòdul:  
     
 
  • Hem començat l' activitat important imatges a l' escenari i posant programació a cada fotograma.
  • Hem utilitzat arrays simples per a controlar les sil·labes de cada paraula.
  • Hem utilitzat les posicions dina l'array per a cridar cada cop una sil·la més en els ajuts
  • Hem introduït controladors de pas per a filtrar el pas a l' activitat següent.
  • Hem programat les posicions de clips segons convingui.
  • Hem creat la variable pàgina juga un paper fonamental.
  • Hem treballat les diferents opcions de quadres de text i hem introduït etiquetes HTML
  • Hem agrupat codi repetit en funcions.
  • Hem afegit una pàgina resum de l' activitat amb els seus comptadors.
  • Finalment hem treballat amb arxius externs i amb només dos fotogrames.
  • Els arxius externs podem també estar en una URL. Al fer-ne la crida cal donar l' adreça on es troben en l'ordre LoadMovie.
 
     
     
  Pràctica opcional 1 : variar aleatòriament les propostes  
     
 

Quan es fa una activitat pot ser interessant que l'ordre en el apareixen les preguntes no sigui sempre el mateix, donant una aparença molt més dinàmica de l' aplicació. Si el nombre de propostes és petit, 6 en el nostres cas, no hi moltes possibilitats, encara que ens poden aparèixer de 6! maneres, és a dir de 720. Si el nombre és gran la variació augmenta molt, ja que els nombres factorials creixem ràpidament.
El que fem és crear un array dinàmic que ens faci una permutació de l'ordre natural dins del array on hi les dades, els llocs indexats, en el nostre cas són [0,1,2,3,4,5]. Si muntem una permuta d'aquest 6 nombres, ens variarà l'ordre en què apareixen les diferents propostes. Comentarem el codi, encara que el què us interessa es fer servir les funcions.
Obriu l'arxiu practica3_4.fla i deseu lo amb un altre nom, per exemple practica 3_4a.fla per a no perdre 'l. Afegiu al començament de la capa accions del fotograma 1 aquest codi.

 
     
 

System.useCodepage = true;
*/aquesta ordre és convenient que la poseu en totes les aplicacions que feu, fa que no hi hagi problemes de caràcters amb els diferents navegadors*/
function reordena(n) {
permuta = new Array();
permuta[0] = random(n);
for (i=1; i<n; i++) {
controla_repeticions();
while (control == 0) {
controla_repeticions();
}
}
}
*/la funció permuta() que definim depèn d'un paràmetre, el nombre d' elements que té l'array, comença definint el primer element de la permuta com un nombre aleatori entre 0 i n. La resta es defineixen de la mateixa manera, però cal controlar que no hi hagi repeticions*/
function controla_repeticions() {
control = 1;
permuta[i] = random(6);
for (j=0; j<i; j++) {
if (permuta[i] == permuta[j]) {
control = 0;
}
}
}
*/quan definim un nou element a l' atzar hem de controlar que no hagi sortit ja, en aquest cas es torna a triar amb el while de la funció anterior. Aquest codi pot semblar complicat, però no hem trobat una manera més senzilla de fer-ho. Hem posat que la funció depengui d'un paràmetre, perquè la pugueu utilitzar sempre que vulgueu*/
reordena(6);
*/cridem a la funció, amb el paràmetre 6 que es nombre màxim de fruites. Si el nombre de propostes és molt gran, afegint un nou paràmetre a la funció, en podem extreure 'n només unes quantes. Aquesta opció té sentit quan es tenen bateries grans de preguntes i només en volem unes quantes.Com que cada tria és diferent, dóna molt de joc.
A partir d' aquí el codi és el mateix*/

ajut_acumulat = 0;

 
     
  Com que varia l'ordre de les fruites hem de modificar la funció inicia(), referenciant les variables al nou array que es diu permuta. La funció inicia modificada és aquesta  
     
  function inicia() {
ajut = 0;
lloc = permuta[pagina-1];
/* la variable pagina continua controlant l' activitat, però triem el lloc que és el valor que hi ha l'array permuta. Quan pagina=1 triem el primer element de l'array permuta i així successivament a mesura que la variable pagina va augmentant*/
silabes_paraula = p_silabes[lloc];
paraula = paraules[lloc];
/*referencien les variables paraula i silabes_paraula a la variable lloc en comptes de la variable paraula*/
iparaula = "";
silabes = "";
clip_imatge.loadMovie("imatges_fruites/"+paraula+".jpg");
*/cridem a l'arxiu extern paraula.jpg*/
_root.clip_resultat.gotoAndStop(1);
ex = "<B><I>Exercici </I></B>"+pagina;
if (pagina<6) {
_root.clip_continuar.gotoAndStop(1);
} else {
_root.clip_continuar.gotoAndStop(2);
}
stop();
}
 
     
  Deseu l' arxiu, publiqueu-lo i comproveu el seu funcionament.  
     
  Pràctica opcional 2: canviar l' ajut per sons externs amb el nom de la fruita.  
     
  Pot ser útil que l' ajut no siguin les sil·labes de la paraula sinó el so amb el seu nom.
Per a facilitar la navegabilitat de l' aplicació farem també crides als arxius externs. En cada moment s' executarà el so necessari i prou. A més el Flash MX incorpora el seu propi reproductor i no cal que s' obri el reproductor de so per defecte. Com qui executa el so és el Flash no ha cap problema amb els nanegadors.
 
     
  Descomprimiu la carpeta sons que heu treballat en el mòdul anterior gravant els noms de les fruites. Si no el trobeu descomprimiu l'arxiu sons.zip.
Obriu la pràctica anterior i deseu la com a practica3_4b.fla. Si no heu fet la pràctica opcional 1 podeu obrir practica3_4.fla.
 
     
  Canvieu la funció ajuda() per la nova ajuda_so()  
     
 

function ajuda_so() {
ajut++;
ajut_acumulat++;
/* podeu mantenir, si voleu, els comptadors d' ajuts. Si no els trèieu*/
nom = "sons/"+paraula+".mp3";
/* creem la ruta, el nom, la variable paraula i l' extensió del arxiu .MP3*/
so = new Sound(this);
/* definim un nou objecte de so, treballat al mòdul 4*/
so.loadSound(nom, 1);
/* el llegim */
so.start(0, 1);
/* l' executem, recordeu el mòdul 4*/
}

 
     
  Canvieu el nom d' ajut per ajuda so, per exemple o el que us sembli adient:  
     
   
     
  Al botó ajut poseu-hi la crida a la nova funció:  
     
  on (press) {
ajuda_so()
}
 
     
  Deseu l'arxiu, publique-lo i comproveu-ne el funcionament.  
     
  Pràctica opcional 3. Modificació de la resposta  
     
  Per acabar el mòdul podeu practicar amb un altre model de resposta. En comptes de que la resposta siguin uns signes, ens pot interessar que aquesta sigui una cadena de text que senyali els caràcters mal escrits. Aprendreu a treballar amb funcions de text.

Esborreu el clip_resposta de la biblioteca. Volem modificar la resposta de manera que ens digui quin caràter està mal escrit, haurem de crear un nou clip resposta.
Copieu el quadre de text iparaula perquè tingui la mateixa mida.
 
     
   
     
  El text ha de ser dinàmic i la variable anomeneu-la oparaula. El color del text verd.
Convertiu-lo en clip amb el menú Modificar | convertir en símbolo. Anomeneu-lo clip_resposta.
Editeu el clip i inseriu al segon fotograma un fotograma clau. El text ha de ser de color vermell.
Afegiu una altra capa i a cada fotograma hi poseu un stop().
 
     
   
     
  Per a fer la correcció ens trobem amb dues variables paraula, la paraula correcta que es troba a l'array de dades i iparaula. que és la que s'escriu al quadre de text. Hem de comparar les dues cadenes, caràcter a caràcter. Si coincideixen els deixarem igual en una nova variable oparaula i si no el convertim en un guió en aquesta variable.  
     
  function corregir() {
oparaula = "";
control = 0;
/* Amb aquesta sentència triem la longitud de lvariable més llarga Math-max(). la paraula correcta, paraula i la que s'introdueix, iparaula.. La longitut d'una paraula, una cadena de text, és el nombre dels seus caràcters. L'ordre que ho calcula és l'ordre length, la seva sintaxi, nom_variable.length*/
m = Math.max(iparaula.length, paraula.length);
/* Amb un for comparem cada una de les lletres de les dues variables*/
for (i=0; i<m; i++) {
/* trèiem un caràcter a partir del lloc i de les variables iparaula i paraula per a comparar-los. L'ordre substring extreu d'una variable els caràcters que hi ha entre els seus dos paràmetres, ea aquest cas entre el lloc i i el següent i+1*/
ip = iparaula.substring(i, i+1);
p = paraula.substring(i, i+1);
if (ip == p) {
oparaula = oparaula+ip;
} else {
oparaula = oparaula+"_";
control++;
errors++;
}
}
/*Amb aquest if fem la comparació de caràcters i anem muntant la nova variable oparaula*/
_root.clip_resposta.oparaula = oparaula;
/* Posem la variable oparaula dins el clip i l' adrecen al fotograma 1, verd, o 2 vermell segons hi hagi o no errors */
if (control == 0) {
pas = "Si";
_root.clip_resposta.gotoAndStop(1);
} else {
_root.clip_resposta.gotoAndStop(2);
pas = "No";
}
}
 
     
  Només ens queda afegir una línia de codi a la funció inicia(): amb la finalitat de deixar buida la variable _root.clip.resposta.oparaula en canviar de pàgina.
 
     
  if (pagina<6) {
_root.clip_continuar.gotoAndStop(1);
} else {
_root.clip_continuar.gotoAndStop(2);
}
_root.clip_resposta.oparaula = "";
/*línia afegida*/
stop();
}
 
     
  Deseu l' activitat, publiqueu la i comproveu el seu funcionament.