Guia de treball Flash (1)

Creació d'una pel·lícula amb Flash i inserció de la pel·lícula en un document HTML
Definició
En el procés de disseny i creació d'un espai web es pot optar per desenvolupar l'espai íntegrament en Flash o bé per incorporar pel·lícules interactives creades amb Flash a documents HTML.

En aquesta guia es proposa un exercici pràctic de creació d'una pel·lícula amb Flash i la seva incorporació a un espai web creat amb Dreamweaver (consultar la guia 1 de Dreamweaver). Abans de realitzar aquesta guia es recomana haver fet ús de les lliçons 01-08 d'autoaprenentatge (Help > Lecciones) així com de l'ajuda de Flash (nocions bàsiques i avançades).

Començarem creant la pel·lícula i a continuació elaborarem els documents HTML. Les fases d'elaboració de la pel·lícula es poden dividir en Configuració, Elaboració dels elements bàsics, Muntatge i Publicació.

 

Cal aprendre a..

Com
Configuració

Configurar la pel·lícula

 Un cop hem obert Flash definirem les propietats: mida i color de fons. L'assignació de propietats es fa a partir de l'opció 
  • Modificar > Película. 
En el quadre de diàleg Propiedades de película, és on s'estableix la mida (p.e. 400 per 300 píxels) i el color de fons.
Àrees de treball

Identificar la finestra d'edició d'escenes i la finestra d'edició de símbols. Diferenciar les seves funcions

 Quan obrim Flash o bé fem Archivo > Nuevo ens situem a la finestra d'edició d'escenes. En aquest espai és on anirem elaborant la pel·lícula.

Si volem utilitzar elements (com ara imatges o bé botons) repetides vegades podem crear símbols que incorporarem a la biblioteca de símbols i que podrem utilitzar tantes vegades com calgui. Parlem d'Instància per referir-nos a l'ús d'un símbol en un fotograma.

D'una altra banda, cada pel·lícula té la seva pròpia biblioteca encara que en ella també es poden utilitzar símbols d'altres biblioteques. Per obrir la biblioteca fem:

  • Ventana > Biblioteca
I per crear un símbol:
  • Insertar > Nuevo símbolo. 
  • En el cuadre de diàleg Propiedades de símbolo, s'assigna un nom al símbol (p.e. rectangle) i es configura el seu comportament (p.e. Imagen).
L'espai de treball que ens mostra ara Flash és la finestra d'edició de símbols. En aquest espai es poden fer servir les eines de dibuix i d'altres recursos de Flash per elaborar la imatge (animada o no).

Des de la part superior dreta de la pantalla podrem seleccionar l'escena o el símbol que volem editar.

Elaboració dels elements que formen la pel·lícula 

Creació d'imatges vectorials

Amb les eines de dibuix de Fash obtindrem imatges vectorials (formades per un conjunt de línies que configuren àrees amb diverses propietats com ara color, posició...).
  • A la finestra d'edició de símbols en la que ens trobem podem dibuixar un objecte senzill utilitzant les eines de dibuix (p.e. un rectangle blau).

Podem especificar o modificar les mides, la posició del rectangle o altres propietats amb la opció Paneles:

  • Ventana > Paneles > Relleno, Trazo, Transformar

Per dibuixar les imatges tenim una altra possibilitat. Podem utilitzar la finestra d'edició d'escenes per 

  • Crear una imatge qualsevol (p.e. un cercle de color blanc). 

Si ho creiem necessari podem afegir la imatge a la biblioteca seleccionant-la i fent 

  • Insertar > convertir en símbolo
  • A les Propietats li assignem com a nom: cercle
Nota: si no convertíssim la imatge en símbol només la podríem utilitzar en aquesta escena. A més, l'ús de símbols per a les imatges que es repeteixen fa que la pel·lícula resultant "pesi" menys i per tant es descarregui amb més rapidesa. 
Elaboració dels elements que formen la pel·lícula 

Utilitzar una imatge obtinguda a Internet o escannejada.

 Les imatges escannejades o copiades d'Internet són tractades per Flash com mapes de bits, bitmats (Flash registra la imatge com un conjunt de punts).
  • Amb el navegador (Internet Explorer) obrirem una web com per exemple Google i copiarem el logo de la pàgina principal (Ctrl+clic en la imatge i Copiar). 
