mòdul ii les eines del flash -...

39
Materials de formació Introducció al Macromedia Flash Mòdul II Les eines del Flash Jesús Arbués García del Moral Joan Gelabert Vich Ernest Prats García Setembre 2004

Upload: trinhcong

Post on 16-Jun-2019

217 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Mòdul II Les eines del Flash - weib.caib.esweib.caib.es/Formacio/distancia/Material/flash/Flash2.pdf · Introducció al Macromedia Flash Mòdul II Les eines del Flash Jesús Arbués

Materials de formació

Introducció al Macromedia Flash

Mòdul II

Les eines del Flash

Jesús Arbués García del Moral

Joan Gelabert Vich

Ernest Prats García

Setembre 2004

Page 2: Mòdul II Les eines del Flash - weib.caib.esweib.caib.es/Formacio/distancia/Material/flash/Flash2.pdf · Introducció al Macromedia Flash Mòdul II Les eines del Flash Jesús Arbués

Mòdul II: Les eines de Flash

Autors: Jesús Arbués García del Moral, Joan Gelabert Vich i Ernest Prats García

Servei de Formació Permanent del Professorat

Direcció General d’Ordenació, Innovació i Formació del Professorat

Govern de les Illes Balears

Conselleria d’Educació i Cultura

Setembre de 2004

obra de Jesús Arbués Garcia del Moral, Joan Gelabert Vich i Ernest Prats García

està subjecta a una llicència de Reconeixement-No comercial-Compartir amb la mateixa llicència 3.0

Espanya de Creative Commons

Page 3: Mòdul II Les eines del Flash - weib.caib.esweib.caib.es/Formacio/distancia/Material/flash/Flash2.pdf · Introducció al Macromedia Flash Mòdul II Les eines del Flash Jesús Arbués

Taula de continguts

1. L’escenari ..................................................................................................................................... 5

2. La barra d’eines. Les eines de dibuix ........................................................................................... 5

2.1.1. Eina fletxa – Seleccions ..................................................................................................... 6

2.1.2. Eina línia ............................................................................................................................ 8

2.1.3. Eina ploma ......................................................................................................................... 9

2.1.4. Eines oval i rectangle ......................................................................................................... 9

2.1.5. Eines llapis i pinzell ............................................................................................................ 9

2.1.6. Eina de transformacions lliures ........................................................................................ 10

2.1.7. Eina comptagotes ............................................................................................................ 10

2.1.8. Eina goma d’esborrar ...................................................................................................... 11

2.1.9. Eines pot de tinta i pot de pintura .................................................................................... 11

2.2. La barra d’eines. El color ........................................................................................................ 11

2.3. El mesclador de colors ............................................................................................................ 12

2.4. L’eina de transformar el farcit ................................................................................................. 15

3. Importar ...................................................................................................................................... 16

4. Text. ............................................................................................................................................ 17

5. Les capes ................................................................................................................................... 19

6. Modificar objectes ....................................................................................................................... 25

6.1. Eina de fletxa .......................................................................................................................... 25

6.2. Eina modificar. Transformació lliure ........................................................................................ 26

6.3. La paleta transformar .............................................................................................................. 27

6.4. Les propietats de l’objecte ...................................................................................................... 27

6.5. La quadrícula .......................................................................................................................... 30

6.6. Els regles ................................................................................................................................ 33

6.7. Les guies ................................................................................................................................. 34

6.8. Alinear objectes ....................................................................................................................... 35

Page 4: Mòdul II Les eines del Flash - weib.caib.esweib.caib.es/Formacio/distancia/Material/flash/Flash2.pdf · Introducció al Macromedia Flash Mòdul II Les eines del Flash Jesús Arbués

Convencions

Els símbols utilitzats en aquest text són:

Activitats d’introducció

Activitats completament guiades amb exposició gradual de continguts, que permetin

assegurar els continguts mínims de la programació del mòdul de formació.

Activitats de consolidació i reforç:

Aquestes activitats presenten una dificultat un poc superior ja que no són tan guiades

i permetran un millor domini dels temes estudiats.

Activitats d’entrega obligada

Les activitats que vénen marcades per aquesta icona s’hauran d’entregar

obligatòriament per tal de superar el curs de formació.

Activitats opcionals

Activitats d’ampliació de coneixements que permetin aprofundir en la temàtica

tractada.

Recomanacions o comentaris

Recomanacions o comentaris que permetran una millor realització de les activitats

encomanades.

Ajuda

Per a algunes activitats, si la seva resolució presenta problemes, es podrà consultar

l’ajuda, que donarà pistes per facilitar-ne la realització.

Recursos addicionals

Per poder ampliar els coneixements, es posa a la disposició dels alumnes una

documentació complementària de consulta o d’ampliació.

Page 5: Mòdul II Les eines del Flash - weib.caib.esweib.caib.es/Formacio/distancia/Material/flash/Flash2.pdf · Introducció al Macromedia Flash Mòdul II Les eines del Flash Jesús Arbués

Curs de Macromedia Flash Mòdul II Les eines de Flash

Jesús Arbués – Joan Gelabert – Ernest Prats 5

Encara que Flash no sigui estrictament un programa de dibuix, és interessant conèixer totes les seves

possibilitats perquè al final serà necessari treballar amb les eines que té amb aquesta finalitat. També

es poden importar dibuixos fets amb altres programes, però és convenient conèixer a fons les possibi-

litats del Flash.

1. L’ESCENARI

L’escenari és l’espai on col·locaràs els elements que vulguis que apareguin a la pel·lícula.

A vegades és útil dibuixar alguna cosa fora de l’escenari, per exemple per deixar els objectes tempo-

ralment de fora o bé per començar el moviment d’algun element des de fora de l’escenari, però recor-

da que tot allò que no estigui dins de l’escenari no sortirà finalment en el treball final.

En aquesta imatge et marquem l’espai de treball de color vermell; la part del rectangle i del cercle que

no està dins de l’escenari no apareixerà a la feina final.

2. LA BARRA D’EINES. LES EINES DE DIBUIX

Activitat d’introducció 1

Pots obrir l’arxiu eines.swf que trobaràs a la carpeta eines dins d’arxius flash del

mòdul 2. Hi tens una breu descripció de tots els elements que conformen aquesta

paleta.

El cursor canvia de forma segons l’eina seleccionada

