UNIVERSIDAD CNCI 1

ÍNDICE
SEMANA 1 SEMANA 3
Tema 11. Aplicación de color: relleno y Tema 16. Animación de texto.
trazo. Pg. 39
Pg. 1
Actividad 2.
Tema 12. Trabajar con reglas y guías. Pg. 42
Pg. 13
Actividad 3.
Tema 13. Aplicación de efectos. Pg. 43
Pg. 18

SEMANA 2 SEMANA 4
Tema 14. Organizar y transformar Tema 17. Añadir audio.
elementos. Pg. 44
Pg. 23
Tema 18. Crear un botón.
Tema 15. Uso de Edge Web Fonts. Pg. 49
Pg. 33
Tema 19. Configurar la publicación.
Actividad 1. Pg. 55
Pg. 38
Actividad 4.
Pg. 60

2 UNIVERSIDAD CNCI
Tema 11.
Aplicación de color: relleno y trazo.

Antes de aprender cómo aplicar color, degradado o trazo a una figura o texto explicaremos los
modelos de color en los que se pueden trabajar en Adobe Edge Animate que son el modelo RGB,
el modelo Hexadecimal y el modelo HSLa.

Modelo RGB
Un amplio porcentaje del espectro visible se puede representar combinando luz roja, verde y
azul en proporciones e intensidades diferentes.

El modelo RGB son los tres colores primarios aditivos: Rojo, Verde y Azul.

Se denominan colores aditivos porque el blanco se crea mezclando rojo, verde y azul, toda la
luz se refleja y es captada por el ojo. Los colores aditivos se usan en iluminación, televisión y
monitores de computadoras.

R (RED)

B (BLUE) G (GREEN)

SEMANA 1 DIA 1
UNIVERSIDAD CNCI 1
Tema 11.
Aplicación de color: relleno y trazo.

