FLASH - Curs Escola d'Estiu'08

Blanquerna, juliol de 2008 

Escola d'Estiu Blanquerna

Dreamweaver i Flash

Professor: Jorge Coderch 07

1.LA INTERFÍCIE

Explicació de les finestres que trobem a l’entorn del programa Flash.

-Tapís de treball.

-Barra d’eines.

-Paleta de propietats segons l’eina seleccionada.

-Línia de Temps.

-Altres Paletes. 

2.PRÀCTICA INICIAL de CONEIXEMENT GENERAL

-Dibuixem un quadrat amb l’eina correspònent de la paleta d’eines.

El situarem fora del tapís de treball.

Observarem com a la capa 1 de la línia de temps en apareix un punt negre dins el fotograma 1, indicant que tenim un fotograma clau clau disponible.

Si ens hi fixem podrem veure que quan cliquem damunt el quadrat dibuixat ens apareix información relativa al mateix a la part inferior de la pantalla, trobem dades com mida, color, tipus d’objecte.

-Crearem un moviment d’aquest quadrat de forma que es desplaci per pantalla d’esquerra a dreta durant un temps de 2 segons.

-Per aconseguir aquest temps concret ho farem sabent que la reproducció és a 12 fotogrames per segon (fps, tal com es mostra a la línia de temps). Per tant si utilitzem 24 fotogrames la reproducció durarà 2 segons exactes.

-A la línia de temps de la capa on tenim el quadrat anem al fotograma.


- Tot seguit fem els següents exercicis senzillets.

  • Modificar el color del darrer fotograma del quadrat
  • Afegir uns segona capa amb un cercle que vagi en sentit contrari el seu moviment.
  • I un darrer dibuix en forma de triangle que caigui de dalt a baix.

3.- DESAR i PUBLICAR

Podrem desar l'arxiu en que treballem per a poder treballar-hi posteriorment si ho fem amb l’opció arxiu – anomenar i desar, Ens ho desa amb l’extensió fla.

Si el volem desar, ja sigui per a ser publicat en web o bloc, ho farem des de l’opció publicar que abans cal que la tinguem configurada al nostre gust -> Arxiu->Configuració de publicació (només cal fer-ho la primera vegada), després només farem Majúsc+F12 , és a dir, PUBLICAR.


Observem com ens desarà 4 arxius si així li hem indicat a la configuració (fla, html, swf, js)

Els pujarem tots al PageCreator de Google, eina que serveix per a emmagatzemar i també per a crear planes web.

4.- ANIMACIÓ i MOVIMENT GUIAT

Crearem en aquest exercici un avió que es desplaci per pantalla.

- Primerament hem de dur la imatge al Flash. La podem inserit com una imatge directament al tapís, o bé és molt millor importar aquesta imatge a la Biblioteca.

Ja tenim a l'avió al Panell de Biblioteca, ara només l'hem d'arrossegar al tapís de treball.

Podem modificar el seu tamany manualment, des de Transformació lliure, (botó dret del ratolí damunt la imatge) només hem de moure els tirants que apareixen, si cliquem MAJUSC mentre tibem de l'extrem es modifica proporcionalment.

O bé fer-ho des de la finestra de propietats com podem veure a la següent imatge

Acte seguit ens falta crear la interpolació del moviment simulant que l'objecte s'enlaira i agafa el vol.


Situem el cursor al fotograma 30 i inserim un fotograma clau, on a més mitjançant Transformació Lliure li modificarem la inclinació.

Seleccionem tots els fotogrames de la capa, clic damunt la capa, o clic al primer fotograma i arrossegar fins al darrer, ena aquest cas el 30. Botó dret damunt els fotogrames seleccionats i Añadir Interpolación de Movimiento.


Un cop en aquest punt ens falta crear la guia per on es mourà aquest avió.

Afegim una guia de moviment que anirà lligada a aquesta de l'avió. Observem com la crea immediatament damunt, és en aquesta capa on dibuixarem amb el llapis un recorregut que voldrem que segueixi el vol.

Finalment tornem a la capa d'avió i seleccionem el fotograma 1 per a ancorar-lo a l'inici del moviment, de la línia dibuixada. Repetim l'operació al fotograma 30 per dir-li on volem que acabi el moviment.

També podrem modificar el traçat del vol situant-nos a la capa de la guia i amb l'eina seleccionar ens atansem a la línia abans dibuixada i la retoquem al nostre gust.

