Grupo de investigación VIRTUS.

Transcripción

1 FERNANDO MARTINEZ RODRIGUEZ Licenciado en Matemáticas y Física Ingeniero de Sistemas. Especialista en Computación para la Docencia Magister en Software Libre. Doctorado en Tecnología Educativa (en Tesis) Experto en Ambientes Virtuales de Aprendizaje Experto en Herramientas Virtuales de Aprendizaje. Página1

2 EL ENTORNO DE FLASH Objetivo: El objetivo de esta guía es conocer el entono general de Flash y todos los componentes que esta herramienta tiene. Comprender los diferentes tipos de archivos que se manejan y profundizar en las herramientas de dibujo. En primer lugar al abrir la aplicación, nos aparece la siguiente ventana de bienvenida En esta parte inicial pueden abrir archivos a partir de una Plantilla, también abrir archivos recientemente trabajados o nos da la opción de abrir un archivo que tengamos en alguna ubicación de nuestro equipo. En la parte del medio de la pantalla, encuentra la opción de crear nuevos proyectos, en esta parte puede abrir los siguientes tipos de Archivos: ActionScript 2.0 y 3.0 (ActionScrip, es el lenguaje de programación de la plataforma Adobe Flash) Adobe AIR estos archivos permiten crear aplicaciones de escritorio a partir de páginas o aplicaciones web. IPhone OS: Crear aplicaciones para iphone Página2

3 Flash Lite 4: Crear archivos para equipos móviles Luego aparecen unos archivos que en un momento dado pueden ser archivos que hacen parte de un proyecto de Flash. En la parte derecha de la misma aparecen unos tutoriales de flash que puede consultar siempre que esté conectado a internet. Siempre que trabajemos en flash vamos a tener inicialmente archivos.fla, cuando se realice la publicación quedan los archivos swf. Ahora vamos a conocer el entorno de trabajo de Flash, está divido en varias partes. Primero tenemos el área que está en blanco que es lo que se conoce como escenario. Todo lo que se encuentra dentro de esta área es lo que se va a enviar como archivo de película. Alrededor esta la parte gris, en esta parte se pueden colocar elementos que pueden hacer parte de la película pero no se mostraran al publicar el clic de película. El área en blanco puede configurarse para que tenga diferentes tamaños y diferentes colores. Página3

4 Ahora vamos a ver la parte superior de la pantalla: En esta parte encontramos la línea de tiempo, es donde vamos a organizar todos los elementos que vamos a ver en el escenario, ya sea en diferentes capas o en diferentes puntos en el tiempo es decir fotogramas. Capas Línea de Tiempo o fotograma En la parte izquierda de la pantalla tenemos la barra de herramientas, contiene una gran cantidad de elementos con los que podemos trabajar, todas las herramientas que tienen una flecha negra al lado derecho es porque dentro de ellas existen otras funciones adicionales. Barra de Herramientas Página4

5 Tenemos también en la parte superior la barra de menú donde encontramos todas las funcionalidades de la aplicación Barra de Menú También en la parte superior de la pantalla tenemos un acceso rápido que es la barra de aplicaciones, que es donde encontramos un acceso directo a los diferentes espacios de trabajo, pues de acuerdo a el gusto de cada persona o sus necesidades se puede configurar el espacio de trabajo de acuerdo a sus necesidades. Barra de aplicaciones Página5

6 En la parte derecha de la pantalla encontramos diferentes paneles El inspector de propiedades que me va a definir las propiedades del objeto que tenemos en ese momento en el escenario seleccionado. El otro panel es la biblioteca donde se van guardando todos los elementos que tenemos del proyecto. Siempre se pueden organizar de diferentes formas los elementos de la pantalla de acuerdo a sus necesidades del trabajo, o se puede organizar de manera personalizada. Página6

7 Ahora vamos a comenzar a configurar los documentos de trabajo flash. Al iniciar el programa se eligió un archivo de Action Scrip 3.0 y esto es lo que nos muestra el inspector de propiedades, a esta configuración inicial se le pueden realizar algunos cambios. Por ejemplo en el Inspector de propiedades nos indica lo siguiente: Es un documento, sin Título, se puede reproducir en Flash Player 10 y es un Script 3.0. Más adelante se encuentran otras propiedades que se manejan para programar en Action Script 3.0 El perfil: Es una configuración especial que se realiza para la publicación del archivo. Y la configuración de AIR y de Action Script son funciones un poco más avanzadas de programación. FPS: Son Frames por segundo, por defecto viene con 24, que es la velocidad a la que veremos la película, 24 FPS es un estándar ya que todos los navegadores lo soportan, por lo general esta opción se deja tal cual. También podemos realizar cambios en el tamaño de nuestro documento, esto de acuerdo a las necesidades de cada desarrollo que realicemos, recordar que trabajamos por pixeles. Página7

8 Generalmente dejamos el tamaño que viene por defecto. Otra opción que tenemos y que puede ser muy útil, es el cambio de color de fondo. Haciendo clic sobre el cuadro que queda enseguida de Escenario, cambiamos al color que deseemos que tenga nuestro fondo Luego aparece el HISTORIAL DEL SWF. Esta opción muestra los proyectos anteriores que han sido publicados para web. BARRA DE HERRAMIENTAS Página8

9 La barra de herramientas nos permite realizar muchas acciones para ejecutar nuestros proyectos vamos a mirar una a una. Es importante aclarar que las herramientas que tienen al lado inferior derecho una flecha negra, tienen varias funciones adicionales y para seleccionarlas solo se debe hacer un clic sobre esta. Esto nos permite realizar muchas más acciones dentro de los proyectos. Esta es la herramienta de selección, que como su nombre lo indica es para realizar la selección de los diferentes elementos que tengamos en pantalla, esta opción es muy utilizada mientras trabajamos en flash. La siguiente herramienta es de subselección y nos sirve para seleccionar y transformar los objetos a través de sus nodos. Más adelante veremos mejor su funcionamiento. Esta es la herramienta de transformación libre y nos permite escalar, sesgar, rotar y distorsionar elementos del escenario, esto se realiza con unos objetos específicamente. La herramienta de rotación 3D lo que me permite es rotar un elemento que tenga alto, ancho y profundo. La Herramienta de lazo, permite seleccionar elementos puede ser uno o varios. Luego encontramos las herramientas de dibujo vectorial y que veremos con mayor profundidad mientras realizamos ejemplo más adelante. Página9

10 Herramienta de Texto Herramienta de línea Herramienta de Lápiz Herramienta de pincel Herramienta de Pluma: Que permite modificar un objeto de diferentes formas Herramienta de Rectángulo, también permite realizar óvalos Herramienta Deco: Que genera una decoración a una forma que se seleccione Herramienta de Huesos: Es un método de animación de objetos Herramienta de Cubo de pintura Herramienta de Cuenta gotas: Que rastrea muestras de color Herramienta Borrador Herramienta Mano: Que permite en tomar el escenario y moverlo a cualquier dirección Herramienta Zoom: Permite ver un espacio del escenario más cerca Qu. Algunas de estas herramientas al presionarlas y de acuerdo a los objetos que se estén trabajando se activan otras opciones al final de la barra. Ahora: Es importante diferenciar las clases de dibujos que tenemos en la escena, unos son objetos de dibujo que son Mapas de Bits como fotos o imágenes importadas, para identificar exactamente qué clase de objeto es nos vamos al inspector de propiedades, y si es un objeto de dibujo se muestra como Mapa de bits al hacer zoom a estos elementos se van a ver despixelados, esta imagen cuando la seleccionamos vamos a tener un cuadro azul y no podemos seleccionar a nivel de subobjeto. Otro tipo que tenemos es el objeto vectorial y que aparece en el inspector de propiedades como Forma, este tipo de objeto tiene muchas opciones de modificación lo que nos permitirá realizar muchos objetos con diferentes formas. Con la herramienta de subselección sobre este tipo de objetos se pueden mover con los nodos y los tiradores. DIBUJAR FORMAS BÁSICAS Objetos de dibujo, son imágenes a las que solamente se les puede realizar pocos cambios como tamaño, color y cambios de posición, cuando se seleccionan se muestra un cuadro o rectángulo son Página10

11 diferentes a los objetos que indican forma en el inspector de propiedades ya que los objetos de Forma tienen una particularidad especial y es que cuando se seleccionan se muestran unos nodos que permiten realizar cambios sobre los objetos, adicionalmente estos objetos también se rompen cuando tienen contacto con otro objeto de las mismas características. Vamos a dibujar una forma y un objeto de dibujo Para crear una forma simplemente hacemos clic sobre herramienta de rectángulo o de óvalo y lo dibujamos sobre el escenario. Este dibujo o forma tiene una particularidad y es que como se crea con un borde se pueden separar el borde del relleno del dibujo. Este tipo de dibujo también puede cambiar y tener diferentes formas. Para esto utilizamos la herramienta de sub-selección, esto genera unos puntos verdes que permite mover en diferentes posiciones y direcciones la figura que tengamos. Página11

