Sistema de Gestión

de la Calidad

Servicio Nacional de Aprendizaje – SENA

Regional Quindío

Centro Agroindustrial UNIDAD 4. INTERACCIONES Y ANIMACIÓN

Fecha: Junio de

2012

Versión 2.0

Página 1 de 10

Anexo D 1. IDENTIFICACIÓN DE LA GUÍA DE APRENDIZAJE

Competencia: Resultados de Aprendizaje Tiempo Estimado de Ejecución

220501046 Aplicar herramientas ofimáticas, redes sociales y colaborativas de acuerdo con el proyecto a desarrollar.

220501046/04 Utilizar las diferentes técnicas de animación para generar un producto dinámico y visualmente atractivo para el receptor.

10 horas

2. PRESENTACIÓN

Bienvenido(a) a la unidad 4 del curso ADOBE FLASH PROFESSIONAL CS5.5. En esta unidad de Adobe Flash Professional CS5.5, el aprendiz obtendrá conocimiento para crear códigos y animaciones. La actividad preliminar al desarrollo de la formación requiere de la revisión detenida de los documentos de estudio que se encuentran en Materiales del curso Unidad 4 “INTERACCIONES Y ANIMACIÓN”. La realización de las respectivas consultas en internet, presentaciones interactivas y adicionalmente descargar el material que servirá de guía en el proceso.

3. ACTIVIDADES Y ESTRATEGIAS DE APRENDIZAJE

ACTIVIDAD DE APRENDIZAJE: Desarrollo de una animación básica.

Descripción:

Ha comenzado el esperado evento de la temporada, la primera feria de animación a través de Adobe Flash Profesional CS5.5 para niños que cursen el pre-kinder y kínder. Importantes compañías de nivel internacional vendrán a seleccionar el mejor desarrollador de animación preescolar. La animación debe contener un paisaje con:

Un sol con una interpolación de movimiento. Al hacer clic con el ratón, este debe ampliar su tamaño y desplazarse a la derecha.

Dos nubes con una interpolación de forma, estas deben cambiar constantemente sus

Sistema de Gestión

de la Calidad

Servicio Nacional de Aprendizaje – SENA

Regional Quindío

Centro Agroindustrial UNIDAD 4. INTERACCIONES Y ANIMACIÓN

Fecha: Junio de

2012

Versión 2.0

Página 2 de 10

aspectos.

Un pingüino desplazándose con una animación fotograma a fotograma.

Debe organizar los elementos en carpetas diferentes.

La decoración adicional es criterio personal e individual.

También debe organizar cada uno de los elementos en carpetas diferentes con respecto a la biblioteca del entorno. Envié los archivos (.fla y .swf) a su tutor, en este caso, el director del concurso. Para realizar la actividad propuesta para la Unidad 4 usted debe primero: - Leer documento guía de la Unidad 4 - Ver los videos explicativos de la Unidad 4 - Leer el material Interactivo de la Unidad 4 - Entregar: Documentos solicitados en donde se evidencie el proceso de aprendizaje del desarrollo de una animación básica. Envíe los documentos por medio del enlace llamado “Actividad 4: Desarrollo de una animación básica”, ubicado en el botón Actividades Unidad 4. NOTA: Si al momento de enviar un archivo (Actividad), el sistema genera el error: "Archivo Inválido", debe tener en cuenta que este error, se debe a que: En el momento que está adjuntando el archivo lo tiene abierto, ciérrelo y pruebe nuevamente adjuntándolo en Adjuntar archivo, Examinar mi equipo.

Ambiente(s) requerido:

Ambiente de navegación (computador y conexión a Internet)

Instalación del software: Adobe Reader y Adobe Flash Player.

Instalación Adobe Flash Professional CS5.5

Material (es) requerido:

Material de descarga (Versión imprimible) Unidad 4.

Documentos de Apoyo Unidad 4.

Material interactivo Unidad 4.

Fuentes Bibliográficas relacionadas con el tema.

Sistema de Gestión