Aquesta línia guia no serà visible en la reproducció (Ctrl+ Enter).

Hi podríem afegir un nou avió que fes un recorregut posterior a l'anterior.

Procediment:

  • Arrossegar el nou avió a l'escriptori de treball.
  • Mitjançant transformació Lliure el podem voltejar horitzontalment per a fer-lo venir en direcció contrària
  • Crear el darrer fotograma clau on volem que acabi el vol.
  • Afegir interpolació de moviment.
  • Moure tots els fotogrames d'aquest nou avió cap al fotograma 31, cal tenir-los tots seleccionats, ho fem arrossegant-los tots de cop.
  • Ja tenim un avió que apareix quan acaba el vol el primer.
  • Podem afegir núvols, sol, en diferents capes iq eu apareguin davant o darrera dels avions segons l'ordre de les capes, ordre que podem variar movent-les amb el cursor.

Podeu veure el resultat e aquest enllaç AVIÓ


5.- ANIMACIÓ SOBRE IMATGES de FONS

Importem una imatge cap a l'escriptori, important que no sigui massa pesada, no més de 200 kb.

Quan la tenim a l'escenari cal adaptar-la al tapís, ho fem accedint via botó dret del ratolí a Propietats del document i hi apliquem els valors en píxels de la imatge triada.


  • Un cop ajustat l'escenari, creem una capa nova on dibuixarem un objecte, en aquest cas un cercle a mode de sol.
  • Podem bloquejar la capa del dibuix de fons per evitar qualsevol moviment involuntari del mateix. Activant el candau de la capa.
  • Li afegim el color i traç desitjat i acte seguit convertirem el dibuix que hem fet a símbol per a que tingui una animació independent de la resta d'objectes.
  • Observarem que quan treballarem amb aquest objecte ens apareix com un subescenari dins l'escenari principal, allí li podrem crear l'animació desitjada.
  • Quan tornem a l'Escenari principal veurem que només hi ha un fotograma, però el símbol té el moviment propi que li hem donat.
  • Es pot repetir l'acció arrossegant aquest símbol vàries vegades sobre l'escenari i editant-lo per a canviar-li el color i tamany.


  • Si el que volem és una nova trajectòria ho farem des de l'opció Transformación Libre, i fent-li fer una rotació, llavors entén que la direcció d'inici del moviment és una ja diferent.
Obervem en aquest enllaç la feina feta, BIG BEN.

6.- INTERACTUEM amb el FLASH. EL BOTÓ.

A l'exercici següent mirarem de fer que en passar per damunt d'una paraula aparegui la imatge de l'objecte en qüestió.

  • Primerament cerquem i allotgem les imatges a la biblioteca de Flash
  • Tot seguit escrivim el nom de cada objecte a l'escenari mitjançant l'eina d'escriptura. En el nostre cas són mitjans de transport per ciutat.
  • Aquests noms els convertirem a botons per així poder-los-hi donar interactivitat.
  • Amb el nom escrit tornem a posar el ratolí damunt de la zona del text i triem, via botó dret, l'opció convertir en símbolo.

  • Dels símbols existents escollim el de botó, doncs és el que ens interessa ara.

  • Ara ja tenim el botó creat, caldrà editar-lo, per tant farem doble clic damunt del botó, en aquest cas el text "bicicleta".
  • Ens mostra els quatre estats del botó.


  • Al primer REPOSO, deixem el fotograma tal com està
  • Al segon SOBRE, podem modificar el color del text, per exemple, serà el que veurem quan passem el cursor per damunt el text. Per tant afegirem un fotograma clau i després li canviarem el color.
  • Al tercer, PRESIONADO, serà l'efecte que succeirà quan cliquem amb el ratolí damunt del Text o Botó. En el cas que ens ocupa li fem que aparegui la imatge de la bicicleta i a més faig el text un pèl més petit, per donar prioritat a la imatge. Recordem que el text no cal escriure'l, només cal inserir fotograma clave.
  • Al darrer estat del botó ZONA ACTIVA el que farem serà enganxar fotograma copiat de la zona reposo, que serà el text en si. I al damunt li dibuixo un rectangle que ocupi tot el text, essent aquesta zona del rectangle la sensible a tot el que passi entre el cursor i el botó.


El resultat final serà el següent: TRANSPORT

7.- ACCIONS ASSOCIADES al BOTÓ

Farem que el botó ens porti a un espai, adreça web.

