manual practicas flash

7/31/2019 Manual Practicas Flash

1/20

CeballosVictor Jan. 29

1

Vc

torCe

ba

llos

C

hvez

MANUAL DE

PRC TICAS DE

D I S E O W E B


2/20


2

Diseo WebPRCTICA 01.Flash

INTRODUCCIN AL AMBIENTE DE FLASHDentro de la interface de Flash podemos distinguir tres partes principales: El escenario Se trata del espacio en el cual llevaremos a cabo todas las tareas de edicin de

grficos. En cierto modo es como el papel en el cual dibujaremos lo que haga falta.

La lnea de tiempo Esta seccin es donde podremos organizar en el tiempo cada una de lasimgenes diseadas en el escenario. Podemos subdividirla en dos partes: La parte izquierda,donde podremos organizar las capas y la parte de la derecha que queda reservada a la gestinde los fotogramas. Ambos elementos, capas y fotogramas sern tratados ms adelante.

La caja de herramientas Aqu encontraremos las herramientas de edicin grafica que Flashpone a nuestra disposicin. Como puede observarse, stas son muy parecidas a las quepodemos encontrar en otros programas de edicin grafica que ya sea vectorial o no.

Ahora analizaremos la definicin de las capas, fotogramas y su uso. La lnea de tiempo es donde

podremos organizar la sucesin de imgenes que dan lugar a una animacin. En este captulo

introduciremos los conceptos de capa y fotograma, vitales para una compresin del funcionamiento de

Flash.

En cierta medida, Flash trabaja como si fuese una pelcula. Una animacin es una sucesin de

imgenes fijas que, al pasar rpidamente unas detrs de otras, dan la impresin de un movimiento.

Cada una de estas imgenes fijas es llamada tambin fotograma. Los fotogramas son representados

bajo forma de rectngulos en la parte derecha del escenario.

En estos rectngulos podemos alojar tres tipos diferentes de imgenes:

Imgenes clave Se trata de las imgenes que nosotros mismos dibujaremos Imgenes fijas Son las imgenes claves copiadas en los fotogramas siguientes al de la

primera imagen clave de manera a producir un efecto de objeto esttico. Imgenes de interpolacin Se trata de imgenes calculadas por Flash que permiten la

transicin gradual entre dos imgenes claves. Este tipo de imgenes muy tiles ya que segeneran automticamente y proporcionan un efecto suave de movimiento o transformacin.

F5 Una tecla que nos servir para poder copiar los fotogramas dentro de la lnea del tiempo. F6 Crea fotogramas clave a travs de la lnea de tiempo. F7 Esta tecla limpia los fotogramas creados dejndoles vacios F9 Con esta tecla obtengo el panel donde puedo introducir Action Script 2.0 o 3.0 F12 Muestra la animacin que he realizado en el explorador predeterminado. Ctrl +Enter Genera la solucin Ejecutable de mi animacin.

Por otra parte, una animacin esta generalmente constituida de una variedad de objetos diferentes,cada uno de los cuales se introduce en un momento diferente y presenta un comportamientoindependiente al resto de los objetos. De manera a organizar y editar todos estos elementos Flashpermite el uso de capas o calcos.

As, una animacin Flash est compuesta de una superposicin de capas en cada una de las cuales

introduciremos un objeto que tendr su propia lnea de fotogramas. Estas capas nos permiten trabajarla animacin en distintos planos independientes.


3/20


3

Por defecto, al comenzar una nueva escena encontraremos en nuestra lnea de tiempo una sola capa.Progresivamente iremos introduciendo ms capas que nos permitan separar cada uno de los elementosde la animacin: objetos, fondo, sonidos o trayectorias.

Un uso inteligente de las capas es la base para crear animaciones de calidad.

El concepto de capa y fotograma y subrayamos la necesidad de utilizarlos inteligentemente. Otroelemento de Flash que necesita una gestin lo ms sabia posible es la biblioteca.

Como dijimos previamente, Flash permite la optimizacin del espacio ocupado por la animacin, o loque es lo mismo, del tiempo que el usuario tarda en cargarla. Uno de los elementos que contribuye aello es las denominadas bibliotecas.

Una biblioteca no es ms que un almacn de objetos (grficos o sonidos) que podrn ser utilizados enuna misma animacin en una o ms ocasiones. Dependiendo del rango que presente esta biblioteca,sta puede ser propia a la animacin, compartida por varias animaciones, o bien permanente(empleada por la totalidad de animaciones).

Cada uno de los elementos que constituyen una biblioteca son denominados smbolos. Como hemosdicho, estos elementos podrn ser utilizados en nuestra animacin cuantas veces lo deseemos. Noobstante, cada una de estas utilizaciones no es llamada smbolo, sino ocurrencia.