Quasi totes les eines de la paleta tenen una icona per al cursor, que és igual a la ico-

na emprada en el botó de l’eina, en seleccionar una d’elles i dur el cursor a la zona de

feina el cursor canvia.

Eina ploma

Cursor

Page 6: Mòdul II Les eines del Flash - weib.caib.esweib.caib.es/Formacio/distancia/Material/flash/Flash2.pdf · Introducció al Macromedia Flash Mòdul II Les eines del Flash Jesús Arbués

Curs de Macromedia Flash Mòdul II Les eines de Flash

Jesús Arbués – Joan Gelabert – Ernest Prats 6

2.1.1. EINA FLETXA – SELECCIONS

L’eina fletxa permet seleccionar objectes i a continuació canviar-los de lloc, de mida, de color... Fent

clic sobre un objecte el seleccionam.

La fletxa té també unes altres aplicacions molt interessants: en acostar la fletxa a un objecte, aquesta

pot assolir tres aspectes diferents, que provocaran efectes diversos si clicam i arrossegam (permet

fer modificacions lliures)

Clicant i arrossegant aconseguirem

Page 7: Mòdul II Les eines del Flash - weib.caib.esweib.caib.es/Formacio/distancia/Material/flash/Flash2.pdf · Introducció al Macromedia Flash Mòdul II Les eines del Flash Jesús Arbués

Curs de Macromedia Flash Mòdul II Les eines de Flash

Jesús Arbués – Joan Gelabert – Ernest Prats 7

Canviar-lo de lloc

Algunes d’aquestes funcions les explicarem amb detall més endavant

Activitat d’introducció 2

Pots obrir l’arxiu inicial1.fla que trobaràs a la carpeta pràctiques dins d’arxius flash

del mòdul 2. Amb els elements que hi ha a la pantalla, practica tot el que acabam

d’explicar.

Per seleccionar dues coses al mateix temps es pot utilitzar la

fletxa negra i clicar, i a continuació pitjar simultàniament la tecla

de majúscules (la que té una fletxa, no la que diu Bloq Mayús)

en clicar sobre un altre objecte. Hauràs aconseguit sumar una

nova selecció.

També ho pots fer directament clicant sobre l’escenari en un

punt exterior a la peça i arrossegant per anar creant una finestra

de selecció (com un rectangle) que encercli els objectes que

vols.

Has de tenir present que segurament la

figura que hi haurà a la pantalla tendrà un

contorn i un farcit. I que si el que vols és

modificar la figura sencera (modificar el

contorn i el farcit) serà necessari que

seleccionis les dues coses, fent un doble

clic sobre ella.

Flash i les capes

Com es veurà més endavant, és aconsellable distribuir els elements d’una pel·lícula

de Flash a diferents capes. Aquestes funcionen de manera semblant a les d’altres

programes de dibuix, com Adobe Photoshop, CorelDraw o el mateix mòdul de dibuix

de l’OpenOffice.

Però de moment estam treballant amb una sola capa. Si dibuixes coses a la mateixa

capa i les poses una sobre l’altre faràs que una forma trepitgi l’altre.

Page 8: Mòdul II Les eines del Flash - weib.caib.esweib.caib.es/Formacio/distancia/Material/flash/Flash2.pdf · Introducció al Macromedia Flash Mòdul II Les eines del Flash Jesús Arbués

Curs de Macromedia Flash Mòdul II Les eines de Flash

Jesús Arbués – Joan Gelabert – Ernest Prats 8

Activitat d’introducció 3

Obre l’arxiu solapaments.swf que trobaràs a la carpeta solapaments dins d’arxius

flash del mòdul 2. Trobaràs una explicació detallada del que passa quan se solapen

les capes.

A continuació, obre l’arxiu incial2.fla que trobaràs a la carpeta pràctiques dins

d’arxius flash del mòdul 2. A ell:

1. Selecciona el contorn del primer cercle i desplaça’l. 2. Selecciona el farcit del segon cercle i desplaça’l. 3. Fes doble clic sobre el tercer cercle i desplaça tot el conjunt

2.1.2. EINA LÍNIA

L’eina línia crea una línia recta que podràs acabar de configurar modificant els paràmetres del panell

propiedades.

Si traces una línia i al mateix temps tens pitjada la tecla de majúscules, aquesta línia només podrà

tenir angles d’inclinació múltiples de 45 graus

Línia, totes les direccions són possibles.

Línia + tecla de majúscules.

Només són possibles 0, 45, 90, 135, 180, 225,

270, 315 i 360 graus

Activitat d’introducció 4

Crea un document nou (amb Archivo > Nuevo). Dibuixa línies horitzontals, verticals i

amb diferents inclinacions.

.

Page 9: Mòdul II Les eines del Flash - weib.caib.esweib.caib.es/Formacio/distancia/Material/flash/Flash2.pdf · Introducció al Macromedia Flash Mòdul II Les eines del Flash Jesús Arbués

Curs de Macromedia Flash Mòdul II Les eines de Flash

Jesús Arbués – Joan Gelabert – Ernest Prats 9

2.1.3. EINA PLOMA

Permet dibuixar ajustant angles, creant corbes

suaus, etc. Si fas una línia tancada, la conver-

teix en un polígon i el farceix.

2.1.4. EINES OVAL I RECTANGLE

Aquestes dues eines, ens permeten dibuixar ovals i rectangles, i combinades la tecla de majúscules

(recorda que és la que té una fletxa, no la que diu Bloq Mayús) dibuixen cercles o quadrats, respecti-

vament.

Activitat d’introducció 5

Al mateix document on anteriorment has dibuixat línies, crea ara un quadrat, un rec-

tangle, un oval i un cercle.

2.1.5. EINES LLAPIS I PINZELL

Són les dues maneres de dibuixar a mà alçada. El llapis permet suavitzar les línies, fer efectes de

tinta... És útil per a pintar el contorn, mentre que el pinzell és més útil per a pintar farcits.

El llapis i el pinzell tenen els seus propis indicadors de color. El llapis pinta amb

el seu color i el pinzell amb el mateix que el pot de pintura.

Activitat opcional 1

Emprant el mateix document de les pràctiques anteriors, pots fer diferents proves amb

les eines de llapis i pinzell.