Treballarem a partir d'un logo que situem a l'escenari, aquest el convertim a botó, donant-li les característiques personals que vulguem.

Seleccionem el botó.

Ventana -> Acciones

Treim dins les Accions Globals les de Control de Pel·lícula, i en concret l'action "on", i finalment "release"

per a que s'executi l'ordre quan deixem el clic del ratolí damunt del botó.

Encara ens falta dir que obri una adreça web, ho fem a partir d'una Action també, que trobem dins de les Acciones Globales, -> Navegador/Red -> Get URL


L'adreça l'enganxarem o escriurem sempre entre cometes, per indicar-li que és un text literal.

Abans de tancar podem fer una revisió de sintaxis.

Si ens interessa que la plana s'obri en una nova pestanya cal que li afegim just darrera la URL , el text, precedit d'una coma i entre cometes "blank".

Podeu observar el resultat de l'exercici al següent enllaç BOTÓ WEB


8.- ACCIONEM UN MECANISME a PARTIR d'un BOTÓ


  • Dibuixem una plataforma que mantindrà un objecte al seu damunt.
  • Li donem moviment horitzontal, interpolant.
  • Ara creem una nova capa que tindrà la pedra o objecte que volem que caigui quan es retiri la plataforma.
  • Aquesta pedra la ferm voltejar mentre cau i que coincideixi la caiguda amb la retirada de la plataforma.
  • Creem l'ACCIÓ que farà que la pel·lícula no es mogui. Ho farem en una capa nova que anomenarem STOP. Tot seguit, F9 , Ventana->Acciones Globales, Liena de Tiempo i triem STOP.

  • Ara dibuixarem en una nova capa el botó que executarà el moviment de la plataforma
  • Dibuixem el tac (botó), en una nova capa, que farà moure la plataforma colpejant-la.
  • Aquest botó l'adaptarem a un moviment de colpeig en els seus estats, una bona opció és a l'estat PRESIONADO fer-lo desplaçar fins que contacte amb la plataforma.
  • Ara ens toca donar-li acció al botó. Ventana -> Acciones -> Globales -> Control Clip Película-> On ->Release. Que ens farà executar l'acció després del clic del ratolí.
  • Seguidament hem de dir-li que ens executi l'acció de la pel·lícula, doncs ara
    la tenim aturada per l'acció STOP que abans li hem marcat. Ho fem
    des de les Accions Globals -> Linea de Tiempo -> Go to and Play i li marquem que s'iniciï el fotograma 2.


  • Finalment posarem una acció d'STOP per a poder aturar la reproducció quan s'arribi al final. El situarem a qualsevol capa, menys la de l'interruptor, ho fem a la de l'objecte, al fotograma darrer: F9 , Ventana->Acciones Globales, Linea de Tiempo i triem STOP.
  • Feu un cop d'ull al resultat PLATAFORMA.




9.-ACTIVEM UN ARXIU de SO / MÚSICA en PEL·LÍCULA FLASH

  • Importem la IMATGE que volem de fons a l'Escenari.
  • La imatge cal que sigui molt més gran que l'Escenari i així poder fer un desplaçament de la mateixa veient només els detalls de la fotografia.
  • Al tapar-nos la imatge l'Escenari, tenim dues opcions per tenir la referència, clicar l'opció del color de capa o bé crear una nova capa que tingui un rectangle sense color de fons, només traç i que ens servirà de referent per moure la imatge.

  • Crearem un moviment molt lent de la foto , cada 120 fotogrames, (10 sg) , i que vagi canviant cap als diferents detalls de la imatge.
  • Al darrer fotograma hi podem inserir l'acció STOP per a que s'aturi, si ho creiem convenient.
  • La música de fons la posarem a partir d'una nova capa. L'anomenem MÚSICA, I només hem d'arrossegar l'MP3 de la Biblioteca cap a l'Escenari. No es veurà , però entén que si s'ha de reproduir mentre duri l'animació. Ell sol ocupa tants fotogrames com els que troba en les altres capes.

  • Podríem editar la música amb l'Audacity, per retallar, fer un fade, repetir, ... La qualitat de la cançó repercuteix sobre el pes, però moltes vegades no cal valors exagerats inapreciables per a l'oïda humana. Podem treballar amb valors entre 96 i 128.
  • Podrem exportar el nou arxiu en format de compressió MP3. És possible que ens demani que no troba el lamec .dll, el trobarem a C/ -> Archivos de Programa -> Audacity



  • Si ens trobéssim que la imatge és molt pesada, la podriem modificar mitjançant l'eina de Optimitzar que ens ofereix Fireworks, anem triant el percentatge de qualitat fins que el nombre de Kb

  • També ho podem fer des de l'opció del Fireworks, Tamaño del documento, fent que només tingui 600 px d'amplada, ell sol ja fa la proporció de l'alçada. Observarem com la imatge a passat a ocupar només 17Kb. En acabar farem un Guardar como, per no perdre la foto original.