Com ja hem vist anteriorment, en Flash podem optar per dues opcions: 
    1. utilitzar la imatge directament en la pel·lícula o 
    2. crear un símbol. En aquest cas farem: 
  • Insertar > Nuevo símbolo i li assignem les propietats (nom: google i comportament: clip de película).
A continuació, a la finestra d'edició de símbols, fem:
  • Edición > Pegar.
Símbols animats i biblioteques

Utilitzar la finestra d'edició de símbols per crear elements animats (clips de pel·lícula) que més tard s'incorporaran a la pel·lícula.

 L'animació de símbols s'utilitza quan volem aconseguir l'aparició gradual d'una imatge i/o que la imatge faci un desplaçament o rotació.  Les animacions es poden fer en el símbol mateix o bé en una escena.

Per fer símbols animats: Estant a la finestra d'edició de símbols, seleccionarem la imatge del pas anterior que havíem situat al fotograma 1. 

  • A la línia de temps seleccionem el fotograma 15 i fem Insertar > Fotograma clave. 
  • A continuació ens situem al fotograma 14.
  • Fem Insertar > Interpolación de movimiento 
  • Modifiquem les propietats de l'objecte del fotograma 1. P.e. posem:
    • reduïm la mida al 50%

    Ventana > Paneles > Transformar > Escala: 50%

    D'aquesta forma aconseguirem que la imatge vagi augmentant la seva mida.

Abans d'incorporar el símbol a la pel·lícula és convenient comprovar si funciona correctament fent: 

  • Ventana > Controlador obrirem una botonera (el Controlador) que ens permetrà visualitzar el que hem fet fins ara.
Si volem que a la pel·lícula no es mogui de manera contínua caldrà posar un fotograma amb l'acció STOP. Estem a la finestra d'edició de símbols amb el símbol Google. 
  • Afegim una nova capa.
  • Ens situem al fotograma 15 i posem un fotograma clau
Li assignarem l'acció al fotograma fent:
  • Ventana > Acciones
  • Fem clic a + triem Stop
  • Cal prèmer la tecla Enter
Muntatge de la pel·lícula en capes

Inserir els símbols animats en la pel·lícula i controlar la seva execució.

 Estant a la finestra d'edició d'escenes, posarem els objectes en capes diferents per poder controlar amb més facilitat el moviment, l'aparició o desaparició de cadascun d'ells en la línia de temps.
  • Crearem una nova capa a la línia de temps i l'anomenarem Fons. 
  • En aquesta capa situem el rectangle blau:
    • Al arrossegar el símbol del rectangle (des de la finestra Biblioteca) a la Escena, l'objecte queda ocupant el fotograma 1
    • Al fotograma 15 fem Insertar > Fotograma clave
  • Podem fer que un objecte tingui moviment per l'escena: Ens situem al fotograma 15 i movem l'objecte a un altre punt de l'escena.
  • Ens situem al fotograma 14 i fem

    • Insertar > Crear Interpolación de movimiento

    D'aquesta forma aconseguirem que la imatge es desplaci per l'escena.

  • En una altra capa afegim el símbol Google: Inserim el símbol clip de pel·lícula creat a l'apartat anterior (Google) arrossegant-lo des de la biblioteca