12 Para hacer un objeto de dibujo seleccionamos dentro la herramienta de rectángulo y ubicamos el objeto que queremos dibujar, en este caso un circulo o elipse, en la parte inferior de la barra de herramientas se activan dos íconos. Se debe seleccionar el que se llama Dibujo de objeto y luego dibujamos nuestra elipse o circulo. De todas formas tenemos más opciones de modificación en nuestro inspector de propiedades, como cambio en color, tamaño, el color del trazo y del relleno. Página12

13 Ahora aprenderemos a dibujar líneas. Estas tambien se pueden generar como forma y como objeto de dibujo. En primer lugar vamos ha hacerlo como objeto de dibujo: Seleccionamos la herramienta de línea y si en la parte inferior de la pantalla el ícono de objeto de dibujo esta en color oscuro es porque la línea va hacer un objeto de dibujo, adicionalmente se pueden realizar cambios desde el inspector de propiedades y podemos cambiar la forma del trazo, el tamaño, la forma del borde y su color, vemos que en el objeto de dibujo, cuando se selecciona queda rodeada por un cuadro azul. Dibujemos una línea de tipo forma. Esta línea se hace tomando de la barra de herramientas el cuadro de línea y cuando se activan los 2 botones en la parte inferior de la barra de herramientas, el ícono Dibujo de objeto debe estan en color claro, la tomamos y ha dibujamos en nuestro escenario, de esta forma cuando se selecciona no queda rodeada por el rectangulo azul pero si la seleccionamos y con el mouse nos acercamos, la flecha del mouse queda con una curva y la podemos tocar y arrastras y nos permitirá crear formas diferentes. Página13

14 Tambien podemos realizar cambios de color, forma y tamaño desde el inspector de propiedades. Otra forma de realizar dibujos de forma lo podemos hacer con la herramienta de Ovalo simple que en el inspector de propiedades nos muestra una serie de opciones con las que podemos crear nuevas figuras Página14

15 Adicionalmente existe la herramienta Deco que nos permite realizar decoraciones especiales para nuestros proyectos. Se toma de la barra de herramientas y se configuran las diferentes opciones desde el inspector de propiedades. Otras herramientas que tenemos disponible son: Página15

16 La herramienta de Texto, se inserta el texto que desee y puede cambiar su tamaño y el estilo desde el inspector de propiedades. La herramienta de lápiz: Me permite realizar dibujos libremente, intente realizar una composición con esta herramienta. Página16

17 Esta herramienta cuenta con 3 opciones adicionales que pueden utilizarse cuando esta dibujando con este lápiz: Esta opción se activa cuando seleccionamos el lápiz y se observa en la parte inferior de la pantalla. Les invitamos a que profundicen en cada una de las herramientas. Página17

18 Objetivo CAPAS Y LÍNEA DE TIEMPO El objetivo de esta guía es aprender a manejar las capas, la línea de tiempo y conocer cómo se utiliza la regla de Flash. Inicialmente vamos a ver la regla y cuadrícula: Al comenzar a trabajar sobre el escenario las reglas son importantes para poder dimensionar cada uno de los objetos que tengamos dentro del escenario, para que nuestro proyecto quede con la mejor distribución posible. Regla Al comenzar a trabajar con Flash, seguramente no se va a visualizar la regla dentro de nuestro espacio de trabajo, como en la siguiente imagen. Si queremos trabajar con las reglas lo que debemos hacer es ir al menú ver y seleccionamos Reglas, inmediatamente aparecerán estas en el escenario. Página18

19 Regla La posición inicial de la regla en nuestros escenario es (0,0) y la posición final va a depender del tamaño que se le haya colocado al escenario. Otra opción de mucha ayuda sobre nuestro escenario son las guías que podemos llevar al escenario y que nos va a permitir dimensionar los objetos dentro de nuestra película, para sacar estas guías solo debemos posicionarnos en la regla, hacer un clic izquierdo y arrastras al escenario la guía. Página19

20 Podemos sacar al escenario todas las guías que queramos. Estas guías las podemos bloquear, para que estas no se muevan cuando estemos dibujando. Esto se hace de la siguiente forma. Se va al Nenu Ver Guías Bloquear guias. Estas guías se pueden borrar o quitar y eliminarlas todas. Se pueden editar las guías para realizar cambios de visualización de estas, por defecto la guía se muestra en color azul cian y si queremos cambiarlas de color lo podemos hacer, en el menú Ver, Guías vamos a la opción Editar guías y aparecerá la siguiente ventana. Página20

21 En esta ventana tenemos también las opciones de Mostrar, Ajustar y Bloquear guías. Que son las opciones que vimos anteriormente. Otra opción que tenemos para dividir nuestro escenario es la cuadrícula, para colocar la cuadricula dentro del escenario lo que debemos hacer es ir al menú Ver y seleccionar Cuadrícula luego Mostrar Cuadrícula Página21

22 Ahora va a ver el escenario de la siguiente forma Si desea editar esta cuadricula para colocar los cuadros de un tamaño diferente, puede hacerlo de la siguiente forma ver, cuadricula y luego seleccionamos editar cuadricula, nos aparecerá la siguiente ventana. Aquí tiene opciones adicionales para realizar cambios no solo en el tamaño de la cuadricula sino la forma como la quiere ver dentro de su proyecto. Línea de Tiempo y Capas Página22

23 La línea de tiempo es uno de los paneles principales de flash, el escenario es la parte visible, pero la línea de tiempo va a contener la información de la animación a lo largo del tiempo, toda la regla son los diferentes números de fotogramas que podemos utilizar y dependiendo del FPS (Fotogramas por Segundo) que por defecto trae 24 configurados, esto lo que nos indica es que cada 24 fotogramas que recorra la cabeza lectora va a suponer un segundo de animación de nuestro proyecto. La estructura de todos los proyectos de flash entienden que la cabeza lectora va a ir recorriendo de forma indefinida todos los fotogramas que tengan contenido en nuestra película hasta que se le dé el parámetro de parar o fin y volverá al inicio. La línea de tiempo también nos va a permitir dividir nuestro contenido en diferentes capas, para crear más capas tenemos unos íconos especiales, cuando le agregamos contenido a cada capa lo que pasa en el primer fotograma es que pasa de ser un circulo blanco a un circulo negro. Para dibujar objetos en diferentes capas debo tener seleccionada la capa en que deseo dibujar. Para crear una nueva capa puedo utilizar el ícono que se muestra en la siguiente figura o se hace click derecho sobre una capa y se selecciona nueva capa. Página23

24 Otro ícono importante es el de crear carpetas que me permite agrupar varias capas. Nueva Carpeta Esta funcionalidad es de gran ayuda cuando se tienen proyectos muy grandes. Pues generan orden dentro del mismo. Algo importante es que tanto a las carpetas como a las capas se les puede hacer cambios en el nombre, solamente haciendo doble clic sobre estos. Para colocar las capas dentro de una carpeta, simplemente arrastre la capa hacia la carpeta Página24

25 Ahora, las capas tienen unas funcionalidades específicas que vamos a ver a continuación: Lápiz En primer lugar vemos ese pequeño lápiz que lo que nos indica tal y como está es que la capa es completamente editable, y podemos trabajar sobre ella, si por ejemplo hacemos clic debajo del ojo lo que hago es ocultar la capa y por ende el lápiz también queda desactivado. Si se hace clic en la parte del candado lo que se hace es bloquear la capa, lo que quiere decir es que no la puedo modificar. Con respecto al tercer ícono si lo oprimo lo que me va a mostrar es el contorno de los objetos que tengo en la capa y la deja editable. Página25

26 Veamos un ejemplo Aquí no se ha hecho clic en el cuadro Aquí se ha hecho clic sobre el cuadro Ahora vamos a ver el cabezal reproductor que es la línea roja que se irá desplazando en la medida en que nuestro proyecto va corriendo y he añadido animación a la película Cabezal reproductor Ejemplo Página26

27 Inicialmente cuando comenzamos con un proyecto se trabaja en una sola capa pero si se debe hacer una animación lo más seguro es que debamos colocar más capas a nuestro proyecto. Ejemplo: Vamos a realizar un dibujo en varias capas, en nuestra primera capa colocaremos un primer dibujo. Hacer clic en el ícono de nueva capa o lo puede lograr haciendo clic derecho sobre la primer capa, aparecerá la opción de insertar capa. Página27

28 Se inserta la nueva capa y se coloca la siguiente parte del dibujo. Luego se vuelve a insertar otra capa y se coloca la otra parte del dibujo. Página28

29 Se insertan las capas necesarias y sobre cada una de estas los dibujos correspondientes hasta tener el diseño completo y se verá en diferentes capas y el dibujo completo. Página29

30 Otra forma es cuando tenemos todas las partes del dibujo en una sola capa y se requiere distribuir en varias capas. En la siguiente imagen se encuentran todas las partes del dibujo en una sola capa. Página30

31 Si lo que queremos hacer es distribuir todo el dibujo en diferentes capas se hace la siguiente acción. Se debe seleccionar el primer fotograma, hasta que quede en color azul la parte del cabezal reproductor, luego vamos al menú Modificar y en Línea de Tiempo se selecciona distribuir en capas. Finalmente nuestro diseño quedará de la siguiente forma: Página31