Page 10: Mòdul II Les eines del Flash - weib.caib.esweib.caib.es/Formacio/distancia/Material/flash/Flash2.pdf · Introducció al Macromedia Flash Mòdul II Les eines del Flash Jesús Arbués

Curs de Macromedia Flash Mòdul II Les eines de Flash

Jesús Arbués – Joan Gelabert – Ernest Prats 10

2.1.6. EINA DE TRANSFORMACIONS LLIURES

Si amb aquesta eina activada ens acostam a un objecte no seleccionat, actua igual que l’eina fletxa, i

permet les tres aplicacions vistes anteriorment.

Però si amb l’eina seleccionada, clicam sobre un objecte, el seleccionam i al mateix temps apareixen

uns tiradors que ens permeten estirar o contreure la imatge. Si ens acostam als tiradors dels extrems,

ens permetrà girar la figura.

Si provocam un gir d’un objecte amb la tecla de majúscules pitjada, aquests girs seran de 45 en 45

graus.

Activitat d’introducció 6

Dibuixa quatre rectangles, i modifica’ls, allargant-los, girant-los, esbiaixant-los...

2.1.7. EINA COMPTAGOTES

Et permet triar un color directament de l’escenari, d’algun altre objecte... i després aplicar aquest a

l’objecte que estigui seleccionat.

Per aconseguir això, s’ha de seleccionar l’eina i posar-se al damunt de l’objecte que té el color que

ens interessa. Fent clic aconseguirem que aquest color passi a ser el de línia o de farciment actius.

Page 11: Mòdul II Les eines del Flash - weib.caib.esweib.caib.es/Formacio/distancia/Material/flash/Flash2.pdf · Introducció al Macromedia Flash Mòdul II Les eines del Flash Jesús Arbués

Curs de Macromedia Flash Mòdul II Les eines de Flash

Jesús Arbués – Joan Gelabert – Ernest Prats 11

2.1.8. EINA GOMA D’ESBORRAR

Et permet esborrar qualsevol objecte de dibuix que hi hagi a la pantalla.

Si actives l’opció de l’aixeta, podràs eliminar tot el color d’un objecte (la línia o el

farciment).

Eliminar tots els objectes de l’escenari

Un doble clic amb la goma d’esborrar seleccionada, esborra tot el que hi ha a

l’escenari. Si es fa per error, sempre hi ha la possibilitat de seleccionar Edición >

Deshacer.

2.1.9. EINES POT DE TINTA I POT DE PINTURA

Aquestes dues eines s’empren per omplir contorns i farcits respectivament. L’apartat que dedicarem

al color t’ajudarà en el correcte ús d’aquestes eines.

2.2. LA BARRA D’EINES. EL COLOR

El color que apareix al costat del llapis correspon al contorn i el del pot de pintura, al farcit.

En clicar sobre un d’aquests colors s’obre la paleta de colors.

Page 12: Mòdul II Les eines del Flash - weib.caib.esweib.caib.es/Formacio/distancia/Material/flash/Flash2.pdf · Introducció al Macromedia Flash Mòdul II Les eines del Flash Jesús Arbués

Curs de Macromedia Flash Mòdul II Les eines de Flash

Jesús Arbués – Joan Gelabert – Ernest Prats 12

2.3. EL MESCLADOR DE COLORS

Aquest panxell, combinat amb el pot de pintura, ens serveix per omplir superfícies tancades

Donar color a superfícies tancades és una de les funcions més elementals del treball amb Flash, per

aquest motiu és molt important conèixer perfectament totes les possibilitats.

Per obrir el panell Ventana > Mezclador de color (o bé Majúscules+F9)

Clicant sobre l’extrem superior

RVA rojo verde azul= RGB red green blue

HSB (al panell surt MSB) això serveix per definir colors amb el to, la saturació i l’alfa

A la part inferior esquerra pot escriure directament el codi hexadecimal. En aquest cas #990000

Page 13: Mòdul II Les eines del Flash - weib.caib.esweib.caib.es/Formacio/distancia/Material/flash/Flash2.pdf · Introducció al Macromedia Flash Mòdul II Les eines del Flash Jesús Arbués

Curs de Macromedia Flash Mòdul II Les eines de Flash

Jesús Arbués – Joan Gelabert – Ernest Prats 13

(Imatge treta de l’ajuda del Flash)

Tipus de farcit:

Ninguno deixa buit de color la zona.

Sólido, omple amb un color uniforme seleccionat.

Lineal, fa un degradat lineal.

Page 14: Mòdul II Les eines del Flash - weib.caib.esweib.caib.es/Formacio/distancia/Material/flash/Flash2.pdf · Introducció al Macromedia Flash Mòdul II Les eines del Flash Jesús Arbués

Curs de Macromedia Flash Mòdul II Les eines de Flash

Jesús Arbués – Joan Gelabert – Ernest Prats 14

Radial, fa un degradat radial del centre cap a fora.

Mapa de bits, pots seleccionar una imatge com a

patró per omplir.

La transparència del farcit es pot ajustar amb

l’alfa, i es poden aconseguir efectes molt interes-

sants, especialment quan se superposen objectes.

100% = Sòlid

0 % = Totalment transparent

Als degradats lineal i radial es poden seleccionar

els límits i triar colors.

També, com a la figura de la dreta pots afegir

punts de referència per obtenir un degradat múlti-

ple, clicant sobre la línia.

Activitat d’introducció 7

Dibuixa uns quants objectes a la pantalla. A continuació, i emprant les eines que aca-

bam d’explicar, canvia el seu color de línia i de farcit. Aplica també diferents degra-

dats i modifica’ls.

Page 15: Mòdul II Les eines del Flash - weib.caib.esweib.caib.es/Formacio/distancia/Material/flash/Flash2.pdf · Introducció al Macromedia Flash Mòdul II Les eines del Flash Jesús Arbués

Curs de Macromedia Flash Mòdul II Les eines de Flash

Jesús Arbués – Joan Gelabert – Ernest Prats 15

2.4. L’EINA DE TRANSFORMAR EL FARCIT

Aquesta eina s’ha deixat pel final ja que és la que necessita tenir més domini de programa per ser

usada.

L’eina transformar el farcit té gran importància, ja que permet ajustar la mida, l’orientació i el centre

del farcit. Afecta només als farcits de mapa de bits i als degradats (lineal i radial).

Selecionam l’eina fent clic sobre el botó i

després fem clic sobre un degradat i ens apareixe-

