Desarrolla Aplicaciones Web

Presentación del tema: "Desarrolla Aplicaciones Web"— Transcripción de la presentación:

1 Desarrolla Aplicaciones Web

2 Inicio Teniendo instalado el programa podemos ejecutarlo desde el botón de inicio(Start), buscando la carpeta de Macromedia(o Adobe si es versión mas actual), dentro de ella seleccionamos el programa de Flash 8(o CS5), al hacer doble clic con el botón izquierdo del mouse, observamos la siguiente ventana de carga del programa:

3 Posteriormente nos da una presentación para seleccionar el espacio de trabajo sobre la cual vamos a encontrar diferentes elementos como paneles, barras y ventanas, esta presentación es muy parecida a la utilizada en que otros que integran la suite de Macromedia(adobe), lo cual facilita el manejo de documentos entre estas aplicaciones.

4 Posteriormente nos da una presentación para seleccionar el espacio de trabajo sobre la cual vamos a encontrar diferentes elementos como paneles, barras y ventanas, esta presentación es muy parecida a la utilizada en que otros que integran la suite de Macromedia(adobe), lo cual facilita el manejo de documentos entre estas aplicaciones.

5 Espacio de trabajo

6 Temas Operaciones fundamentales Capa Máscara Transparencia(Alfa)
Movimiento por una ruta Botón con sonido

7 Operaciones Fundamentales
Capas Capas (continuación) Cambiar el nombre: Damos doble clic al nombre de la capa y estará la palabra seleccionada para cambiar su nombre, escriba el nuevo nombre. Insertar: Seleccionar el icono Nueva Capa y la inserta encima de la capa que este seleccionada. Borrar: Seleccionamos la capa y damos clic al icono eliminar Capa. Uso: Cuando una capa esta siendo utilizada se muestra el icono de uso. Ver y ocultar: Damos clic al nombre de la capa y se selecciona el icono y aparecerá debajo del icono ver-ocultar de la capa. Bloquear o Desbloquear: Seleccionar la capa y se da clic en el botón de bloquear-desbloquear Capas como Contornos: El icono muestra los objetos de las capas como contornos si se selecciona este icono, al igual que los casos anteriores podemos seleccionar los contornos por cada capa.

8 Operaciones Fundamentales (continuación)
Insertar Fotogramas Dibujos Fotograma(frame):Es el fotograma que aun no se utiliza, al crear un nuevo documento todos los fotogramas están en blanco excepto el primero. Insert>Timeline>Frame o F5 Fotograma clave(keyframe): Cuando al escenario se le integra un objeto, el fotograma rellena el círculo que está dentro de él para indicar que contienen un objeto. Insert>Timeline>Keyframe F6  Fotograma clave en blanco (Blank keyframe): Es el fotograma preparado para introducir los objetos que van a estar en el escenario, es vacío porque aun no se agrega ningún objeto. Insert>Timeline>Blank Keyframe Figuras geométricas: Se selecciona la herramienta de la figura deseada y se traza en el lienzo. Insertar al escenario: Se abre el menú de archivo, se elije importar y después importar al escenario. File>Import>Import to Stage ó CTRL-R Insertar a la biblioteca: Se abre el menú de archivo, se elije importar y después importar a la biblioteca. File>Import>Import to Library ó CTRL-R

9 Capa Máscara Puede utilizar capas máscara para revelar partes de una imagen o gráfico en la capa de abajo. Para crear una máscara, se especifica que una capa es una capa máscara y se dibuja o coloca una forma rellena en esa capa. Se puede utilizar cualquier forma rellena, incluidos los grupos, texto y símbolos, como una máscara. La capa de máscara muestra el área de capas vinculadas debajo de la forma rellena .

10 Para crear una capa máscara se siguen los siguiente pasos:
Elija una imagen a utilizar (o foto). Abra un archivo nuevo. Presione Ctrl+J(modificar documento), coloque el tamaño de la animación y la velocidad de la película.

11 Importe la imagen o foto al escenario(Ctrl + R).
Mientras se encuentra seleccionada la imagen presione Ctrl + k para alinear la imagen al escenario, horizontal y verticalmente. Haga doble clic en la capa 1 y cambie el nombre a imagen(picture). Después de eso, haga clic en el fotograma 160 y pulse la tecla F5. Cree una nueva capa arriba de la capa imagen y renómbrela pincel(brush).