32 Página32

33 Ahora veremos el concepto de máscara: Tenemos dos imágenes en dos capas Primera capa Esta capa la vamos a colocar como tipo mascara Página33

34 Ahora vamos a nuestra segunda capa Ahora en propiedades vamos a colocarla como Tipo Afectada por Mascara Página34

35 Ahora sobre las capas quitamos las X del ojo y colocamos candado a las dos capas y vemos el efecto. La Biblioteca En la biblioteca se almacenan los elementos que se traen de forma externa, por ejemplo fotografías y todo lo que sea símbolo de película. También objetos o elementos que creemos dentro de nuestro proyecto los podemos convertir en tipo símbolo y lo guardarlos en la biblioteca. Página35

36 Es donde se organizan todos los elementos del proyecto. Todos los objetos que se dibujen deben estar convertidos en símbolo Dentro del Panel de Biblioteca se encuentran otras opciones que nos pueden ayudar a organizar nuestra información. Estas son las herramientas de la biblioteca Página36

37 La primera opción es la creación de símbolos, la segunda opción es crear carpeta en las que podemos organizar el proyecto colocando los archivos dentro de estas, la tercera opción nos deja ver las propiedades de los elementos que tengamos en la biblioteca. Y Para finalizar tenemos el cubo de basura y nos permite eliminar archivos de la biblioteca. Se podrán importar archivo al escenario y también a la biblioteca. Si importamos una imagen al escenario la trae y la coloca en el escenario y adicionalmente la coloca en la biblioteca. Si se importan las imágenes a la biblioteca se guardará únicamente en la biblioteca y luego podrá pasarse al escenario. Página37

38 Objetivo Interpolación El objetivo de esta guía es aprender a manejar movimiento dentro de la película de flash, para trabajar con interpolación se deben conocer los diferentes símbolos de flash, símbolos gráficos, símbolos de botón o clip de película. Símbolos Un símbolo puede ser un gráfico, un botón o un clip de película que se crea una vez y que se puede reutilizar en el transcurso de la película o en otras películas. Estos símbolos se almacenan automáticamente en la Biblioteca y estarán disponibles para posteriormente ser utilizadas. Los símbolos sirven para realizan un sin número de tareas, ya que poseen distintos comportamientos, los cuales ayudan a construir películas interactivas. La ventaja de utilizar símbolos en Flash es que pueden reutilizarse cuantas veces se desee sin aumentar el peso final del archivo. Los símbolos se utilizan para crear animaciones, ya que todo símbolo cuenta con su propia línea de tiempo, independientemente de la línea de la película. Asi que cada símbolo es como una película de Flash completa que está dentro de la película principal un símbolo puede contener más símbolos, cada uno con su propia línea de tiempo Símbolos Gráficos Son símbolos que nos permiten representar objetos estáticos y animaciones sencillas. A partir de un texto o cualquier dibujo que se realice se pueden crear símbolos gráficos con los que podemos realizar animaciones. Por ejemplo vamos a crear un texto. Página38

39 Ahora al menú Modificar y seleccionamos la opción Convertir en símbolo Aparecerá la siguiente ventana, donde puede colocarle un nombre a su símbolo y se guarda en este caso como Tipo Gráfico en la biblioteca. Página39

40 Símbolo Botón Se utiliza el símbolo botón para crear botones interactivos que respondan a las pulsaciones y desplazamientos del ratón, o a otras acciones a una instancia del botón. Cada fotograma de la Línea de tiempo de un símbolo de botón tiene una función específica: El primer fotograma es el estado Reposo, representa el botón siempre que el puntero no esté sobre él. El segundo fotograma es el estado Sobre, representa el aspecto del botón cuando el puntero se encuentra sobre el mismo. El tercer fotograma es el estado Presionado, representa el aspecto del botón cuando se hace clic sobre el mismo. El cuarto fotograma es el estado Zona activa, define el área que responderá al clic del ratón. Esta área es invisible en la película. Realicemos un ejemplo de símbolo de botón. Con la herramienta de texto se coloca una palabra que desee Página40

41 Luego se selecciona el botón y vamos al menú Modificar y se selecciona Convertir en símbolo Aparecerá la siguiente ventana donde se coloca el nombre del botón y se debe seleccionar como Tipola opción de Botón Luego se hace clic en Aceptar y cambian las propiedades. Página41

42 Observe que pasa cuando se hace doble clic sobre el símbolo botón. Aparece una línea de tiempo divida en 4 partes que son: Reposo, Sobre, Presionado y Zona Activa. Para trabajar con este botón se hace lo siguiente. La primera opción del botón es como aparece en la pantalla actualmente. En nuestro caso se ve el botón de color azul. Ahora vamos a cambiar el color del botón y nos posesionamos en la parte de la línea de tiempo que es sobre y presionamos F6. Página42

43 Y para finalizar le colocamos otro color y se presiona nuevamente F6 De esta forma tendrá un botón, donde tiene un color diferente cuando esta en cada uno de los estados anteriormente vistos. Símbolo clip de película Son películas adentro de nuestra película que pueden contener animaciones distintas. Página43

44 Observe que este clip de película tiene varios fotogramas con diferentes animaciones en cada fotograma. Estas son las diferentes posiciones que se observaran al correr el clip de película. Esta es una película pero Usted podrá crear los clips de película que desee. Ejemplo: Para hacer un clip de película usted deberá crear un objeto y guardarlo como clip de película Página44

45 Con la misma opción en el menú de Modificar seleccione Convertir en símbolo Colóquele un nombre y guárdelo como tipo Clip de película. Una vez ha guardado como clip de película se hace doble clic sobre este y observe como es un objeto compuesto por varios elementos. Página45

46 Página46

47 Para darle movimiento primero se hace clic sobre la primera ala, se mueve para un lado el ala sobre el siguiente fotograma y oprima la tecla F6. Y haga la misma operación sobre la otra ala de la abeja, mueva para el otro lado y presione la tecla F6, de esta forma tendrá a una abeja volando. Al pasar a Escena y ejecutar la película observará el movimiento de la abeja. Página47

48 Interpolación Interpolación de forma En la interpolación de forma, se dibuja una forma vectorial en un fotograma concreto de la línea de tiempo y se modifica o se dibuja otra forma en otro fotograma específico. Seguidamente, flash interpola las formas intermedias de los fotogramas intermedios y crea la animación de una forma cambiante. Vemos un ejemplo. Se realiza un dibujo en flash, e decide el punto inicial del mismo. Ahora, en la final en la línea de tiempo nos ubicamos en el fotograma 60 y se hace clic en F6, luego movemos nuestro objeto hacia la posición final, si se desea se puede realizar cambios de objeto. Página48

49 Se hace clic derecho sobre la línea de tiempo y se selecciona Crear interpolación de forma Página49

50 Interpolación de movimiento Esta interpolación es aplicable a los símbolos tanto para los símbolos gráficos como los clip de película. Veamos un ejemplo. Tenemos un cielo, una ciudad y un personaje animado que es un clip de película, éste se encuentra en una posición específica y queremos que vaya hasta el final de la pantalla. Página50

51 Para que se conserven a través de todos los fotogramas el cielo y la ciudad mientras vemos el clip de película, debemos hacer F5 en el fotograma final del cielo y la ciudad. Luego hacemos F6 en la capa personaje y colocamos el personaje donde queremos que finalice su posición. Página51

52 Luego hacemos clic derecho sobre la línea de tiempo del personaje y seleccionamos interpolación de movimiento. Página52

53 Ahora debemos cambiarlo a símbolo gráfico. Llevamos el cabezal hasta el final, osea al fotograma 60 y llevamos nuestro personaje hasta donde quiera que llegue. Página53

54 Podemos cambiar la trayectoria de nuestro personaje Ahora lo podemos ejecutar. Página54

55 Animación Objetivo El objetivo de esta guía es aprender hacer animaciones de un personaje. Animación con imágenes GIF 1. Abrimos un nuevo proyecto de Flash ActionScript Importamos una imagen Gif a nuestra biblioteca. 3. Verificamos que la imagen gif ha ingresado. Página55

56 4. Organizamos en una carpeta cada una de las componentes que forman la imagen importada. Lo anterior por organización. 5. Ya tenemos nuestra imagen por partes para colocarla en nuestro Escenario, dadas nuestra necesidad. Aquí están cada una de las partes que forman nuestra imagen, que colocados a nuestro parecer fotograma a fotograma, dará la sensación de movimiento. Muy importante indicar que coloco el posterior en el nuevo fotograma y borro el anterior: 6. Vamos a colocarla en una recta. Para que se vea movimiento debemos separar los fotogramas claves con fotogramas normales: Página56