ran els selectors per a realitzar les transformacions

que es poden fer, sempre en funció del tipus de

farcit:

Al lineal hi ha tres selectors i al radial quatre.

En el cas dels mapes de bits es pot ajusta la

mida de la imatge, que si és més petita que la

de l’objecte a omplir fa l’efecte mosaic.

També es pot canviar l’orientació.

Page 16: Mòdul II Les eines del Flash - weib.caib.esweib.caib.es/Formacio/distancia/Material/flash/Flash2.pdf · Introducció al Macromedia Flash Mòdul II Les eines del Flash Jesús Arbués

Curs de Macromedia Flash Mòdul II Les eines de Flash

Jesús Arbués – Joan Gelabert – Ernest Prats 16

Activitat d’introducció 8

A aquesta pràctica, has de crear una punta de fletxa. Has d’aconseguir dibuixar una

fletxa a partir d’una o de diverses formes rectangulars. Probablement hauràs de fer

més d’un intent, però així és com millor s’aprèn.

Activitat opcional 2

Ara hauràs d’intentar crear noves formes a partir de cercles i rectangles. En concret la

nostra proposta és que intentis crear una circumferència i després a partir d’ella en

treguis diferents porcions.

3. IMPORTAR

Respecte a les imatges i els seus formats

Flash permet la importació d’imatges, de sons i de vídeos. De moment treballarem

només una part del que fa referència a la importació d’imatges, donada la gran

importància que tenen aquests objectes a les pel·lícules de Flash.

Per poder treballar amb imatges utilitzarem l’ordre Importar, en concret amb Archivo > Importar. Al

mòdul 4 tornarem a tractar aquest tema amb més profunditat, però ara l’incorporam per poder utilitzar

més elements en el nostre treball.

Els principals formats que es poden importar, en les seves diferents variants, són:

JPG: Apropiat per a les fotografies. De fet, és el format que empren la major part de les càmeres digi-

tals. Admet fins a 16 milions de colors, i treballa amb un sistema de compressió progressiva amb pèr-

dua, és a dir, a major compressió, pitjor qualitat d’imatge.

GIF: Apropiat per als dibuixos. Admet fins a 256 colors i pot tenir dues variants més: GIF amb trans-

parència i GIF animat. El primer permet determinar un color (o colors) transparents, amb la qual cosa

es pot visualitzar el que hi ha a sota. El GIF animat permet crear petites pel·lícules, fotograma a foto-

grama, de manera semblant als dibuixos animats. Si s’importa un GIF animat a una pel·lícula de

Flash, es respecten els fotogrames que tenia la imatge original. La compressió del GIF es fa sense

pèrdua de qualitat.

PNG: És un format que intenta suplir al GIF. Disposa de tres variants: color real, escala de grisos i

paleta variable de 256 colors. Permet també transparència, i a diferència del GIF, aquesta pot ser

variable, amb aplicació d’un canal alfa, de manera semblant a com ho fa el Flash. És vàlid per a la

majoria de les imatges, si bé en el cas de fotografies amb grans variacions de colors és més aconse-

llable el JPG. No suporta les animacions, però permet treballar amb capes. La compressió es fa sen-

se pèrdua.

Altres formats: A més dels formats esmentats, Flash en suporta molts més (és suficient desplegar la

llista de formats que apareix en el moment de la importació per veure’ls tots).

Page 17: Mòdul II Les eines del Flash - weib.caib.esweib.caib.es/Formacio/distancia/Material/flash/Flash2.pdf · Introducció al Macromedia Flash Mòdul II Les eines del Flash Jesús Arbués

Curs de Macromedia Flash Mòdul II Les eines de Flash

Jesús Arbués – Joan Gelabert – Ernest Prats 17

Activitat d’introducció 9

Obre un fitxer nou i importa un arxiu jpg i un altre png transparent que trobaràs a la

carpeta importar, dins d’arxius Flash del mòdul 2.

Pots completar el procés important els altres arxius, que trobaràs a la carpeta impor-

tar extensions dins de la carpeta importar del mòdul 4.

4. TEXT.

Un dels elements que sol aparèixer a les animacions en Flash és el text.

Per a inserir un text, has de seleccionar l’eina text i clicar sobre

l’escenari.

El cursor canviarà i tindrà aquest aspecte.

Quan facis clic sobre l’escenari per poder escriure, apareixerà

la imatge de la dreta: Un rectangle amb un cercle a la part

superior. Aquesta imatge ens permetrà escriure en línia sense

límit.

Podríem continuar escrivint i continuaria fent-ho tot seguit sense canviar de línia.

Page 18: Mòdul II Les eines del Flash - weib.caib.esweib.caib.es/Formacio/distancia/Material/flash/Flash2.pdf · Introducció al Macromedia Flash Mòdul II Les eines del Flash Jesús Arbués

Curs de Macromedia Flash Mòdul II Les eines de Flash

Jesús Arbués – Joan Gelabert – Ernest Prats 18

Si volem escriure en diverses línies haurem de clicar la tecla intro/return per passar a la línia se-

güent.

Però si volem tenim un espai limitat per poder escriure

podem clicar amb l’eina de text sobre l’escenari i arrosse-

gant el cursor marcar un espai concret; així crearem un

rectangle que marcarà el límit màxim de l’espai per es-

criure.

A l’escenari ens apareixerà un rectangle amb un petit

quadrat a la part superior dreta.

Quan escrivim i arribem al límit de la dreta, automàtica-

ment, canviarà de línia.

Canviar la mida del rectangle de text

Si volem canviar la mida d’aquest rectangle de text només cal que clicam sobre el

quadrat petit de la cantonada superior i que l’arrosseguem per fer més gran o més

petit l’espai d’escriure. També podem clicar dues vegades seguides sobre aquest

quadrat i prendrà la forma del cercle petit, per tant s’estendrà horitzontalment per

incloure tot el text, tal com s’ha explicat al principi d’aquest apartat.

Flash permet tres tipus de camps de text: estàtic, dinàmic i

d’introducció de text.

De tota manera, al llarg d’aquest curs només utilitzarem l'op-

ció de text estàtic. Comprovau que no heu canviat el tipus.

El tipus per defecte és estàtic, és el tipus de text que no va-

ria, per exemple, un rètol.

També pots activar l’opció seleccionable, que permetrà que