Guardem la pel.lícula (Archivo > Guardar [recordeu posar al nom l'extensió .FLA]). Podem provar la pel.lícula si fem:
  • Control > Probar pelicula / Test
Muntatge de la pel·lícula en capes

Creació de capes de contingut de text 

 Per afegir text a la pel·lícula farem el següent:
  • Fem Insertar > Nuevo símbolo i amb l'eina Text escriviu un text breu.
  • Afegirem una nova capa en la part superior de la línia de temps i l'anomenarem "Text presentació".
  • Farem que el text aparegui en el fotograma 15 i desaparegui en el fotograma 30 fent una transició entre ambdós fotogrames:
    • Per situar el text al fotograma 15 cal fer Insertar > Fotograma clave en aquest fotograma 15 i arrossegar el text des de la finestra Biblioteca.
    • Al fotograma 30 fem Insertar > Fotograma clave
    • Ens situem al fotograma 15 i modifiquem les propietats de l'objecte del fotograma 15 (el text). P.e. posem:
      • color Alfa -transparència- a 0

        Ventana > Paneles > Efecto > Alfa 0%

      • reduïm la mida al 50%

        Ventana > Paneles > Transformar > Escala: 50%

    • Ens situem al fotograma 29 i fem

    Insertar > Crear Interpolación de movimiento

    D'aquesta forma aconseguirem que la imatge vagi apareixent a mesura que augmenta la seva mida.

A continuació afegirem un altre text que apareixerà en el mateix lloc que el primer text quan aquest hagi desaparegut. Per facilitar la visualització del que farem a la nova capa podem amagar l'actual.
  • Farem clic a l'ull de la columna de la capa "Text presentació" i aquesta quedarà amagada.
  • Afegirem una nova capa en la part superior de la línia de temps i l'anomenarem "Segon text". 
  • Al fotograma 30 de la capa "Segon text" afegirem un Fotograma clave i insertarem el símbol del nou text, prèviament creat.
Prova de la pel·lícula Un cop donem per acabada la pel·lícula la guardem i la podem provar fent:
  • Control > Probar película.
Flash i HTML

Publicació de la pel·lícula i visualització en el navegador

 Per reproduir la pel·lícula acabada en un navegador, necessitem publicar-la o bé exportar-la com Archivo de Reproductor Flash. 

Quan es crea un lloc web amb Flash és pot crear un document HTML que s'obri en un navegador i executi la pel·lícula Flash

Es pot fer servir 

  • Archivo > Publicar

Aquesta opció crearà dos documents amb el mateix nom i amb extensions diferents: .SWF és l'animació de flash en format de pel.lícula i .HTML és l'animació en format insertada en una pàgina web. 

Abans de publicar la pel·lícula podem configurar alguns paràmetres: 
  • Archivo > Configuración de publicación. 
  • Fem clic en la fitxa HTML i definim les configuracions més comuns com ara la mida, posició, color i qualitat
  • Triem Flash Only en el menú emergent Plantilla. 
  • Podem anul·lar l'opció Bucle per evitar que la pel·lícula es reprodueixi més d'un cop. 
  • També farem clic en Pausa al comienzo per treure la marca de la casella de verificació. Si deixéssim aquest opció marcada, la pel·lícula no faria res fins que una acció la iniciés. 
  • Només queda fer clic a Publicar i a Aceptar per tancar el quadre de diàleg.
L'opció Archivo > Exportar ens permetria generar altres formats com per exemple avi, gif animat, jpeg...
Flash i HTML

Reproducció de la pel·lícula en el navegador 

Les pel·lícules es poden visualitzar en un navegador:
  • Obrim el document HTML que acabem de crear.
El document HTML es troba a la mateixa carpeta de la pel·lícula i té el mateix nom que l'arxiu però amb l'extensió .html. La pel·lícula s'ha de veure al navegador igual que quan fem servir Probar película.
Flash i HTML

Creació d'un document HTML

Ja hem vist que Flash és capaç de generar un document HTML però sovint el que volem és incorporar la pel·lícula a la nostra web. Llavors utilitzarem Dreamweaver per crear els documents HTML i en ell que posarem l'animació creada amb Flash.
  • Obrim l'aplicació Dreamweaver
  • Es configura la pàgina (nom, color de fons i de text...) i es desa a la mateixa carpeta on hem desat la pel·lícula
  • Crearem una taula de dues files i una columna.
  • Configurarem l'amplada de la taula a 400 píxels (la mateixa que l'amplada de la pel·lícula).
Flash i HTML

Inserció de la pel·lícula Flash en un document HTML

A la primera casella de la taula inserirem l'animació Flash fent:
  • Ventana > Objetos i a continuació icona Insertar Flash
  • Triarem la pel·lícula que volem inserir
A la segona casella de la taula podem inserir un hipervincle que ens porti a una altra pàgina web (per exemple una pàgina de marcs)