de la Calidad

Servicio Nacional de Aprendizaje – SENA

Regional Quindío

Centro Agroindustrial UNIDAD 4. INTERACCIONES Y ANIMACIÓN

Fecha: Junio de

2012

Versión 2.0

Página 3 de 10

ACTIVIDAD DE APRENDIZAJE : Actividad Interactiva

Descripción: En esta actividad utilizará un simulador para realizar una serie de acciones a la animación de un videoclip, todo consistirá en activar la animación por medio de la operación asignada a un botón. En el escenario del documento, encontrará un recuadro negro, este será el clip de película en el que se aplicarán las acciones, junto con el elemento (botón). Se deberá por medio del panel de fragmento de código, detener el clip de película en el fotograma inicial y agregar al botón el código necesario para iniciar la animación del clip de película cuando este sea presionado. Recuerde que si falla cuatro veces perderá la actividad, también puede recurrir a la guía que se le dará por medio de un texto en la parte inferior de la actividad • Realizar el juego interactivo que se encuentra en la carpeta Unidad 4.

Ambiente(s) requerido: Ambiente de navegación (computador y conexión a Internet)

Material (es) requerido:

Material de descarga (Versión imprimible) de la Unidad 4.

Documentos de Apoyo Unidad 4.

Material interactivo Unidad 4.

Fuentes Bibliográficas relacionadas con el tema.

ACTIVIDAD DE APRENDIZAJE: Actividad Colaborativa

Descripción En un grupo de 3 aprendices desarrollar una actividad colaborativa que consiste en realizar un banner de un carrito de mercado que se desplaza y a su vez le van añadiendo productos. Esta actividad estará dividida en tres partes:

1. La primera persona deberá crear un archivo .fla, importar la imagen del carrito de

compra y programarle una interpolación de movimiento.

2. La segunda persona recibirá este archivo, importara imágenes de productos y les

programará interpolación de movimiento de tal manera que estos productos se

Sistema de Gestión

de la Calidad

Servicio Nacional de Aprendizaje – SENA

Regional Quindío

Centro Agroindustrial UNIDAD 4. INTERACCIONES Y ANIMACIÓN

Fecha: Junio de

2012

Versión 2.0

Página 4 de 10

vean como si se añadieran al carrito.

3. La tercera persona deberá agregar un texto TLF con un título para la animación

que le envíe la segunda persona. Este texto debe ser visible en el transcurso de la

animación, con movimiento y llamativo al usuario.

Cabe recordar que cada uno de los aprendices debe enviar la actividad: el documento .fla y el documento .swf, en donde se visualice el Banner elaborado por los tres. Para realizar la actividad propuesta para la unidad 4 usted debe primero: - Leer documento guía de la Unidad 4. - Ver los videos explicativos de la Unidad 4. Entregar: Documento en donde se evidencie el proceso de aprendizaje a través de un banner de un carrito de mercado que se desplaza. Envíe el documento por medio del enlace llamado “Actividad 4: Actividad Colaborativa” ubicado en el botón Actividades Unidad 4. NOTA: Si al momento de enviar un archivo (Actividad), el sistema genera el error: "Archivo Inválido", debe tener en cuenta que este error, se debe a que: - En el momento que está adjuntando el archivo lo tiene abierto, ciérrelo y pruebe nuevamente adjuntándolo en Adjuntar archivo, Examinar mi equipo.

Ambiente(s) requerido:

Ambiente de navegación (computador y conexión a Internet)

Instalación del software: Adobe Reader y Adobe Flash Player.

Instalación Adobe Flash Professional CS5.5

Material (es) requerido:

Material de descarga (Versión imprimible) Unidad 4.

Documentos de Apoyo Unidad 4.

Material interactivo Unidad 4.

Fuentes Bibliográficas relacionadas con el tema.

Sistema de Gestión

de la Calidad

Servicio Nacional de Aprendizaje – SENA

Regional Quindío

Centro Agroindustrial UNIDAD 4. INTERACCIONES Y ANIMACIÓN

