Vctor Ceballos Chvez

Ciclo. 2011-2

1
MANUAL DE P R C TI C A S DE DISEO WEB

UNITEC

Ceballos Victor

Jan. 29

Diseo Web PRCTICA 01.Flash

INTRODUCCIN AL AMBIENTE DE FLASH

Dentro 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 las imgenes 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 gestin de los fotogramas. Ambos elementos, capas y fotogramas sern tratados ms adelante. La caja de herramientas Aqu encontraremos las herramientas de edicin grafica que Flash pone a nuestra disposicin. Como puede observarse, stas son muy parecidas a las que podemos 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 se generan 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 comportamiento independiente al resto de los objetos. De manera a organizar y editar todos estos elementos Flash permite 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 trabajar la animacin en distintos planos independientes.

Ceballos Victor

Jan. 29

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 elementos de 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. Otro elemento 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 lo que es lo mismo, del tiempo que el usuario tarda en cargarla. Uno de los elementos que contribuye a ello es las denominadas bibliotecas. Una biblioteca no es ms que un almacn de objetos (grficos o sonidos) que podrn ser utilizados en una 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 hemos dicho, estos elementos podrn ser utilizados en nuestra animacin cuantas veces lo deseemos. No obstante, 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 en nuestra biblioteca es utilizado en nuestra animacin. Screen 1.1 Designer Layout

Ceballos Victor

Jan. 29

Ceballos Victor

Jan. 29

Diagrama de Flash Screen Classic Layout

Barra de Men General

Lnea de Tiempo y Layers

Panel de Propiedades

Escenario Panel de Componentes

Barra de Herramientas Canvas Lienzo

Ceballos Victor

Jan. 29

Diseo Web PRCTICA 01A Flash

CLASSIC TWEEN interpolacin de

Movimiento
1. Abrimos la aplicacin de flash CS4 professional , que se ubica en el men de INICIOTodos los programas 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

Ceballos Victor

Jan. 29

4. Con la herramienta de polgono Rectangle Tool dentro del canvas.

crea una figura geomtrica cualquiera,

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

F6.

La lnea de tiempo

6. Ahora regresa al fotograma 1 , con el mouse da un click en donde est el fotograma 1, en la lnea 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 y aparecer un men contextual.

Ceballos Victor

Jan. 29

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

CREATE CLASSIC TWEEN.

de

9. Cuando hayas dado click en la opcin, automticamente cambiarn los fotogramas en la capa de 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 que hemos hecho bien la interpolacin (Motion Tween). De caso contrario si hemos hecho mal algn paso los fotogramas lucirn de la siguiente forma.

11. Para poder resolver este problema, la recomendacin es agregar un fotograma clave, lo obtendremos 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. Una vez que estemos en el fotograma 25, moveremos la figura que habamos creado en pasos anteriores, (mueve la figura a cualquier parte del canvas).

Ceballos Victor

Jan. 29

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 + Enter 16. 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 tu equipo se tomara en cuenta para tu calificacin de la prctica. Recuerda traer tu hoja de control para la prctica.
Ceballos Victor
Jan. 29

Diseo Web PRCTICA 02 Flash

SHAPE TWEEN interpolacin de

Forma

1. Abrimos la aplicacin de flash CS4 professional , que se ubica en el men de INICIOTodos los programas 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

10

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

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

Ceballos Victor

Jan. 29

6. Una vez creada la figura nos vamos al fotograma 25 y presionaremos la tecla F6, una vez presionada 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 de tiempo y deber de lucir de la siguiente forma.

11

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

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

Ceballos Victor

Jan. 29

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

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

12

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

Ceballos Victor

Jan. 29

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.

13

Ceballos Victor

Jan. 29

Diseo Web PRCTICA 03 Flash

Morphing Effects Text and Forms Como usar Shape Hints.

1. Abrimos la aplicacin de flash CS4 professional , que se ubica en el men de INICIOTodos los programas 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

14

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 , modifica las opciones para que concuerden con el siguiente ejemplo.

Letra ARIAL , Negrita.

Tamao 40puntos , Color Negro.

El formato de prrafo no es necesario modicarlo

Ceballos Victor

Jan. 29

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 del tiempo cambiara de la siguiente forma.

F6, la lnea

15

8. Ahora trabajars sobre el fotograma 10 , ubicados en el , daremos un click en el texto que hemos 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 el cual debers de seleccionar la opcin Break Apart .

Ceballos Victor

Jan. 29

Da un click en BREAK APART

10. Despus de seleccionar la opcin, la frase escrita cambiara automticamente, y volveremos a repetir 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 opcin de BREAK APART. La frase cambiara de la siguiente forma.

16

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

Con el mouse da un click en este fotograma. Ahora

presiona la tecla F6.

Ceballos Victor

Jan. 29

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

Regresa al Fotograma 10 y da un click derecho donde aparecer un men contextual y seleccionaremos

CREATE

SHAPE TWEEN

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

17

Ahora de un click en el fotograma 40 y escribe el texto

what a wonderful world

siguiente texto

Ceballos Victor

Jan. 29

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

Una vez que se vea as el texto selecciona la frase de abajo y brrala

18

16. Ahora puedes seleccionar la tecla SUPRIMIR para borrar la frase de abajo. Para ello usa la herramienta 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 de la siguiente forma.

Ceballos Victor

Jan. 29

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

19. Ahora para agregar HINTS

SHAPE HINTS ,

ve al MENU MODIFYSHAPE ADD SHAPE

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

Ahora regresa al fotograma 10 , en el punto rojo con la letra a da un click derecho con el mouse, aparecer un men contextual y agrega otro hint.

Ceballos Victor

Jan. 29

21. Con el puntero de seleccin, da un click en el hint, sostn y arrastra el hint a cualquier otra parte del letrero. Con el mismo procedimiento aade 4 hints, y colcalos donde quieras en el letrero 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).

20
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.

Ceballos Victor

Jan. 29