l’usuari de la pel·lícula de Flash pugui seleccionar el text que

hem escrit i copiar-ho a una altra aplicació.

Page 19: Mòdul II Les eines del Flash - weib.caib.esweib.caib.es/Formacio/distancia/Material/flash/Flash2.pdf · Introducció al Macromedia Flash Mòdul II Les eines del Flash Jesús Arbués

Curs de Macromedia Flash Mòdul II Les eines de Flash

Jesús Arbués – Joan Gelabert – Ernest Prats 19

Un altre tipus de camp de text és el dinàmic, que permet canviar el text des de valors de variables o

de fitxers externs.

El tipus introducción de texto és aquell que pot ser modificat per l’usuari, per exemple, introduint

dades que se li demanen, respondre a preguntes, etc.

Flash permet incorpora text creat amb un tractament de textos. Per això emprarem el sistema tradici-

onal de copia i enganxar. El que s’ha de tenir present és que la importació de text es fa sense respec-

tar el seu format original.

Activitat d’introducció 10

Escriu el teu nom en un camp de text estàtic, canvia la font, la mida, el color etc.

A la barra de menús n’hi ha un dedicat al text,

que també et permet fixar les propietats.

L’únic submenú que és diferent

als de tractaments de textos és el

de Seguimiento que permet

augmentar la separació entre

caràcters i paraules en una frase.

Això és molt útil a l’hora

d’encaixar un text en un espai

determinat.

5. LES CAPES

Encara que facis un Flash molt senzill, l’ús de les capes es farà imprescindible.

Ja has vist a l’apartat de les eines de dibuix que si pintes dos objectes a la mateixa capa amb zones

d'intersecció, quan desplaces un d’aquests objectes el fragment interseccions desapareix. Això de

vegades pot ser interessant, però d’altres és un inconvenient. Per evitar això el que pots fer és dibui-

xar un objecte en cada capa, i d’aquesta manera els dos objectes no es veuran afectats si se super-

posen.

Per poder entendre el funcionament de les capes, crearem un fitxer de Flash nou.

Page 20: Mòdul II Les eines del Flash - weib.caib.esweib.caib.es/Formacio/distancia/Material/flash/Flash2.pdf · Introducció al Macromedia Flash Mòdul II Les eines del Flash Jesús Arbués

Curs de Macromedia Flash Mòdul II Les eines de Flash

Jesús Arbués – Joan Gelabert – Ernest Prats 20

A la capa 1 dibuixa un rectangle, per exemple de color

blau.

Fes doble clic sobre el nom capa 1 i canvia’l pel de

rectangle.

Clica sobre la icona i afegiràs una segona capa,

que es col·locarà sempre per sobre de l’anterior.

Les capes apareixen numerades. Aquesta nova capa

serà la 2.

En aquesta segona capa dibuixa, per exemple, un

cercle groc, i canvia-li el nom a la capa pel de cercle.

Ara tens dos objectes a capes diferents. És molt convenient anar posant noms a les capes per saber

el que hi tenim

Page 21: Mòdul II Les eines del Flash - weib.caib.esweib.caib.es/Formacio/distancia/Material/flash/Flash2.pdf · Introducció al Macromedia Flash Mòdul II Les eines del Flash Jesús Arbués

Curs de Macromedia Flash Mòdul II Les eines de Flash

Jesús Arbués – Joan Gelabert – Ernest Prats 21

Ara afegirem una tercera capa, en la que es-

criurem el text Figures geomètriques, en

color vermell.

Canvia el nom de la capa i posa-li text.

Col·loca els elements l’un sobre l’altre i fixa’t

que les capes superiors tapen les inferiors.

El rectangle (capa inferior), és tapat pel cercle

(capa central) i les lletres (capa superior), es-

tan per sobre de les dues imatges.

Page 22: Mòdul II Les eines del Flash - weib.caib.esweib.caib.es/Formacio/distancia/Material/flash/Flash2.pdf · Introducció al Macromedia Flash Mòdul II Les eines del Flash Jesús Arbués

Curs de Macromedia Flash Mòdul II Les eines de Flash

Jesús Arbués – Joan Gelabert – Ernest Prats 22

Si ens interessa podríem canviar l’ordre de les

capes. Podem posar la que està a sota més

amunt, la de dalt baixar-la…

Per fer-ho és necessari clicar sobre la capa,

seleccionant-la i arrossegant la desplaçarem

fins el lloc que vulguem. En aquest exemple el

text està entre les dues figures.

També ens podem trobar amb la necessitat d’esborrar una capa.

En aquesta situació has de senyalar la capa que no necessites i clicar al damunt de la icona de la pa-

perera.

El llapis, que en aquest cas està en la

capa text, ens indica que és la capa acti-

va actualment i a ella es col·locarà el que

dibuixi o escrigui a partir d’ara.

El tres símbols que apareixen just a sobre

de les capes ens permeten, ocultar una

capa, bloquejar-la o visualitzar només els

contorns dels elements dibuixats

Ara la capa rectangle està oculta, la capa

text està bloquejada (això vol dir que no hi

podem fer-hi res) i a la capa del cercle

només veurem el contorn dels objectes.

Bloquejar capes és una manera molt útil

de tenir elements a l’escenari sense perill

de fer-los malbé.

Page 23: Mòdul II Les eines del Flash - weib.caib.esweib.caib.es/Formacio/distancia/Material/flash/Flash2.pdf · Introducció al Macromedia Flash Mòdul II Les eines del Flash Jesús Arbués

Curs de Macromedia Flash Mòdul II Les eines de Flash

Jesús Arbués – Joan Gelabert – Ernest Prats 23

A totes aquestes propietats es pot accedir

també marcant la capa, clicant el botó

dret i triant propiedades del menú con-

textual.

A aquest panell es pot modificar tot. Algu-

nes característiques es veuran més enda-

vant.

Les capes es poden col·locar en carpetes, i d’aquesta manera tenir-les més ordenades.

Per crear una carpeta clica sobre la

icona:

Una vegada creada col·loca al dins

d’ella les capes.

Fixa’t que les capes s’han desplaçat un poc cap a la dreta

per indicar-nos que formen part de la carpeta.

Clicant sobre el triangle invertit de la

dreta de la icona

Podem amagar les capes que conté la

carpeta..

Clicant sobre el triangle, que ara mira a

la dreta tornen a aparèixer les capes