Fecha: Junio de

2012

Versión 2.0

Página 5 de 10

4. EVIDENCIAS Y EVALUACIÓN

Descripción de la evidencia: 1. Realización de la Actividad “Desarrollo de una animación básica”

2. Interacción y realización de la Actividad Interactiva de la Unidad 4.

3. Trabajo y realización en grupo de la Actividad Colaborativa.

Entregable: Las actividades correspondientes a la Unidad 4 son las siguientes:

1. Actividad “Desarrollo de una animación básica” Unidad 4 resuelta.

2. Actividad Interactiva de la Unidad. 3. Actividad Colaborativa.

Forma de entrega: Las actividades deben entregarse de la siguiente forma:

1. La actividad “Desarrollo de una animación básica” Unidad 4 debe entregarse en formato .fla y .swf a través de los pasos referenciados en la Unidad 4 del botón Actividades.

2. Actividad Interactiva de la Unidad 4 debe realizarse en línea.

3. La Actividad “Actividad Colaborativa” Unidad 4 debe entregarse en formato .fla y .swf a través de los pasos referenciados en la Unidad 4 del botón Actividades.

Criterios de Evaluación: Realiza juegos y/o aplicaciones interactivas teniendo en cuenta la necesidad del cliente y el proyecto a desarrollar.

Diseña una presentación interactiva sobre algún producto o servicio de acuerdo a los requerimientos planteados.

Organiza los objetos de manera ordenada y clasificada en la biblioteca.

Expone los conocimientos aprendidos a través de un proceso interactivo.

Logra interactuar y trabajar en equipo en pro de la realización de un proyecto establecido.

Sistema de Gestión

de la Calidad

Servicio Nacional de Aprendizaje – SENA

Regional Quindío

Centro Agroindustrial UNIDAD 4. INTERACCIONES Y ANIMACIÓN

Fecha: Junio de

2012

Versión 2.0

Página 6 de 10

5. GLOSARIO ActionScript: Es un lenguaje de programación utilizado en aplicaciones web animadas y realizadas con Flash. Es un lenguaje orientado a objetos. Animación: Una animación es una serie de imágenes consecutivas, dibujadas o fotográficas, que, bajo ciertas condiciones, reproducen la sensación de movimiento. Las imágenes pueden obtenerse sobre una película y proyectarse, como en los dibujos animados, o pegarse en las páginas de un libro y observarse en rápida frecuencia. Aplicativos: Cualquier programa que corra en un sistema operativo y que haga una función específica para un usuario. Por ejemplo, procesadores de palabras, bases de datos, agendas electrónicas, etc. Atributos de trazo: El atributo de trazo básico son líneas sencillas. Es posible cambiar el grosor y color del trazo. Se puede cambiar la forma de terminar el extremo de un trazo y de unirlo a otros trazos. Botón: Los símbolos de tipo Botón son los que aportan la mayor parte de la interactividad de las películas Flash con aquél que la esté visualizando. Un botón, en Flash, es igual que cualquier botón de cualquier entorno informático, sea web o cualquier otro. Son elementos que se prestan a que el usuario los presione, desencadenando al hacerlo una serie de acciones. También es habitual ver como este tipo de elementos reaccionan cuando se les pasa el ratón por encima o cuando se les está pulsando, por ejemplo. Clip de película: Un Clip de Película o simplemente Clip, es una película en sí misma, que está incluida dentro de otra película y, a su vez puede contener también películas insertadas en esta. Código fuente: Texto escrito en un lenguaje de programación específico y que puede ser leído por un programador. Debe traducirse a lenguaje máquina para que pueda ser ejecutado por la computadora o a bytecode para que pueda ser ejecutado por un intérprete. Este proceso se denomina compilación. Acceder al código fuente de un programa significa acceder a los algoritmos desarrollados por sus creadores. Es la única manera de modificar eficaz y eficientemente un programa. Colores planos: Es el resultado de aplicar las tintas sobre la superficie de forma continua, con la misma intensidad, sin gradaciones ni otros efectos de claroscuro. Comandos: Instrucción que se le da a un Sistema Operativo para que éste realice una determinada tarea. Cuadro a cuadro: Es uno de los tipos de movimientos que se pueden hacer con Flash (cuadro a cuadro e interpolación de movimiento). Este tipo de animación es con la se realizan las caricaturas o dibujos animados, ya ven que para esto realizan un dibujo, y después realizan el mismo dibujo pero un poco diferente, y así sucesivamente, después los hacen pasar todos muy rápido, y esto nos da una sensación de movimiento, bueno pues esto es lo que se hace en flash para hacer una animación cuadro a cuadro, solo que aquí no tenemos que volver a dibujar la misma imagen varias veces, si no, que podemos trabajar con la misma, solo que la iremos modificando poco a poco.