57 7. Ahora bien, se puede importar al escenario; en este caso podemos ayudarnos del papel cebolla que nos permite seguir el rastro de nuestra imagen de forma secuencial. 8. Observe la imagen como va dejando el rastro: En este caso pese a que al importar todo queda también en la biblioteca, lo que hacemos es directamente sobre el escenario y por eso es mejor usar el papel cebolla, para establecer exactamente la secuencia de movimiento. Recuerde ser muy creativo en el recorrido que desea haga la imagen. Teoría del movimiento y de los gestos 1 Cuando se quiere animar un cuerpo humano encontramos que es una de las acciones más complejas que se desean realizar en un proyecto de animación. Es decir tienes que dotarte de mucha paciencia, pues es una actividad que toma bastante tiempo, así que si has decidido animar y quieres seguir, pues empezaremos por repasar un poco la anatomía del cuerpo humano. En la imagen que observamos a continuación encontramos que el cuerpo humano está constituido por una serie de articulaciones que son las que más nos interesan para realizar las animaciones de personajes. Para que el cuerpo se mueva, se necesita de la fuerza de un grupo muscular flexible y de un conjunto de huesos rígidos que los sostengan. Pero, quienes cobran mayor importancia son las articulaciones, pues es ahí donde se producen los movimientos, observemos: Página57 1 Tomado de:

58 1.- Principales articulaciones del esqueleto humano La cabeza se mueve gracias al cuello. Éste puede realizar todos los movimientos, es decir, puede inclinarse hacia todos los lados, arriba, abajo, derecha, izquierda, de cualquier modo la cabeza puede moverse. El hombro es una articulación de movimiento complejo, entre ellos tenemos movimiento de elevación del hombro (como diciendo no se), giro hacia atrás o hacia delante, (sacar pecho, hundir pecho) también comprende los movimientos de extensión, rotación, flexión, o sea, mover el brazo. El codo, se flexiona y se extiende, aunque en un grado más de realismo, podemos decir que rota. La cadera, es como el hombro, pues mueve las extremidades inferiores, pero también puede elevarse y bajarse, también los movimientos de, rotación, flexión, extensión. La rodilla como el codo, se flexiona y se extiende., aunque tiene cierto grado de rotación. Los tobillos y los pies también se flexionan y se extienden. Una vez se han comprendido los movimientos humanos, hemos de entender que un movimiento, por lo general, no se produce en solitario, entran en juego grupos de articulaciones y compensan las posiciones adoptadas para estar siempre lo más equilibrado posible. Por ejemplo, si estoy sentado, y hecho el brazo hacia atrás para rascarme las costillas pues flexiono la articulación del hombro al mismo tiempo que la del codo y el cuerpo (columna) rota un poco hacia un lado, a continuación se flexionan los dedos y se realizan pequeños movimientos adelante y hacia atrás. Podéis probar de rascaros las pantorrillas, el cuello, o la espalda, y podréis comprobar como en realidad son conjuntos de articulaciones las que entran en acción. Entonces, cuando hacemos el acto de caminar, debemos fijarnos en lo siguiente: 2.- Progresión del acto de caminar erguido (un paso) 1. El miembro inferior izquierdo (según imagen) propulsa el cuerpo hacia delante. Página58

59 2. La otra extremidad, librada del peso del cuerpo, lleva el pie hacia delante. 3. El peso del cuerpo pasa a la extremidad derecha y vuelta a empezar. 4. Con estos movimientos el cuerpo sube y baja ligeramente. Una vez hemos visto el movimiento del cuerpo humano, veremos el mundo de los gestos, pues algo que pareciera insignificante hace que una animación parezca verosímil, y le indica al espectador, con pequeños detalles, a veces inconscientes, las emociones y pensamientos del personaje. Breve introducción a los gestos: mensajes subliminares Nuestro cuerpo refleja nuestros pensamientos y emociones de forma inconsciente. Las expresiones faciales son un libro abierto a nuestras emociones. Las posiciones que adoptamos con nuestro cuerpo reflejan que pensamos, o que actitud tenemos con respecto a la situación concreta en la que nos hallemos. A continuación veremos algunos gestos populares: Yo no se nada de nada: encogerse de hombros 3.- Gesto de encogerse de hombros Este gesto indica que la persona no entiende o no sabe algo. Las tres partes principales de este conjunto de gesto con las palmas mirando hacia arriba y abiertas, las cejas levantadas y los hombros encogidos. A quien quieres engañar con esa historia... no me creo nada: la mano en la barbilla Ese señor tiene una actitud de evaluación crítica, está pensando algo así como "no me gusta lo que dice y no estoy de acuerdo". Las tres partes principales de este conjunto son la mano tapándose la boca en la barbilla con el índice levantado, las piernas muy cruzadas y el brazo cruzado sobre el pecho (defensa), mientras que la cabeza está un poco inclinada hacia abajo, lo que denota hostilidad. 4.- No está de acuerdo con lo que escucha Que nadie se atreva a desafiarme: actitud dominante Esta mujer muestra una actitud dominante o agresiva, enseñando los pulgares, que asoman de los bolsillos, y tiene el cuerpo ligeramente inclinado hacia adelante, mostrando seguridad en si misma. Los pulgares expresan superioridad. 5.- Mujer dominante Si, si, bien! que contenta estooooooy!: frotarse las manos Página59

60 6.- Gesto de frotarse las manos El acto de frotarse las manos significa que la persona está contenta con "lo que tiene entre manos" Leer el rostro, es todo un arte. Nuestro rostro es la expresión de la experiencia de la vida. Todo el mundo sabe que cuando una persona se siente bien, su rostro y todo su cuerpo lo demuestran, se ve más luminoso, más recto, más firme, su mirada brilla. En cambio, cuando vemos a alguien con el rostro "desfigurado" todos percatamos que a aquella persona no le están yendo bien las cosas, o que pasa por un mal momento. Así que depende de la expresión que le demos a un personaje crearemos la sensación oportuna. El canon de la belleza...en canon de la belleza es conocido desde tiempos antiguos. Aunque los artistas son reacios a aceptarlo, se debe a una cuestión matemática-geométrica, que obedece a un canon arquetípico. La ecuación matemática de segundo grado que sirve para definir la belleza es: X 2 X 1 = 0 Una de las raíces de esta ecuación es el "número áureo" (1,618...) y la otra es la "sección áurea" (0,618...) y cómo se traduce esto en belleza? 7.- El número y la sección áurea 1. Geométricamente, tomamos el punto medio de la base de un cuadrado (M), y trazamos una diagonal hasta el punto opuesto (N). 2. Trazamos un arco de circunferencia con centro en (M) y radio (M) (N) hasta encontrar la prolongación de la base del cuadrado. 3. Obtenemos los segmentos a, b, c que se encuentran entre si a una proporción de a a = c b 4. Encontramos las proporciones que estructuran el cuerpo humano. 5. Si la distancia entre la base del mentón y el entrecejo equivale a 1, encontramos 0,618 desde el entrecejo hasta la raíz de los cabellos. Etc.(véase Fig. 8) 6. Si no se quieren frustrar, dejen el metro, háganme caso, yo ya lo probé. Cómo se si soy guapo/a? En resumidas cuentas, y en líneas generales, más guapo/a son aquellas personas que más cerca de hallen de este equilibrio proporcional, independientemente de las culturas, razas u otras diferencias. Lo mismo se puede aplicar para el cuerpo. Página60

61 Si quieres dibujar un personaje guapo/a básate en estas proporciones. Aléjate de ellas para crear los malos (que siempre suelen ser feos) 8.- El rostro áureo Breve introducción a la mímica y el carácter del personaje. Las facciones de la cara en estado "normal" informan sobre el pasado del personaje, más que sobre el presente. Ahora bien, enfatizando ciertos rasgos, podremos provocar que nuestro dibujo muestre diversas cualidades psicológicas. Veamos los pares de valores músculo-expresión Veo, veo... Superciliar: indica concentración, atención sostenida y reacciones rápidas a las impresiones externas. 9.- Mirada concentración, atención sostenida Superciliar vertical, obstinación, tenacidad, tozudez 10.- Mirada con obstinación. Tiene narices... y morro Elevador superficial, percepción de lo desagradable, capacidad para percibir los defectos, poco optimista, denota amargura Página61

62 11.- Percepción de lo desagradable Cigomático menor, el sujeto está sufriendo, dolor moral o psíquico 12.- Sufrimiento psíquico Esa boquita... Orbiculares externos, indica deseo, es una dependencia, la persona necesita de los demás y existe falta de autocontrol Deseo, dependencia, falta de autocontrol Canino, orgullo, amor propio, satisfacción de uno mismo Orgullo, amor propio Bueno, creo que con esto es suficiente como para que uno pueda hacer sus pinitos con la animación y caracterización de personajes, así que a trabajar se dijo. Creación de un maniquí paso a paso. Página62