Por lo tanto, una ocurrencia es cada una de las ocasiones en las que un smbolo almacenado ennuestra biblioteca es utilizado en nuestra animacin.

Screen 1.1 Designer Layout


4/20


4


5/20


5

Diagrama de Flash Screen Classic Layout

Barra de Men General

Panel de Propiedades

Barra de Herramientas

Canvas Lienzo

Escenario

Lnea de Tiempo y Layers

Panel de Componentes


6/20


6

Diseo WebPRCTICA 01A Flash

CLASSIC TWEEN interpolacin deMovimiento

1. Abrimos la aplicacin de flash CS4 professional , que se ubica en el men de INICIOTodos losprogramas Adobe CS4 Flash CS4 professional.

2. Seleccionamos la opcin de flash File (Action Script 2.0).

3. Una vez abierto el documento la pantalla lucir de la siguiente forma


7/20


7

4. Con la herramienta de polgono Rectangle Tool crea una figura geomtrica cualquiera,dentro del canvas.

5. Ahora en la lnea de tiempo da un click en el fotograma 25 y presiona F6. La lnea de tiempocambiara automticamente y los fotogramas lucirn de esta forma.

6. Ahora regresa al fotograma 1 , con el mouse da un click en donde est el fotograma 1, en lalnea del tiempo . El fotograma seleccionado deber lucir de la siguiente forma.

7. Ahora posicionados en el fotograma 1 daremos, un click con el botn derecho del mouse yaparecer un men contextual.


8/20


8

8. Una vez que ha aparecido el men contextual , deberemos de dar un click en la opcin deCREATE CLASSIC TWEEN.

9. Cuando hayas dado click en la opcin, automticamente cambiarn los fotogramas en la capade un color gris a color morado cruzados por una flecha.

10.Han cambiado los fotogramas una vez que vemos los fotogramas de esta forma , sabremos quehemos hecho bien la interpolacin (Motion Tween). De caso contrario si hemos hecho mal algnpaso los fotogramas lucirn de la siguiente forma.

11.Para poder resolver este problema, la recomendacin es agregar un fotograma clave, loobtendremos presionando la tecla F6. Con ello corregiremos el error que se haya presentado.

12.Ahora nos posicionaremos en el Fotograma 25, para ello daremos un click con el mouse. Unavez que estemos en el fotograma 25, moveremos la figura que habamos creado en pasosanteriores, (mueve la figura a cualquier parte del canvas).


9/20


9

13.Una vez que hemos hecho este movimiento, presiona la tecla de ENTER.14.Tomando el MEN CONTROL TEST MOVIE(Podemos probar la pelcula).

15.Ahora podemos probar la pelcula, desde el juego de teclas Ctrl + Enter16.Con ello has creado el ejecutable de tu pelcula (animacin).17.Guarda la pelcula con el nombre de Classic_Tween_+ TU APELLIDO Espera la revisin, y muestra las pginas que has realizado. Recuerda acomodar tu silla del laboratorio y al final apagar tuequipo se tomara en cuenta para tu calificacin de la prctica. Recuerda traer tu hoja de control para la prctica.


10/20


10

Diseo WebPRCTICA 02 Flash

SHAPE TWEEN interpolacin de

Forma


2. Seleccionamos la opcin de flash File (Action Script 2.0).3. Una vez abierto el documento la pantalla lucir de la siguiente forma

4. Con la herramienta de Rectangle tool crearemos un circulo dentro de la herramienta da unclick en la opcin Oval

5. Una vez seleccionada la herramienta trazaremos un crculo, para ello seleccionars el color quesea de tu preferencia, y el lienzo debe de tener una figura con la forma similar a este ejemplo.


11/20


11

6. Una vez creada la figura nos vamos al fotograma 25 y presionaremos la tecla F6, una vezpresionada la tecla veremos que la lnea de tiempo cambiara automticamente.

7. Ahora regresaremos a fotograma 1, daremos un click en este fotograma, sobre la lnea detiempo y deber de lucir de la siguiente forma.

8. Una vez que estamos en este fotograma, daremos un click derecho con el mouse , para ello nosaparecer un men contextual.

9. Cuando aparezca el men contextual, selecciona la opcin de Create Shape Tween. Unavez que seleccionamos la opcin, automticamente cambiaran los fotogramas sobre la lnea detiempo.


12/20


12

10.Los fotogramas cambiaron a un color verde, cruzados por una flecha , eso ser la indicacin deque hemos creado correctamente la interpolacin de forma.

11.Ahora regresa al fotograma 25 y da un click sobre este. Una vez seleccionado borra la imagenque tenias presionando la tecla Suprimir , los fotogramas lucirn de la siguiente forma.

12.El siguiente paso a realizar es, en el fotograma 25 , dibuja cualquier otra figura que no sea uncirculo y aljale de la posicin original.


13/20


13