Sistema de Gestión

de la Calidad

Servicio Nacional de Aprendizaje – SENA

Regional Quindío

Centro Agroindustrial UNIDAD 4. INTERACCIONES Y ANIMACIÓN

Fecha: Junio de

2012

Versión 2.0

Página 7 de 10

Escenario: Es el gran rectángulo blanco que se ubica dentro del área de trabajo de Flash. Es el lugar donde se compone o diagrama el contenido de cada uno de los fotogramas que constituyen la película. Dicho contenido se crea ya sea al incluir objetos sobre él con las Herramientas (Tools) o importando imágenes o vídeo. Exportar: Consiste en transferir datos desde un programa hacia otro, el traslado puede ser directo o a través de archivos compatibles para ambos programas. El programa emisor exporta los datos y el programa receptor los importa. Extensiones: Es una cadena de caracteres anexadas al final de un nombre de archivo separados por un punto. Las extensiones suelen determinar el tipo de formato del archivo al que pertenecen y así poder ser reconocido por el sistema operativo o por el programa que lo ejecuta (además de poder ser reconocido por los propios usuarios). Flash Player: El reproductor Flash Player ejecuta archivos SWF, que son creados por la aplicación oficial Adobe Flash, u otras aplicaciones y herramientas. Flash Player no sólo ejecuta gráficos y animaciones vectorizadas e imágenes rasterizadas, sino que también puede ejecutar videos (FLV) y programación en Action Script. Forma poligonal: Todos los objetos tienen forma poligonal. Algunos, además, tienen forma poligonal regular. Un polígono regular es aquel que tiene todos sus lados y todos sus ángulos iguales. Los elementos básicos de un polígono son los vértices, los ángulos, los lados y las diagonales. Formato de archivo: Se denomina formato a la extensión con la que se forman, crean y almacenan cualquier tipo de archivo. Cada programa guarda sus ficheros con un formato independiente propio, aunque también permiten utilizar otros. En Power Point es posible insertar un gran número de formatos de archivo de gráficos en una presentación directamente o mediante el uso de filtros de gráficos. Existen muchos formatos de archivo, algunos de ellos; Metarchivo mejorado (.emf), Photographic Experts Group (.jpg), Portable Network Graphics (.png), Mapa de bits de Windows (.bmp, .rle, .dib), Metarchivo de Windows (.wmf). Fotograma: En cinematografía, se llama fotograma a cada una de las fotografías que forman una película. Esta definición es muy parecida en Flash. Icono: En informática y en entornos gráficos, la palabra "icono" se usa para nombrar una pequeña imagen gráfica mostrada en la pantalla que representa un objeto manipulable por el usuario. Por ejemplo, una papelera representa un comando para borrar textos o archivos no deseados. Los iconos permiten controlar ciertas funciones de los ordenadores sin tener que recordar comandos ni escribirlos con el teclado. Son un elemento importante de las interfaces gráficas de usuario, ya que facilitan el manejo de las distintas funciones y programas. Ilustrar: Utilizar las herramientas adecuadas para dibujar un objeto en Flash. Importar: Traer de otra parte algo. La función Importar se utiliza para incorporar a una aplicación objetos, documentos u otro tipo de archivos que fueron creados en otra aplicación, o que pertenecen a versiones antiguas de la misma aplicación. Interactividad: La interactividad solamente se puede dar en medios de comunicación asincrónicos y no-lineales. También en la interactividad el receptor decide o escoge qué

