Pràctica 2. Ampliació de l'activitat a més fotogrames

 
 
 
     
Ampliarem la pràctica 1, posant a cada fotograma una fruita diferent. En aquest cas només hi posarem fins a sis fruites, però el procediment és vàlid per a quantes es consideri necessari.
   
 
  Desenvolupament de la pràctica  
     
Obriu l'arxiu practica m5_practica1.fla. Deseu lo com a m5_practica2.fla.
     
  Codi al botó continuar.  
     
  Seleccioneu el botó continuar poseu aquest codi a la finestra accions.  
     
 

on (press){
gotoAndStop(pagina+1);
}

/* amb aquesta instrucció, al clicar sobre el botó anem al fotograma següent que tindrà una nova imatge*/

 
     
  Situeu-vos al fotograma 6 i a les capes , botons i clip cliqueu f6 o bé insertar fotograma clave en el botó dret del ratolì.  
     
   
     
  Si us hi fixeu hem copiat fins al fotograma 6 el contingut de primer fotograma, menys a la capa imatge que cada cop són diferents i a la capa accions on farem alguns canvis en la programació.  
     
  Aneu ara al fotograma 2 i poseu vos a la capa imatge. Inseriu un fotograma clau buit (f7).  
     
   
   
 

A la mateixa capa feu el mateix als fotogrames 3,4 5 i 6. A aquests fotogrames hi colocarem les altres imatges de fruites.

Repetiu la mateixa operació a la capa acciones. Inseriu un fotograma clau buit als fotogrames 2 i 6. D'aquesta manera podreu introduir-hi el codi.

Torneu al fotograma 2 i aneu el menú Archivo| Importar| Importar a escenario. De la carpeta imatges_fruites, seleccioneu l'arxiu taronja.jpg i poseu-lo en una posició semblant a la del tomàquet.

 
     
   
     
  A la capa accions del fotograma 2 i poseu aquest codi.  
     
 

p_silabes= ["ta-", "ron-", "ja"];
paraula="taronja";
ajut = 0;
pagina=2;
iparaula = "";
silabes="";
_root.clip_resultat.gotoAndStop(1);
ex = "<B><I>Exercici </I></B>"+pagina;
stop();

/*Canviant l'array de les sil·labes corresponents al nom de la nova fruita, la variable paraula i el nombre de la pàgina, la resta de codi és el mateix que al fotograma 1*/

 
     
 

Comproveu que al inserir un fotograma clau al fotograma 6 la programació dels botons es manté.

Proveu la pel·licula i comproveu que funciona correctament en els dos primers fotogrames.

     
     
Al fotograma 3 importeu a l' escenari la imatge raïm.jpg i a la capa accions hi poseu aquest script.  
     
  p_silabes = ["ra-","ïm"];
paraula="raïm";
ajut = 0;
pagina=3;
iparaula = "";
silabes="";
_root.clip_resultat.gotoAndStop(1);
ex = "<B><I>Exercici </I></B>"+pagina;
stop();
 
 

/*Canviant l'array de les sil·labes de la paraula i el nom de la fruita, la variable paraula i el nombre de la pàgina, la resta de codi és el mateix que als fotogrames 1 i 2 */

 
   
  Al fotograma 4 importeu la imatge poma.jpg i a les accions el codi:
     
  p_silabes =["po-","ma"];
paraula="poma";
ajut = 0;
pagina=4;
iparaula = "";
silabes="";
_root.clip_resultat.gotoAndStop(1);
ex = "<B><I>Exercici </I></B>"+pagina;
stop();

/*Canviant l'array de les sil·labes de la paraula i el nom de la fruita, la variable paraula i el nombre de la pàgina, la resta de codi és el mateix que als fotogrames 1, 2 i 3*/
 
   
Al fotograma 5 la imatge plàtan.jpg a la capa imatges i el codi a la capa accions.  
   
  p_silabes=["plà-","tan"];
