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.
|
||
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; |
||
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è:
|
||
function inicia() { |
||
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: | ||
|
||
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. |
||
System.useCodepage = true; |
||
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() { |
||
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. | ||