Sistema de Gestión

de la Calidad

Servicio Nacional de Aprendizaje – SENA

Regional Quindío

Centro Agroindustrial UNIDAD 4. INTERACCIONES Y ANIMACIÓN

Fecha: Junio de

2012

Versión 2.0

Página 8 de 10

parte del mensaje le interesa más, es decir controla el mensaje. Y por ende no es posible la información no-lineal sin interactividad. Interface: Zona de contacto o conexión entre dos componentes de "hardware"; entre dos aplicaciones; o entre un usuario y una aplicación. Apariencia externa de una aplicación informática. Interpolación: La interpolación es el proceso de calcular valores numéricos desconocidos a partir de otros ya conocidos mediante la aplicación de algoritmos concretos. Hay diversos tipos de interpolación que producen resultados muy diversos. Bien aplicada, la interpolación es una herramienta de trabajo muy útil. Los fabricantes de programas de procesamiento de imagen procuran resaltar siempre la calidad de sus procesos de interpolación en comparación con los de la competencia. Básicamente, existen tres procedimientos de interpolación: - Interpolación por aproximación o por vecindad, basado en promediar los valores de los 2 píxeles vecinos. - Interpolación bilineal, que se basa en hacer el promedio de los 4 píxeles vecinos. - Interpolación bicúbica, basado en promediar teniendo en cuenta los valores de los 16 píxeles vecinos. La librería: Son bibliotecas almacenadas en un directorio de flash para ser compartidas por cualquier documento .fla abierto. Las bibliotecas comunes, permiten disponer de colecciones de objetos que usamos comúnmente en el desarrollo de nuestras aplicaciones (sonidos, botones, gráficos, clips de película, etc.) Línea de tiempo: La línea de tiempo organiza y controla el contenido del documento a través del tiempo en capas y fotogramas. Al igual que en un largometraje, los documentos Flash dividen el tiempo en fotogramas. Las capas son como varias bandas de película apiladas unas encima de otras, cada una de las cuales contiene una imagen diferente que aparece en el escenario. Los componentes principales de la línea de tiempo son las capas, los fotogramas y la cabeza lectora. Logo símbolo: Es el tipo de marca integrado por un componente escrito y por un distintivo icónico. Mapa de bits: Los archivos de las imágenes se guardan normalmente en forma de mapa de bits o mosaico de píxeles. Cada píxel guarda la información de color de la parte de imagen que ocupa. Este tipo de imágenes son las que crean los escáneres y las cámaras digitales. Esta clase de archivos ocupan mucha más memoria que las imágenes vectoriales. El principal inconveniente que presentan esta clase de archivos es el de la ampliación, cuando un archivo se amplía mucho, se distorsiona la imagen mostrándose el mosaico "los píxeles" y una degradación en los colores llegando al efecto pixelación (definido en el apartado de imagen digital), debido a la deformación de la fotografía. Paneles: Los paneles ayudan a modificar aspectos de elementos u objetos seleccionados en el documento. Con los paneles se puede trabajar en fotogramas, capas, símbolos y otros. Los paneles pueden arrastrarse por separado, por lo que es posible agrupar los paneles en función de las necesidades propias. Persistencia de la visión: El ojo humano presenta un fenómeno muy interesante, el de la persistencia. Si en un instante se coloca un objeto frente a los ojos y después de cierto intervalo se retira de repente, el ojo tiene la sensación de seguir viendo el objeto durante un

Sistema de Gestión

de la Calidad

Servicio Nacional de Aprendizaje – SENA

Regional Quindío

Centro Agroindustrial UNIDAD 4. INTERACCIONES Y ANIMACIÓN

Fecha: Junio de

2012

Versión 2.0