paraula = "plàtan";
ajut = 0;
pagina=5;
iparaula = "";
silabes="";
_root.clip_resultat.gotoAndStop(1);
ex = "<B><I>Exercici </I></B>"+pagina;
stop();

/*Canviant l'array de les sil·labes de la paraula i el nom de la fruita, la variable paraula i el nombre de la pàgina, la resta de codi és el mateix que als fotogrames 1,2,3,i 4 */
 
     
  I al fotograma 6, per acabar hi poseu la imatge pera.jpg, i aquest codi a la capa
accions:
 
     
  p_silabes=["pe-","ra"];
paraula = "pera";
ajut = 0;
pagina=6;
iparaula = "";
silabes="";
_root.clip_resultat.gotoAndStop(1);
ex = "<B><I>Exercici </I></B>"+pagina;
stop();

/*Canviant l'array de les sil·labes de la paraula i el nom de la fruita, la variable paraula i el nombre de la pàgina, la resta de codi és el mateix que als fotogrames 1,2,3,4 i 5 */
 
   
La línia de temps us ha de quedar plena a totes les capes fins al fotograma 6.  
   
 
   
Comproveu que l' aplicació funciona, deseu la pràctica i publiqueu la pel·licula.  
     
  Acabament de l' activitat.  
     
 

L' activitat funciona però ens cal polir-la. Cal millorar-la en dos aspectes.

  • Com que hi ha ajuts, per passar a l' activitat següent la paraula escrita ha d'estar correcta. Haurem de posar algun filtre que ho garanteixi.
  • En acabar l' activitat sembla necessari anar a un fotograma que ens faci un petit infrome on hi consti el nombre d' ajuts emprat i el d' errades.
 
     
  Filtre de control de pas de a a l'activitat següent.  
     
 

Hem de modificar la programació de cada un dels tres botons:

  • Quan passem d' activitat el comptador d' ajuts es posa a 0. Afegirem una variable comptador d' ajuts acumulats.
  • Quan es fa la correcció ens cal un filtre que valgui "Si" o "No", segons que la paraula escrita sigui correcte o no, crearem una nova variable i l' anomenarem pas.Per passar d' activitat la variable pas ha de ser "Si".
  • També ens cal un comptador d' errades, variable errors.
 
     
 

A capa accions del fotograma 1 afegiu aquestes línies de codi abans de
l' stop()

 
     
  ex = "<B><I>Exercici </I></B>"+pagina;
/* aquesta variable és un comptador d' exercicis. Fem servir les etiquetss HTML negreta(<B> i cursiva (<I>). Posar etiquetes HTML ens permet jugar amb diferents formats de text dins d'un quadre de text. Tanquem les etiquetes en ordre invers a com les hem introduït</I> deixar de posar itàlica i </B> deixar descriure en negreta. Hi afegim la variable pagina que ara val 1*/
ajut_acumulat = 0;
errors = 0;
/*iniciem amb 0 els comptadors d' ajuts acumulats i el d' errors*/
stop();
 
     
  Al botó ajut afegiu la línia segúnet de codi comentada:  
     
  on (press) {
if (ajut<p_silabes.length) {
ajut++;
ajut_acumulat++;
/*afegim el comptador d' ajuts, s' incrementa cada cop que es prem el botó*/
silabes = silabes+p_silabes[ajut-1];
}
}
 
     
  La programació del botó corregir ha de quedar així:  
     
  on (press) {
if (iparaula == paraula) {
_root.clip_resultat.gotoAndStop(2);
pas = "Si";
/*si la resposta és correcta es pot passar al fotograma següent*/
} else {
_root.clip_resultat.gotoAndStop(3);
pas = "No";
errors++;
/*si la resposta .es incorrecta no es pot passar al fotograma següent i s' incrementa en 1 el comptador d' errades*/
}
}
 
     
  Per acabar al botó continuar hi posem una condició  
     
 

