Desenvolupament de la pràctica | ||
Objectius d'aquest mòdul: | ||
Aquesta és la primera pràctica d'una sèrie fins acabar l' aplicació, progressivament l' anirem millorant. Els objectius són:
|
||
Mostra de la pràctica final del mòdul. | ||
Proveu l' aplicació. | ||
Obriu el document m5_p1.fla |
||
Afegiu 4 noves capes: A la primera hi posarem els quadres de text.A la segona els botons A la tercera una imatge A la quarta un clip de pel·lícula A la cinquena les accions. |
||
|
||
![]() |
||
A la capa quadres de text poseu dos quadres de text. |
||
Un dinàmic sense vores i el nom de la variable silabes.
|
||
![]() |
||
L' altre quadre d’introducció de text, amb vores, amb el nom de la variable iparaula, que és on s’introduirà el text de les respostes. | ||
![]() |
||
Inseriu 3 quadres més de text estàtic amb els textos ajuda, corregir i continuar. |
||
![]() |
||
Per s obre el quadre ajuda poseu un altre quadre de text, sense vores, de tipus dinàmic i el nom de la variable ajut. |
||
![]() |
||
Aneu a la capa botons. Al menú Ventana | otros paneles | bibliotecas comunes | botones trieu un botó que us agradi i arrossegueu-lo fins a l’escenari posant-lo davant de les paraules ajuda, corregir i continuar. En el nostre cas hem escollit un botó amb una fletxa, que tansmet la idea de progrés en el llenguatge interactiu. |
||
![]() |
||
Descomprimiu
l'arxiu imatges_fuites.zip que trobareu a la carpeta mat_m5. Descomprimiu-la en un carpeta que heu d'anomenar imatges_fruites. |
||
Passeu a la capa imatge. Aneu al menú Archivo | Importar | Importar a escenario, busqueu la carpeta imatges_fuites i seleccioneu l'arxiu tomàquet.jpg i arrossegueu-lo fins a l' escenari sobre el quadre de text silabes |
||
![]() |
||
![]() |
||
![]() |
||
Perquè tingueu una visó de conjunt l' escenari us ha de quedar més o menys així. Desplaceu els diferents elements si fa falta fent servir el pannell d'aliniar (ctrl-K) | ||
![]() |
||
Aneu
a la capa clip. Obriu la biblioteca hi trobareu un botó, la imatge tomàquet.jpg i un clip |
||
![]() |
||
Si editeu el clip veureu que té cinc fotogrames | ||
![]() |
||
El
primer fotograma hi un quadre de text buit. |
||
![]() |
||
Aneu ara a la capa accions, al primer fotograma, cliqueu f9, s' obrirà el pannell accions.
|
||
p_silabes = ["to-", "mà-", "quet"]; | ||
/*la variable p_silabes conté un array, que sìdentifiquen per els corxtes [ ,] que enmagatzema les tres sil·labes de la paraula tomàquet. Si les posem en un array la seva gestió es relativament senzilla ja que les podem identificar per la seva posició en l'array. . Per a una gestió eficaç de les variables que entren en joc en qualsevol aplicació aquestes han de ser fàcilment identificables i acessibles*/ | ||
paraula = "tomàquet"; | ||
/*la variable paraula pren el valor del text "tomàquet", que és el nom de la imatge que s' haurà d' identificar */ | ||
ajut = 0; | ||
/*la variable ajut serà el comptador d' ajuts com a valor 0, el de la pàgina amb un 1 i les variables iparaula i silabes dels quadres de text amb "" perquè quedin buits */ | ||
pagina = 1; |
||
/*Posem el clip_resultat en el primer fotograma de la seva línia de temps. Recordeu que està buit i que, per tant, no es veu */ | ||
_root.clip_resultat.gotoAndStop(1) stop(); |
||
Si us resulta més còmode podeu suprimir els comentaris al codi, encara que tenir-los visibles us serà molt útil. | ||
Programació dels botons. | ||
Aneu a la capa botons, cliqueu sobre el botó que correspon a l' ajut, ajuda, i cliqueu f9, s' obrirà la finestra de les accions. Poseu-hi el codi següent: |
||
on (press) { L if (ajut<p_silabes.length) { ajut++; silabes = silabes+p_silabes[ajut-1]; } /* Aquest botó és per donar ajuts per identificar la imatge. Amb aquest if mirem si el nombre d'ajuts es més petit que el nombre de sil·labes. L'ordre p_silabes.length calcula quants elements té l'array en qüestió. Hem de posar aquest filtre ja que només hem d' oferir ajuts fins que s' acabin les sil·labes de cada array. L'ordre ajut ++ augmenta en 1 el nombre de l' ajut. silabes = silabes+p_silabes[ajut-1]; Amb aquesta ordre anem afegint sil·labes de l'array p_silabes a la variable sil·labes, que comença sent buida fins a complertar la paraula. Cal tenir en compte que el primer element de qualsevol array és el 0. Per això disminuïm en 1 el comptador de posició p_silabes[ajut-1]. Quan ajut és = 1 cal triar el primer element del array és a dir p_silabes[0], i així mentre anem incrementant els ajuts fins a acabar l'array. Per identificar els elements d'un array he de tenir en comte com es reconeixen, p_silabes[0], p_silabes[1], p_silabes[2, p_silabes[3].......]*/ |
||
Al botó corregir, hi poseu el següent: | ||
on (press){ if (iparaula == paraula) { _root.clip_resultat.gotoAndStop(2); } else { _root.clip_resultat.gotoAndStop(3); } } /* Amb aquesta ordre comparem les dues variables, iparaula que és la variable introduïda en el quadre de text i paraula que la definim en la capa accions. Si coincideixen el clip_resultat va a la frame 2 ,:-)), en verd i si no al frame 3 :-((, en vermell. També podeu anar a les frames 4 i 5. El llenguatge icónic :-)) , :-((, o el textual Bé!, No! depèn dels possibles usuaris, si pensem en alumnat nouvingut o no, etc. Depèn del criteri de cadascun de vosaltres */ |
||
Per acabar la pràctica ens falten
uns petits retocs: Aneu a la capa quadres_de_text i creeu-ne un de text estàtic amb un text semblant a aquest: "Escriu el nom d'aquesta fruita i clica el boto corregir". Per qüestions de disseny els poseu davant la imatge de la fruita. Desplaceu el comptador d' ajust i feu-lo més petit. |
||
|
||
![]() |
||
Per acabar posarem un comptador d' exercicis. A la part superior de l' escenari poseu-hi un quadre de text dinàmic, sense vores, amb el nom de la variable ex i activeu l' opció html (<>). |
||
![]() |
||
Aneu ara a la capa accions i afegiu aquest codi abans de l'stop(). | ||
/* enviem el clip_resultat al seu primer fotograma que hi ha un quardre de text buit, gotoAndStop(1). Fixeu-vos en els punts que separen les tres insruccionsi: _root.clip_resultat, indica que el clip_resultat es trova a linia de temps principal _root. */ _root.clip_resultat.gotoAndStop(1) /* la variable ex, és un comptador d' exercicis. Fem servir les etiquetes HTML negreta(<B> i cursiva (<I>). Posar etiquetes HTML ens permet jugar amb diferents formats de text dins d'un mateix 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. Després de la paraula exercici afegim la variable pagina que ara val 1. Al mòdul 6 pràctica 2 hi trovareu totes les etiquetes HTML suportades per el Flash MX*/; ex= "<B><I>Exercici </I></B>"+ pagina; stop(); |
||
Codi sense comentar. | ||
p_silabes = ["to-", "mà-", "quet"]; paraula = "tomàquet"; ajut = 0; pagina = 1; iparaula = ""; silabes = ""; _root.clip_resultat.gotoAndStop(1); ex = "<B><I>Exercici </I></B>"+pagina; stop(); |
||
Comproveu el resultat , provant la pel·licula | ||
Resum de la pràctica: | ||
Si recopilem tot el que hem fet, tenim els següents elements en l' escenari, que seran l' esquelet de l' aplicació. | ||
![]() |
||
Deseu la practica amb el nom m5_practica1.fla, publiqueu-la i proveu-la |
||