63 Ahora vamos a construir paso a paso un maniquí que nos servirá para preparar alguna animación posteriormente. Descripción El maniquí lo vamos a simplificar quitándole el movimiento de las muñecas, y el cuello. Así que consta de las siguientes partes: 1. Capa brazoder o Brazo derecho o Antebrazo derecho 2. Capa cabeza o Cabeza 3. Capa piernader o Muslo derecho o Pierna derecha 4. Capa cuerpo o Cuerpo (tórax y abdomen) 5. Capa brazoizq o Brazo izquierdo o Antebrazo izquierdo 6. Capa piernaizq o Muslo izquierdo o Pierna izquierda 7. Capa fondo o Fondo Para realizar la esta animación vamos a crear 7 capas, en cada una de las cuales pondremos cada parte del maniquí. Esta disposición corresponde con un maniquí mirando hacia nuestra derecha. En Flash CC5 Profesional cree las capas de la siguiente forma: 1.- Crear las capas, para lo cual utilizaremos el botón nueva capa. Le ponemos el nombre correspondiente, y repetimos la operación hasta tenerlas todas, como aparece en la siguiente ilustración: 15.- Vista de las capas 2.- Dibujar, con la herramienta rectángulo seleccionada, dibujamos uno en la capa fondo. con un relleno gris # y sin contorno: Página63

64 con medidas de 45 X Relleno del rectángulo 17.- Ancho y alto del rectángulo 3.- Con la figura seleccionada, la convertimos en un símbolo apretando F8 en el teclado, y le ponemos el nombre cuerpo. Guardarlo con el punto de registro en el centro El punto de registro tiene que estar en el centro 4.- Ahora creamos la cabeza. Para ello trazaremos una elipse con la herramienta óvalo. Sus medidas serán de 37 ancho por 45 alto. Con la figura seleccionada pulsamos F8 y lo convertimos en un símbolo que llamaremos cabeza. Su punto de registro también estará en el centro. Todas las partes del muñeco se guardarán con el punto de registro en el centro. 5.- El brazo derecho lo creamos con una elipse de medidas 22 por 63 con el color de relleno # Su nombre de símbolo será brazoder. 6.- El brazo izquierdo lo haremos con una elipse de las mismas medidas que el brazo derecho 22 por 63 con color de relleno #CCCCCC, su nombre de símbolo será brazoizq. 7.- Después, pulsar sobre Escena 1 para volver a la línea de tiempo principal Pulsar sobre Escena 1 para volver a la línea de tiempo principal 8.- Para crear los muslos, los haremos con la elipse de tamaño 27 por 69 para el musloder el color color es #CCCCCC y para el musloizq las mismas medidas y el color color # Página64

65 9.- Las medidas serán de 18 por 64 de las pantorrillas (piernas). piernader y color #CCCCCC para la derecha y piernaizq, color # para la izquierda. Utilizaremos también un óvalo Para los pies, seguiremos con los colores correspondientes a cada extremidad, y lo realizaremos con un óvalo de 34 por 13. Los llamaremos pieder y pieizq para los nombres de clip Las medidas para los antebrazos serán de 17 por 67. Dos óvalos pero con un círculo en el extremo inferior de 18 X 18 que simulará la mano Símbolo del antebrazo izquierdo del maniquí, que incluye un óvalo y un círculo en el extremo inferior Las medidas para los pies son 33 por 13, utilizando el óvalo. Desde el menú ver seleccionamos la opción reglas. Con la ayuda de una línea guía que pondremos en el escenario pulsando sobre la regla y arrastrando al escenario hasta la parte interior del pie. Después con la flecha de selección, trazamos un rectángulo para seleccionar la zona inferior y eliminarla (ver ilustración). Sus nombres pieder, y pieizq Pie con la región inferior seleccionada con la ayuda de una línea guía Ya tenemos que tener en el escenario más o menos lo siguiente: 22.- Partes del maniquí Ahora vamos a distribuir las diferentes partes del maniquí en capas. Así podremos aislar una zona concreta del cuerpo para estudiar su movimiento, y podremos mover a nuestro antojo todos los símbolos. Pero antes... guardamos el archivo como Animacion1.fla 15.- Bueno, tenemos que hacer que las articulaciones del cuerpo sean parecidas en cuanto al movimiento. Así que desplazaremos uno a uno todos los símbolos de forma que el punto de registro quede en la zona de la articulación. Explicaremos la cabeza. Página65

66 16.- Hacemos doble click sobre el mc cabeza y estaremos en el modo edición de símbolo en contexto. el punto de registro se halla situado en el centro. Pensemos... La cabeza, tal como hemos construido nuestro maniquí, solo podrá realizar los movimientos de flexión y extensión, que traducido en Flash sería rotación + ó -. Así que con la ayuda del teclado, usando la flecha arriba, desplazamos la cabeza hacia arriba hasta que quede así: 23.- Punto de registro de la cabeza en la parte inferior Claro, los brazos pueden rotar desde el hombro, los antebrazos desde el codo. El cuerpo también lo haremos flexionar desde su base. Los muslos desde la región de la cadera, y las piernas en la articulación de las rodillas. Los pies, en el tercio posterior, en lo que sería la articulación tibioperoneaastragalina. Véase: 24.- Partes acabadas del maniquí Distribuimos, con la ayuda de los comandos cortar y pegar cada parte del maniquí en su sitio, según dijimos la descripción Lo organizamos de manera que parezca un maniquí formado, entrecruzando un poco las articulaciones. Si pulsas CONTROL+T aparecerá el panel transformar, el cual te será útil para rotar las articulaciones en ángulos de 15, 30, 60, 90 con el signo - (menos) para flexionar, o en positivo para extender las articulaciones Para el fondo, en principio, bastará con dibujar una línea negra, de 1 de grosor justo debajo de los pies del maniquí. Página66

67 25.- Maniquí acabado, listo para moverse. Animación del maniquí Esta animación realizará un ciclo completo, es decir un paso. Si repetimos la animación (loop) parecerá que este caminando. 1.- Actualmente tenemos el maniquí con la pierna izquierda avanzada y la otra atrasada: 2.- Insertaremos un fotograma clave en el número 5 para todas las capas, lo podemos colocar haciendo F6 sobre dicho fotograma, o con clic derecho, como lo muestra la siguiente imagen Ejemplo de cómo se inserta un fotograma clave en el fotograma 5 usando el menú contextual. 3.- Una vez estemos en este fotograma vamos a cambiarle de posición sus brazos y sus piernas, esto lo puedes hacer usando el panel transformar (CONTROL+T) o con la herramienta transformación libre (Q). Tienes que trabajar a ojo, ya que considero inúltil poner los grados y los desplazamientos _x e _y debido a que no te crean ninguna imagen mental de la posición que queremos conseguir. Mirar la siguiente ilustración, los brazos y las piernas ya se movieron y dan la sensación de que el maniquí se está desplazando. Página67

68 26.- Ultimo fotograma de la animación del maniquí. Es importante destacar que entre más movimientos tengamos mejor va a quedar la animación, los invitamos a realizar estas animaciones con más movimientos. Cinemática Inversa Huesos 2 El método de animación cinemática inversa nos permite mover objetos de forma más natural, a la vez que sencilla. La idea es unir los elementos con "huesos", de manera que estos queden unidos formando articulaciones. Pensemos en un brazo creado con tres huesos unidos por la muñeca y codo. Al mover la mano, el antebrazo la seguiría doblándose por la muñeca y por el codo. Para crear los huesos, encontramos la herramienta Huesos. Podemos hacerlo de dos formas: creando un esqueleto dentro de una forma, o uniendo símbolos con huesos. Crear un esqueleto en una forma: Partimos de una forma, como pueden ser elipses, rectángulos, trazos del pincel, etc. Cualquier cosa que no se haya convertido en un símbolo. Con la herramienta Hueso, vamos haciendo clic y arrastrando, dibujando los huesos. Debemos de comenzar por el hueso raíz, y seguir por los que cuelgan de este. Por ejemplo, para dibujar un brazo, haríamos clic sobre el hombro y arrastraríamos hasta el codo. Volveríamos a hacer clic sobre el el codo y arrastraríamos hasta la muñeca. En la siguiente imagen, partimos de un dibujo muy simple hecho con el Pincel, y le hemos creado un esqueleto. Página68 2 Tomado de:

69 Podemos crear tantos huesos como queramos dentro de la forma. Si ahora intentas arrastrar un brazo, verás que el resto del cuerpo le sigue. El inconveniente de la forma es que puede deformarse y no podremos controlarlo. Crear un esqueleto con símbolos: Otra forma de trabajar es utilizando símbolos. Debemos de tener en cuenta que un símbolo sólo puede tener un hueso. Por tanto, necesitamos una instancia de símbolo para cada sección entre articulaciones. Antes de comenzar a crear el esqueleto, colocamos todos los símbolos en el escenario, colocados de la forma deseada. Después, partiendo de la raíz del esqueleto, del punto de que saldrán todos los huesos, vamos enlazando los distintos símbolos, del comienzo del primero al comienzo del siguiente. Podemos mover los símbolos independientemente del esqueleto, si mantenemos pulsada la tecla Alt. Si hemos colocado mal un hueso, podemos seleccionarlo haciendo clic sobre él con la herramienta de selección, y eliminarlo con la tecla Supr. Página69

70 Multimedia Objetivo: En esta guía se pretende enseñar como insertar Como bajar Instalar y grabar sonido en Audacity Ingrese al navegador de su preferencia e ingrese a la siguiente página Descargue el software seleccionando la opción de Descargar Audacity2.0.3 Para instalarlo puede seleccionar la opción de Guardar como en la parte inferior de la pantalla Guarde el programa instalador en alguna parte de su equipo. Página70