Página 9 de 10

tiempo muy corto, aun cuando éste ya no se encuentre frente al ojo; es decir, la visión del objeto persiste. Este fenómeno se debe, al parecer, a que al llegar la luz a la retina y enviarse la correspondiente señal nerviosa al cerebro, lleva cierto tiempo para que la señal se procese, por así decirlo. El cerebro retiene la impresión de iluminación durante un intervalo de alrededor de 0.1 seg después de que la fuente de luz se ha retirado. Este fenómeno implica lo siguiente: supóngase que ocurren dos sucesos alternadamente en un intervalo de tiempo menor a 0.1 seg, el ojo percibe el primer suceso, pero al ocurrir el segundo, el efecto del primero todavía persiste en el cerebro, por lo que no se da cuenta de que el segundo suceso ocurrió. Este hecho se ha aplicado para crear ilusiones de movimientos aparentes como el cinematógrafo y la televisión. La base de estas ilusiones reside en el hecho de que si se presentan dos imágenes fijas separadas entre sí en por lo menos 0.1 seg entonces el ojo tiene la sensación de que ocurre movimiento. De hecho, cuando al sistema visual se le presenta rápidamente una serie de imágenes fijas, éstas no se ven de manera discontinua; resulta que el cerebro "rellena", por así decirlo, las lagunas entre las imágenes e imagina que está viendo un objeto en movimiento continuo. Pixel: Píxel, en informática, es la abreviatura fonética del concepto inglés "Picture Element" (elemento gráfico). Se trata de un punto en una rejilla rectilínea de miles de puntos tratados individualmente, para formar una imagen en una pantalla o en la impresora. Las fotografías digitales están compuestas de miles o millones de ellos. Los píxeles son los elementos constitutivos de las imágenes digitales. Pixelación: En la fotografía tradicional se producía el famoso efecto de granulación al realizar una ampliación en la fotografía, en cambio en la imagen digital este efecto es substituido por el de pixelación. Si reproducimos una imagen con baja resolución quiere decir que el píxel ocupa más espacio y deforma la imagen con el efecto de pixelación, (píxeles de gran tamaño) aportando poca definición a la imagen. En cambio si la resolución en ppp, es más alta, existe más detalle y más definición. Las imágenes con una resolución más alta reproducen más detalle, que las imágenes con resolución más baja. Si se usa una resolución demasiado baja para una imagen impresa se produce entonces el fenómeno de la pixelación, con píxeles de gran tamaño que dan a la imagen un aspecto de poca definición. Plug-in: Programas que se agregan a un navegador del WWW los cuales realizan funciones determinadas. Producen la visualización de archivos multimedia y dan soporte a archivos gráficos no estándares con el visualizador Símbolos: Los símbolos provienen de objetos que hemos creado utilizando las herramientas que nos proporciona Flash. Estos objetos al ser transformados en símbolos, son incluidos en una biblioteca en el momento en que son creados, lo que permite que sean utilizados en varias ocasiones, ya sea en la misma o en otra película. 6. BIBLIOGRAFÍA Material realizado por el grupo de rediseño del Centro Agroindustrial Regional Quindío SENA (Mayo de 2012)

Sistema de Gestión

de la Calidad

Servicio Nacional de Aprendizaje – SENA

Regional Quindío

Centro Agroindustrial UNIDAD 4. INTERACCIONES Y ANIMACIÓN

Fecha: Junio de

2012

Versión 2.0

Página 10 de 10

CONTROL DEL DOCUMENTO

Nombre Cargo Dependencia Fecha

Autores

Rachman Bustillo Martínez

Comunicador Social

Centro Agroindustrial. Regional Quindío

Abril 20 de 2012

Nidia Liseth Ospina Quintero

Ingeniero de Sistemas

Centro Agroindustrial. Regional Quindío

Abril 20 de 2012

Carlos Humberto Ramírez Garzón

Ingeniero de Sistemas

Centro Agroindustrial. Regional Quindío

Abril 20 de 2012