Creació d'un encaix | ||
En aquesta pràctica es treballarà i crearà un encaix de peces a partir d'un dibuix o d'una foto importada. | ||
|
||
Objectius de la pràctica: |
||
|
||
|
||
|
||
Desenvolupament de la pràctica | ||
Per facilitar-vos aquesta pràctica, l'arxiu encaix01.FLA ja porta incorporada la imatge i les formes amb les que fareu el puzle, sí voleu però, podeu canviar la imatge i el disseny de les formes per unes de pròpies. |
||
Perquè el puzle funcioni correctament cada peça ha d'estar duplicada, d'aquesta manera quan l'una es posi damunt de l'altra aquesta encaixi perfectament. | ||
El primer pas serà convertir cada peça del puzle en un clip de pel·lícula i després duplicar-lo. | ||
Aneu al menú |Archivo|Abrir|, busqueu a la carpeta mat_m8p1, que està dins de la carpeta d105m8 del curs D105 i obriu l'arxiu encaix01.FLA | ||
Seleccioneu la imatge de la capa fons, aneu al menú |Modificar|Separar| i separeu la imatge, d'aquesta manera la podreu manipular. | ||
Seleccioneu la silueta del puzle que està en la capa fons damunt de la imatge i aneu al menú |Modificar|Desagrupar|| | ||
A continuació, seleccioneu l'interior del primer tros d'imatge amb l'eina |Selección|, aneu al menú |Modificar|Convertir en símbolo|Clip de película| i poseu-li de nom encaix01. | ||
|
||
|
||
Repetiu aquest últim pas amb les cinc peces restants, posant-los els noms de encaix02, encaix03... | ||
|
||
|
||
Un cop convertits els sis troços d'imatge en sis clips de pel·lícula, seleccioneu el primer fotograma de la capa fons, obriu el menú emergent amb el botó dret del ratolí i seleccioneu l'opció |Copiar fotogramas|. | ||
Poseu-vos damunt del primer fotograma de la capa tapa, obriu el menú emergent amb el botó dret del ratolí i seleccioneu l'opció |Pegar fotogramas|. | ||
El següent pas serà posar nom d'instància als dotze clips de pel·lícula que tenim. | ||
Aneu al la capa fons i premeu l'opció |Ocultar capa|. | ||
Aneu capa tapa i poseu-li nom d'instància als sis clips començant de esquerra a dreta i de dalt a baix, encaix01T_mc, encaix02T_mc, encaix03T_mc, encaix04T_mc, encaix05T_mc, encaix06T_mc, | ||
Un cop posat el nom d'instància als clips de la capa tapa, heu de fer el mateix amb els clips de la capa fons. | ||
Oculteu la capa tapa i feu aparèixer la capa fons. | ||
Aneu capa fons i poseu-li nom d'instància als sis clips començant de esquerra a dreta i de dalt a baix, encaix01F_mc, encaix02F_mc, encaix03F_mc, encaix04F_mc, encaix05F_mc, encaix06F_mc, | ||
Un cop posat el nom d'instància a les peces de l'encaix continueu dins la capa fons per crear la base del puzle. La base del puzle la formaran les instàncies de clip de la capa fons. El tractament que rebran aquestes instàncies dependran del tipus d'efecte que es vulgui crear. En els exemples que venen a continuació podeu veure dos models diferents. | ||
En la pel·lícula (a), la instància encaix01F_mc s'ha modificat aplicant-li color tinta groc. | ||
En la pel·lícula (b) i (c), la instància encaix01F_mc s'ha modificat aplicant-li transparència alfa al 35% i al 0% respectivament. | ||
Seleccioneu la instància de clip encaix01F_mc, aneu al panell |Propiedades| i dins l'opció |Color| marqueu |Alfa| 35%. | ||
Repetiu l'anterior pas amb la resta d'instàncies de la capa fons. | ||
Oculteu la capa fons i feu aparèixer la capa tapa. | ||
Col·loqueu les peces de la capa tapa repartides per l'escenari i deixeu-les en la posició amb la que volgueu que apareguin. | ||
Preparar el script de la capa |accions| | ||
La programació de la pel·lícula (a), (b) i (c), també són diferents. Sí coloqueu la peça de la pel·lícula (a) en el seu lloc comprovareu que no queda fixada del tot, la podeu moure tants cops com desitgeu, en canvi en l'encaix (b) i (c) la peça queda aparentment encaixada. | ||
En aquesta pràctica seguireu el procès de disseny del script de l'encaix (b). | ||
Perque cada peça de l'encaix funcioni haureu de crear dues funcions diferents. Aquest dos blocs corresponen a dos eventos o incidències que al llarg de la pràctica anireu desenvolupant. | ||
La primera funció que fareu actuarà quan es pressioni damunt la instància que es vol col·locar. Dins d'aquesta funció primer hi haurà dues variables que tindran com valor les coodenades |_x|, |_y| de la instància i després les instruccions |startDrag| perquè es pugui arrrossegar la intància i |swapDepths| per les intàncies es canviein de nivell de profunditat i la peça sempre es fiqui per damunt de les altres. | ||
» Seleccioneu el primer fotograma de la capa accions, aneu al panell d'accions, fixeu el script.i activeu |Ver números en línea|. | ||
» Escriviu directament el següent script. | ||
|
||
Explicació de l'script | ||
Quan es presiona la instància |encaix01T_mc.onPress|, 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. | ||
Les variables x i y fixen les coordenades de la peça quan aquesta es pressiona. Aquestes coordenades són les que utilitza l'script que veureu més endavant, per enviar la peça del puzle a la seva posició original quan s'encaixa en el lloc que no correspon. | ||
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. | ||
La segona funció que fareu actuarà quan es deixi anar la instància |encaix02T_mc.onRelease| que es vol col·locar. | ||
Escriviu directament el següent script per sota del que ja teniu. | ||
|
||
Explicació de l'script | ||
En el primer lloc apareix la instrucció encarregada d'aturar l'arrossegament de la instància |stopDrag|, que està representada per l'expressió |this|. | ||
A continuació, s'insereix una variable, margeError, a la qual es dóna un valor igual a 5. Segons quin sigui el valor d'aquesta varible la distància de contacte entre les peces perquè s'ajustin serà major o menor. Podeu provar de canviar aquest volor per comprovar el seu efecte, a menys marge d'error més s'ha d'ajustar l'encaix de la peça. | ||
|
||
Seguidament, establim amb |if| la condició de si el valor absolut |Math.abs| de la diferència entre les coordenades |_x| del clip arrossegat i el fons és menor que margeError, lloavors l'encaix és correcte i fem invisible la peça arrossegada i visible la del fons. | ||
|
||
Si el número resultant de l'operació és més petit |<| que el valor de la variable margeError, l'operador |&&| passa a avaluar la següent part de l'script, que és similar a la primera però amb les coordenades |_y|. | ||
|
||
Si la condició |if| es compleix, el script torna en invisible la instància representada per l'expressió |this| i fa aparèixer la instància |encaix01F_mc._alpha = 100;|. | ||
|
||
|
|
|
Si la condició |if| no es compleix, l'expressió |else| retorna el clip representat per la paraula clau |this| a les coordenades representades per les variables x i y, o sigui la seva posició inicial. | ||
|
||
|
||
Un cop hagueu comprovat que la peça funciona, copieu el script i enganxeu-lo a continuació per cada peça. |
||
Un cop copiats els scripts, nomes heu de modificar la part on apareix el nom d'instància, cosa que us serà fàcil perquè canviant el número en tindreu prau, encaix01T_mc, encaix02T_mc, encaix03T_mc, encaix04T_mc, encaix05T_mc, encaix06T_mc. |
||