HitTest|_droptarget | ||
|
||
El mètode |HitTest| avalua si una instància de clip determinada xoca o es creua amb una zona activa que ha estat assenyalada per les seves coordenades de destí o coordenades |X| i |Y|. |
|
|
La propietat |_droptarget| ens permet evaluar el contacte entre instàncies de clip. Retorna la ruta del clip en el que s'ha deixat anar el clip que s'està arrosegant. Aquesta propietat de lectura permet controlar les col·lisions entre dos instàncies de clip. | ||
El poder identificar les col·lisions, usant tant el mètode |HitTest| com la propietat |_droptarget| dóna unes possibilitats grandioses a l'hora de dissenyar la interactivitat de les nostres aplicacions. | ||
En aquesta pràctica del mòdul 8 podreu veure dos exemples que us donaran una visió general de l'ús que podeu fer d'aquestes instruccions. | ||
L'objectiu d'aquesta pràctica és: | ||
|
||
|
||
|
||
Desenvolupament de la pràctica | ||
HitTest I | ||
En aquesta primera part de la pràctica utilitzarem el mètode |HitTes| per detectar la col·lisió entre dos clips de pel·lícula. | ||
Per començar, acabareu una pel·lícula que ja haveu fet en el mòdul núm.3 amb el nom de m3p2.FLA. Si recordeu en aquesta pel·lícula podíeu moure una instància per un senzill laberint. Aquesta pel·lícula però tenia un inconvenient, la instància corria per tot l'escenari sense que les parets la poguessin aturar. | ||
Per començar completareu el bloc del script que ja tenieu, perquè la instància mou_mc no pugui sortir del camí. | ||
Despres creareu un nou bloc de script perquè quan la instància mou_mc arribi al final l'usuari rebi un missatge. | ||
Per acabar escriureu un últim bloc perquè la instància mou_mc vagi recollint les lletres que trobi pel camí del laberint. |
||
Utilització del mètode |HitTest| per aturar la intància mou_mc | ||
Aneu al menú |Archivo|Abrir| i busqueu el fitxer m3p2.FLA que veu guardar en la pràctica núm.2 del mòdul 3. Si no disposeu d'aquest arxiu podeu obrir tecles2 .FLA que trobareu en la carpeta prac1m8a, que està dins de la carpeta d105m8 del curs D105. | ||
Un cop oberta la pel·lícula aneu a la capa clip_tanca i desbloquegeu-la. | ||
|
||
Torneu a bloquejar la capa clip_tanca. | ||
Seleccioneu la instància mou_mc que està en la capa clip_mou. | ||
|
||
Aneu al panell d'accions i fixeu el script. | ||
Ordeneu el script fent servir l'opció |Formato automático| i activeu |Ver números de línea|. | ||
|
||
Escriviu sota la línea núm.2 , dins del bloc |on (keyPress "<Left>")|, el següent script: | ||
|
||
Proveu la pel·lícula i comproveu que la instància no pot travessar els murs de la seva esquerra. | ||
Explicació del script | ||
Cada cop que es prem la tecla que apunta a l'esquerra |on (keyPress "<Left>")| l'expressió |if| comprova si la instància mou_mc representada per l'expressió |this| col·lisiona |hitTest| amb la instància que hi ha dins del parèntesi. Com que les instàncies que bloquegen el camí en direcció a l'esquerra són tres, l'acció |hitTest| s'ha de repetir tres cops. Si es produeix la col·lisió, la instància |this| avança en la direcció contrària |_x++| a la direcció de la tecla, en resum neutralitza l'avanç. | ||
A continuació acabareu d'inserir tres parts més de script, un per cada tecla que falta. | ||
|
||
Escriviu sota la línea núm 8, dins del bloc |on (keyPress "<Right>")|, el següent script: | ||
|
||
Escriviu sota la línea núm.14, dins del bloc |on (keyPress "<Down>")|, el següent script: | ||
|
||
Escriviu sota la línea núm. 22, dins del bloc |on (keyPress "<Up>")|, el següent script: | ||
|
||
Comproveu el correcte funcionament de totes les tecles, reviseu el script final i afegiu-li els vostres comentaris |/* *|. | ||
|
||
Utilització del mètode |HitTest| per detectar el final del camí | ||
En aquest segon pas, creareu un quadre de text dinàmic amb una variable i una instància de clip. Aquesta instància i aquest camp de text serviran per avisar a l'usuari quan arribi al final del camí. | ||
Aneu a la capa variables i desbloquegeu-la. | ||
Seleccioneu l'eina |texto|, aneu al panell |Propiedades|, dins la finestra |Tipo de texto| elegiu |Texto dinámico|. | ||
Dins la capa variables, creeu un quadre de text dinàmic i situeu-lo al final del recorregut. | ||
Aneu al panell |Propiedades|, escriviu en el requadre |Var:| el nom de la variable arribada. | ||
Desbloquejeu la capa clip_final, seleccioneu el clip en forma línea horitzontal que tanca el final del recorregut i poseu-li com nom d'instància arribada_mc. | ||
Un cop creada la variable i la instància arribada_mc, només queda completar el script. | ||
Aneu a la capa accions i desbloquegeu-la | ||
Seleccioneu el primer fotograma de la capa accions, aneu al panell d'accions, fixeu el script i escriviu directament el següent: | ||
|
||
Comproveu que quan la instància mou_mc toca la instancia arribada_mc apareix el missatge "FANTÀSTIC". | ||
Explicació del script | ||
Dins d'aquest bloc del script es podueix una incidència cada cop que entra un fotograma |onEnterFrame|. Això és important perquè les instruccions que conté necessiten ser comprovades contínuament i l'expressió |onEnterFrame| reprodueix la incidència indefinidament. | ||
|if| comprova si la instància mou_mc representada per |this| col·lisiona |hitTes| amb la instància arribada_mc. Si la col·lisió es produeix s'activa el valor de la variable de text dinàmic arribada. | ||
Utilització del mètode |apply| |
||
Per detectar la col·lisió de la instància mou_mc, amb les lletres que es troben pel camí, dissenyareu un script similar als que heu fet fins ara, però per simplificar la feina aquest cop usareu el mètode |apply| que us permetrà crear una funció amb uns valors que podreu aplicar a la instància de clip que vulgueu. | ||
Aneu a la capa clips_lletres i desbloquegeu-la. | ||
|
||
Seleccioneu el primer fotograma de la capa accions, aneu al panell d'accions i apliqueu el |Formato automático|. | ||
Escriviu sota la cinquena línea el següent script: | ||
|
||
Quan comproveu el funcionament de la pel·lícula, observareu que quan la instància mou_mc toca les instancies, a_mc, e_mc, i_mc, o_mc, u_mc, aquestes es deixen arrossegar per la primera. |
||
Explicació del script | ||
La primera part del script té l'estructura d'una funció. Comença amb el nom de la funció |xocar| i a continuació vénen totes les accions que aquesta ha que realitzar. | ||
En aquest cas l'accció que realitza la funció ja és coneguda d'altres pràctiques. La incidència |onEnterFrame| comprova contínuament si es compleix la condició asssenyalada per la sentència |if|, si aquesta és verdadera actuen les propietats |_x| i |_y|. | ||
En la segona part s'utilitza el mètode |apply| per donar-li les propietats definides en la funció |xocar| a les instàncies de clip, a_mc, e_mc, i_mc, o_mc, u_mc. | ||
El mètode |apply| estalvia moltes línees i permet agrupar la programació en el primer fotograma, a mode d'exemple, si no s'utilitzés en aquesta pràctica, hauríeu de repetir el següent script per cada instància. | ||
|
||
Activitat complementària | ||
_droptarget | ||
En aquesta activitat complementària utilitzareu la propietat que té |eval+_droptarget| per identificar la ruta del clip en el que s'ha deixat anar la peça que s'arrossega. Aquesta propietat retorna el valor voleà de true o false. | ||
El resultat final és similar al de la pràctica del puzle, amb la diferència que en les peces del puzle el marge d'ajustament venia establert amb la variable margeError i en la pràctica que fareu ara el marge ve donat per la grandària de la instància que fa de base. |
||
Podeu utilitzar un mètode o l'altre segons les vostres necessitats a'lhora de dissenyar les vostres unitats didàctiques. | ||
Com en la pràctica anterior, per facilitar-vos la feina, l'arxiu fruita_d.FLA amb el que aneu a treballar ja té els gràfics fets i els noms d'instància posats. Tot i axí és convenient que aneu segint els passos per fer evident el pròces de construcció. | ||
Aneu al menú |Archivo|Abrir| i busqueu el fitxer fruita_d.FLA que trobareu en la carpeta prac1m8a, que està dins de la carpeta d105m8 del curs D105. | ||
Un cop oberta la pel·lícula aneu a la capa clips_fons i desbloquegeu-la. | ||
|
||
|
||
Comproveu que cada instància de clip té el seu nom posat, fons01_mc, fons02_mc, fons03_mc, fons04_mc, fons05_mc, fons05_mc. | ||
Torneu a bloquejar la capa clips_fons i desbloquejeu la capa clips_encaix. | ||
Comproveu que cada instància de clip té el seu nom posat, encaix01_mc, encaix02_mc,encaix03_mc, encaix04_mc,encaix05_mc, encaix06_mc, aquestes són les peces que arrossegareu damunt les del fons. | ||
|
||
. Bloquegeu la capa clips_encaix, desbloquegeu la capa accions. | ||
Seleccioneu el primer fotograma de la capa accions, aneu al panell d'accions, fixeu el script i escriviu directament el següent: | ||
|
||
Explicació del script | ||
Aquesta primera part del script comença com l'anterior pràctica, amb la creació d'una funció que porta per nom encaixar .Les accions que ha de realitzar aquesta funció són les mateixes que podeu trobar en el script del puzle de la pràctica núm.1. | ||
La incidència |onPress| actua quan es prem amb el ratolí damunt de la instància, en aquest cas representada per |this|. | ||
En el moment en que es produeix la incidència, s'estableix que el valor de les variables x i y és igual a les coordenades |_x| i |_y| que té aquest clip |this| dins l'escenari en aquell moment. | ||
L'expressió |startDrag ()| és l'encarregada de moure la instància, que està representada per |this|. | ||
A continuació de l'acció |starDrag| apareix la instrucció |swapDepths|. Aquesta instrucció canvia la profunditat del clip de pel·lícula indicat. És la solució perfecta perquè la peça que s'arrossega sempre estigui en un nivell superior. | ||
En la segona part s'utilitza el mètode |apply| per donar-li les propietats definides en la funció |encaixar| a les instàncies de clip, encaix01_mc, encaix02_mc, encaix03_mc, encaix04_mc,encaix05_mc, encaix06_mc. | ||
Per acabar aquesta pràctica creareu una altra funció per cada una de les intàncies encaix01_mc, encaix02_mc, encaix03_mc, encaix04_mc,encaix05_mc, encaix06_mc. Les accions definides per aquesta funció no permeten utilitzar el mètode |apply|. | ||
Seleccioneu el primer fotograma de la capa accions, aneu al panell d'accions, apliqueu l'opció |Formato automático| i escriviu directament sota l'última línea el següent: | ||
|
||
Explicació del script | ||
La incidència |onRelease| actua quan es deixa de prémer amb el ratolí damunt de la instància, en aquest cas encaix01_mc. | ||
La instrucció |stopDrag| és l' encarregada d'aturar la instància. | ||
La condició |if| comprova si la ruta on es deixa anar la instància representada per |this| és la mateixa |_dropTarget|, si aquesta és la mateixa, continua la lectura del script. | ||
Les estructures |this._x = _root.fons01_mc._x;| i |this._y = _root.fons01_mc._y;| estableixen que les coordenades d'ambdues instàncies siguin les mateixes. | ||
Els paràmetres |this._x = x| i |this._y = y;| que hi ha dins de la instrucció |else| fan que la instància retorni a les coordenades que s'han fixat al prémer |onRelease| damunt de la instància. | ||
Perquè funcionin totes les peces heu de repetir aquest script tantes vegades com instàncies per encaixar hi hagi. Recordeu que heu de canviar en cada cas el nom d'instància, | ||
El script final us ha de quedar així: | ||
|
||
Comproveu que la vostra pràctica funcini com la de l'exemple. | ||
|
||
Si teniu ganes i temps podeu rescriure el escrip del puzle de la pràctica núm.1 del mòdul 8 utilitzant el mètode |apply|. Recordeu que només podreu aplicar aquest mètode en els troços en que las instàncies tinguin un mateix comportament. | ||