71 Luego abra la carpeta donde guardo el archivo instalador y haga doble clic sobre este. Aparece la siguiente opción donde puede seleccionar el idioma y haga clic en Aceptar. Página71

72 Siga con la instalación, haciendo clic en siguiente. Aparece la venta de Información del programa, haga clic en siguiente, Página72

73 Aparece ahora la ventana donde puede seleccionar la carpeta de destino de instalación del programa, si desea cambie la carpeta de instalación y haga clic en siguiente. En la siguiente opción seleccione si desea Crear un ícono en el escritorio y haga clic en aceptar. Página73

74 Con los anteriores parámetros termina la configuración de la instalación y se hace clic en la opción de instalar. Espere un momento mientras se realiza el proceso de instalación. Página74

75 Para finalizar aparece la Información de la instalación El sistema le informa que el programa se ha instalado. Haga clic en Finalizar Página75

76 El programa está listo para usarse. Para realizar una grabación utilice los botones que se encuentran en el recuadro. Para comenzar con la primera grabación acerque el micrófono, oprima el botón rojo. Diga unas palabras y haga clic en detener que es el botón amarillo. Página76

77 Una vez ha grabado un fragmento de voz se ve en la pantalla la siguiente información. Para guardar el sonido haga clic en Exportar. Página77

78 Ubique la carpeta donde desea colocar el archivo de sonido. Aparece la siguiente advertencia. Haga clic en Aceptar. Página78

79 Coloque la información que solicitan y haga clic en aceptar, en esta parte ya ha quedado guardado el sonido Ahora lo vamos a insertar en Flash Abrimos flash y luego seleccionamos el Menu Importar y luego importar a Escenario o Importar a Biblioteca, pues finalmente siempre llegará a la biblioteca. Seleccione el archivo y haga clic en Abrir Página79

80 Nuestro archivo queda en la biblioteca. El archivo ya está en la biblioteca y puede cambiarse la configuración del mismo para que se haga mas pequeño y no pese tanto. Haciendo doble clic sobre el altavoz, obtendrá las propiedades del archivo y podrá realizar los cambios necesarios para hacer compresión del archivo para su mejor utilización dentro de Flash. Inicialmente se ven las características predeterminadas de archivo, pero puede cambiar si así lo desea. Página80

81 En la opción Compresión puede realizar los cambios de los diferentes tamaños del archivo y puede saber como van a escucharse en la opción de probar. Realice los cambios y las pruebas para luego Aceptar y de esta forma quedará el sonido. Generalmente y el formato más utilizado es MP3 para el trabajo con páginas web. Ahora de la biblioteca pase el sonido al escenario y en el primer fotograma aparecerá una línea muy pequeña. Página81

82 Para observar el sonido dentro de la línea de tiempo, ubíquese en el fotograma 30 y presione F5. Luego. Ahora puede reproducir el sonido, con control F10. Insertar Video Uno de los sitios que podemos utilizar para bajar los videos necesarios para nuestras películas es youtube y una herramienta para bajar estos videos es a tube chatcher. Vamos a ver la forma de bajar, instalar y utilizar esta herramienta. Ingrese a Internet Explorer y en digite ingresará al sitio oficial de a Tube Catcher. Va a observar la siguiente pantalla Haga clic en Descarga Gratis. Aparece luego la siguiente información. En parte inferior de la pantalla de su Explorer. Haga clic en Guardar como y ubique una carpeta en su navegador para realizar la descarga del programa. Página82

83 Luego haga clic en Guardar. En la parte inferior de la pantalla aparece la información de la descarga. Luego haga clic en Abrir carpeta. Y encontrará la ubicación de la carpeta donde descargo el programa. Haga doble clic sobre este archivo. Página83

84 Aparece una ventana que informa el fabricante del programa, haga clic en si para seguir y entrará a la instalación del programa. Esta es la bienvenida a la instalacióndel programa, haga clic en Siguiente. Página84

85 Aparece luego luego el Acuerdo de licencia y haga clic en Acepto. Esta ventana le permite instalar la barra de herramientas de Ask, Usted decide si desea instalarla o quite la selección de las casillas como aparece en esta ventana y haga clic en Next. Página85

86 Aparece esta nueva ventana donde están ofreciendo un programa para verificar el rendimiento de su máquina, quite el chulo del botón de selección y haga clic en Next En esta nueva pantalla selecciona los componentes a instalar y haga clic en siguiente. Página86

87 En esta parte de la instalación seleccione la carpeta donde sea que se instalen los archivos del programa y haga clic en siguiente. Elija la carpeta donde quiera que el acceso al programa y haga clic en Instalar. Página87

88 Aparece el proceso de instalación Seleccione el lenguaje que desea para el programa en su sistema y haga clic en Ok Aparece el mensaje de instalación exitosa y al hacer clic en Terminar la instalación y se abrirá el programa Página88

89 Ahora en vamos a ver cómo funciona el programa. Esta es la pantalla inicial del programa. Busque en YouTube el video que desea descargar y copie el URL del video. Página89

90 Las opciones para realizar la conversión son: URL: Coloque el URL en esta casilla. Guardar en: Puede cambiar la ubicación de los archivos o dejar la ruta que aparece por defecto Perfil de Salida: Es la extensión en que se va a quedar el video, en este caso es FLV que es la opción requerida para flash. Aparece luego la opción de bajar el video en diferentes formatos, seleccione la extensión FLV, luego haga clic en descargar. Página90

91 Al finalizar la descarga aparecerá esta ventana. Busque el video en la ubicación que lo grabo. Ahora puede insertar el video en Flash. Vamos a ver como se hace. Vamos a ver un ejemplo de cómo insertar un vídeo que inicialmente en un formato que no es para flash. Página91

92 En la primer capa vamos a colocar una imagen de un televisor. En la segunda capa colocaremos el video Para insertar el video que ya convertimos en FLV se hace clic en Archivo Importar a Biblioteca Página92

93 Busque en la carpeta apropiada el archivo VIDEOS cortos y haga clic en abrir. Luego aparece la siguiente ventana, aquí seleccione la opción Cargar vídeo externo con componente de reproducción, luego haga clic en Siguiente Página93

94 Aparece ahora un listado donde podrá seleccionar el aspecto o apariencia que desea observar al ejecutar el video y luego haga clic en Siguiente. Ahora finaliza la importación del video, haga clic en Finalizar Página94

95 Ahora el video se encuentra en la biblioteca, ahora arrastre el video hacia la pantalla y ubique el video dentro del televisor. Debido a que flash solo acepta formato FLV o F4V, si tiene un video en otro formato este debe ser transformado y convertirlo en las extensiones que acepta flash. Para realizar esta conversión se utiliza el programa Adobe Media Encoder que hace parte de la suite de Adobe. Página95

96 Abra el programa y observa la siguiente pantalla. En la parte derecha del programa encuentra la opción de Añadir, oprima esta opción para añadir el video que desea convertir a formato FLV o F4V. Ubique el video en la carpeta correspondiente y haga clic en Abrir. Página96

97 Puede cambiar la ruta y el nombre del video ya transformado, haga clic sobre el link que aparece debajo de la opción Archivo de Salida. Le muestra la opción de guardar como y aquí puede cambiar la ruta del archivo y el nombre de salida. Ahora vamos a la opción de Ajustes Prestablecidos Página97

98 Con esta herramienta se pueden realizar varios ajustes, como recortar el tamaño de la película, cortar la película y hacer muchos cambios adicionales que se pueden identificar en la parte derecha de la pantalla en las propiedades. Una vez se han realizado los cambios a la película se hace clic en Aceptar. Luego haga clic en Iniciar cola y se realizará la correspondiente transformación Página98

99 Este es el video que se insertará en Flash. Página99

100 ActionScript Cómo se detiene la película en un fotograma? Tenemos un personaje que realiza un movimiento de forma indefinida Luego realizamos una interpolación de movimiento de la siguiente forma. Vamos al fotograma número 30 y hacemos F5. Página100

101 Luego hacemos clic derecho sobre el último fotograma y seleccionamos la opción de Crear Interpolación de Movimiento. Una vez se ha creado la interpolación de movimiento movemos nuestro personaje hacia un lado de la pantalla, como se observa en la siguiente imagen. Página101

102 En este momento ejecutamos la película y lo que observamos es a nuestro personaje moviéndose de forma indefinida de arriba hacia abajo. Ahora, el personaje se va a quedar caminado en un solo sito al final de la pantalla. Ubíquese en el fotograma número 31 y haga clic en F9, aparecerá la siguiente pantalla Página102

103 Luego seleccione la opción Fragmentos de código. Observara la siguiente pantalla Página103

104 Seleccione la opción Navegación de línea de tiempo Se despliega una serie de opciones y debe hacer doble clic sobre Detener en este fotograma Página104