Modelo Hexadecimal
Los colores en HTML están representados por un número hexadecimal. Estos colores están
compuestos por una almohadilla (#), además de seis valores del 0 al 9 y de la A a la F.

Existen 216 colores seguros usados en la web, pero también se pueden hacer otros colores
modificando los valores de cada color seguro.

#330000 #330033 #330066 #330099 #3300CC #3300FF

#333300 #333333 #333366 #333399 #3333CC #3333FF

#336600 #336633 #336666 #336699 #3366CC #3366FF

#339900 #339933 #339966 #339999 #3399CC #3399FF

#33CC00 #33CC33 #33CC66 #33CC99 #33CCCC #33CCFF

#33FF00 #33FF33 #33FF66 #33FF99 #33FFCC #33FFFF

#66FF00 #66FF33 #66FF66 #66FF99 #66FFCC #66FFFF

#66CC00 #66CC33 #66CC66 #66CC99 #66CCCC #66CCFF

#669900 #669933 #669966 #669999 #6699CC #6699FF

#666600 #666633 #666666 #666699 #6666CC #6666CC

#663300 #663333 #663366 #663399 #6633CC #6633FF

#660000 #660033 #660066 #660099 #6600CC #6600FF

#FF0000 #FF0033 #FF0066 #FF0099 #FF00CC #FF00CC

#FF3300 #FF3333 #FF3366 #FF3399 #FF3399 #FF33FF

#FF6600 #FF6633 #FF6666 #FF6699 #FF66CC #FF66FF

#FF9900 #FF9933 #FF9966 #FF9999 #FF99CC #FF99FF

#FFCC00 #FFCC33 #FFCC66 #FFCC99 #FFCCCC #FFCCFF

#FFFF00 #FFFF33 #FFFF66 #FFFF99 #FFFFCC #FFFFFF

SEMANA 1 DIA 1
2 UNIVERSIDAD CNCI
Tema 11.
Aplicación de color: relleno y trazo.

#0000FF #0000CC #000099 #000066 #000033 #000000

#0033FF #0033CC #003399 #003366 #003333 #003300

#0066FF #0066CC #006699 #006666 #006633 #006600

#0099FF #0099CC #009999 #009966 #009933 #009900

#00CCFF #00CCCC #00CC99 #00CC66 #00CC33 #00CC00

#00FFFF #00FFCC #00FF99 #00FF66 #00FF33 #00FF00

#99FFFF #99FFCC #99FF99 #99FF66 #99FF33 #99FF00

#99CCFF #99CCCC #99CC99 #99CC66 #99CC33 #99CC00

#9999FF #9999CC #999999 #999966 #999933 #999900

#9966FF #9966CC #996699 #996666 #996633 #996600

#9933FF #9933CC #993399 #993366 #993333 #993300

#9900FF #9900CC #990099 #990066 #990033 #990000

#CC00FF #CC00CC #CC0099 #CC0066 #CC0033 #CC0000

#CC33FF #CC33FF #CC3399 #CC3366 #CC3333 #CC3300

#CC66FF #CC66CC #CC6699 #CC6666 #CC6633 #CC6600

#CC99FF #CC99CC #CC9999 #CC9966 #CC9933 #CC9900

#CCCCFF #CCCCCC #CCCC99 #CCCC66 #CCCC33 #CCCC00

#CCFFFF #CCFFCC #CCFF99 #CCFF66 #CCFF33 #CCFF00

SEMANA 1 DIA 1
UNIVERSIDAD CNCI 3
Tema 11.
Aplicación de color: relleno y trazo.

Modelo HSLa
Este modelo de color mide tres parámetros que son Hue, Saturation y Light, que de ahí viene el
nombre HSL. El parámetro “a” es el valor de la opacidad del color.

Hue:
Es el matiz del color.

Hue

Saturation:
Es la saturación que tendrá el color; es decir, la intensidad del color.

Saturation

SEMANA 1 DIA 1
4 UNIVERSIDAD CNCI
Tema 11.
Aplicación de color: relleno y trazo.

Light:
Es la luminosidad que tendrá el color.

Light

Alfa:
Es la opacidad que tendrá el color.

Alfa

SEMANA 1 DIA 1
UNIVERSIDAD CNCI 5
Tema 11.
Aplicación de color: relleno y trazo.

Color de relleno
El color de relleno es un color sólido y se puede aplicar a una figura o texto. Las propiedades del
color de relleno se encuentran en el panel Propiedades en la opción Color al tener seleccionado
el elemento. Con el canal alfa se puede aplicar opacidad al color que se va a añadir al elemento.
Color
original
Color Muestra de
seleccionado color

Botón para añadir

muestras de color
Regulador de opacidad

Regulador de color

Regulador de
luminosidad

Opción para escribir Opciones de

código de color modelos de color

Panel color de relleno

SEMANA 1 DIA 1 Ejemplo color de relleno de figura

6 UNIVERSIDAD CNCI
Tema 11.
Aplicación de color: relleno y trazo.

Esta opción tambien aparece en el Menú del panel al tener seleccionado el elemento.

Al texto también se le puede añadir color de relleno localizado en el panel Propiedades en la

opción Texto, que solo se mostrará la opción al tener seleccionado el texto.

Ejemplo color de relleno de texto

Color de trazo
El trazo es la línea de alrededor del elemento y puede cambiar de color y grueso de acuerdo a
las necesidades de la animación. Las propiedades del color de trazo se encuentran en el panel
Propiedades en la opción Color al tener seleccionado el elemento.

Al texto no se le puede aplicar color de trazo como a las figuras básicas, para hacerlo más grueso
se tendría que seleccionar una tipografía que contenga la opción Bold, Heavy o Black que se
muestra en el panel Propiedades al tener seleccionado el texto.

Esta opción tambien aparece en el Menú del panel al tener seleccionado el elemento.

SEMANA 1 DIA 2
UNIVERSIDAD CNCI 7
Tema 11.
Aplicación de color: relleno y trazo.

Panel color de trazo

El grueso del trazo se mide en pixeles y el máximo al que se puede llegar es a 100 px.

Existen 4 opciones para el trazo: None, solid, dashed, dotted.

Trazo solid

SEMANA 1 DIA 2
8 UNIVERSIDAD CNCI
Tema 11.
Aplicación de color: relleno y trazo.

Trazo dashed Trazo dotted

Degradado
Es el rango de colores que visualmente es la transición entre dos o más colores. El degradado se
puede usar para rellenar figuras o para el contorno de una figura.

Para seleccionar el color que se aplicará en el degradado, se tiene que seleccionar el detención
del color que tambien se puede mover para la altura en que queramos el color en la figura y se
pueden añadir los colores que se necesiten. Tambien existe la opción de cambiar el ángulo del
degradado.

También se puede hacer un degradado en el canal alfa, es decir el degradado es de un color

sólido a una transparencia.

El degradado solo se puede aplicar a las figuras básicas y no se puede aplicar al texto.

Los degradados no son compatibles con la versión 9 de Internet Explorer.

SEMANA 1 DIA 2
UNIVERSIDAD CNCI 9
Tema 11.
Aplicación de color: relleno y trazo.

Degradado Color
radial original
Degradado Color Muestra de
lineal seleccionado color

Quitar color
Ángulo de Botón para añadir
degradado muestras de color
Detención Regulador de
del color opacidad

Regulador de color
Muestra de Regulador de
degradado luminosidad

Botón para
añadir muestras
de degradado
Opciones de
Repetir patrón modelos de
color

Panel degradado
Opción para escribir
código de color

Degradado lineal:
Es el degradado que es en línea, es decir de izquierda a derecha o viceversa y de arriba hacia
abajo o viceversa.

SEMANA 1 DIA 2 Ejemplo degradado lineal

10 UNIVERSIDAD CNCI
Tema 11.
Aplicación de color: relleno y trazo.

Degradado radial:
Es el degradado que empieza en el centro del elemento hacia afuera en forma de círculo.

Ejemplo degradado radial

Guardar colores en el panel como muestras

Para guardar un color que se va a utilizar después, se debe de seleccionar primero el color a
guardar, después dar click en el icono de Guardar muestra que es un signo de + y aparecerá en
las Muestras de color.

En las Muestras de color solo puedes guardar 13 colores. Al guardar mas, se borrarán las primeras
muestras que se guardaron.

SEMANA 1 DIA 2
UNIVERSIDAD CNCI 11
Tema 11.
Aplicación de color: relleno y trazo.

Añadir muestras

Revisa el siguiente video para conocer más acerca de la aplicación de color.

Aplicación de color

SEMANA 1 DIA 2
12 UNIVERSIDAD CNCI
Tema 12.
Trabajar con reglas y guías.

Reglas
Las reglas nos ayudan a colocar y medir con precisión los elementos del documento. Éstas están
localizadas en la parte superior y en la parte izquierda del panel Espacio de trabajo. El punto
donde aparece el 0 en cada regla se le llama origen de la regla.

Para mostrar u ocultar las reglas es en Menú Ver>Reglas o un atajo en teclado es presionando al
mismo tiempo Ctrl+R. Al estar marcada por el acierto quiere decir que las reglas están activadas.

Activación de reglas

SEMANA 1 DIA 3
UNIVERSIDAD CNCI 13
Tema 12.
Trabajar con reglas y guías.

Reglas activas

Guías
Las guías nos permiten alinear los elementos en el documento, podemos cambiarlas de posición
y agregar las que sean necesarias para una mejor organización de los elementos. Éstas no se
imprimen.

Para añadir una línea guía arrastra desde las reglas del lado izquierdo o arriba hacia el espacio de
trabajo. Al llegar al espacio de trabajo, éstas apareceran de color morado.

De manera predeterminada, las guías están activas, pero se pueden ocultar en Menú Ver> Guías
o un atajo en el teclado es presionando al mismo tiempo Ctrl+Alt+7. Al estar marcada por el
acierto quiere decir que las guías están activadas.

Para bloquear las guías y no poder moverlas es en Menú Ver>Bloquear guías o un atajo en el
teclado es presionando al mismo tiempo Mayús+Alt+5.

Para borrar las guías que se agregaron al documento es en Menú Vista>Borrar guías.

SEMANA 1 DIA 3
14 UNIVERSIDAD CNCI
Tema 12.
Trabajar con reglas y guías.

Activación de guías

Guías

SEMANA 1 DIA 3
UNIVERSIDAD CNCI 15
Tema 12.
Trabajar con reglas y guías.

Guías inteligentes
Las guías inteligentes sirven para alinear formas o selecciones. Éstas aparecen automáticamente
al dibujar o mover un elemento.

De manera predeterminada, las guías inteligentes están activas, pero se pueden ocultar en Menú
Ver> Guías inteligentes o un atajo en el teclado es presionando al mismo tiempo Ctrl+U. Al estar
marcada por el acierto quiere decir que las guías están activadas.

Activación de guías inteligentes

SEMANA 1 DIA 3
16 UNIVERSIDAD CNCI
Tema 12.
Trabajar con reglas y guías.

Guías inteligentes

SEMANA 1 DIA 3
UNIVERSIDAD CNCI 17
Tema 13.
Aplicación de efectos.

En temas anteriores vimos como añadirle efectos o filtros en las animaciones, en este tema se
verá más detalladamente cada una de estas.

Los filtros que se pueden añadir a una animación son el filtro invertido, rotación de matiz,
contraste, saturación, sepia, escala de grises, desenfoque y sombra.

Te ayudan a hacer cambios en la imagen dentro de Adobe Edge Animate sin utilizar un programa
de edición fotográfica como Adobe Photoshop.

Filtro invertido
Este filtro invierte los colores convirtiendo al elemento en imagen tipo negativo de fotografía en
100%. Se puede aplicar en una escala de 0% a 100%.

Ejemplo de filtro invertido

Panel Propiedades

SEMANA 1 DIA 4
18 UNIVERSIDAD CNCI
Tema 13.
Aplicación de efectos.

Rotación de matiz
Este filtro rotar los valores del color original por el espacio de color para asignar un nuevo color
a la imagen.

Ejemplo de filtro rotación de matiz

Panel Propiedades

Contraste
Este filtro se usa para realzar diferencias entre los colores de una imagen. En el porcentaje 100%
la imagen tiene el mismo contraste con el que se importó.

Ejemplo de filtro contraste

Panel Propiedades
SEMANA 1 DIA 4
UNIVERSIDAD CNCI 19
Tema 13.
Aplicación de efectos.

Saturación
Este filtro te sirve para realzar los colores en la imagen cambiando su intensidad dependiendo
del porcentaje seleccionado.

Ejemplo de filtro saturación

Panel Propiedades

Sepia
Se utiliza para añadirle un filtro de color sepia. Este filtro hace que la imagen se vea antigua y le
quita el color a la imagen dependiendo del porcentaje seleccionado.

Ejemplo de filtro sepia

Panel Propiedades
SEMANA 1 DIA 4
20 UNIVERSIDAD CNCI
Tema 13.
Aplicación de efectos.

Escala de grises
Este filtro te permite convertir la imagen en escala de grises dependiendo del porcentaje aplicado.
En 100% la imagen se convierte completamente en escala de grises.

Ejemplo de filtro escala de grises

Desenfoque
Este filtro te permite desenfocar el elemento o imagen completamente y se mide en pixeles. Es
sensible a los valores, con un valor pequeño se hace visible el desenfoque.

Ejemplo de filtro desenfoque

Panel Propiedades
SEMANA 1 DIA 4
UNIVERSIDAD CNCI 21
Tema 13.
Aplicación de efectos.

Sombra
Este filtro te permite añadirle sombra dentro o fuera de la imagen en cualquiera de sus lados, del
tamaño que se requiera y desenfocarla los pixeles que sean necesarios.

Ejemplo de filtro sombra

Panel Propiedades

SEMANA 1 DIA 4
22 UNIVERSIDAD CNCI
Tema 14.
Organizar y transformar elementos.

Organizar elementos
Cuando se tienen dos elementos o más en el espacio de trabajo y están uno sobre otro, podemos
traernos el elemento que está al fondo hacia adelante o viceversa.

Primero, seleccionaremos los elementos simulando el dibujo de un rectángulo en el espacio de

trabajo presionando el botón izquierdo del mouse y sin soltarlo arrastramos el cursor sobre los
elementos que seleccionaremos.

Selección de elementos

Después vamos a dar click en el botón derecho del mouse para que nos aparezca la ventana
dónde buscaremos la opción Organizar, que nos sirve para traer el elemento al frente, traerlo
hacia adelante, enviarlo hacia atrás o enviar al fondo.

Traer al frente:
Con esta opción se va a traer el elemento hacia al frente de todos los elementos que
existan en el espacio de trabajo.

SEMANA 2 DIA 1
UNIVERSIDAD CNCI 23
Tema 14.
Organizar y transformar elementos.

Traer hacia adelante:

Con esta opción se va a traer el elemento hacia adelante del objeto que esté delante de él.

Enviar hacia atrás:

Con esta opción se va a enviar hacia atrás del elemento que esté atrás de él.

Enviar al fondo:
Con esta opción se va a enviar el objeto hacia el fondo, es decir, detrás de todos los elementos
que estén delante de él.

Ventana Organizar

SEMANA 2 DIA 1
24 UNIVERSIDAD CNCI
Tema 14.
Organizar y transformar elementos.

Traer al frente

Otra manera para Organizar lo elementos es en Menú Modificar>Organizar, aparecerán las

mismas opciones.

Ventana Organizar
SEMANA 2 DIA 1
UNIVERSIDAD CNCI 25
Tema 14.
Organizar y transformar elementos.

Alinear elementos
Es importante tener un espacio de trabajo organizado y alineado para que tenga una mejor
estructura de la animación.

Para alinear más de dos elementos los seleccionaremos de la misma manera que seleccionamos
para organizarlos, haciendo un rectángulo con el botón derecho del mouse sin soltarlo, después
damos click con el botón derecho del mouse para que aparezca la ventana con las opciones y
buscamos Alinear. Las opciones que tenemos para alinear son Izquierda, Centrado horizontal,
Derecha, Arriba, Centrado vertical y Abajo.

Izquierda

Centrado horizontal

SEMANA 2 DIA 1
26 UNIVERSIDAD CNCI
Tema 14.
Organizar y transformar elementos.

Derecha Arriba

Centrado vertical Abajo

Otra manera para Organizar lo elementos es en Menú Modificar>Alinear, donde

aparecerán las mismas opciones que dando click sobre los elementos.

SEMANA 2 DIA 1
UNIVERSIDAD CNCI 27
Tema 14.
Organizar y transformar elementos.

Agrupar o desagrupar elementos

Se pueden combinar varios elementos en un grupo para tratarlos como un solo elemento, al
tratar de mover un elemento se moverán todos los elementos que se encuentren dentro de la
misma agrupación.

Para agrupar dos elementos o más es en Menú Modificar>Agrupar elementos o un atajo en el

teclado es presionando al mismo tiempo las teclas Ctrl+G.

Elementos agrupados

Al agrupar más de dos elementos en los paneles Elementos y Línea de Tiempo se va a crear una
capa con los objetos agrupados. Al desactivar esta capa también se desactivarán las capas que
se crearon cuando se dibujaron los elementos.

Panel Elementos Panel Línea de tiempo

SEMANA 2 DIA 2
28 UNIVERSIDAD CNCI
Tema 14.
Organizar y transformar elementos.

Para desagrupar los elementos es en Menú Modificar>Desagrupar elementos o un atajo en el

teclado es presionando al mismo tiempo las teclas Ctrl+Mayús+G.

Copiar, pegar y cortar elementos

Cuando queremos copiar una figura que ya está en el panel Espacio de trabajo es en Menú
Edición>Copiar o un atajo en el teclado es presionando al mismo tiempo las teclas Ctrl+C.

Para pegar el elemento copiado es en Menú Edición>Pegar o un atajo en el teclado es presionando

al mismo tiempo las teclas Ctrl+V. Al pegar un elemento que se copió desde el mismo programa
se va a pegar siempre en el mismo lugar y sobre el elemento copiado.

Copiar y pegar elemento

Cuando pegamos el elemento se va a crear otra capa en el panel Elementos y el panel Línea de
Tiempo.

Para cortar un elemento que se encuentra en el espacio de trabajo es en Menú

Edición>Cortar o un atajo en el teclado es presionando al mismo tiempo las
teclas Ctrl+X. Después se puede pegar en el espacio de trabajo pero se
pegará en el mismo lugar.

SEMANA 2 DIA 2
UNIVERSIDAD CNCI 29
Tema 14.
Organizar y transformar elementos.

Transformar
Para transformar un elemento tenemos dos opciones.

La primera es seleccionando el elemento que se quiera transformar, después dar click al botón
derecho del mouse para que aparezca la ventana y buscaremos la opción Transformar; o bien en
Menú Edición>Transformar. Los puntos de ancla que tiene el elemento se convertirán en color
negro, esto quiere decir que podemos transformar el elemento hacia cualquier lado arrastrando
desde alguno de sus puntos de ancla.

Elemento seleccionado Elemento a transformar

Al poner el cursor en uno de sus esquinas pero fuera del elemento aparecerá el icono para rotar
el elemento. Al poner el cursor en uno de sus lados pero fuera del elemento aparecerá el icono
para modificar el ángulo de alguno de sus lados.

SEMANA 2 DIA 2
30 UNIVERSIDAD CNCI
Tema 14.
Organizar y transformar elementos.

Rotar elemento Mover el ángulo de sus lados

Al hacer alguna de estas modificaciones en el elemento automáticamente se cambiarán las

características en el panel Propiedades.

Otra manera para transformar el elemento es directamente en el Panel Propiedades en la opción

Transformar, teniendo las mismas opciones que al hacerlas directamente en el panel Espacio de
trabajo.

Panel Propiedades

Transformación del tamaño de la figura

SEMANA 2 DIA 2
UNIVERSIDAD CNCI 31
Tema 14.
Organizar y transformar elementos.

Panel Propiedades

Transformación del tamaño de la figura

Panel Propiedades

Transformación del tamaño de la figura

También tenemos la opción de Transformar en en Menú del panel localizado en la

parte superior del espacio de trabajo.

Transformar en el Menú del panel

SEMANA 2 DIA 2
32 UNIVERSIDAD CNCI
Tema 15.
Uso de Edge Web Fonts.

Edge Web Fonts es un servicio que brinda Adobe para el software Edge Animate y te da acceso a
una gran cantidad de tipografías diseñadas por Google, Adobe y diseñadores de todo el mundo.

Las tipografías son proporcionadas por Typekit y también se pueden descargar gratis en el sitio
web https://typekit.com/.

Este sirve para que automáticamente aparezca el código de la tipografía seleccionada junto
con los valores que se le proporcionen. También sirve para especificar las fuentes de repuesto
cuando no se pueda descargar la tipografía que se utilizó.

Para utilizar Edge Web Fonts, es necesario escribir el texto en el panel Espacio de trabajo
utilizando la herramienta texto localizada en el menú del panel. Selecciona el texto, después en
el panel Propiedades selecciona el icono + que es donde se localiza Edge Web Fonts.

Panel Propiedades
SEMANA 2 DIA 3
UNIVERSIDAD CNCI 33
Tema 15.
Uso de Edge Web Fonts.

Ventana Edge Web Fonts

En la parte superior tiene un cuadro de búsqueda por si ya se tiene la idea de la tipografía que
se utilizará.

Buscador de tipografías

Después tenemos las opciones tipográficas de Edge Web Fonts. Al seleccionar una opción
tipográfica, automáticamente se cambia en el panel Espacio de trabajo donde se encuentra el
texto.

SEMANA 2 DIA 3 Opciones tipográficas

34 UNIVERSIDAD CNCI
Tema 15.
Uso de Edge Web Fonts.

Ejemplo de cambio de tipografía

Del lado izquierdo se encuentra los diferentes estilos que puedes encontrar en Edge Web Fonts.

Estilos tipográficos

SEMANA 2 DIA 3
UNIVERSIDAD CNCI 35
Tema 15.
Uso de Edge Web Fonts.

Ejemplo de estilo tipográfico Ejemplo de estilo tipográfico

En la parte inferior tenemos las condiciones para el uso de esta herramienta para fines legales.

En la siguiente pestaña Personalizar te indica la Lista de fuentes de repuesto, en caso de que no

encuentre la seleccionada, se pueden agregar otras para sustituirla al dar click sobre +.

En la parte inferior nos muestra el código al abrirla en una página web.

Ventana personalizar

SEMANA 2 DIA 3
36 UNIVERSIDAD CNCI
Tema 15.
Uso de Edge Web Fonts.

Las fuentes que se seleccionen con la herramienta Edge Web Fonts se añaden automáticamente
a el panel Biblioteca.

Panel Biblioteca

SEMANA 2 DIA 3
UNIVERSIDAD CNCI 37
Actividad 1
Realiza un anuncio publicitario poniendo en práctica los temas que se vieron en semanas
anteriores, como el ejemplo que se muestra a continuación. Más adelante se utilizará este
archivo para animar sus elementos.

SEMANA 2 DIA 4
38 UNIVERSIDAD CNCI
Tema 16.
Animación de texto.

Como se vio en el tema anterior, en la animación de figuras básicas tienes que primero armar el
diseño final y después empezar a animar. Hay que tomar en cuenta el orden de las capas, que es
como van a aparecer en el espacio de trabajo.

Para empezar a animar es recomendable desactivar todas las capas de los elementos e ir
activandolos cuando se vaya animando uno por uno.

Como vimos en temas anteriores, el texto se puede animar de dos diferentes maneras. La primera
es añadiendo los fotogramas desde el panel Propiedades y la segunda opción es teniendo
seleccionado el elemento y dar click con el botón derecho del mouse para que aparezca la
ventana donde hay que seleccionar la opción Añadir fotograma clave. Se abrirá otra ventana
donde aparecerán los diferentes fotogramas que se pueden añadir, vistos en temas anteriores.

Animación de texto

SEMANA 3 DIA 1
UNIVERSIDAD CNCI 39
Tema 16.
Animación de texto.

Animación de texto

Animación de texto

SEMANA 3 DIA 1
40 UNIVERSIDAD CNCI
Tema 16.
Animación de texto.

En el siguiente video verás como utilizar la ruta de movimiento y animación en los cuadros
de texto.

Rutas de movimiento

Para ver tu animacion final vas a Archivo>Vista previa en el navegador o bien presionando al
mismo tiempo las teclas Ctrl+Enter y tu archivo se abrirá en el navegador web que tenga la
computadora predeterminado.

En esta ocasión también se puede activar “loop” para que la animación no se detenga.

SEMANA 3 DIA 1
UNIVERSIDAD CNCI 41
Actividad 2.
Realiza una actividad que incluya 10 cuadros de texto e incluyéles animación a cada una
de ellas (diferente animación en cada una) como el video que se muestra a continuación.
Al maestro le entregarás una carpeta con tu nombre que incluya todos los elementos que
se crean al guardar el archivo en .html.

SEMANA 3 DIA 2
42 UNIVERSIDAD CNCI
Actividad 3.
Realiza un logotipo en Adobe Edge Animate y realiza la animación del mismo. El archivo
debe de incluir una imagen y texto. Al maestro le entregarás una carpeta con tu nombre
que incluya todos los elementos que se crean al guardar el archivo en .html.

SEMANA 3 DIA 3
UNIVERSIDAD CNCI 43
Tema 17.
Añadir audio.

En Adobe Edge Animate se pueden añadir archivos de audio para las animaciones y se pueden
reproducir en cualquier computadora o dispositivo móvil sin utilizar un plug-in.

Los formatos que se pueden importar e las animaciones son:

.mp3
Su nombre original es MPEG-1 Audio Layer III o MPEG-2 Audio Layer III. MPEG significa Moving
Pincture Experts Gruoup. Es un formato de compresión de audio que usa un algoritmo con
pérdida para que el tamaño del archivo sea menor. Es el formato más común usado en música
para computadora o reproductores de audio.

.ogg / .oga
Es un formato para multimedia digital de alta calidad. Es libre y fue desarrollado por la Fundación
Xiph.Org. Este formato se ha incorporado a diferentes reproductores de medios libres, así como
a reproductores de medios portátiles.

.wav
Es un formato de audio sin compresión de datos desarrollado por Microsoft e IBM. Admite
archivos mono y estéreo en distintas resoluciones y velocidades. Es compatible con la mayoría
de los códec de audio y es para uso profesional. Para páginas web no se recomienda su uso
ya que son archivos muy grandes porque no están comprimidos y eso los hace más pesados o
lentos para cargarlos.

SEMANA 4 DIA 1
44 UNIVERSIDAD CNCI
Tema 17.
Añadir audio.

.m4a
Este formato fue desarrollado por el Insituto Fraunhofer junto con empresas privadas como lo
son AT&T, Nokia, Sony y Dolby. Es un formato AAC (Advance Audio Coding) y es el que se utiliza
como formato principal de Apple para los iPods y iTunes. Fue creado por MPEG (Moving Expert
Group).

.aac
AAC (Advanced Audio Coding) es un formato de audio con pérdida eliminando datos del audio
para que tenga la mayor compresión posible. Es una extensión de MPEG-2. Es también es
utilizado como formato principal en iPods y iTunes, además de Nero, Winamp y Nintendo DSi.
Este formato permite incluir la protección de los derechos de autor.

Importar audio
Para añadir el audio en Adobe Edge Animate es en Menú Archivo>Importar…seleccionas el
archivo y dar click en el botón Abrir. El tipo de archivo va a parecer en el panel Biblioteca en la
opción Audio.

Panel Biblioteca con elemento de audio

SEMANA 4 DIA 1
UNIVERSIDAD CNCI 45
Tema 17.
Añadir audio.

Automáticamente se va a crear la capa con el audio en el panel Línea de tiempo y en el panel

Elementos.

Panel Línea de tiempo con elemento de audio Panel Elementos con

elemento de audio

Si se eliminara la capa que contiene el audio se queda guardado en el panel Biblioteca y para
volver a incluirlo en el panel Línea de tiempo, se seleccionará el elemento en el panel Biblioteca,
dar click al botón derecho del mouse y aparecerá una ventana donde hay que seleccionar la
opción Añadir audio a la composición, creando una nueva capa en el panel Línea de tiempo y
Elementos.

Ventana Añadir audio a la composición

SEMANA 4 DIA 1
46 UNIVERSIDAD CNCI
Tema 17.
Añadir audio.

Propiedades del audio

Al tener seleccionado el archivo de audio en el panel Propiedades podremos configurar el audio.

En la parte superior tenemos la opción para activar o desactivar el audio, pero también podríamos
desactivarlo directamente en el panel Línea de tiempo o panel Elementos en la opción Definir
visibilidad de elemento.

Panel Propiedades

Visibilidad del elemento de audio

En la opción Audio nos muestra el nombre del archivo, la duración del mismo, podemos
configurar el volumen, se puede activar la reproducción automática de el audio en la línea del
tiempo y la opción Bucle que hace que el audio se vuelva a reproducir desde el inicio cuando
termine su reproducción.

SEMANA 4 DIA 1
UNIVERSIDAD CNCI 47
Tema 17.
Añadir audio.

Panel Propiedades

En el panel Línea de tiempo también podemos configurar el audio, dando click en el botón que
aparece en una subcapa.

Propiedades de audio en el panel Línea de tiempo

Las opciones que se muestran son Reproducir, este reproduce el audio desde la posición actual
del cabezal; Reproducir desde…, este te permite especificar desde donde quieras empezar
la reproducción del audio; pausar, este te permite interrumpir el audio.

SEMANA 4 DIA 1
48 UNIVERSIDAD CNCI
Tema 18.
Crear un botón.

Crear un botón en Adobe Edge Animate es muy sencillo sin necesidad de saber programar, ya
que el software facilita esta opción.

Un botón se puede crear con texto o una imagen añadida en el panel Espacio de trabajo y no
tiene que convertirse a símbolo para poder crearlo.

Es recomendable añadirle un nombre en el panel Propiedades para no confundir los elementos

si se tienen otros similares.

Panel Propiedades

SEMANA 4 DIA 2
UNIVERSIDAD CNCI 49
Tema 18.
Crear un botón.

Para empezar con la creación del botón se tiene que seleccionar el elemento que se quiera
convertir a botón, dar click con el botón derecho del mouse y seleccionar la opción Abrir
acciones para “nombre del botón”, o bien seleccionar el icono de Abrir acciones en forma de
llaves en el panel Línea de tiempo.

Abrir acciones para “nombre del botón”

Icono Abrir aciones en el panel Línea de tiempo

SEMANA 4 DIA 2
50 UNIVERSIDAD CNCI
Tema 18.
Crear un botón.

Se abrirá la ventana de las acciones del botón. Para agregar una acción se tiene que dar click
sobre + en donde aparecerá una ventana con las acciones disponibles para el elemento que son:

Ventana de acciones

click:
Con un solo click se va a dirigir hacia la liga indicada.

dblclick:
Con doble click se va a dirigir hacia la liga indicada.

mouseover:
Funciona pasando el cursor del mouse por el botón.

mousedown:
Funciona cuando el cursor del mouse está sobre el elemento (botón) y se da click al botón
izquierdo del mouse.

mousemove:
Funciona cuando el cursor del mouse se mueve dentro del elemento (botón).

SEMANA 4 DIA 2
UNIVERSIDAD CNCI 51
Tema 18.
Crear un botón.

mouseup:
Funciona cuando el cursor del mouse está sobre el elemento (botón)y se deja de presionar el
botón izquierdo del mouse.

mouseout:
Funciona cuando el cursor del mouse sale del elemento (botón).

touchstart:
Es para pantallas táctiles y este funciona al empezar a tocar la pantalla con el dedo.

touchmove:
Es para pantallas táctiles y este funciona arrastrando el dedo por la pantalla después de
tocar la pantalla.

touchend:
Es para pantallas táctiles y este funciona al levantar el dedo de la pantalla.

Después se activará la ventana del código, y aquí mismo se encuentran las diferentes acciones
que se le pueden añadir al elemento, en esta ocasión solo veremos la acción Vínculos.

Selección de acción
SEMANA 4 DIA 2
52 UNIVERSIDAD CNCI
Tema 18.
Crear un botón.

Al dar click sobre la opción Vínculos tenemos dos opciones para abrir el vínculo: en la misma
ventana en la que estamos navegando o abriendo una nueva ventana. Al seleccionar una de
estas dos opciones nos aparece el código en la ventana del código. El código escrito en naranja
es el que te indica a donde se va a dirigir si se da click sobre el botón y esta se podrá cambiar
copiando la liga de la página url.

Código

Para finalizar solo se tiene que cerrar la ventana de las acciones y publicar la animación para
verificar que funciona correctamente.

SEMANA 4 DIA 2
UNIVERSIDAD CNCI 53
Tema 18.
Crear un botón.

En el siguiente video verás la manera para crear un botón.

Crear un botón

SEMANA 4 DIA 2
54 UNIVERSIDAD CNCI
Tema 19.
Configurar la publicación.

Para tener acceso a la configuración de la publicación de una animación es necesario que se

guarde primero el archivo en la computadora.

Ya que se guardó el documento, selecciona en menú Archivo>Configuración de publicación y se

abrirá la ventana de configuración y existen 3 tipos de publicación.

Menú Archivo>Configurar publicación

SEMANA 4 DIA 3
UNIVERSIDAD CNCI 55
Tema 19.
Configurar la publicación.

Ventana Configuración de publicación

Web
En esta opción te guarda los archivos necesarios que utilizarías para web y se selecciona el
directorio de destino, que es donde se guardarán los archivos.

Configuración para Web Archivos creado en la publicación

Paquete de implementación de Animate

En esta opción de exportación se crea un archivo del proyecto que se pueda abrir en otros
programas de Adobe, por ejemplo en Adobe Digital Publishing Suite (DPS), InDesign, Dreamweaver
y Muse. La extensión del archivo es .oam.

SEMANA 4 DIA 3
56 UNIVERSIDAD CNCI
Tema 19.
Configurar la publicación.

Las opciones que tiene es el destino de la publicación, el nombre del archivo y especificar una
imagen de póster o bien dejarlo en transparente.

Configuración para Paquete de implementación Archivo creado en la publicación

de Animate

iBooks/OS X
En esta opción te crea una carpeta .wdgt que se utiliza para abrirse en dispositivos Macintosh
como iBooks.

Configuración para iBooks/OS X Archivo creado en la publicación

SEMANA 4 DIA 3
UNIVERSIDAD CNCI 57
Tema 19.
Configurar la publicación.

Se pueden seleccionar las tres opciones para guardar todos los archivos en la misma carpeta de
destino.

Carpetas creadas en la publicación

Para terminar se da click en Guardar para que todas las configuraciones y cambios que se
hicieron se queden almacenadas en el programa.

Es recomendable que se guarden los cambios cada cierto tiempo para que no vaya a perder
información del archivo y para volver a ver la publicación con la configuración guardada
es en Menú Archivo>Publicar o bien presionando al mismo tiempo las teclas Ctrl+Alt+S y
automáticamente se reemplazaran los archivos ya guardados en la carpeta de destino que se
indicó.

SEMANA 4 DIA 3
58 UNIVERSIDAD CNCI
Tema 19.
Configurar la publicación.

Menú Archivo>Publicar

SEMANA 4 DIA 3
UNIVERSIDAD CNCI 59
Actividad 4.
En semanas anteriores realizaste un anuncio publicitaro en Adobe Edge. Ahora realizarás
la animación de este mismo diseño y le entregarás a tu maestro los archivos que se
crearon al guardarlo en .html.

Los elementos a calificar es que incluya animación en cada uno de sus elementos, que
contenga un logotipo, imágenes, texto, audio y que al menos uno de sus elementos sea
botón.

SEMANA 4 DIA 4
60 UNIVERSIDAD CNCI