12 Coloque el candado a la capa de la imagen y después seleccione la capa del pincel. Elija la herramienta de pincel(B) y elija el mas grande.

13 A dibuje un garabato al lado de la imagen.
Haga clic en el fotograma 20 de la capa de pincel y pulse la tecla F6. Luego, en la forma existente, dibuje un nuevo garabato sobre la imagen.

14 Repita la operación anterior en el fotograma 40.

15 Repita la operación anterior en el fotograma 100.
Haga clic en el fotograma 120 y pulse la tecla F7 (Fotograma clave vacío). Luego, mientras está todavía en el fotograma 120, tome la herramienta de Rectángulo (R). Bloquear el Color de trazo, elija un color de relleno y dibuje un rectángulo sobre la imagen.

16 Seleccione la capa del pincel y en el panel de propiedades(Ctrl+ F3) elija figura(shape).
Seleccione la capa pincel y conviértala en una máscara con un clic derecho sobre la capa y elegir Máscara(mask).

17 Ahora tendrá lo siguiente:
Pruebe su animación(Ctrl + Enter)

18 Transparencia(Alfa) En Flash se puede hacer que un símbolo aparezca lentamente o desaparezca cambiando el valor alfa de la instancia. Alfa ajusta la transparencia, entre transparente(0 %) y totalmente saturada, o visible(100 %).

19 Para modificar la transparencia de un objeto se siguen los siguiente pasos:
Primero, descargar una imagen. Crear un nuevo archivo (Ctrl + J) y configure el ancho a 380 y la altura a 285px. La velocidad en a 18 fps (fotogramas por segundo).

20 Importe la imagen (Ctrl + R)
Importe la imagen (Ctrl + R). Mientras la imagen está aún seleccionada, abra el panel de alinear(Ctrl + K ) y luego haga clic en el botón de alinear, horizontal al centro y vertical al centro, para centrar exactamente la foto con el fondo. De un clic doble en la capa 1 y dele nombre de River(Rio). Seleccione la foto y presione la tecla F5convertirla en clip de película (movie clip).

21 Mientras aun este seleccionada la foto, coloque el alfa en 81% en el panel de propiedades en la opción de color. Inserte una nueva capa y nómbrela mist(bruma) Asegure(lock) la capa river(río), seleccione la herramienta Pincel(B), elegir color de relleno #CCCCCC, y dibujar una forma que representará a la niebla. Mire la foto de abajo!

22 Mientras todavía mist(bruma) está seleccionada, presione F8 (Convertir en símbolo) para convertirla en un clip de película. En el panel de propiedades(Ctrl + F3), en filtros, presione el signo + y elija borroso(Blur) Coloque los siguientes datos:

23 Haga clic de nuevo en el icono del signo más y seleccione Bisel.
Coloque los siguientes datos:

24 Haga clic de nuevo en el icono del signo más y seleccione colocar sombra(Drop shadow). Además las siguientes opciones: Haga clic en el fotograma 750 de la capa niebla(Mist) y pulse F6. Después, mueva la niebla al otro lado de la imagen (lado izquierdo). Pruebe su animación(Ctrl + Enter)

25 Movimiento por una ruta
Añadir un poco de variedad a sus presentaciones en flash se logra con el o los objetos que siguen una trayectoria curva.

26 Para crear un movimiento a lo largo de una ruta se siguen los siguiente pasos:
Agregar un objeto a su página Si desea mover una figura, dibuje la forma usando el modo de dibujo de objeto (que agrupa objetos de forma automática) o llamar su objeto en modo regular y luego elija Ctrl + G Si desea mover un texto, elija la herramienta de texto, establezca sus propiedades de carácter y escriba una palabra del texto. Si desea mover un símbolo, elija un símbolo existente o hacer un nuevo objeto, selecciónelo y elija Convertir en símbolo. Asegúrese de que tiene sólo 1 objeto en la capa que desea mover.

27 Agregar una capa guía Haga clic en el icono de guía de movimiento en la parte inferior de la sección de capas de la línea de tiempo. Una capa de guía se agregará con un fotograma clave vacío y su capa existente se coloca bajo.