105 Ahora observará el código que genera automáticamente Flash CS5. Cierre la ventana haciendo clic en la x de la parte superior derecha de la ventana. Ahora ejecute la película y observa que el personaje hace un movimiento de arriba hacia abajo y luego camina en una sola posición. Adicionalmente en la línea de tiempo se crea una capa con el nombre de actions. Página105

106 Cómo pasar de un fotograma a otro fotograma Vamos a realizar un ejemplo donde vamos a pasar de un fotograma a otro fotograma Iniciamos colocando un título, un botón y un malabarista, cada uno en una capa diferente. Vamos hacer que el malabarista aparezca en el fotograma 30 por lo que corremos el fotograma al número correspondiente. Página106

107 Observará la pantalla de la siguiente forma. Luego tomo las dos capas siguientes y hago clic en F5 para que la película quede del mismo tamaño. Página107

108 En la capa Botón ubíquese en el fotograma número 29 y haga F9, para parar la acción y hacer que el malabarista aparezca. Observará una ventana donde debe seleccionar la opción Fragmentos de código. Página108

109 Se muestra la siguiente ventana. Haga doble clic sobre la opción Navegación de línea de tiempo Y Primero debemos parar la acción seleccionando la opción de Detener en este fotograma. Página109

110 Aparece luego la ventana donde se genera el código automáticamente. Luego seleccione el botón y haga clic en F9 para programarlo. Luego seleccione Fragmentos de código. Página110

111 Nuevamente encontrará la siguiente ventana, donde debe seleccionar Navegación de línea de tiempo. Seleccione del listado la opción Hacer clic para ir a fotograma y detener Página111

112 Dado que en las propiedades del botón no se ha colocado el nombre de la instancia, Flash le ayuda con esta acción, por lo que debe hacer clic en Aceptar. Flash en este momento creará el código correspondiente pero CUIDADO, lea las instrucciones para obtener mejores resultados. En nuestro caso se debe hacer el cambio en la última instrucción y cambiar el (5) por el 30 que es donde va a comenzar la siguiente escena. Página112

113 Ahora como la película debe seguir, en el fotograma 30 la debo volver a reproducir, por lo que presiono nuevamente F9 y sobre Navegación de línea de tiempo seleccione dentro de las opciones Hacer clic para ir al fotograma y reproducir. Recuerde realizar el cambio en la última línea de código a 30 que es el fotograma en el que vamos a continuar. Página113

114 Luego sobre la línea de tiempo del chico, me ubico en el fotograma 50 y hago una interpolación de movimiento para darle movimiento al personaje. Hacemos la interpolación de movimiento y luego para que no se desaparezcan tanto el título como el botón debemos seleccionar los fotogramas 50 de las capas de botón y título y hacer clic en F5 para hacer extenso el título y el botón. Como se observa en la siguiente imagen. Página114

115 Ahora para que no se desaparezca el personaje al final de la película si no que perdure, haga clic en el fotograma 50 y haga presione F9. Página115

116 Luego debe seleccionar Fragmentos de código Aparecen la diferentes opciones y seleccionamos Detener en este fotograma. De esta forma el personaje aparece luego de presionar el botón, luego se deberá volver a presionar para que el personaje se mueva y allí llega al final. Página116

117 Como pasar de una escena a otra escena Ahora realizaremos un ejemplo con tres escenas diferentes, a estas escenas les colocaremos los botones de control, como se observa en las siguientes imágenes. Escena 1 Escena 2 Página117

118 Página118

119 Escena 3 Ahora vamos a realizar las instrucciones para cambiar de escena 1 a escena2. Inicialmente debemos parar nuestra primera Escena, para esto nos ubicamos en el fotograma 1 y presionamos la tecla F9, luego seleccione Fragmentos de código Página119

120 Luego dentro de la Navegación de línea de tiempo, seleccione Detener en este fotograma para que pare en esa escena. Queda la instrucción de parar en el fotograma. Página120

121 Ahora dentro de la escena, selecciono el botón Siguiente y se hace F9. Luego seleccione Fragmentos de código Página121

122 Luego en la Navegación de línea de tiempo, seleccione la última opción de la lista Hacer clic para ir a la escena y reproducir Aparecerá el código en que se deberá hacer un cambio en la escena. Página122

123 Ahora vamos a la escena No.2 Se realizaran los mismos pasos de la escena anterior. Vaya al fotograma No.1 y oprima la tecla F9. Página123

124 Seleccione Fragmentos de código y luego en la opción Navegación de línea de tiempo seleccione Detener en este fotograma Ahora aparece el código que corresponde a la acción. Página124

125 Ahora seleccione el botón Atrás Página125

126 y nuevamente oprima la tecla F9. Y Seleccione Fragmentos de código. Dentro de la opción de Navegación de línea de tiempo seleccione la opción de Hacer clic para ir a la escena anterior y reproducir Aparece el código correspondiente a la acción Seleccione ahora el botón Siguiente. Página126

127 Realice los pasos anteriores: Presione F9, luego Fragmentos de código y luego en la navegación de línea de tiempo seleccione Hacer clic para ir a la escena y reproducir Página127

128 Aparece el código y que de ser necesario se debe cambiar en el campo de Escena ( ) Página128

129 Vamos ahora a la escena No.3. y seleccionamos el fotograma No.1 y se hace clic en F9. Dentro de la Navegación de línea de tiempo seleccione Detener en este fotograma Aparecerá el código en la pantalla. Cierre la ventana y seleccione el Botón de Atrás Página129

130 Oprima nuevamente F9, y Fragmentos de código, Luego dentro de Navegación de línea de tiempo seleccione la opción Hacer clic para ir a la escena anterior y reproducirlo De esta forma tenemos nuestras tres escenas listas para reproducir. Página130

131 Cómo abrir un URL desde flash Cree un nuevo documento de Action Script y coloque un título, realice un rectángulo y coloque el URL que desea que se abra. Ahora seleccione el botón donde el usuario debe picar para que se abra el URL y presione F9. Dentro de las opciones seleccione Acciones y luego Hacer clic para ir a página Web Página131

132 Aparece la siguiente opción si antes no lo ha convertido en clic de película en cuyo caso haga clic en Aceptar. Aparece el siguiente código Por defecto aparece el URL de adobe.com Cambien este URL por el que desea que abra y cierre la ventana Página132

133 Cierre la ventana y ejecute el programa Página133

134 Como abrir un Archivo desde flash Cree un botón y guárdelo como un clic de película Luego en la parte de propiedades coloque un nombre a la instancia, en este caso abrir Página134

135 Luego ubíquese en el fotograma1 y presione F9 En el cuadro de código, escriba las siguientes líneas abrir.addeventlistener(mouseevent.click,abre); function abre(e:mouseevent):void { navigatetourl(new URLRequest("E:/Maritza/LaSalle/Guia6/Archivo.pdf"), "_blank"); } Lo verá de la siguiente forma Tenga en cuenta que para este caso abrir es el nombre de la instancia y la ruta del archivo debe ir con slash /. Página135

136 Guarde el proyecto y ejecútelo Oprima el botón de ir al archivo. El archivo se abre y lo verá de la siguiente forma Página136

137 Publicación y Empaquetamiento Publicación La publicación consiste en convertir nuestro documento de flash en película con los siguientes tipos de formatos de salida de archivo según su necesidad. Flash (.swf) HTML (.html) Imagen GIF (.gif) Imagen JPEG (.jpg) Imagen PNG (.png) Proyector Windows (.exe) Proyectar Macintosh Nota: Con el fin de manejar un estándar en el tamaño de los archivos de flash es importante que tenga en cuenta que las medidas para las películas es: Ancho 960 por Alto de 600 px Una vez tiene completamente terminada la película en Flash, se puede realizar la publicación o generar el archivo de salida. Por ejemplo tenemos estas tres escenas sencillas. Escena No. 1 Página137

138 Escena No. 2 Escena No. 3 Página138

139 Ahora vaya al menú de Archivo y seleccione la opción Configuración de publicación Nos aparece esta pantalla donde se encuentran los diferentes tipos de archivos de salida, para nuestro ejemplo se seleccionan los tipos de archivos.swf y.html y luego se hace clic en Aceptar. Página139

140 Puede realizar una vista previa para verificar como quedara finalmente su película seleccionando en el Menu Archivo, Opción Vista previa de publicación y HTML tal como se encuentra la siguiente figura. Página140

141 El archivo en este caso se ejecuta en Internet explorer o en el navegador que tenga predeterminado. Observe que su película se puede ver en la parte izquierda de la pantalla y adicionalmente debe Permitir contenido bloqueado. Así va a ver su película, en la parte izquierda de su navegador Página141

142 Para publicar definitivamente la película vaya al menú Archivo y seleccione la opción Publicar. Luego ubique los archivos en la misma carpeta donde tiene el archivo FLV o en la carpeta donde viene trabajando su proyecto. Página142

143 Estos son los archivos que vamos a requerir para realizar nuestro OVA. Pero OJO. Con el objetivo de mejorar la visibilidad de la película en la pantalla de nuestro navegador debemos realizar las siguientes acciones. De la lista Seleccione el archivo.html y haga clic secundario sobre el mismo. Luego escoja la opción Abrir con y luego Adobe Dreamweaver Observe que en la pantalla de Dreamweaver aparece el archivo en la parte izquierda y nuestro objetivo es colocarla en la mitad de la pantalla. Página143

