z e v á h C s o l l a b e C r o t c í V 1 MANUAL DE P R Á C T I C A S DE DISEÑO WEB
Ceballos Victor
Jan. 29
Diseño Web PRÁCTICA 01.Flash
INTRODUCCIÓN 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 edición de gráficos. En cierto modo es como el papel en el cual dibujaremos lo que haga falta.
La línea de tiempo Esta sección es donde podremos organizar en el tiempo cada una de las imágenes diseñadas 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 gestión de los fotogramas. Ambos elementos, capas y fotogramas serán tratados más adelante.
La caja de herramientas Aquí encontraremos las herramientas de edición grafica que Flash pone a nuestra disposición. Como puede observarse, éstas son muy parecidas a las que podemos encontrar en otros programas de edición grafica que ya sea vectorial o no.
Ahora analizaremos la definición de las capas, fotogramas y su uso. La línea de tiempo es donde podremos organizar la sucesión de imágenes que dan lugar a una animación. En este capítulo introduciremos los conceptos de capa y fotograma, vitales para una compresión del funcionamiento de Flash. En cierta medida, Flash trabaja como si fuese una película. Una animación es una sucesión de imágenes fijas que, al pasar rápidamente unas detrás de otras, dan la impresión de un movimiento. Cada una de estas imágenes fijas es llamada también fotograma. Los fotogramas son representados bajo forma de rectángulos en la parte derecha del escenario.
2
En estos rectángulos podemos alojar tres tipos diferentes de imágenes:
qu e nosotros mismos dibujaremos Imágenes clave Se trata de las imágenes que Imágenes fijas Son las imágenes claves copiadas en los fotogramas siguientes al de la primera imagen clave de manera a producir un efecto de objeto estático. Imágenes de interpolación Se trata de imágenes calculadas por Flash que permiten la transición gradual entre dos imágenes claves. Este tipo de imágenes muy útiles ya que se generan automáticamente y proporcionan un efecto suave de movimiento o transformación. F5 Una tecla que nos servirá para poder copiar los fotogramas dentro de la línea del tiempo. F6 Crea fotogramas clave a través de la línea de tiempo. F7 Esta tecla limpia los fotogramas creados dejándoles vacios F9 Con esta tecla obtengo el panel donde puedo introducir Action Script 2.0 o 3.0 F12 Muestra la animación que he realizado en el explorador predeterminado. Ctrl +Enter Genera la solución Ejecutable de mi animación.
Por otra parte, una animación 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 animación Flash está compuesta de una superposición de capas en cada una de las cuales introduciremos un objeto que tendrá su propia línea de fotogramas. Estas capas nos permiten trabajar la animación en distintos planos independientes.
Ceballos Victor
Jan. 29
Por defecto, al comenzar una nueva escena encontraremos en nuestra línea de tiempo una sola capa. Progresivamente iremos introduciendo más capas que nos permitan separar cada uno de l os elementos de la animación: objetos, fondo, sonidos o t rayectorias. Un uso inteligente de las capas es la l a 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 gestión lo más sabia posible es la biblioteca. bi blioteca. Como dijimos previamente, Flash permite la optimización del espacio ocupado por la animación, 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 más que un almacén de objetos (gráficos o sonidos) que podrán ser utilizados en una misma animación en una o más ocasiones. Dependiendo del rango que presente esta biblioteca, ésta puede ser propia a la animación, compartida por varias animaciones, o bien permanente (empleada por la totalidad de animaciones). Cada uno de los elementos que constituyen una biblioteca son denominados símbolos. Como hemos dicho, estos elementos podrán ser utilizados en nuestra animación cuantas veces lo deseemos. No obstante, cada una de estas utilizaciones no es llamada símbolo, sino ocurrencia. Por lo tanto, una ocurrencia es cada una de las ocasiones en las que un símbolo almacenado en nuestra biblioteca es utilizado en nuestra animación.
Screen 1.1 Designer Layout
3
Ceballos Victor
Jan. 29
4
Ceballos Victor
Jan. 29
Diagrama de Flash Screen “Classic Layout”
Barra de Menú General
Panel de Propiedades
Línea de Tiempo y Layers
Escenario Panel de Componentes
5
Barra de Herramientas
“Canvas” Lienzo
Ceballos Victor
Jan. 29
Diseño Web PRÁCTICA 01A Flash
CLASSIC TWEEN “interpolación “interpolación de Movimiento” 1. Abrimos la aplicación de flash CS4 professional , que se ubica en el menú de INICIO Todos los programas Adobe CS4 Flash CS4 professional. 2. Seleccionamos la opción de flash File (Action (Action Script 2.0).
6
Diseño Web PRÁCTICA 01A Flash
CLASSIC TWEEN “interpolación “interpolación de Movimiento” 1. Abrimos la aplicación de flash CS4 professional , que se ubica en el menú de INICIO Todos los programas Adobe CS4 Flash CS4 professional. 2. Seleccionamos la opción de flash File (Action (Action Script 2.0).
6
3. Una vez abierto el documento d ocumento la pantalla lucirá de la siguiente forma
Ceballos Victor
Jan. 29
4. Con la herramienta de polígono “Rectangle Tool” dentro del canvas.
crea una figura geométrica cualquiera,
5. Ahora en la línea de tiempo da un click en el fotograma 25 y presiona cambiara automáticamente y los fotogramas lucirán de esta forma.
F6. La línea de tiempo
7
6. Ahora regresa al fotograma 1 , con el mouse da un click en donde está el fotograma 1, en la línea del tiempo . El fotograma seleccionado deberá lucir de la siguiente forma.
7. Ahora posicionados en el fotograma 1 daremos, un click con el botón derecho del mouse y aparecerá un menú contextual.
Ceballos Victor
Jan. 29
8. Una vez que ha aparecido el menú contextual contextual , deberemos de dar un click click en la opción de
CREATE CLASSIC TWEEN.
9. Cuando hayas dado click en la opción, automáticamente automáticamente cambiarán los fotogramas en la capa 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 interpolación (Motion Tween). De caso contrario si hemos hecho mal algún paso los fotogramas lucirán de la siguiente forma.
8
11. Para poder resolver este problema, la recomendación 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 habíamos creado en pasos anteriores, (mueve la figura a cualquier parte del d el canvas).
Ceballos Victor
Jan. 29
9
13. Una vez que hemos hecho este movimiento, presiona la tecla de ENTER . 14. Tomando el MENÚ CONTROL TEST MOVIE (Podemos probar la película).
15. Ahora podemos probar la película, desde el juego de teclas Ctrl + Enter 16. Con ello has creado el ejecutable de tu película (animación). 17. Guarda la película con el nombre de “Classic_Tween_+ TU APELLIDO”
Espera la revisión, y muestra las páginas que has realizado. Recuerda acomodar tu silla del laboratorio y al final apagar tu equipo se tomara en cuenta para tu calificación de la práctica. Recuerda traer tu hoja de control para la práctica.
Ceballos Victor
Jan. 29
Diseño Web PRÁCTICA 02 Flash
SHAPE TWEEN “interpolación “interpolación de
Forma”
1. Abrimos la aplicación de flash CS4 professional , que se ubica en el menú de INICIO Todos los programas Adobe CS4 Flash CS4 professional. 2. Seleccionamos la opción de flash File (Action (Action Script 2.0). 3. Una vez abierto el documento la pantalla lucirá l ucirá de la siguiente forma
10
4. Con la herramienta de “Rectangle tool” crearemos un circulo dentro de la herramienta da un click en la opción opción “Oval”
5. Una vez seleccionada la herramienta trazaremos un círculo, para ello seleccionarás el color que sea de tu preferencia, y el lienzo debe de tener una figu ra 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 línea de tiempo cambiara automáticamente.
7. Ahora regresaremos a fotograma 1, daremos un u n click en este fotograma, sobre la línea de tiempo y deberá de lucir de la siguiente forma.
11
8. Una vez que estamos en este fotograma, daremos dare mos un click derecho con el mouse , para ello nos aparecerá un menú contextual.
9. Cuando aparezca el menú contextual, selecciona la opción de Create Shape Tween. Una vez que seleccionamos la opción, automáticamente cambiaran los fotogramas sobre la línea de tiempo.
Ceballos Victor
Jan. 29
10. Los fotogramas cambiaron a un color verde, cruzados p or una flecha , eso será la indicación de que hemos creado correctamente la interpolación 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 lucirán 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 aléjale de la posición 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 película).
15. Guarda la película con el nombre de “Shape_Tween_+ TU APELLIDO”
Espera la revisión, y muestra las páginas que has realizado. Recuerda acomodar tu silla del laboratorio y al final apagar tu equipo se tomara en cuenta para tu calificación de la práctica. Recuerda traer tu hoja de control para la práctica.
13
Ceballos Victor
Jan. 29
Diseño Web PRÁCTICA 03 Flash
Morphing Effects “Text and Forms”
Como usar Shape Hints.
1. Abrimos la aplicación de flash CS4 professional , que se ubica en el menú de INICIO Todos los programas Adobe CS4 Flash CS4 professional. 2. Seleccionamos la opción de flash File (Action (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.
Tamaño 40puntos , Color Negro.
El formato de párrafo 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 línea del tiempo , da un click en el fotograma 10 y presiona la tecla del tiempo cambiara de la siguiente forma.
F6, la línea
15 8. Ahora trabajarás sobre el fotograma 10 , ubicados en el , daremos un click en el texto que hemos creado , el texto lucirá lucirá de la siguiente siguiente forma.
9. Ahora tienes que dar un click derecho con el mouse y , aparecerá un menú contextual , en el cual deberás de seleccionar la opción Break Apart .
Ceballos Victor
Jan. 29
Da un click en BREAK APART
10. Después de seleccionar la opción, la frase escrita cambiara automáticamente, y volveremos a repetir la opción del paso número 09.
16
11. Vuelve a repetir el paso número 9, es decir da un click derecho y selecciona selecciona otra vez la opción opción de BREAK APART. La frase cambiara de la siguiente forma.
12. Ahora regresa a la línea de tiempo manteniendo la selección 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 automática, 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 vi sto antes (los fotogramas serán color verde y estarán cruzados por po r una flecha).
Ahora
de
un
click
en
17
el
fotograma 40 y escribe el texto siguiente texto “
what a
wonderful world “
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 bórrala
18
16. Ahora puedes seleccionar la tecla SUPRIMIR para borrar la frase de abajo. Para ello usa la la herramienta de puntero de selección que se ubica en la barra de herramientas.
17. Ahora ubica la frase de arriba a la misma altura de la frase habías 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 l a imagen.
19. Ahora para agregar HINTS
SHAPE HINTS ,
ve al MENU MODIFY SHAPE 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 selección, da un click en el “hint”, sostén y arrastra el “hint” a cualquier otra parte del letrero. Con el mismo procedimiento añade 4 hints, y colócalos donde quieras en el letrero que habías creado. Un ejemplo de cómo podría quedar la imagen en la siguiente figura
22. Una vez que hemos hecho este movimiento, presiona la tecla de 23. Tomando el MENÚ CONTROL
Ctrl ENTER .
TEST MOVIE (Podemos probar la película).
20 24. Guarda la película con el nombre de “Morphing_Text+ TU APELLIDO”
Espera la revisión, y muestra las páginas que has realizado. Recuerda acomodar tu silla del laboratorio y al final apagar tu equipo se tomara en cuenta para tu calificación de la práctica. Recuerda traer tu hoja de control para la práctica.
Ceballos Victor
Jan. 29