13.Una vez que hemos hecho este movimiento, presiona la tecla de Ctrl+ENTER.14.Tomando el MEN CONTROL TEST MOVIE(Podemos probar la pelcula).

15.Guarda la pelcula con el nombre de Shape_Tween_+ TU APELLIDO Espera la revisin, y muestra las pginas que has realizado. Recuerda acomodar tu silla del laboratorio y al final apagar tu

equipo se tomara en cuenta para tu calificacin de la prctica.

Recuerda traer tu hoja de control para la prctica.


14/20


14

Diseo WebPRCTICA 03 Flash

Morphing Effects Text and Forms

Como usar Shape Hints.


2. Seleccionamos la opcin de flash File (Action Script 2.0).3. Una vez abierto el documento la pantalla lucir de la siguiente forma

4. Con la herramienta de texto escribe la siguiente frase believing in a better world ,para ubicar la herramienta recuerda que tiene el icono que se muestra arriba.

5. En el panel de propiedades del texto que se ubica en el lado derecho de la pantalla , modificalas opciones para que concuerden con el siguiente ejemplo.

Letra ARIAL ,

Negrita.

Tamao

40puntos , Color

Negro. El formato de

prrafo no es

necesario

modicarlo


15/20


15

6. Ahora el canvas , deber de la siguiente forma ya con la frase escrita.

7. Ahora ve a la lnea del tiempo , da un click en el fotograma 10 y presiona la tecla F6, la lneadel tiempo cambiara de la siguiente forma.

8. Ahora trabajars sobre el fotograma 10 , ubicados en el , daremos un click en el texto quehemos creado , el texto lucir de la siguiente forma.

9. Ahora tienes que dar un click derecho con el mouse y , aparecer un men contextual , en elcual debers de seleccionar la opcin Break Apart .


16/20


16

10.Despus de seleccionar la opcin, la frase escrita cambiara automticamente, y volveremos arepetir la opcin del paso nmero 09.

11.Vuelve a repetir el paso nmero 9, es decir da un click derecho y selecciona otra vez la opcinde BREAK APART. La frase cambiara de la siguiente forma.

12.Ahora regresa a la lnea de tiempo manteniendo la seleccin desde el fotograma 10 da un clicken el fotograma 40 , como se muestra en la siguiente imagen.

Da un click en

BREAK APART

Con el mouse da un click

en este fotograma. Ahora

presiona la tecla F6.


17/20


17

13.Ahora los fotogramas cambiaran de forma automtica, como se muestra en la siguiente figura.

14.Una vez hecho esto, los fotogramas cambiaran, como le hemos visto antes (los fotogramassern color verde y estarn cruzados por una flecha).

Regresa al Fotograma 10 y da

un click derecho donde

aparecer un men contextual

y seleccionaremos CREATE

SHAPE TWEEN

Ahora de un click en el

fotograma 40 y escribe el texto

siguiente texto what a

wonderful world


18/20


18

15.Ahora repite desde el paso 8 hasta el paso 11 y una vez realizados los pasos te quedar de lasiguiente forma el texto

16.Ahora puedes seleccionar la tecla SUPRIMIR para borrar la frase de abajo. Para ello usa laherramienta de puntero de seleccin que se ubica en la barra de herramientas.

17.Ahora ubica la frase de arriba a la misma altura de la frase habas borrado y deber de lucir dela siguiente forma.

Una vez que se vea as

el texto selecciona la

frase de abajo y brrala


19/20


19

18.Regresa al fotograma 10 , ahora simplemente da un click, como se muestra en la imagen.

19.Ahora para agregar SHAPE HINTS , ve al MENU MODIFYSHAPE ADD SHAPEHINTS

20.Inmediatamente en el texto te aparecer un punto rojo con la letra a , como se muestra en lasiguiente figura.

Ahora regresa al fotograma 10 ,

en el punto rojo con la letraa

da un click derecho con el

mouse, aparecer un men

contextual y agrega otro hint.


20/20

20

21.Con el puntero de seleccin, da un click en el hint, sostn y arrastra el hint a cualquier otraparte del letrero. Con el mismo procedimiento aade 4 hints, y colcalos donde quieras en elletrero que habas creado. Un ejemplo de cmo podra quedar la imagen en la siguiente figura

22.Una vez que hemos hecho este movimiento, presiona la tecla de Ctrl ENTER.23.Tomando el MEN CONTROL TEST MOVIE(Podemos probar la pelcula).

24.Guarda la pelcula con el nombre de Morphing_Text+ TU APELLIDO

Espera la revisin, y muestra las pginas que has realizado. Recuerda acomodar tu silla del laboratorio y al final apagar tu

equipo se tomara en cuenta para tu calificacin de la prctica. Recuerda traer tu hoja de control para la prctica.

manual practicas flash

Documents