144 En la parte superior de la pantalla seleccione la opción de Código El cursor queda ubicado en la instrucción que comienza con <div, vaya al final de la línea y haga un enter. Página144

145 Luego coloque la siguiente instrucción <p aling center>. Guarde, cierre y ejecute el archivo html desde el explorador de windows. Observará la película en la mitad de la pantalla. Página145

146 Página146

147 EMPAQUETAMIENTO Para esta parte final de la guía y del curso vamos a trabajar con un software adicional que se llama Reload Editor. Para empezar es importante tener los insumos para crear el objeto virtual. En este ejemplo tenemos todos estos en una sola carpeta llamada OVA_EJEMPLO_AVANZADO. Y aquí se tienen todos los archivos que se van a manejar para realizar el ova. Para las actividades de evaluación se ha escogido HOTPOTATOES ya que hacer las evaluaciones, autoevaluaciones y examen final con Flash requiere de una programación avanzada y para efectos del curso, este no está contemplado. Entonces se realizaron varias actividades como por ejemplo, un crucigrama. Página147

148 Ahora lo ven de esa manera pero al publicarlo Ustedes deberán darle el aspecto que desean por medio de las siguientes propiedades. Y luego si publicar con la opción que ven ustedes en la siguiente imagen Página148

149 Para ver como quedo esta actividad se al guardar se da la opción de mostrar en el navegador y aparece de la siguiente forma. Y de la misma forma se hace con las diferentes actividades que se tengan en Hotpotatoes. Ahora bien, se preparó una segunda evaluación de tipo Scorm y se debe tener en cuenta que si se desea que esta impacte en el libro de calificaciones se debe realizar un configuración especial. Veamos: Vamos a abrir la actividad llamada Examen Página149

150 Ahora vemos la evaluación Si se desea que la evaluación impacte el libro de calificaciones, en las propiedades debe colocar la siguiente configuración. En Propiedades, en la Pestaña Otros, se debe marcar la opción, Include SCORM 1.2 functions. Recuerde realizar el resto de la configuración de la evaluación. Luego publíquelo y guarde la actividad. NOTA: Para la creación de su OVA recuerde que puede el número de evaluaciones que desee. Página150

151 Dentro de la carpeta de Insumos también se tiene: La carpeta de ANALISIS Y DISEÑO Dentro de esta carpeta se tienen dos Archivos que se han venido trabajando, el primero es el formato que permite mostrar la fase de análisis y diseño con sus diferentes elementos de contextualización. Página151

152 El otro archivo es el Story_board: Que básicamente es un formato que se llena a mano con los pasos que debe tener cada una de las escenas que desea realizar en su OVA. Otra carpeta que se tiene son las de IMÁGENES e INSUMOS. En estas se guardan todas las imágenes que se utilizan para realizar el OVA Y INSUMOS, se guardan todos los archivos de configuración, los archivos de donde tomamos la información, la introducción, y en fin todos los archivos que utilizamos para la realización de nuestro OVA. Página152

153 También se tiene la carpeta de VIDEOS, que son los que utilizaremos dentro de nuestras películas FLASH. Aquí los videos si se van a colocar, no se van a embeber. También se tiene tres películas de flash con extensión FLA Página153

154 Vamos a ver el archivo ovaavanzado, que está compuesto de 4 escenas. Primera Escena Esta escena tiene una programación y queda en la capa llamada Actions, si quiere saber cual es la programación haga F9 y aparecerá el código de esta. Página154

155 Segunda Escena: Esta escena contiene un link a un sitio web y unos botones de navegación que están programados para ir a las diferentes escenas. Tercera Escena: Esta cuenta con unos botones de navegación y cuando se escoge cada uno de los tres objetivos específicos estos van apareciendo en el rectángulo que está en color azul degradado. Página155

156 Escena Cuatro. Es una escena bastante elaborada con muchas acciones, entre ellas, se muestran unos videos, recuerde hacer la programación sobre los videos para que no tenga inconvenientes al reproducirlos. Dentro de la cuarta escena en este lugar se ha determinado ir a la actividad que se llama autoevaluación por lo que la programación del botón se muestra a continuación, en esta imagen se muestra una ruta absoluta al archivo ya que se está ejecutando dentro de este equipo. Sin embargo para realizar la publicación en un LMS como Moodle se debe colocar la ruta relativa como se muestra en la siguiente imagen. Página156

157 Ahora vamos a ver la siguiente película que se llama OvaAvanzado2 Se tiene una Escena donde se quiere abrir un artículo, recuerde tener dentro de su programación rutas relativas con el fin de no tener inconvenientes de publicación. Adicionalmente esta escena tiene un botón de navegación donde se quiere ir la actividad de Evaluación, este botón debe programarse también como una ruta relativa. Página157

158 Para finalizar tenemos en la tercer película solo una Escena de finalización. Una vez se tienen todas películas sin ninguna clase de inconveniente, se realiza la publicación como se muestra en la parte inicial de esta guía. Recuerde que siempre se requieren los archivos.swf y.html. Recuerde que lo archivos quedan en la misma carpeta donde se estan trabajando los archivos iniciales. Ahora realice una copia de los archivos originales y consérvelos para trabajo y con la otra copia realice un filtro y borre todos los archivos que no requiere y deje solo los archivos de publicación como las películas y de las actividades solo los archivos html. Página158

159 Y otra opción que se tiene para manejar los archivos en HotPotatoes y html es colocar un link o botón desde Hotpotatoes que vaya a la próxima escena de flash. Veamos cómo se hace. Ubique el archivo Autoevaluación.htm y ábralo con Dreamweaver. Dreamweaver tiene los botones Código, Dividir y Diseño, normalmente se abren los archivos en modo de diseño. Página159

160 En código aparece toda la programación del archivo que allí se encuentra sin saber nada de programación. En diseño vaya a la parte final de la actividad y coloque el cursor donde aparece el recuadro rojo de la siguiente imagen. En esta parte se colocara un link para que luego vaya al siguiente Ova. Para esto, una vez este ubicado en este sitio, vaya a la pestaña de código y donde se encuentre relampagueando el cursor haga un enter y coloque la siguiente línea de código. <input type="button" value="colocar nombre de a donde va" onclick="location.href='ruta para donde va'" /> Y cambie los valores correspondientes. Como aparece en la siguiente imagen. Página160

161 Como veníamos viendo anteriormente, en la nueva carpeta dejo únicamente los archivos que requiero para hacer el OVA, estos archivos son: Ahora se abre una sesión del programa Reload Editor. Una vez se abre la aplicación, vaya a File New ADL SCORM 1.2 Package Página161

162 Aparece ahora la siguiente opción que es ubicar la carpeta donde se encuentran todos los archivos, en este caso es PARADIGMA. Luego aparece la siguiente ventana que es donde comenzaremos a realizar el empaquetamiento de nuestro OVA Página162

163 Lo primero que se hace es Adicionar una organización, se realiza haciendo clic derecho sobre la organización y seleccionamos Add Organization Página163

164 En la parte inferior de la pantalla cambie el nombre de la organización, en nuestro caso será PARADIGMA TIC Página164

165 Ahora comienzo a pasar cada uno de los archivos hacia la organización PARADIGMA TIC, recuerde que este es el orden que va a tener el OVA. En este caso el primer archivo será OvaAvanzodo y luego van los demás archivos de acuerdo a la jerarquía que estos tienen. Página165

166 Recuerden que si una de las actividades impactará en el libro de calificaciones debe seleccionar la actividad e ir a Recursos, ubicar el archivo Examen y en la parte final de la pantalla cambien el tipo de archivo. Página166

167 Actualmente Usted encuentra el atributo SCORM Type como asset, colóquelo como sco y de esta forma impacta el libro de calificaciones Para finalizar se colocan los metadatos, esta información se despliega de la siguiente forma. Haga clic derecho sobre la organización y seleccione Adicionar Metadatos. Página167

168 Luego aparecerá la ficha de metadatos, para diligenciarla se debe, hacer clic derecho sobre la ficha y Editar metadatos Aparase toda la ficha para ser diligenciada. Página168

169 Ahora se crea el archivo.zip, para esto vaya a File Luego aparece un mensaje anunciando que le informa que ha modificado y que si quiere guardar los cambios, y se hace clic en SI Página169

170 Luego aparece una ventana donde se le debe dar el nombre al paquete y guardar. Puede demorarse un momento mientras genera todo el paquete Luego de esto ya puede cerrar la aplicación. Para probar el funcionamiento del paquete, abra el programa ReloadScormPlayer Ahora vaya a File y seleccione Import SCORM Package Página170

171 Luego se abre la ventana que me permite buscar el paquete y hago clic en abrir Ahora coloque un nombre como en este caso PRUEBA y comenzara a cargar todos los archivos Aparecerán luego los archivos correspondientes al proyecto. Luego haga clic en la flecha roja para comenzar a ejecutar el OVA Página171