que conté la carpeta.

Tot el que hem explicat fa referència a capes normals. Hi ha d’altres: capes màscara, guia, amb

guia… Aquestes capes es veuran quan expliquem les seves aplicacions concretes.

Page 24: Mòdul II Les eines del Flash - weib.caib.esweib.caib.es/Formacio/distancia/Material/flash/Flash2.pdf · Introducció al Macromedia Flash Mòdul II Les eines del Flash Jesús Arbués

Curs de Macromedia Flash Mòdul II Les eines de Flash

Jesús Arbués – Joan Gelabert – Ernest Prats 24

Flash 5 no suporta les carpetes de capes

Les carpetes de capes no existeixen a la versió 5 del Flash. De tota manera,

si bé són molt útils, es pot treballar igual sense elles.

Activitat d’introducció 11

Has de crear un logotip per una institució científica d’estudi del medi o pel teu centre.

Ha de tenir les següents capes:

Capa 1 nom del lloc

Capa 2 nom de l’autor

Capa 3 una imatge dibuixada

Capa 4 una imatge importada

Has de posar el seu nom a cada capa i ordena-les, perquè es vegi correctament. De-

sa el fitxer amb el nom de logo.fla.

Activitat opcional 3

Importa una imatge de Menorca i en altres capes escriu el nom de quatre localitats.

Pots localitzar Menorca.jpg a la carpeta mapa dins arxius flash del mòdul 2 .

En una altra capa incorpora la rosa dels vents i orienta-la. La trobaràs a la mateixa

carpeta i l’arxiu porta com a nom rosavents.jpg.

Activitat de consolidació i reforç 1

A aquesta pràctica aprendràs a fer un dibuix calcant:

A una capa importa una imatge i a una altra que estigui al damunt intenta calcar-la.

Per això, obre el fitxer cactus.fla que està a la carpeta tipus de línia dins arxius

flash del mòdul 2. El fitxer té una imatge en una capa i un dibuix a la capa superior.

La imatge de la capa 1 s’ha calcat a la capa 2. Pots veure cada capa per separat

ocultes l’altra, tal com hem explicat abans. Per fer la feina s’ha utilitzat el model de

línia que hi ha a la imatge.

Hi ha un fitxer swf on pots veure per separat les dues capes que formen el fitxer: a

una capa la fotografia i a l’altra el dibuix que s’ha fet calcant. Rep el nom de Cac-

tus.swf .

Page 25: Mòdul II Les eines del Flash - weib.caib.esweib.caib.es/Formacio/distancia/Material/flash/Flash2.pdf · Introducció al Macromedia Flash Mòdul II Les eines del Flash Jesús Arbués

Curs de Macromedia Flash Mòdul II Les eines de Flash

Jesús Arbués – Joan Gelabert – Ernest Prats 25

.

6. MODIFICAR OBJECTES

Quan posam elements a l’escenari podem modificar-los: els podem modificar a partir de les eines de

transformacions i d’altres opcions que té el programa. Podem canviar la seva mida, girar o esbiaixar

els seus elements...

6.1. EINA DE FLETXA

Amb l’eina de fletxa podem, entre d’altres coses, modificar la forma dels objectes creats al propi pro-

grama.

Ara, incorporam una forma a l’escenari.

A continuació, activam l’eina de selecció.

Si apropam la fletxa a la figura, aquesta canviarà en funció si s’ha fet per una cantonada o bé pel mig

d’un dels costats. S’ha d’anar alerta, perquè si la figura està seleccionada (el seu color canvia) aques-

ta possibilitat de modificar no funciona.

Per un costat Pel mig d’una recta

Page 26: Mòdul II Les eines del Flash - weib.caib.esweib.caib.es/Formacio/distancia/Material/flash/Flash2.pdf · Introducció al Macromedia Flash Mòdul II Les eines del Flash Jesús Arbués

Curs de Macromedia Flash Mòdul II Les eines de Flash

Jesús Arbués – Joan Gelabert – Ernest Prats 26

Podem modificar les formes.

6.2. EINA MODIFICAR. TRANSFORMACIÓ LLIURE

Una segona opció és treballar amb l'eina de transformació lliure.

Quan seleccionam aquesta eina a l’apartat Opciones trobarem la possibilitat

de girar o d’escalar la figura.

Amb aquesta eina seleccionada cliquem sobre una figura. Apareixen

els tiradors a les cantonades i als punts centrals dels costats que

permetran les modificacions.

Podem escalar la figura, podem fer-la més ampla o més alta...

Page 27: Mòdul II Les eines del Flash - weib.caib.esweib.caib.es/Formacio/distancia/Material/flash/Flash2.pdf · Introducció al Macromedia Flash Mòdul II Les eines del Flash Jesús Arbués

Curs de Macromedia Flash Mòdul II Les eines de Flash

Jesús Arbués – Joan Gelabert – Ernest Prats 27

...la podem girar, esbiaixar...

6.3. LA PALETA TRANSFORMAR

També podem treballar les formes a partir de la paleta Transformar. Podem escalar, girar, esbiai-

xar... directament amb aquesta paleta.

Aquesta paleta és molt útil, especialment quan s’han d’augmentar o reduir de forma proporcional les

dimensions dels objectes.

Imagina’t a l’escenari dos o tres formes que s’han de fer més grans o petites; si ho féssim a partir de

l'eina de transformació lliure no tendríem la garantia de fer-ho proporcionalment a totes les formes. És

convenient utilitzar la paleta Transformar quan necessitam canviar la mida d’una forma proporcional

uniforme.

Si es desactiva l’opció Restringir, podràs transformar independentment l’alçada i l’amplada.

6.4. LES PROPIETATS DE L’OBJECTE

De tota manera, el millor per actuar directament sobre els objectes és a partir de la paleta de Propie-

dades.

Page 28: Mòdul II Les eines del Flash - weib.caib.esweib.caib.es/Formacio/distancia/Material/flash/Flash2.pdf · Introducció al Macromedia Flash Mòdul II Les eines del Flash Jesús Arbués

Curs de Macromedia Flash Mòdul II Les eines de Flash

Jesús Arbués – Joan Gelabert – Ernest Prats 28

La paleta de Propietats, sempre visible

Per tenir un major control sobre la feina que s’està fent és molt recomanable tenir

sempre oberta aquesta paleta.