28 Dibujar una ruta a seguir por el objeto
Elige tu herramienta de lápiz y establecer el modo de lápiz para suavizar. Líneas irregulares y líneas con curvas cerradas generalmente no son buenas rutas de movimiento. A continuación, asegúrese que está trabajando en el primer fotograma clave de la capa de guías, dibuje una trayectoria curva. La línea puede cruzarse por lo general sin que demasiados problemas que se produzcan.

29 Suavizar las líneas y esquinas cortantes
Seleccione toda la línea haciendo doble clic o simplemente dibujar un marco alrededor de una parte de la línea utilizando la herramienta de selección(flecha negra), a continuación, elija el símbolo suave para disminuir los bordes dentados.

30 Añadir fotogramas y fotogramas clave para la animación
En este ejemplo se tendrá el insecto moviéndose sobre la bandera 10 segundos, para lo que la velocidad de fotogramas se establecerá en 12 fps por lo que se tendrá que añadir un fotograma clave en el fotograma 120 en mi capa de contenido. También tendrá que añadir suficientes fotogramas haciendo clic en la línea de tiempo en el marco que desea extender la capa guía presionando la tecla F5.

31 Configurar el movimiento
Haga clic en el primer fotograma de la capa de contenido, a continuación, seleccione Movimiento en el menú desplegable en el inspector de propiedades. Los marcos en su capa de contenido se vuelven de color púrpura y verá una flecha solitaria conectar el 2do fotograma clave. Arrastre su objeto es punto central y que encaje a la línea. Sugerencia: También puede elegir la opción de botón en el inspector de propiedades, pero sólo cuando se está en el primer fotograma del movimiento. A continuación, pasar a la estructura final de la animación (todavía en la capa de contenido) y coloque el objeto en el final de la ruta.

32 Sugerencia: Para dar un mayor movimiento realista dar clic en el primer fotograma del movimiento y comprobar la orientación de la ruta y de esta se alineará el objeto en el camino y hacerlo girar alrededor de las vueltas. Posición en el fotograma 1 Posición en el ultimo fotograma Pon a prueba tu película presionando Ctrl + Enter

33 Botón con sonido Con el fin de añadir interactividad a nuestras animaciones en flash tenemos que crear un tipo especial de símbolo que permitirá al usuario comunicarse con la película para realizar alguna acción, este símbolo es el botón. Flash sabe que esta forma se comportará como un botón (es decir, algo que se puede hacer clic ). Botones de Flash pueden ser definidas para tener un aspecto diferente para cada estado ( arriba, abajo, y flotar) y podemos añadir fácilmente sonido para dar más información al usuario de que algo ocurrió en respuesta a su clic en el botón.

34 Para crear un botón con sonido se siguen los siguiente pasos:
La creación de la forma del botón Elija la herramienta de rectángulo(o la forma que desee para el botón). Luego, en la sección Opciones de la caja de herramientas, haga clic en la opción de esquinas redondeadas.

35 Esto abrirá el cuadro de diálogo radio establecido esquina
Esto abrirá el cuadro de diálogo radio establecido esquina. Entré en un valor de 12, pero usted puede experimentar con diferentes valores para ver lo que se traduce en la forma de rectángulo que busca . Ajuste el color de su relleno y contorno(en la imagen: relleno de color azul y sin trazo).

36 Haga clic en el escenario y arrastre una forma de tamaño que desee
Haga clic en el escenario y arrastre una forma de tamaño que desee. Cuando suelte el botón del ratón se mostrará la forma final con los de relleno y trazo colores que eligió. Agregar texto En la mayoría de los casos los botones contienen texto o símbolos para que el usuario sepa qué va a pasar cuando hagan clic en ellos.

37 En el inspector de propiedades establecer el tipo de texto a estática, elija una fuente, un color, tamaño de fuente. Debido a que este texto no va a ser animado que me queda la opción de suavizado se establece en Suavizado para legibilidad. Después, simplemente haga clic en el escenario y empezar a escribir.

38 Alineación de texto y botón
Utilice la herramienta de selección (flecha negra) para arrastrar un marco alrededor tanto el texto como botón. A continuación, abra el panel de alineación eligiendo Windows > Align(o Ctrl + K). Desactive la opción En escenario(To stage) haciendo clic en él si está encendido y elegir alinear centro horizontal y alinear centro vertical para centrar el texto sobre el botón.