El resultat final: VISIÓ d'un QUADRE

10.- CREEM UN BANNER MÒVIL DIRECCIONAT a ADRECES WEB

Cercarem unes imatges d'una mida determinada, que figuraran en el banner que podria ser la capçalera d'una plana, per exemple.

pendent de fer...

Resultat final banner


11.- Una mica d'ÀUDIO. L'AUDACITY.

A partir del programari lliure AUDACITY, editarem, gravarem i afegirem efectes, entre altres utilitats a arxius d'àudio. Mirem com ho podem aconseguir.

Enregistrar

  • Escollim l'opció desitjada depenent d'on volem captar el so. En aquest cas triem Mezcla de salida de onda, per a poder enregistrar so d'una web que el contingui o d'un reproductor d'àudio de xarxa, tipus Songza, Radioblog, Musicovery.
  • També podria ser micròfon, CD, DVD, o qualsevol altra sortida .

  • Clicarem sobre el botó d'enregistrar i acte seguit activarem el play de la música a enregistrar en la web triada.

  • Les gravacions que fem les exportarem al format desitjat, ja sigui MP3, WAV. ... o desarem com a projecte per a una posterior edició.


12.- Creem una pel·lícula FLASH amb control d'ÀUDIO.

  • Importarem a la biblioteca els arxius d'Àudio i les imatges que ens serviran de botons de control del clip.
  • Tot seguit situem a l'escenari tots els components gràfics en el format que més ens agradi. Tots al mateix fotograma, podem modificar després el tamany de l'escenari.


  • Prepararem l'arxiu d'Àudio per a que pugui ser reproduït i aturat mitjançant els botons. Vinculant l'MP3 als scripts de Flash. Fem clic amb botó dret damunt l'arxiu d'Àudio a la biblioteca i escollim Vinculación.


  • Ara toca crear les accions del botó, ho podem fer com fina ara, creant les accions (ventana->Acciones, o F9), o en el cas que ens ocupa farem Ventana -> Comportamientos -> Añadir -> Sonido - > Cargar sonido de biblioteca


  • A la següent finestreta reproduirem el mateix nom de l'arxiu MP3, i a la casella del davall un nom de referència, serà el nom de la instància, cal que el botó d'Aturar també porti aquest nom d'instància, però sense cap extensió.











  • Realitzarem el mateix procés per al botó d'aturar.

Observem el resultat final ÀUDIO-FLASH



14.- INTERPOLACIÓ de FORMA

Mitjançant les eines de Flash podem aconseguir modificacions de les formes de diferents objectes.

  • Primerament dibuixem al fotograma inicial l'objecte o forma geomètrica que volem modificar.
  • Tot seguit ens situem en un fotograma més avançat i inserim un fotograma clau (F6), és en aquest darrer fotograma on modifiquem la forma.

  • Ara ens toca, un cop seleccionats tots els fotogrames de la capa, afegir una interpolació de forma i observarem com es modifica tota la figura a mida que avança la reproducció.


15.- CLIPS de PEL·LÍCULA

El clip de pel·lícula ens facilitarà evitar crear llargues llistes de fotogrames a l'escenari. Doncs són una mena d'arxius swf que són independents de la línia de temps de l'escenari i s'executen de forma autònoma també.

  • Procedim a crear aquest símbol des del menú INSERTAR -> Crear SIMBOLO -> Clip de película.

  • Acte seguit editem el clip, veiem que hi ha la línia de temps i les capes idèntiques a l'escenari. Li podem fer interpolacions de forma o moviment i tots els efectes de color que ens semblin.

  • Ja només ens queda afegir el clip de pel·lícula a l'escenari. Ho fem arrossegant el clip des del panell de biblioteca cap a l'escenari. Recordem que com a símbol que és el podrem escalar, girar,... i en podrem afegir tants com vulguem, que sempre executaran la mateixa pel·lícula.

Observeu el flash resultant: ULL


16.- DESCARREGAR un DOCUMENT DOC o PDF des de FLASH