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){ /* 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"]; /*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.
|
||
Filtre de control de pas de a a l'activitat següent. | ||
Hem de modificar la programació de cada un dels tres botons:
|
||
A
capa accions del fotograma 1 afegiu aquestes línies de codi
abans de |
||
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) { |
||
/* 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. |
||
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"; } |
||
|
||
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à. |
||
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. | ||