39 Convertir a símbolo Con la herramienta de selección (flecha negra) haga clic para seleccionar ambos objetos. A continuación, elija Modificar> Convertir en símbolo o F8. De a su botón un nombre y asegúrese de comprobar el tipo de símbolo de botón y luego haga clic en Aceptar. Usted podrá ver su nuevo símbolo de botón aparece en la paleta de la biblioteca.

40 Agregar los estados Haga doble clic en el símbolo de botón en el panel de la biblioteca para abrir el botón en el modo de edición de símbolos . El botón se mostrará en una pantalla por sí mismo. Y en la sección de línea de tiempo se verá que el botón tiene su propia línea de tiempo con cuatro estados posibles(arriba, sobre , abajo y presionado)

41 El estado arriba es cómo aparece el botón de forma predeterminada cuando el usuario no está interactuando con el botón. El estado sobre es lo que se muestra cuando el usuario mantiene su ratón sobre el botón y el estado abajo es lo que muestra por ese breve período cuando el botón está hecho clic en el. Finalmente el estado presionado no es un estado que es visible para el usuario , sino que simplemente define la forma y el espacio que se puede hacer clic por el usuario.

42 Para agregar el Estado sobre, coloca el cursor en el marco bajo el sello Una y añadir un fotograma clave , ya sea eligiendo Insertar > Línea de tiempo > Fotograma clave o haciendo clic derecho y elegir fotograma clave en el menú contextual o F6 . Esto colocará una copia de la forma del botón existente y el texto en el escenario para el Estado sobre. De modo que el usuario verá el botón reacciona al puntero del ratón sobre evento seleccionar la forma de rectángulo redondeado y elegir otro color de relleno.

43 Para agregar el Estado abajo, Coloca el cursor en el marco bajo el sello de Down y añadir un fotograma clave , ya sea eligiendo Insertar > Línea de tiempo > Fotograma clave o haciendo clic derecho y seleccionando fotograma clave en el menú contextual o F6 . Esto colocará una copia de la forma del botón existente y el texto en el escenario para el Estado abajo. De modo que el usuario verá el botón reacciona al puntero del ratón sobre evento seleccionar la forma de rectángulo redondeado y elegir otro color de relleno.

44 Para agregar el Estado presionado, realiza la operación igual a las dos anteriores para tener un nuevo fotograma, además, todo lo que necesitas para este estado es una forma del tamaño boton para dejar de flash sepa lo grande que un área debe ser seleccionable por lo que salir de este estado idéntico al estado abajo está bien. Pon a prueba cómo tu botón reacciona al movimiento del ratón eligiendo Control>Test Movie o Ctrl + Enter

45 Agregar sonido Primero tenemos que importar un sonido a nuestra biblioteca. Flash puede utilizar muchos tipos de archivos de sonido incluidos mp3, wav, etc. Para importar un sonido a la biblioteca , seleccione Archivo > Importar a biblioteca y navegue hasta el archivo que desea usar, seleccione en la ventana de visualización de archivos y haga clic en Abrir. El archivo de sonido aparecerá entonces en su biblioteca.

46 Agregar una capa, en la paleta de capas , haga clic en el botón de inserción de capa.
Cambiar el nombre de los nuevos sonidos de capa haciendo doble clic en el texto de la capa. Coloca el cursor en la cejilla de abajo(down) en la capa de sonido y añada un fotograma clave (F6).

47 Haga clic dentro del fotograma clave de la capa de sonido para seleccionarla y arrastrar el icono de sonido de la biblioteca y colóquelo en el escenario. No habrá ninguna diferencia visible al escenario, sino una forma de onda azul aparecerá en el fotograma clave hacia abajo que se extiende más allá de ella. Haga clic en el fotograma clave estado abajo en la capa de sonido nuevo y en el inspector de propiedades asegúrese de que la opción de sincronización se establece en evento. Un sonido de evento se juega por toda su longitud , independientemente de si hay espacio en la línea de tiempo para ello o no.

48 Haga clic en el fotograma clave estado abajo en la capa de sonido nuevo y en el inspector de propiedades asegúrese de que la opción de sincronización se establece en evento. Un sonido de evento se juega por toda su longitud , independientemente de si hay espacio en la línea de tiempo para ello o no. Pon a prueba cómo tu botón reacciona al movimiento del ratón eligiendo Control>Test Movie o Ctrl + Enter