on (press) {
if (pas == "Si") {


 
  /* amb aquesta instrucció, al clicar sobre el botó anem al fotograma següent si el filtre pas val "Si"*/
 
  gotoAndStop(pagina+1);
}
}
 
     
  Acabament de l' activitat  
     
 

Per a crear el fotograma resum aneu, per exemple al fotograma 10 de la línia de temps. Entre el 6 i el 10 us quedaran fotogrames buits, no passa res i sempre teniu fotogrames per si voleu afegir una nova activitat i no tenir que moure fotogrames o crear escenes.

A la capa accions i la de quadres_de_text afegiu un fotograma clau buit. La línia de temps us ha de quedar així:

 
     
   
     
  Hi ha vàries possibilitats de fer el fotograma resum, amb quadres de text estàtics i dinàmics amb els comptadors o bé amb un únic quadre de text, amb etiquetes HTML. Us proposem aquesta segona opció perquè pugueu practicar amb aquest tipus de quadres.  
     
  A la capa quadres_de_text del fotograma 10 creeu-ne un de tipus dinàmic, HTML, multilínia i amb el nom de la variable resum  
     
   
     
 

En aquest quadre hi posarem l'informe de l' activitat.
Tenim dues variables que s'han anat actualitzant al llarg de cadascuna de les activitats, el nombre d' errors, variable errades, i el d' ajuts emprat, variable errors_acumulat. Només ens cal posar-ho bonic en un quadre de text únic, jugant amb les possibilitats de codi HTML que ens permet el Flash.
Cal tenir en compte que el codi HTML que accepta el Flash en un quadre de text és molt limitat. Cal esperar que posteriors de Macromedia ho tinguin en compte mentrestant paciència, hi ha el què hi ha.

 
     
  A la capa accions del fotograma 10 hi poseu aquest codi:  
     
  if (errors == 0) {
comentari = "Molt bé";
} else if (error == 1 || errors == 2) {
comentari = "Bé, però tens alguna errada";
} else {
comentari = "Has de repassar una mica";
}
 
 


*/sembla adient introduir una nova variable, comentari, en acabar l' activitat. En funció del nombre d' errades podem oferir una resposta diferenciada. Aquesta variable es pot posar o no, la seva graduació és totalment discutible a partir dels criteris pedagògics amb els que es planteja l' activitat i en funció de l' alumnat al què està adreçada.
Si us hi fixeu estem encadenant un seguit de condicions if-else if, fins acabar en un sol else, els possibles comentaris a cadascun dels valors de la variable errors. El podeu personalitzarr tant com vulgueu i barrejar-lo amb el nombre d' ajuts emprat.
És aconsellable en un primer moment, si no teniu massa pràctica en la programació, que no la compliqueu massa*/

 
  resum = "Resum de l' activitat de les <B>fruites</B><BR>Has necessitat: <B><I><Font size='+1'>"+ajut_acumulat+"</font></i></B> ajuts<BR>Has tingut: <B><I><Font size='+1'>"+errors+" </font></i></B> errors<BR><Font size='+2'><B>"+comentari+"</B></font>";
stop();
 
 

 

*/Si recordeu fem servir el codi HTML <B></B> per obrir i tancar caràcters en negreta, <I></I> per caràcters en cursiva. Hi afegim <BR> que indica un salt de línia i <Font size='+1'> o <Font size='+2'> pel tamany de la font. El codi </font>tanca la modificació de la font i el deixa tal con està.
Aquesta utilització de codi HTML en un quadre de text us permet personalitzar les possibles sortides amb independència de la longitud de cada una de les variables. Els salts de línia, fruit d'un punt i apart, els prexifeu vosaltres allà on els vulgueu amb <BR>, els que vinguin condicionats per la longitud del paràgraf ja es fan automàticament amb el caràcter multilínia del quadre de text. */

 
     
     
  Per acabar, canvieu la paruala del botó continuar del fotograma 6 pel d' acabar.  
     
   
     
  Deseu-la com m5_practica2.fla.fla, publiqueu la i proveu-la.