A aquesta imatge tenim un rectangle que amb 144,4 píxels d’amplada i 80,2 d’alçada. Aquest rectan-

gle està situat a 52,8 píxels sobre l’eix x i a 102,2 de l’eix y.

Aquests valors es poden canviar i la figura canviarà automàticament.

A aquesta altra hem modificat les mides d’amplada i d’alçada del rectangle amb la intenció de fer un

quadrat.

Al costat de les mides de les formes trobaràs sempre uns valors X i Y que

corresponen a la posició a l’escenari.

Page 29: Mòdul II Les eines del Flash - weib.caib.esweib.caib.es/Formacio/distancia/Material/flash/Flash2.pdf · Introducció al Macromedia Flash Mòdul II Les eines del Flash Jesús Arbués

Curs de Macromedia Flash Mòdul II Les eines de Flash

Jesús Arbués – Joan Gelabert – Ernest Prats 29

Fixa’t que la ubicació del punt 0,0 –la coordenada inicial- està sempre en la cantonada superior es-

querra. L’eix x és sempre l’horitzontal i l’y el vertical.

El punt final la cantonada inferior dreta està en funció de les dimensions de l’escenari. A la imatge és

550,400 perquè estem treballant amb un escenari de 550x400 píxels.

Utilitzant la possibilitat de col·locar les coses a partir de la paleta de Propiedades podem tenir un

control molt precís i molt exacte de com disposar les coses.

Activitat d’introducció 12

Hi ha una carpeta amb imatges per poder fer aquesta pràctica, que porta el nom de

Situació, i està a dins d’arxius flash del mòdul 2.

Pots obrir un arxiu nou i importar les imatges (totes són de 50 d’ampla per 100 d’alt) i

distribuir-les com creguis convenient, o bé pots obrir directament l’arxiu exerci-

ci_per_fer.fla on ja tens les imatges importades. Utilitza la possibilitat d’introduir la

localització exacta a partir del panell de Propiedades. Pensa que si les fotos són de

50 píxels d’amplada, la primera està al punt 0 de l’eix X, la segona al punt 50, etc.

Desa la feina amb un nom diferent.

Page 30: Mòdul II Les eines del Flash - weib.caib.esweib.caib.es/Formacio/distancia/Material/flash/Flash2.pdf · Introducció al Macromedia Flash Mòdul II Les eines del Flash Jesús Arbués

Curs de Macromedia Flash Mòdul II Les eines de Flash

Jesús Arbués – Joan Gelabert – Ernest Prats 30

Situació inicial

Resultat final

6.5. LA QUADRÍCULA

Dins del menú Ver tens diferents opcions:

Començam per la quadrícula.

Page 31: Mòdul II Les eines del Flash - weib.caib.esweib.caib.es/Formacio/distancia/Material/flash/Flash2.pdf · Introducció al Macromedia Flash Mòdul II Les eines del Flash Jesús Arbués

Curs de Macromedia Flash Mòdul II Les eines de Flash

Jesús Arbués – Joan Gelabert – Ernest Prats 31

Per activar la quadrícula és necessari tenir marcada l’opció

Mostrar Cuadrícula .

Aquestes línies que apareixen només són

visibles a l’entorn de treball, quan es realitza la

feina. Es tracta d’una ajuda del programa que

no serà visible quan exportis la pel·lícula i per

tant en visualitzar el resultat final les línies no

apareixeran.

Existeix la possibilitat d’editar la quadrícula, variant la dis-

tància entre línies. A més, no és necessari que la forma

d’aquesta sigui sempre la quadrada. Per fer això anirem a

Ver > Cuadrícula > Editar cuadrícula.

Page 32: Mòdul II Les eines del Flash - weib.caib.esweib.caib.es/Formacio/distancia/Material/flash/Flash2.pdf · Introducció al Macromedia Flash Mòdul II Les eines del Flash Jesús Arbués

Curs de Macromedia Flash Mòdul II Les eines de Flash

Jesús Arbués – Joan Gelabert – Ernest Prats 32

A aquesta imatge pots veure una

quadrícula amb una estructura que

és més alta que ampla.

En canvi, a aquesta altra la quadrícula és

més ampla que alta.

El canvi de color és útil quan les imatges

que posam a l’escenari o el color de fons

ens poden confondre; en aquest cas pots

escollir un color molt contrastat.

Una opció molt utilitzada és la d’ajustar, de posar els elements enganxats a les línies de la quadrícu-

la. És una manera d’ordenar les coses ràpidament.

Page 33: Mòdul II Les eines del Flash - weib.caib.esweib.caib.es/Formacio/distancia/Material/flash/Flash2.pdf · Introducció al Macromedia Flash Mòdul II Les eines del Flash Jesús Arbués

Curs de Macromedia Flash Mòdul II Les eines de Flash

Jesús Arbués – Joan Gelabert – Ernest Prats 33

El quadrat blau està posat a l’escenari sense tenir

activat Ajustar a Cuadrícula. El vermell, en canvi,

està posat amb l’opció activada

Notaràs que en el moment d’anar dibuixant el cursor

es transforma, com es veu en el dibuix, i es va adap-

tant a les línies de la quadrícula.

La quadrícula i les imatges importades

Aquesta opció d’Ajustar a Cuadrícula no serveix quan tenim imatges a l’escenari i

les volem posar en llocs concrets. Només serveix quan estiguem treballant i creant les

formes. Per ubicar imatges a llocs concrets hem d’utilitzar el panell de Propiedades.

6.6. ELS REGLES

Una altra opció és la de tenir visibles uns regles. Hi podem accedir des de Ver > Reglas.

Els regles s’adapten sempre a l’àrea de treball, veuràs que el punt 0,0 correspon a la part superior

esquerra, tal com ja havíem explicat.

Els regles et permetran tenir un control de les dimensions de les coses i ens ajudaran a fer aparèixer

les guies.

Page 34: Mòdul II Les eines del Flash - weib.caib.esweib.caib.es/Formacio/distancia/Material/flash/Flash2.pdf · Introducció al Macromedia Flash Mòdul II Les eines del Flash Jesús Arbués

Curs de Macromedia Flash Mòdul II Les eines de Flash

Jesús Arbués – Joan Gelabert – Ernest Prats 34

6.7. LES GUIES

Les guies són unes línies que es poden posar en el lloc on vulguis. Sempre seran horitzontals i/o ver-

ticals, i pots posar totes les que vulguis. És necessari tenir els regles activats per poder crear guies.

Per activar les guies, s’ha de seleccionar Ver > Guías. Aquestes guies funcionen com la quadrícula,

són visibles en l’entorn de treball, però no figuraran a l’arxiu exportat.

Quan estiguin les guies a l’escenari ja pots amagar, si vols, els regles. Les guies no desapareixeran.

Les guies es poden fer ocultar en qualsevol moment i tornar-les a recuperar si fos necessari, emprant

com abans Ver > Guías > Mostrar guías.

Per poder crear una línia guia t’has de posar amb el cursor sobre el regle, notaràs que canvia

d’aspecte.

Arrossega clicant el botó del ratolí fins el lloc on vulguis. Notaràs

que ha aparegut una línia.

Aquesta línia la pots tornar a canviar de lloc.

Posat a sobre de la línia fins que canviï

l’aspecte del cursor.

En algun moment et pot interessar fer desaparèixer una d’aquestes guies. El que has

de fer és: posar-te a sobre fins que el cursor canviï a l’aspecte del triangle petit negre i

la línia horitzontal a sota i arrossegant la línia la portes fins el regle: desapareixerà.

També permetrà poder ajustar els objectes a

aquestes noves línies, emprant l’opció Ver > Guí-

as > Ajustar a guías.

I de la mateixa manera que podies modificar aspectes de la quadrícula, d’aquestes guies pots canviar

diverses coses. Bàsicament el que és necessari canviar és el color per poder contrastar imatges de

fons amb les línies guies.

Page 35: Mòdul II Les eines del Flash - weib.caib.esweib.caib.es/Formacio/distancia/Material/flash/Flash2.pdf · Introducció al Macromedia Flash Mòdul II Les eines del Flash Jesús Arbués

Curs de Macromedia Flash Mòdul II Les eines de Flash

Jesús Arbués – Joan Gelabert – Ernest Prats 35

6.8. ALINEAR OBJECTES

Una ajuda més al dibuix i que utilitzaràs moltes vegades és la de “Alinear”. Per poder fer això, primer

de tot has de fer visible la barra d’eines Principal, amb Ventanas > Barras de herramientas > Princi-

pal.

Quan cliquis al damunt d’aquesta eina apareixerà la paleta

de la dreta.

Aquesta paleta et permetrà organitzar els elements que

tenguis entre ells, en referència a l’escenari, o en referència

amb ells mateixos.

Fixa’t amb la icona que té la paleta a la seva part dreta:

Quan aquesta icona està activada els canvis que es facin

per ordenar els objectes es faran en relació amb l’escenari.

Posarem un exemple: Aquí tens un escenari amb tres imatges. Les imatges estan desordenades i les

volem tenir amb una separació idèntica entre elles.

Page 36: Mòdul II Les eines del Flash - weib.caib.esweib.caib.es/Formacio/distancia/Material/flash/Flash2.pdf · Introducció al Macromedia Flash Mòdul II Les eines del Flash Jesús Arbués

Curs de Macromedia Flash Mòdul II Les eines de Flash

Jesús Arbués – Joan Gelabert – Ernest Prats 36

Seleccionam les imatges i clicam sobre la icona de separació.

Obtendràs això:

Has aconseguit separar amb la mateixa distància els tres elements, però aquests –donat que teníem

la icona, de fer referència a l’escenari, activada- s’han distribuït per l’escenari agafant tota l'amplada

possible.

Farem el mateix, però amb l’opció Distribuir en escenario desactivada

El resultat és aquest.

Page 37: Mòdul II Les eines del Flash - weib.caib.esweib.caib.es/Formacio/distancia/Material/flash/Flash2.pdf · Introducció al Macromedia Flash Mòdul II Les eines del Flash Jesús Arbués

Curs de Macromedia Flash Mòdul II Les eines de Flash

Jesús Arbués – Joan Gelabert – Ernest Prats 37

Ara podem seleccionar que tots elements estiguin al mateix nivell.

Activitat d’introducció 13

Completarem aquesta pràctica recuperant l’exercici Exercici_per_fer.fla que ja havi-

es treballat anteriorment. Intentarem distribuir les imatges de forma ordenada.

Primer obrirem l’arxiu. A continuació, seleccionarem totes les imatges. Recordau que

això es pot fer clicant sobre cadascuna de les imatges mantenint la fletxa de Majúscu-

les o bé, com mostra la imatge, fent un rectangle de selecció amb el cursor.

Page 38: Mòdul II Les eines del Flash - weib.caib.esweib.caib.es/Formacio/distancia/Material/flash/Flash2.pdf · Introducció al Macromedia Flash Mòdul II Les eines del Flash Jesús Arbués

Curs de Macromedia Flash Mòdul II Les eines de Flash

Jesús Arbués – Joan Gelabert – Ernest Prats 38

Així tendrem totes les imatges seleccionades.

Ara anam a distribuir-les. Ho farem en funció de l’espai de l’escenari. Activarem la

referència a l’escenari i seleccionarem a distribuir horitzontalment.

Les imatges agafaran tota l’amplada de l’escenari.

Page 39: Mòdul II Les eines del Flash - weib.caib.esweib.caib.es/Formacio/distancia/Material/flash/Flash2.pdf · Introducció al Macromedia Flash Mòdul II Les eines del Flash Jesús Arbués

Curs de Macromedia Flash Mòdul II Les eines de Flash

Jesús Arbués – Joan Gelabert – Ernest Prats 39

Ara farem que totes les imatges estigui en el mateix nivell.

El resultat ha de ser aquest:

Un domini d’aquesta eina et permetrà disposar correctament els elements a

l’escenari.

Pots practicar totes les opcions. En acabar, desa el fitxer.

Activitat d’entrega obligada 1

Obre el fitxer crear_flor.swf, que està a la carpeta Tipus de línia, dins d’arxius flash

del mòdul 2. A ell tens els passos detallats de com realitzar el dibuix. En acabar,

guarda’l amb el nom de flor.fla. Podeu seguir l’esquema o fer-hi variacions: el que

interessa és que utilitzis de forma continua diverses ordres tant d’edició com de

dibuix: copiar, enganxar, cercle, etc.

En acabar, envia el fitxer flor.fla al teu tutor o tutora