SlideShare una empresa de Scribd logo
1 de 125
Descargar para leer sin conexión
FLASH CS6
• Las Capas
• Las capas ayudan a organizar las
ilustraciones de los documentos.
Los objetos de una capa pueden
dibujarse y editarse sin que
afecten a objetos de otras capas.
En las zonas del escenario en las
que no hay nada en una capa,
pueden verse a través de ella las
capas situadas debajo.
Para ayudar a crear efectos
sofisticados, utilice capas de guía
especiales para facilitar el dibujo y la
edición y crear capas de máscara.
Existen cinco tipos de capas que se
pueden utilizar en Flash:
• Las capas normales.
• Las capas de máscara.
• Las capas de guía.
• Las capas de interpolación de
movimiento.
• Las capas de esqueleto
• Para organizar un documento por
temas, puede utilizar escenas. Por
ejemplo, puede utilizar escenas
diferentes para una introducción, un
mensaje de carga y los créditos.
• Aunque el uso de escenas presenta
algunas desventajas, hay
situaciones en las que no son
muchas, como cuando se crean
animaciones largas. Cuando utilice
escenas, evite tener que administrar
un gran número de archivos FLA, ya
que cada escena está contenida en
un solo archivo FLA.
Cuando se publica un archivo SWF, la línea de
tiempo de cada una de las escenas se
combina en una sola línea de tiempo en el
archivo SWF. Una vez compilado el archivo
SWF, éste se comporta como se si hubiera
creado el archivo FLA con una sola escena.
Esta es la causa de algunas de las
desventajas del uso de escenas:
• Las escenas pueden crear confusión a la
hora de editar documentos, especialmente
en entornos de varios autores.
• Las escenas suelen producir archivos SWF
de gran tamaño.
• Las escenas obligan a los usuarios a
descargar progresivamente todo el archivo
SWF.
• Un fotograma representa el contenido de la película en un instante
de tiempo. Por tanto, una animación no es más que una sucesión
de fotogramas. Todo esto se puede controlar desde la Línea de
Tiempo, pero no todos los fotogramas tienen el mismo
comportamiento ni se tratan igual. Veamos qué tipos de
fotogramas hay y cuáles son sus rasgos.
• Fotogramas claves: Es aquel que
se define cambios de animación.
• Fotograma vacío: Es aquél que
está en blanco , no tiene
ninguna instrucción para la
animación.
• Fotograma intermedio: Es aquél
que se encuentra entre dos
fotogramas claves.
• Para insertar un fotograma nuevo, seleccione Insertar - Línea de tiempo
- Fotograma (F5).
• Para crear un nuevo fotograma clave, elija Insertar - Línea de tiempo -
Fotograma clave (F6), o bien, presione clic derecho en el fotograma
donde desee colocar un fotograma clave y seleccione Insertar
fotograma clave en el menú contextual.
• Para crear un nuevo fotograma clave vacío, elija Insertar - Línea de
tiempo - Fotograma clave vacío, o bien presione clic derecho en el
fotograma donde desee colocar el fotograma clave y seleccione Insertar
fotograma clave vacío en el menú contextual.
Manual de Flash Cs6
1. Abrimos Adobe Flash Cs6, ahora procedemos a crear un nuevo
archivo para esto damos clic en el menú Archivo  Nuevo.
2. En la pestaña “General” escogemos el tipo ActionScript 3.0 y de
parámetros elegimos un tamaño estándar para banner, 728 pixeles
de ancho por 90 pixeles de alto, 30 cuadros(Fotogramas) por
segundo, color de fondo negro y damos clic en “Ok”.
• Selecciona tu espacio de trabajo apropiado en el botón superior
derecho.
• Recuerda que puedes crear tu propio
espacio de trabajo
Espacio recomendado “Clásico”
3. Generamos seis capas y
dando doble clic sobre el nombre
de la capa podemos
renombrarlas con los siguientes
títulos:
“Estrella1”, “Estrella2”, “Logo”,
“Café”, “Botón” y “Frase”.
4. Después agrupa las estrellas
en una carpeta
5. Crea una nueva Escena por
medio del menú Insertar
Escena.
6. Por ultimo renombra las
escenas:
• PROMO
• ENTRADA
7. En la escena “Promo” creamos cuatro capas con los siguientes
títulos: “Botón”, “Texto2”, “Texto1”y “Fondo”.
8. Cambia el tamaño del banner por: 972 de ancho y 95 de alto
9. Importa todas las imágenes a usar para esta practica
Ovalo con relleno
blanco
ActionScript
Stop();
Play (); - Activa la escena.
GotoAndPlay (); - Navega hacia un Frame, fotograma o escena y
activa la escena.
GotoAndStop (); - Navega hacia un Frame, fotograma o escena y
detiene la escena.
Stop (); - Detiene la escena.
1. Selecciona el botón y conviértelo en botón con el nombre de
botonsiguiente
2. Presiona Ctrl + Enter  Para ver resultado
Manual de Flash Cs6
1. Crear un archivo nuevo de ActionScrib 2.0 con el tamaño de:
500 de ancho x 700 de alto
2. Color de fondo negro
3. Fotogramas x segundo: 30
4. Crear las siguientes capas con su respectivo nombre.
5. Importa las imágenes a usar a la biblioteca
Aplica mascara a la
capa de fondo rosa
Clic derechoMascara
• Ahora convierte la capa
FONDO ROSA y CELULAR en
símbolos de tipo clip de
película
Recuerda que para mostrar esta venta acciones debes presionar F9 y seleccionar cada uno de los
objetos convertidos en símbolos para ingresar el código siguiente.
Manual de Flash Cs6
Manual de Flash Cs6
1. Crea un nuevo documento de flash con las siguientes medidas:
• ActionSript 2.0
• 600 de ancho
• 400 de alto
2. Crea dos capas con el nombre de Fondo y la otra con el nombre
Figura.
• Para esta practica se usa una figura creada a partir de formas
básicas pero toma en cuenta que para futuras aplicaciones puedes
usar también imágenes.
1. Sobre tu escena 1Capa FiguraCrear un circulo y agregar un
color de relleno.
2. Selección tu circulo y da clic derecho convertir en símbolo
3. Agrega el nombre de “Pelota”
De tipo clip de película  presionar Aceptar
4. Da doble clic al circulo para entrar a la edición del símbolo 
Nota que en la barra de la línea de tiempo este en Pelota
Nombre
Clip de película
Símbolo
5. Ahora en la línea de tiempo busca la capa 1 y renómbrala como:
Efecto Pelota.
6. Y agrega un tiempo de 30 fotogramas a la capa Efecto Pelota.
7. Selecciona el primer cuadro  agrega un color diferente y
después el cuadro 30 y también
Cuadro 1 Cuadro 30
Recuerda que para colorear
selección el panel muestras
8. Da clic en escena 1  Esto para regresar al inicio y aplicar la
acción de arrastrar y soltar.
9. Selecciona tu circulo o forma y presiona F9 para agregar el
siguiente código.
• Código
On(press)  Ejecuta el evento presionar botón
{  Indica el bloque de inicio de código
StartDrag(this); Indica el inicio tomar objeto para poder moverlo a otro lugar
Mouse.hide(); Esta línea se encarga de ocultar el puntero del ratón cuando el objeto
es tomado con clic izquierdo sostenido. Para arrastrarlo.
} Termina bloque de código
On(release, releaseOutside)  Ejecuta el evento soltar botón o dejar de presionar
clic izquierdo
{  Indica el bloque de inicio de código
StopDrag(); Indica que debe detenerse y soltar el
objeto.
Mouse.show(); Esta línea se encarga de mostrar el
puntero del ratón cuando el objeto
es soltado.
} Termina bloque de código
Manual de Flash Cs6
1. En Flash, se ejecuta código ActionScript cuando se produce un
evento: por ejemplo,
• cuando se carga un clip de película, cuando se entra en un
fotograma clave de la línea de tiempo o cuando el usuario hace
clic en un botón.
2. Los eventos puede accionarlos el usuario o el sistema. Los
usuarios hacen clic en botones y presionan teclas; el sistema
acciona eventos cuando se cumplen condiciones específicas o
finalizan procesos.
• Eventos de ratón y teclado: Un usuario que interactúa con la
aplicación o el archivo SWF desencadena eventos de ratón y
de teclado
• Eventos de clip: Dentro de un clip de película, puede
reaccionar a una serie de eventos de clip que se
desencadenan cuando el usuario entra o sale de la escena o
interactúa con la misma mediante el ratón o el teclado.
• Eventos de fotograma: En una línea de tiempo principal o de
clip de película, un evento de sistema tiene lugar cuando la
cabeza lectora entra en un fotograma clave (esto se conoce
como evento de fotograma). Los eventos de fotograma son
útiles para desencadenar acciones en función del paso del
tiempo (el avance por la línea de tiempo) o para interactuar
con elementos que actualmente están visibles en el
escenario.
Manual de Flash Cs6
1. Crea un documento de flash con las siguientes características:
ActionScript: 3.0
Ancho: 800px
Alto: 450px
Fondo: Negro
1. Ir a Archivo  Importar  Importar a biblioteca
2. Selecciona tus imágenes que usaras Máximo 7
3. En la capa de fondo coloca la imagen de cortinas y adáptala al
tamaño de la escena
En esta capa va la imagen
de cortinas o cualquier
imagen a usar como fondo Fondo
4. Selecciona la capa de Fotos  coloca las 7 imágenes en la
escena.
5. Cambiales el tamaño, orientación distribuirlas en la escena de tal
forma que queden como la imagen
En esta capa van las
imágenes usadas en
nuestro álbum
6. Selecciona la de Fotos  notaras que todas las fotos se
seleccionaron.
7. Después da clic derecho sobre las Fotos  Selecciona la opción
“Distribuir en capas”
8. Notaras que se crearon nuevas capas con su respectivo nombre
9. Ahora agrupa las capas en una nueva
Carpeta y colócale el nombre de
FOTOS
Capas
nuevas
según el
numero de
Fotos
10. Selecciona todas las capas de cada FOTO, excepto la de FONDO.
y arrástralas dentro de la capa creada Carpeta “FOTOS”
Fotos dentro de la
Capa carpeta FOTOS
Capas seleccionadas
11 Selecciona todas las fotos con ayuda de la tecla Shift
12. Da clic derecho sobre las fotos o presiona (Ctrl+B) para separar
13. A continuación notaras que las fotos se ponen como punteadas
esto indica que ya están separadas
Si acercas veras que se
ven unos putos blancos
14. Da clic fuera de la Escena para deseleccionar las fotos  Ve a la
caja de herramientas y Busca bote de tinta.
15. Ir a panel de propiedades y en trazo colocar el valor de 6 
color de trazo blanco  Extremo: cuadrado y unión: inglete
Color de
trazo Trazo
Extremo
Union
16. Ahora sobre cada foto da clic izquierdo para colocar un borde de
color blanco ya que esto simulara el marco de una foto.
Borde de Foto.
17. Da doble clic izq. a una foto para seleccionarla junto con su borde y después
 clic derecho “Convertir en símbolo”  tipo Botón  nombre: img1
Tipo: Boton
Foto
seleccionada
Para esta imagen se
le colocara img1 y
para las demás img2,
img3, img4, img5 y
así sucesivamente
Por ultimo
Aceptar
18. Repite el paso 17 paras las 6 imágenes restantes  solo verifica
seleccionar cada imagen correctamente  y de colocar el nombre:
img2, img3, etc. y que sea símbolo de tipo Botón
Símbolos
creados de
tipo Botón
19. Selecciona cualquier imagen  Dar doble clic izq.  Notaras que entraras
al símbolo Botón.
20. Crea los 3 estados de botón  con solo presionar F6
Doble clic Estados de Botón
Clic para seleccionar primer
estado y presionar F6 Estados de Botón creados
21. Da clic en el Fotograma Sobre  clic derecho sobre la Foto 
convertir en símbolo.
22. Ahora asigna el Nombre de “img1-Animada”  De Tipo Clip de
película  Aceptar
Seleccionar
Fotograma
Foto
seleccionada
23. A la imagen convertida en símbolo  Da doble clic izq.  veras
que entras al símbolo de img1-Animada.
24. Selecciona la Capa 1  Fotograma 1  después clic derecho sobre
Fotograma 1  crear Interpolación clásica
25. Ir a Fotograma 15  presionar F6
26. Selecciona el Fotograma 15  después da un clic a la Foto activa  y
aumenta su tamaño dando clic izq. Sostenido. En una de las esquinas.
NOTA: EL AUMENTO DE TAMAÑO TIENE QUE SER MUY POCO.
27. Clic izq. sostenido
para ampliar.
Foto ampliada.
Recuerda que para ampliar la foto de
forma proporcional en ancho y alto
puedes hacer uso de la tecla
SHIFT+Clic izq.
28. Para ver el resultado solo presiona Enter  Veras que la foto se
hace un poco grande.
29. Después colócate en el Fotograma 1  panel de Propiedades 
Busca la sección Interpolación  y en Aceleración coloca el valor de
100
Fotograma 1
Aceleracion
30. Ahora colócate en el Fotograma 15  panel de Propiedades 
Busca la sección Interpolación  y en Aceleración coloca el valor de 100
31. En el mismo Fotograma 15 da clic izq.
 presiona F9  coloca el código: stop();
Fotograma 15
Aceleración
32. Regresa a la Escena Principal  presionar CTRL + ENTER 
para ver el resultado.
33. Repetir los Pasos 19,20,21,..,31 para el resto de las imágenes.
Clic en la Escena 2. En su caso
podría ser Escena 1
Manual de Flash Cs6
Nuevo ActionScript 2.0
600px
400px
30fps
Crea documento con las
siguientes características
OK
Color al gusto
1. Crea las siguientes capas.
2. Verifica que los textos y rectángulos
coincidan con las capas.
3. Recuerda que los colores o rellenos
textos y el relleno pueden ser
modificados a tu gusto Rectángulos de texto
con relleno blancoTextos normales
4. Selecciona la herramienta texto  y dibuja un rectángulo sobre el
rectángulo creado anteriormente del usuario.
5. En panel de propiedades  Selecciona la lista  Tipo de texto  y
selecciona “Introducción de texto”
6. Y en Nombre del la instancia coloca  “usuario”
Tipo de texto
Nombre de la instancia
Rectángulo de texto
Asegúrate de que cuando dibujes los
rectángulos de texto estés en la capa
de TEXTO ENTRADA
7. Repite el paso 4  Dibuja el rectángulo de texto ahora sobre el
rectángulo de contraseña.
Rectángulo de
texto 2
Asegúrate de que cuando dibujes los
rectángulos de texto estés en la capa
de TEXTO ENTRADA
Mueve la capa TEXTO
ENTRADA hasta parte
superior.
Capa
movida
Rectángulo de
texto 1
Resultado de los pasos anteriores.
8. Ahora crearemos el mensaje de texto ya que este validara al
usuario si coloca un dato incorrecto se le mostrara “Contraseña o
usuario invalido…”
Para esto asegúrate de estar en la capa de “Mensaje”
Mensaje
9. Selecciona la herramienta Texto
10. Traza un rectángulo grande por encima de usuario y contraseña.
11. Sin dejar el rectángulo de texto anterior  Ve al panel de propiedades y
Selecciona la lista  Texto estático, cámbialo por  Texto dinámico
Rectángulo de texto
12. Notaras que al deseleccionar el rectángulo se torna punteado,
esto indica que estas bien.
13. Ahora crea y diseña un botón a tu gusto… También puedes usar
una imagen como botón.
14. Ahora crearemos el botón  verifica que estés en la capa Boton
Capa Boton
Selecciona la capa Botón y en esta realizaras el diseño del botón a crear
15. Ir a menú Insertar  Nuevo símbolo  Dar el Nombre: Boton o cualquier
otro nombre.
16. Tipo:  Botón.  Presionar Aceptar
17. Si el botón lo vas crear crea 2 capas: una para el texto y otra para el
rectángulo del botón  por ultimo diseña tu botón. Dándole los 3 estados.
Recuerda que tu botón puede ser
de cualquier forma. Ejemplo.
18. Regresa a la Escena  y selecciona el botón creado.
19. Después ir al panel de propiedades  Nombre de la instancia
 coloca el nombre “valida”
Nombre de la
instancia
20. Selecciona el Rectángulo de texto 1 y en propiedades agrega el
Nombre de instancia: “usuario”
21. Selecciona rectángulo de texto 2 y en propiedades agrega el
Nombre de instancia: “contrasenia”
Rectángulo
de texto 1
Rectángulo
de texto 2
22. Selecciona el rectángulo de texto mensaje  En propiedades
asigna el Nombre de instancia: “mensaje”
23 .Ve resultado final
Rectángulo de
texto mensaje
Ahora puedes cambiar
algunas propiedades
como: color de letra,
tamaño, tipo de letra,
relleno, etc.
24. Para finalizar ahora selecciona la capa “CODIGOS”
25. Selecciona el Fotograma 1, dar clic  Presionar F9 y agrega el
siguiente código…
Fotograma 1
Manual de Flash Cs6
Introduciendo datos
incorrectos
Introduciendo datos correctos
Manual de Flash Cs6
1. Inicie el documento “BannerIntel.fla”, encontramos que existen
siete capas, las capas contienen clips de película listos para animar
por código.
2. Antes de comenzar, es necesario asignarles un nombre de
instancia para poder referenciarlos en nuestro código,
comenzaremos con el Carro3D. Seleccionamos nuestra imagen del
carro y nos vamos al panel de propiedades, en el recuadro donde
dice nombre de instancia escribimos “Carro3D”.
3. Ahora seleccionamos nuestro logo y nos vamos al panel de
propiedades, en el recuadro donde dice nombre de instancia
escribimos “Logo”.
4. Después seleccionamos nuestro texto y nos vamos al panel de
propiedades, en el recuadro donde dice nombre de instancia
escribimos “Texto”.
5. En la capa de acciones seleccionamos nuestro fotograma ubicado
en el Fotograma 1, abrimos nuestra ventana de Acciones clic en el
menú “Ventana – Acciones” o presionamos “F9”.
6. En la ventana de acciones lo primero que necesitamos hacer es
importar nuestras clases (instrucciones) al documento y lo podemos
hacer con el siguiente código.
Manual de Flash Cs6
Manual de Flash Cs6
Manual de Flash Cs6
Manual de Flash Cs6
1. Crear un nuevo documento con las siguientes propiedades
• ActionScript: 2.0
• Ancho: 600px
• Alto: 450px
• Cuadros por segundo: 30fps
• Fondo: El deseado incluso puede ser una imagen de fondo
2. Crear las siguientes capas:
3. Ahora Inserta un Nuevo símbolo  Tipo clip de película  Nombre
ecualizador  Aceptar
4. Dentro del Símbolo Ecualizador  Crear las 2 capas siguientes:
5. En la capa de Barras Ver dibuja unas barras verticales
6. Una vez terminado las barras selecciona
la capa Barras Ver  después clic derecho
sobre las barras  Convertir en símbolo 
Dar el nombre de Barras musicales  Tipo
Clip de película
7. Ahora distribuye todas las barras en capas.  Teniendo la capa 1
activa  Da clic derecho sobre las barras  Distribuir en capas.
8. Todas la capa resultantes animar cada 10 Fotogramas de tal
forma que quedara 10, 20, 30 y 40.  y aplica interpolación de
moviente clásica.
Manual de Flash Cs6
1. Crea Nuevo documento y aplica los siguientes ajustes.
• ActionScript: 2.0
• Alto:400px
• Ancho: 750px
• Velocidad de fotogramas: 30fps
• Fondo: El que gustes
2. Ahora crea las siguientes capas con el orden especificado.
Nota: Puedes variar el orden pero toma en cuenta que los
colores y el personaje este siempre visibles.
Capas creadas
3. Para esta practica se necesitaran:
• Un Cursor
• Fondo
• Imagen a pintar
• Botones para la paleta de colores
4. Para crear los botones puedes usar un botón sencillo o buscar en
internet “splashes” para usarlos como paleta de colores.
5. Importa o vectoriza una paleta de colores en ILLustrator 
Colocarla en la capa paleta.
6. Coloca sobre tu capa colores  cada uno de los botones que
definen el color a rellenar
7. Ahora coloca sobre la capa FONDO la imagen a usar como fondo
de tu animación.
8. Busca en internet y descarga una imagen para colorear  Abre Illustrator  importa
la imagen descargada  Busca la opción en la barra de propiedades “Calco de
imagen”
9. Despliega la lista y selecciona  la opción “Logotipo en blanco y negro”.
10. Ahora presionar el botón “Expandir”
11. Una vez expandida la imagen da clic derecho sobre esta  y elige la opción
“Desagrupar”  Guarda la imagen con otro Nombre y como archivo de Tipo: Adobe
Illustrator (*.AI)
12. Ahora importa el archivo de Illustrator a la biblioteca de Flash 
Actica la primera casilla “Capa 1” para seleccionar todos los
elementos de la imagen y Por ultimo “Aceptar”.
13. Busca en la biblioteca la imagen de Illustrator importada  Su
icono debería lucir de la siguiente forma.
14. Ahora sobre la capa “IMG VECTORIZADA”, arrastra la imagen con
extensión “.ai” a la escena principal.
15. Y ahora para terminar esta sección da clic derecho sobre la
imagen vectorizada  y selecciona “Separar”.
16. Notaras que se formaron rectángulos de diferentes tamaños
esto significa que todo esta correcto.
Da clic fuera para
deseleccionar todo y ahora
quítale el fondo al pájaro
para que solo se muestra el
contorno del mismo
Imagen sin
fondo blanco
17. Ahora selecciona cada parte de la imagen  y conviértela en un
símbolo de Tipo botón. Ejemplo: BTNALAS
Clic derecho 
Convertir en
símbolo
NOMBRE: BTNALASTIPO: BOTON
ACEPTAR
NOTA: Cada elemento que conviertas en símbolo relaciónalo con la extremidad ejemplo:
BTNALAS, BTBPATAIZQ, BTNPATADER, BTNOJOIZQ, BTNOJODER, BTNPICO, BTNVARITA, ETC.
18. Después selecciona cada elemento de la imagen convertida en
símbolo. Ejemplo seleccionar “BTNALAS”  ir a panel de
propiedades y en Nombre de la instancia colocar “ALAS”, sin
comillas.
TOMA EN CUENTA QUE EL SIMBOLO ESTA COMPUESTO POR BTNALAS
Por tanto selecciona cada parte de la imagen o extremidad y asígnale el nombre después de la palabra BTN al
nombre de la instancia dejemplo: BTNPICO, BTNPATADER, BTNPATAIZQ, ETC.
Nombre de
extremidad o
parte
19. Ahora selecciona Fotograma 1 de la capa Acciones 1  Presiona
F9  Escribe el siguiente código.
12. Después selecciona Fotograma 1 de la capa Acciones 2 
Presiona F9  Escribe el siguiente código.
13. Selecciona el primer Botón de color  Presiona F9  Escribir el
siguiente código.
14. Y así selección el segundo, tercer, cuarto y quinto Botón (O los
que tengas). Y aplica el mismo código
Botón
Código
Color
Hexadecimal
15. Ahora selecciona cada extremidad de la imagen  Presiona F9  Escribir
el siguiente código.
16. Realiza el paso 15 para cada parte de la imagen  solo cambia el nombre
de la instancia por la parte que hayas seleccionado.
Botón
BTNALAS
Nombre de la
instancia: ALAS
Botón
BTNCUERPO
Nombre de la
instancia: CUERPO
Manual de Flash Cs6
Manual de Flash Cs6
1. Crear un nuevo documento de Flash con los siguientes
características.
• Ancho: 400
• Alto: 550
• Velocidad de Fotogramas: 30fps
• Color de Fondo: Al gusto
2.Ahora crea las siguientes capas
3.Selecciona la capa “Componentes de reproductor”  Realizaras el
agregado de los componentes siguientes “MediaPlayBack” y “List”.
NOTA: Dichos Componentes debe ir en la capa de “Componentes de
reproductor”
2. Ir a ventana  componentes  Media  MediaPlayBack  y arrastrarlo al
escenario.
3. Teniendo seleccionado el componente “MediaPlayBack”  ir a panel de
propiedades  Nombre de instancia y colocar “ControladorDeAudio”
MediaPlayBack
Nombre de
Instancia
4. Dentro de propiedades ahora selecciona el botón “Panel de
vinculaciones”
5. Se mostrara un Panel “Inspector de componentes”
Panel de
vinculaciones
6. Asegúrate que estés en Pestaña “Parámetros”
Inspector de componente”
1. Pestaña parámetros
2. Activa ON
2. Activa MP3
MediaPlayBack
Ajusta tamaño
7. Ir a ventana  componentes  User Interface List y
arrastrarlo al escenario.
Ajusta el
tamaño de List
Componente
List
8. Teniendo seleccionado List  ir propiedades  nombre de la
instancia  colocar “ListaDeCanciones”.
9. Activa MultipleSeleccion.
Nombre de la
instancia
10. Colócate sobre la capa Fondo  aplica un fondo de imagen
deseado.
FONDO
11. Ahora colocaremos unas etiquetas donde se mostrara el nombre
del tema y la canción en reproducción.
Para esto busca los componentes “Label”  arrastra 2 Label al
escenario.
Componentes
“Label”
Selecciona y arrastra
la “Label” al
escenario
12. Selecciona la primer Label  ir a propiedades  Nombre de
instancia  colocar “LblCantidadDeCanciones”
Label 1
También verifica
PARÁMETROS DE
COMPONENTE y
estable los valores
aquí especificados
13. Selecciona la segunda Label  ir a propiedades  Nombre de
instancia  colocar “LblTitulo”
También verifica
PARÁMETROS DE
COMPONENTE y
estable los valores
aquí especificados
Label 2
Label 1
Manual de Flash Cs6
14. Ahora selecciona Capa “COMPONENTES DE REPRODUCTOR” 
Presiona F9 y agrega el siguiente código. Parte 1.
Parte 2.
15. Seleccionar el componente de Lista de canciones Presiona F9
 Agrega el siguiente código.
16. Ya para casi finalizar guarda el archivo de Flash o muévelo a una
carpeta con el nombre Reproductor (Nota: El nombre de la carpeta
puede ser cualquiera)
17. Y dentro de esta carpeta creada crea otra llamada Musica (Nota:
Esta carpeta si debe llamarse “Musica” ya que esta almacenara a
las canciones usadas)
18. Ahora dentro de la carpeta Música crea otra carpeta llamada “Pistas De
Audio” (Nota: No cambies el nombre de esta carpeta)
19. Abre un bloc de notas  Copia el siguiente código.
20. Guarda el bloc de notas dentro de la Carpeta Reproductor 
Musica  con el nombre de “Lista de canciones.asp”.
21. LISTO HAS TERMINADO
Manual de Flash Cs6

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Photoshop CS6: Ejercicios
Photoshop CS6: EjerciciosPhotoshop CS6: Ejercicios
Photoshop CS6: Ejercicios
 
Power point
Power pointPower point
Power point
 
Herramientas interactivas
Herramientas interactivasHerramientas interactivas
Herramientas interactivas
 
Practicas de corel draw x6
Practicas de corel draw x6Practicas de corel draw x6
Practicas de corel draw x6
 
Ejercicios Corel Draw basico
Ejercicios Corel Draw basicoEjercicios Corel Draw basico
Ejercicios Corel Draw basico
 
PREGUNTAS CONOCIMIENTO EN POWER POINT
PREGUNTAS CONOCIMIENTO EN POWER POINTPREGUNTAS CONOCIMIENTO EN POWER POINT
PREGUNTAS CONOCIMIENTO EN POWER POINT
 
Photoshop
PhotoshopPhotoshop
Photoshop
 
Manual de DreamWeaver
Manual de DreamWeaverManual de DreamWeaver
Manual de DreamWeaver
 
Guía práctica publisher 2013-03-04
Guía práctica publisher 2013-03-04Guía práctica publisher 2013-03-04
Guía práctica publisher 2013-03-04
 
Preguntas publisher
Preguntas publisherPreguntas publisher
Preguntas publisher
 
Práctica calificada corel draw
Práctica calificada corel drawPráctica calificada corel draw
Práctica calificada corel draw
 
Examen de corel draw
Examen de corel drawExamen de corel draw
Examen de corel draw
 
Manual de power_point
Manual de power_pointManual de power_point
Manual de power_point
 
El explorador de archivos de Windows 10
El explorador de archivos de Windows 10El explorador de archivos de Windows 10
El explorador de archivos de Windows 10
 
Manual de uso Powerpoint
Manual de uso PowerpointManual de uso Powerpoint
Manual de uso Powerpoint
 
Guía básica de Publisher 2016
Guía básica de Publisher 2016Guía básica de Publisher 2016
Guía básica de Publisher 2016
 
WINDOWS 10.pptx
WINDOWS 10.pptxWINDOWS 10.pptx
WINDOWS 10.pptx
 
Aprender illustrator cs6_con_100_ejercicios_prácticos
Aprender illustrator cs6_con_100_ejercicios_prácticosAprender illustrator cs6_con_100_ejercicios_prácticos
Aprender illustrator cs6_con_100_ejercicios_prácticos
 
Taller power point
Taller power pointTaller power point
Taller power point
 
MANUAL DE COREL DRAW
MANUAL DE COREL DRAWMANUAL DE COREL DRAW
MANUAL DE COREL DRAW
 

Destacado

La barra de herramientas de flash
La barra de herramientas de flashLa barra de herramientas de flash
La barra de herramientas de flashpene222
 
INTERFAZ GRÁFICA DE ADOBE FLASH CS6
INTERFAZ GRÁFICA DE ADOBE FLASH CS6INTERFAZ GRÁFICA DE ADOBE FLASH CS6
INTERFAZ GRÁFICA DE ADOBE FLASH CS6Maria Camila Mendez
 
Elementos de adobe flash
Elementos de adobe flashElementos de adobe flash
Elementos de adobe flashJoaquin Pecina
 
Ejercicio del Movimiento de objetos en dibujos animados con Flash
Ejercicio del Movimiento de objetos en dibujos animados con FlashEjercicio del Movimiento de objetos en dibujos animados con Flash
Ejercicio del Movimiento de objetos en dibujos animados con FlashFrancisco Javier Arce Anguiano
 
Para que sirve flash
Para que sirve flashPara que sirve flash
Para que sirve flashSergio Jaimes
 
Conceptos basicos en adobe flash nusero
Conceptos basicos en adobe flash   nuseroConceptos basicos en adobe flash   nusero
Conceptos basicos en adobe flash nuseroNilson Negrete
 
Uso De Herramientas De Flash
Uso De Herramientas De FlashUso De Herramientas De Flash
Uso De Herramientas De Flash185nayeli
 
Tutorial macromedia flash 8 sesión 1
Tutorial  macromedia flash 8  sesión 1Tutorial  macromedia flash 8  sesión 1
Tutorial macromedia flash 8 sesión 1ucss,unmsm
 
Historia de flash y sus versiones
Historia de flash y sus versionesHistoria de flash y sus versiones
Historia de flash y sus versionesCristhian-Medina
 
Técnicas básicas de animación en flash
Técnicas básicas de animación en flashTécnicas básicas de animación en flash
Técnicas básicas de animación en flashUniversidad Veracruzana
 

Destacado (20)

Tutorial Flash CS6
Tutorial Flash CS6 Tutorial Flash CS6
Tutorial Flash CS6
 
Guia ejercicios flash
Guia ejercicios flashGuia ejercicios flash
Guia ejercicios flash
 
Herramientas de Flash
Herramientas de FlashHerramientas de Flash
Herramientas de Flash
 
La barra de herramientas de flash
La barra de herramientas de flashLa barra de herramientas de flash
La barra de herramientas de flash
 
INTERFAZ GRÁFICA DE ADOBE FLASH CS6
INTERFAZ GRÁFICA DE ADOBE FLASH CS6INTERFAZ GRÁFICA DE ADOBE FLASH CS6
INTERFAZ GRÁFICA DE ADOBE FLASH CS6
 
Elementos de adobe flash
Elementos de adobe flashElementos de adobe flash
Elementos de adobe flash
 
Flash tipos de animaciones
Flash tipos de animacionesFlash tipos de animaciones
Flash tipos de animaciones
 
La interfaz de flash
La interfaz de flashLa interfaz de flash
La interfaz de flash
 
Flash taller 6
Flash taller 6Flash taller 6
Flash taller 6
 
Practica 1º de macromedia flash
Practica 1º de macromedia flashPractica 1º de macromedia flash
Practica 1º de macromedia flash
 
Ejercicio del Movimiento de objetos en dibujos animados con Flash
Ejercicio del Movimiento de objetos en dibujos animados con FlashEjercicio del Movimiento de objetos en dibujos animados con Flash
Ejercicio del Movimiento de objetos en dibujos animados con Flash
 
FLOR ANIMADA FLASH 8
FLOR ANIMADA FLASH 8FLOR ANIMADA FLASH 8
FLOR ANIMADA FLASH 8
 
Tipos de Animación
Tipos de AnimaciónTipos de Animación
Tipos de Animación
 
Practica 9.10.11.12.13
Practica 9.10.11.12.13Practica 9.10.11.12.13
Practica 9.10.11.12.13
 
Para que sirve flash
Para que sirve flashPara que sirve flash
Para que sirve flash
 
Conceptos basicos en adobe flash nusero
Conceptos basicos en adobe flash   nuseroConceptos basicos en adobe flash   nusero
Conceptos basicos en adobe flash nusero
 
Uso De Herramientas De Flash
Uso De Herramientas De FlashUso De Herramientas De Flash
Uso De Herramientas De Flash
 
Tutorial macromedia flash 8 sesión 1
Tutorial  macromedia flash 8  sesión 1Tutorial  macromedia flash 8  sesión 1
Tutorial macromedia flash 8 sesión 1
 
Historia de flash y sus versiones
Historia de flash y sus versionesHistoria de flash y sus versiones
Historia de flash y sus versiones
 
Técnicas básicas de animación en flash
Técnicas básicas de animación en flashTécnicas básicas de animación en flash
Técnicas básicas de animación en flash
 

Similar a Manual de Flash Cs6

Similar a Manual de Flash Cs6 (20)

Tutorial de monkey_jam
Tutorial de monkey_jamTutorial de monkey_jam
Tutorial de monkey_jam
 
Practicas bloque1 nuevo
Practicas bloque1 nuevoPracticas bloque1 nuevo
Practicas bloque1 nuevo
 
Explicacionconceptosflash 121031104619-phpapp01
Explicacionconceptosflash 121031104619-phpapp01Explicacionconceptosflash 121031104619-phpapp01
Explicacionconceptosflash 121031104619-phpapp01
 
Flash laboratorio nº 5 2grado
Flash laboratorio nº 5 2gradoFlash laboratorio nº 5 2grado
Flash laboratorio nº 5 2grado
 
Flash laboratorio nº 5 2grado
Flash laboratorio nº 5 2gradoFlash laboratorio nº 5 2grado
Flash laboratorio nº 5 2grado
 
Material Capacitación Taller "Las TICs y el Arte"
Material Capacitación Taller "Las TICs y el Arte"Material Capacitación Taller "Las TICs y el Arte"
Material Capacitación Taller "Las TICs y el Arte"
 
Flash 8
Flash 8Flash 8
Flash 8
 
Flash 8
Flash 8Flash 8
Flash 8
 
Practica 7
Practica 7Practica 7
Practica 7
 
Flash 2
Flash 2Flash 2
Flash 2
 
PresentacióN2
PresentacióN2PresentacióN2
PresentacióN2
 
PresentacióN2
PresentacióN2PresentacióN2
PresentacióN2
 
Explicacion conceptos flash
Explicacion conceptos flashExplicacion conceptos flash
Explicacion conceptos flash
 
Resumen
ResumenResumen
Resumen
 
Guia 1-vivencia (1)
Guia 1-vivencia (1)Guia 1-vivencia (1)
Guia 1-vivencia (1)
 
Flash CS4
Flash CS4Flash CS4
Flash CS4
 
Como Crear Sistema Diapositivas Macromedia Flash
Como Crear Sistema Diapositivas Macromedia FlashComo Crear Sistema Diapositivas Macromedia Flash
Como Crear Sistema Diapositivas Macromedia Flash
 
Gis burga
Gis   burgaGis   burga
Gis burga
 
Examennnnnn paketes instituto tcnologico superior
Examennnnnn paketes instituto tcnologico superiorExamennnnnn paketes instituto tcnologico superior
Examennnnnn paketes instituto tcnologico superior
 
Flashmacro
FlashmacroFlashmacro
Flashmacro
 

Último

UNIDAD DE APRENDIZAJE MARZO 2024.docx para educacion
UNIDAD DE APRENDIZAJE MARZO 2024.docx para educacionUNIDAD DE APRENDIZAJE MARZO 2024.docx para educacion
UNIDAD DE APRENDIZAJE MARZO 2024.docx para educacionCarolVigo1
 
La Congregación de Jesús y María, conocida también como los Eudistas, fue fun...
La Congregación de Jesús y María, conocida también como los Eudistas, fue fun...La Congregación de Jesús y María, conocida también como los Eudistas, fue fun...
La Congregación de Jesús y María, conocida también como los Eudistas, fue fun...Unidad de Espiritualidad Eudista
 
CARPETA PEDAGÓGICA 2024.docx para educacion
CARPETA PEDAGÓGICA 2024.docx para educacionCARPETA PEDAGÓGICA 2024.docx para educacion
CARPETA PEDAGÓGICA 2024.docx para educacionCarolVigo1
 
Kirpi-el-erizo libro descargar pdf 1 link
Kirpi-el-erizo libro descargar pdf 1 linkKirpi-el-erizo libro descargar pdf 1 link
Kirpi-el-erizo libro descargar pdf 1 linkMaximilianoMaldonado17
 
PROGRAMACIÓN CURRICULAR ANUAL DE CIENCIA Y TECNOLOGÍA
PROGRAMACIÓN CURRICULAR ANUAL DE CIENCIA Y TECNOLOGÍAPROGRAMACIÓN CURRICULAR ANUAL DE CIENCIA Y TECNOLOGÍA
PROGRAMACIÓN CURRICULAR ANUAL DE CIENCIA Y TECNOLOGÍAJoaqunSolrzano
 
TECNOLOGÍA EDUCATIVA, USO DE LAS TIC.pptx
TECNOLOGÍA EDUCATIVA, USO DE LAS TIC.pptxTECNOLOGÍA EDUCATIVA, USO DE LAS TIC.pptx
TECNOLOGÍA EDUCATIVA, USO DE LAS TIC.pptxFranciscoCruz296518
 
1° GRADO UNIDAD DE APRENDIZAJE 0 - 2024.pdf
1° GRADO UNIDAD DE APRENDIZAJE 0 - 2024.pdf1° GRADO UNIDAD DE APRENDIZAJE 0 - 2024.pdf
1° GRADO UNIDAD DE APRENDIZAJE 0 - 2024.pdfdiana593621
 
Concurso de Innovación Pedagógica T2 FONDEP 2024 Ccesa007.pdf
Concurso de Innovación Pedagógica  T2  FONDEP 2024 Ccesa007.pdfConcurso de Innovación Pedagógica  T2  FONDEP 2024 Ccesa007.pdf
Concurso de Innovación Pedagógica T2 FONDEP 2024 Ccesa007.pdfDemetrio Ccesa Rayme
 
sociales ciencias segundo trimestre tercero
sociales ciencias segundo trimestre tercerosociales ciencias segundo trimestre tercero
sociales ciencias segundo trimestre terceroCEIP TIERRA DE PINARES
 
Anna Llenas Serra. El monstruo de colores. Doctor de emociones.pdf
Anna Llenas Serra. El monstruo de colores. Doctor de emociones.pdfAnna Llenas Serra. El monstruo de colores. Doctor de emociones.pdf
Anna Llenas Serra. El monstruo de colores. Doctor de emociones.pdfSaraGabrielaPrezPonc
 
PPT Protocolo de desregulación emocional.pptx
PPT Protocolo de desregulación emocional.pptxPPT Protocolo de desregulación emocional.pptx
PPT Protocolo de desregulación emocional.pptxKarenSepulveda23
 
EL ECLIPSE DE LA PAZ (cuento literario). Autor y diseñador JAVIER SOLIS NOYOLA
EL ECLIPSE DE LA PAZ (cuento literario). Autor y diseñador JAVIER SOLIS NOYOLAEL ECLIPSE DE LA PAZ (cuento literario). Autor y diseñador JAVIER SOLIS NOYOLA
EL ECLIPSE DE LA PAZ (cuento literario). Autor y diseñador JAVIER SOLIS NOYOLAJAVIER SOLIS NOYOLA
 
Tecnología educativa en la era actual .pptx
Tecnología educativa en la era actual .pptxTecnología educativa en la era actual .pptx
Tecnología educativa en la era actual .pptxJulioSantin2
 
CIENCIAS SOCIALES SEGUNDO TRIMESTRE TERCERO
CIENCIAS SOCIALES SEGUNDO TRIMESTRE TERCEROCIENCIAS SOCIALES SEGUNDO TRIMESTRE TERCERO
CIENCIAS SOCIALES SEGUNDO TRIMESTRE TERCEROCEIP TIERRA DE PINARES
 
1ro Programación Anual D.P.C.C ACTUALIZADO
1ro Programación Anual D.P.C.C ACTUALIZADO1ro Programación Anual D.P.C.C ACTUALIZADO
1ro Programación Anual D.P.C.C ACTUALIZADODJElvitt
 
Recursos Tecnológicos, página AIP-CRT 2 0 2 4.pdf
Recursos Tecnológicos, página  AIP-CRT 2 0 2 4.pdfRecursos Tecnológicos, página  AIP-CRT 2 0 2 4.pdf
Recursos Tecnológicos, página AIP-CRT 2 0 2 4.pdfNELLYKATTY
 
U2_EA1_descargable TIC 2 SEM VIR PRE.pdf
U2_EA1_descargable TIC 2 SEM VIR PRE.pdfU2_EA1_descargable TIC 2 SEM VIR PRE.pdf
U2_EA1_descargable TIC 2 SEM VIR PRE.pdfJavier Correa
 

Último (20)

UNIDAD DE APRENDIZAJE MARZO 2024.docx para educacion
UNIDAD DE APRENDIZAJE MARZO 2024.docx para educacionUNIDAD DE APRENDIZAJE MARZO 2024.docx para educacion
UNIDAD DE APRENDIZAJE MARZO 2024.docx para educacion
 
La Congregación de Jesús y María, conocida también como los Eudistas, fue fun...
La Congregación de Jesús y María, conocida también como los Eudistas, fue fun...La Congregación de Jesús y María, conocida también como los Eudistas, fue fun...
La Congregación de Jesús y María, conocida también como los Eudistas, fue fun...
 
Tema 5.- BASES DE DATOS Y GESTIÓN DE LA INF. PARA EL MARKETING.pdf
Tema 5.- BASES DE DATOS Y GESTIÓN DE LA INF. PARA EL MARKETING.pdfTema 5.- BASES DE DATOS Y GESTIÓN DE LA INF. PARA EL MARKETING.pdf
Tema 5.- BASES DE DATOS Y GESTIÓN DE LA INF. PARA EL MARKETING.pdf
 
CARPETA PEDAGÓGICA 2024.docx para educacion
CARPETA PEDAGÓGICA 2024.docx para educacionCARPETA PEDAGÓGICA 2024.docx para educacion
CARPETA PEDAGÓGICA 2024.docx para educacion
 
Kirpi-el-erizo libro descargar pdf 1 link
Kirpi-el-erizo libro descargar pdf 1 linkKirpi-el-erizo libro descargar pdf 1 link
Kirpi-el-erizo libro descargar pdf 1 link
 
PROGRAMACIÓN CURRICULAR ANUAL DE CIENCIA Y TECNOLOGÍA
PROGRAMACIÓN CURRICULAR ANUAL DE CIENCIA Y TECNOLOGÍAPROGRAMACIÓN CURRICULAR ANUAL DE CIENCIA Y TECNOLOGÍA
PROGRAMACIÓN CURRICULAR ANUAL DE CIENCIA Y TECNOLOGÍA
 
TECNOLOGÍA EDUCATIVA, USO DE LAS TIC.pptx
TECNOLOGÍA EDUCATIVA, USO DE LAS TIC.pptxTECNOLOGÍA EDUCATIVA, USO DE LAS TIC.pptx
TECNOLOGÍA EDUCATIVA, USO DE LAS TIC.pptx
 
1° GRADO UNIDAD DE APRENDIZAJE 0 - 2024.pdf
1° GRADO UNIDAD DE APRENDIZAJE 0 - 2024.pdf1° GRADO UNIDAD DE APRENDIZAJE 0 - 2024.pdf
1° GRADO UNIDAD DE APRENDIZAJE 0 - 2024.pdf
 
Concurso de Innovación Pedagógica T2 FONDEP 2024 Ccesa007.pdf
Concurso de Innovación Pedagógica  T2  FONDEP 2024 Ccesa007.pdfConcurso de Innovación Pedagógica  T2  FONDEP 2024 Ccesa007.pdf
Concurso de Innovación Pedagógica T2 FONDEP 2024 Ccesa007.pdf
 
sociales ciencias segundo trimestre tercero
sociales ciencias segundo trimestre tercerosociales ciencias segundo trimestre tercero
sociales ciencias segundo trimestre tercero
 
Anna Llenas Serra. El monstruo de colores. Doctor de emociones.pdf
Anna Llenas Serra. El monstruo de colores. Doctor de emociones.pdfAnna Llenas Serra. El monstruo de colores. Doctor de emociones.pdf
Anna Llenas Serra. El monstruo de colores. Doctor de emociones.pdf
 
Power Point E. Sab: Adoración sin fin...
Power Point E. Sab: Adoración sin fin...Power Point E. Sab: Adoración sin fin...
Power Point E. Sab: Adoración sin fin...
 
PPT Protocolo de desregulación emocional.pptx
PPT Protocolo de desregulación emocional.pptxPPT Protocolo de desregulación emocional.pptx
PPT Protocolo de desregulación emocional.pptx
 
Conducta ética en investigación científica.pdf
Conducta ética en investigación científica.pdfConducta ética en investigación científica.pdf
Conducta ética en investigación científica.pdf
 
EL ECLIPSE DE LA PAZ (cuento literario). Autor y diseñador JAVIER SOLIS NOYOLA
EL ECLIPSE DE LA PAZ (cuento literario). Autor y diseñador JAVIER SOLIS NOYOLAEL ECLIPSE DE LA PAZ (cuento literario). Autor y diseñador JAVIER SOLIS NOYOLA
EL ECLIPSE DE LA PAZ (cuento literario). Autor y diseñador JAVIER SOLIS NOYOLA
 
Tecnología educativa en la era actual .pptx
Tecnología educativa en la era actual .pptxTecnología educativa en la era actual .pptx
Tecnología educativa en la era actual .pptx
 
CIENCIAS SOCIALES SEGUNDO TRIMESTRE TERCERO
CIENCIAS SOCIALES SEGUNDO TRIMESTRE TERCEROCIENCIAS SOCIALES SEGUNDO TRIMESTRE TERCERO
CIENCIAS SOCIALES SEGUNDO TRIMESTRE TERCERO
 
1ro Programación Anual D.P.C.C ACTUALIZADO
1ro Programación Anual D.P.C.C ACTUALIZADO1ro Programación Anual D.P.C.C ACTUALIZADO
1ro Programación Anual D.P.C.C ACTUALIZADO
 
Recursos Tecnológicos, página AIP-CRT 2 0 2 4.pdf
Recursos Tecnológicos, página  AIP-CRT 2 0 2 4.pdfRecursos Tecnológicos, página  AIP-CRT 2 0 2 4.pdf
Recursos Tecnológicos, página AIP-CRT 2 0 2 4.pdf
 
U2_EA1_descargable TIC 2 SEM VIR PRE.pdf
U2_EA1_descargable TIC 2 SEM VIR PRE.pdfU2_EA1_descargable TIC 2 SEM VIR PRE.pdf
U2_EA1_descargable TIC 2 SEM VIR PRE.pdf
 

Manual de Flash Cs6

  • 2. • Las Capas • Las capas ayudan a organizar las ilustraciones de los documentos. Los objetos de una capa pueden dibujarse y editarse sin que afecten a objetos de otras capas. En las zonas del escenario en las que no hay nada en una capa, pueden verse a través de ella las capas situadas debajo.
  • 3. Para ayudar a crear efectos sofisticados, utilice capas de guía especiales para facilitar el dibujo y la edición y crear capas de máscara. Existen cinco tipos de capas que se pueden utilizar en Flash: • Las capas normales. • Las capas de máscara. • Las capas de guía. • Las capas de interpolación de movimiento. • Las capas de esqueleto
  • 4. • Para organizar un documento por temas, puede utilizar escenas. Por ejemplo, puede utilizar escenas diferentes para una introducción, un mensaje de carga y los créditos. • Aunque el uso de escenas presenta algunas desventajas, hay situaciones en las que no son muchas, como cuando se crean animaciones largas. Cuando utilice escenas, evite tener que administrar un gran número de archivos FLA, ya que cada escena está contenida en un solo archivo FLA.
  • 5. Cuando se publica un archivo SWF, la línea de tiempo de cada una de las escenas se combina en una sola línea de tiempo en el archivo SWF. Una vez compilado el archivo SWF, éste se comporta como se si hubiera creado el archivo FLA con una sola escena. Esta es la causa de algunas de las desventajas del uso de escenas: • Las escenas pueden crear confusión a la hora de editar documentos, especialmente en entornos de varios autores. • Las escenas suelen producir archivos SWF de gran tamaño. • Las escenas obligan a los usuarios a descargar progresivamente todo el archivo SWF.
  • 6. • Un fotograma representa el contenido de la película en un instante de tiempo. Por tanto, una animación no es más que una sucesión de fotogramas. Todo esto se puede controlar desde la Línea de Tiempo, pero no todos los fotogramas tienen el mismo comportamiento ni se tratan igual. Veamos qué tipos de fotogramas hay y cuáles son sus rasgos.
  • 7. • Fotogramas claves: Es aquel que se define cambios de animación. • Fotograma vacío: Es aquél que está en blanco , no tiene ninguna instrucción para la animación. • Fotograma intermedio: Es aquél que se encuentra entre dos fotogramas claves.
  • 8. • Para insertar un fotograma nuevo, seleccione Insertar - Línea de tiempo - Fotograma (F5). • Para crear un nuevo fotograma clave, elija Insertar - Línea de tiempo - Fotograma clave (F6), o bien, presione clic derecho en el fotograma donde desee colocar un fotograma clave y seleccione Insertar fotograma clave en el menú contextual. • Para crear un nuevo fotograma clave vacío, elija Insertar - Línea de tiempo - Fotograma clave vacío, o bien presione clic derecho en el fotograma donde desee colocar el fotograma clave y seleccione Insertar fotograma clave vacío en el menú contextual.
  • 10. 1. Abrimos Adobe Flash Cs6, ahora procedemos a crear un nuevo archivo para esto damos clic en el menú Archivo  Nuevo.
  • 11. 2. En la pestaña “General” escogemos el tipo ActionScript 3.0 y de parámetros elegimos un tamaño estándar para banner, 728 pixeles de ancho por 90 pixeles de alto, 30 cuadros(Fotogramas) por segundo, color de fondo negro y damos clic en “Ok”.
  • 12. • Selecciona tu espacio de trabajo apropiado en el botón superior derecho. • Recuerda que puedes crear tu propio espacio de trabajo Espacio recomendado “Clásico”
  • 13. 3. Generamos seis capas y dando doble clic sobre el nombre de la capa podemos renombrarlas con los siguientes títulos: “Estrella1”, “Estrella2”, “Logo”, “Café”, “Botón” y “Frase”. 4. Después agrupa las estrellas en una carpeta
  • 14. 5. Crea una nueva Escena por medio del menú Insertar Escena. 6. Por ultimo renombra las escenas: • PROMO • ENTRADA
  • 15. 7. En la escena “Promo” creamos cuatro capas con los siguientes títulos: “Botón”, “Texto2”, “Texto1”y “Fondo”. 8. Cambia el tamaño del banner por: 972 de ancho y 95 de alto
  • 16. 9. Importa todas las imágenes a usar para esta practica Ovalo con relleno blanco
  • 18. Play (); - Activa la escena. GotoAndPlay (); - Navega hacia un Frame, fotograma o escena y activa la escena. GotoAndStop (); - Navega hacia un Frame, fotograma o escena y detiene la escena. Stop (); - Detiene la escena.
  • 19. 1. Selecciona el botón y conviértelo en botón con el nombre de botonsiguiente 2. Presiona Ctrl + Enter  Para ver resultado
  • 21. 1. Crear un archivo nuevo de ActionScrib 2.0 con el tamaño de: 500 de ancho x 700 de alto 2. Color de fondo negro 3. Fotogramas x segundo: 30
  • 22. 4. Crear las siguientes capas con su respectivo nombre. 5. Importa las imágenes a usar a la biblioteca
  • 23. Aplica mascara a la capa de fondo rosa Clic derechoMascara • Ahora convierte la capa FONDO ROSA y CELULAR en símbolos de tipo clip de película
  • 24. Recuerda que para mostrar esta venta acciones debes presionar F9 y seleccionar cada uno de los objetos convertidos en símbolos para ingresar el código siguiente.
  • 27. 1. Crea un nuevo documento de flash con las siguientes medidas: • ActionSript 2.0 • 600 de ancho • 400 de alto 2. Crea dos capas con el nombre de Fondo y la otra con el nombre Figura.
  • 28. • Para esta practica se usa una figura creada a partir de formas básicas pero toma en cuenta que para futuras aplicaciones puedes usar también imágenes. 1. Sobre tu escena 1Capa FiguraCrear un circulo y agregar un color de relleno. 2. Selección tu circulo y da clic derecho convertir en símbolo 3. Agrega el nombre de “Pelota”
  • 29. De tipo clip de película  presionar Aceptar 4. Da doble clic al circulo para entrar a la edición del símbolo  Nota que en la barra de la línea de tiempo este en Pelota Nombre Clip de película Símbolo
  • 30. 5. Ahora en la línea de tiempo busca la capa 1 y renómbrala como: Efecto Pelota. 6. Y agrega un tiempo de 30 fotogramas a la capa Efecto Pelota. 7. Selecciona el primer cuadro  agrega un color diferente y después el cuadro 30 y también Cuadro 1 Cuadro 30 Recuerda que para colorear selección el panel muestras
  • 31. 8. Da clic en escena 1  Esto para regresar al inicio y aplicar la acción de arrastrar y soltar. 9. Selecciona tu circulo o forma y presiona F9 para agregar el siguiente código.
  • 33. On(press)  Ejecuta el evento presionar botón {  Indica el bloque de inicio de código StartDrag(this); Indica el inicio tomar objeto para poder moverlo a otro lugar Mouse.hide(); Esta línea se encarga de ocultar el puntero del ratón cuando el objeto es tomado con clic izquierdo sostenido. Para arrastrarlo. } Termina bloque de código
  • 34. On(release, releaseOutside)  Ejecuta el evento soltar botón o dejar de presionar clic izquierdo {  Indica el bloque de inicio de código StopDrag(); Indica que debe detenerse y soltar el objeto. Mouse.show(); Esta línea se encarga de mostrar el puntero del ratón cuando el objeto es soltado. } Termina bloque de código
  • 36. 1. En Flash, se ejecuta código ActionScript cuando se produce un evento: por ejemplo, • cuando se carga un clip de película, cuando se entra en un fotograma clave de la línea de tiempo o cuando el usuario hace clic en un botón. 2. Los eventos puede accionarlos el usuario o el sistema. Los usuarios hacen clic en botones y presionan teclas; el sistema acciona eventos cuando se cumplen condiciones específicas o finalizan procesos.
  • 37. • Eventos de ratón y teclado: Un usuario que interactúa con la aplicación o el archivo SWF desencadena eventos de ratón y de teclado • Eventos de clip: Dentro de un clip de película, puede reaccionar a una serie de eventos de clip que se desencadenan cuando el usuario entra o sale de la escena o interactúa con la misma mediante el ratón o el teclado. • Eventos de fotograma: En una línea de tiempo principal o de clip de película, un evento de sistema tiene lugar cuando la cabeza lectora entra en un fotograma clave (esto se conoce como evento de fotograma). Los eventos de fotograma son útiles para desencadenar acciones en función del paso del tiempo (el avance por la línea de tiempo) o para interactuar con elementos que actualmente están visibles en el escenario.
  • 39. 1. Crea un documento de flash con las siguientes características: ActionScript: 3.0 Ancho: 800px Alto: 450px Fondo: Negro
  • 40. 1. Ir a Archivo  Importar  Importar a biblioteca 2. Selecciona tus imágenes que usaras Máximo 7 3. En la capa de fondo coloca la imagen de cortinas y adáptala al tamaño de la escena En esta capa va la imagen de cortinas o cualquier imagen a usar como fondo Fondo
  • 41. 4. Selecciona la capa de Fotos  coloca las 7 imágenes en la escena. 5. Cambiales el tamaño, orientación distribuirlas en la escena de tal forma que queden como la imagen En esta capa van las imágenes usadas en nuestro álbum
  • 42. 6. Selecciona la de Fotos  notaras que todas las fotos se seleccionaron. 7. Después da clic derecho sobre las Fotos  Selecciona la opción “Distribuir en capas” 8. Notaras que se crearon nuevas capas con su respectivo nombre 9. Ahora agrupa las capas en una nueva Carpeta y colócale el nombre de FOTOS Capas nuevas según el numero de Fotos
  • 43. 10. Selecciona todas las capas de cada FOTO, excepto la de FONDO. y arrástralas dentro de la capa creada Carpeta “FOTOS” Fotos dentro de la Capa carpeta FOTOS Capas seleccionadas
  • 44. 11 Selecciona todas las fotos con ayuda de la tecla Shift 12. Da clic derecho sobre las fotos o presiona (Ctrl+B) para separar 13. A continuación notaras que las fotos se ponen como punteadas esto indica que ya están separadas Si acercas veras que se ven unos putos blancos
  • 45. 14. Da clic fuera de la Escena para deseleccionar las fotos  Ve a la caja de herramientas y Busca bote de tinta. 15. Ir a panel de propiedades y en trazo colocar el valor de 6  color de trazo blanco  Extremo: cuadrado y unión: inglete Color de trazo Trazo Extremo Union
  • 46. 16. Ahora sobre cada foto da clic izquierdo para colocar un borde de color blanco ya que esto simulara el marco de una foto. Borde de Foto.
  • 47. 17. Da doble clic izq. a una foto para seleccionarla junto con su borde y después  clic derecho “Convertir en símbolo”  tipo Botón  nombre: img1 Tipo: Boton Foto seleccionada Para esta imagen se le colocara img1 y para las demás img2, img3, img4, img5 y así sucesivamente Por ultimo Aceptar
  • 48. 18. Repite el paso 17 paras las 6 imágenes restantes  solo verifica seleccionar cada imagen correctamente  y de colocar el nombre: img2, img3, etc. y que sea símbolo de tipo Botón Símbolos creados de tipo Botón
  • 49. 19. Selecciona cualquier imagen  Dar doble clic izq.  Notaras que entraras al símbolo Botón. 20. Crea los 3 estados de botón  con solo presionar F6 Doble clic Estados de Botón Clic para seleccionar primer estado y presionar F6 Estados de Botón creados
  • 50. 21. Da clic en el Fotograma Sobre  clic derecho sobre la Foto  convertir en símbolo. 22. Ahora asigna el Nombre de “img1-Animada”  De Tipo Clip de película  Aceptar Seleccionar Fotograma Foto seleccionada
  • 51. 23. A la imagen convertida en símbolo  Da doble clic izq.  veras que entras al símbolo de img1-Animada.
  • 52. 24. Selecciona la Capa 1  Fotograma 1  después clic derecho sobre Fotograma 1  crear Interpolación clásica 25. Ir a Fotograma 15  presionar F6 26. Selecciona el Fotograma 15  después da un clic a la Foto activa  y aumenta su tamaño dando clic izq. Sostenido. En una de las esquinas. NOTA: EL AUMENTO DE TAMAÑO TIENE QUE SER MUY POCO.
  • 53. 27. Clic izq. sostenido para ampliar. Foto ampliada. Recuerda que para ampliar la foto de forma proporcional en ancho y alto puedes hacer uso de la tecla SHIFT+Clic izq.
  • 54. 28. Para ver el resultado solo presiona Enter  Veras que la foto se hace un poco grande. 29. Después colócate en el Fotograma 1  panel de Propiedades  Busca la sección Interpolación  y en Aceleración coloca el valor de 100 Fotograma 1 Aceleracion
  • 55. 30. Ahora colócate en el Fotograma 15  panel de Propiedades  Busca la sección Interpolación  y en Aceleración coloca el valor de 100 31. En el mismo Fotograma 15 da clic izq.  presiona F9  coloca el código: stop(); Fotograma 15 Aceleración
  • 56. 32. Regresa a la Escena Principal  presionar CTRL + ENTER  para ver el resultado. 33. Repetir los Pasos 19,20,21,..,31 para el resto de las imágenes. Clic en la Escena 2. En su caso podría ser Escena 1
  • 58. Nuevo ActionScript 2.0 600px 400px 30fps Crea documento con las siguientes características OK Color al gusto
  • 59. 1. Crea las siguientes capas. 2. Verifica que los textos y rectángulos coincidan con las capas. 3. Recuerda que los colores o rellenos textos y el relleno pueden ser modificados a tu gusto Rectángulos de texto con relleno blancoTextos normales
  • 60. 4. Selecciona la herramienta texto  y dibuja un rectángulo sobre el rectángulo creado anteriormente del usuario. 5. En panel de propiedades  Selecciona la lista  Tipo de texto  y selecciona “Introducción de texto” 6. Y en Nombre del la instancia coloca  “usuario” Tipo de texto Nombre de la instancia Rectángulo de texto Asegúrate de que cuando dibujes los rectángulos de texto estés en la capa de TEXTO ENTRADA
  • 61. 7. Repite el paso 4  Dibuja el rectángulo de texto ahora sobre el rectángulo de contraseña. Rectángulo de texto 2 Asegúrate de que cuando dibujes los rectángulos de texto estés en la capa de TEXTO ENTRADA Mueve la capa TEXTO ENTRADA hasta parte superior. Capa movida Rectángulo de texto 1
  • 62. Resultado de los pasos anteriores.
  • 63. 8. Ahora crearemos el mensaje de texto ya que este validara al usuario si coloca un dato incorrecto se le mostrara “Contraseña o usuario invalido…” Para esto asegúrate de estar en la capa de “Mensaje” Mensaje
  • 64. 9. Selecciona la herramienta Texto 10. Traza un rectángulo grande por encima de usuario y contraseña. 11. Sin dejar el rectángulo de texto anterior  Ve al panel de propiedades y Selecciona la lista  Texto estático, cámbialo por  Texto dinámico Rectángulo de texto
  • 65. 12. Notaras que al deseleccionar el rectángulo se torna punteado, esto indica que estas bien. 13. Ahora crea y diseña un botón a tu gusto… También puedes usar una imagen como botón.
  • 66. 14. Ahora crearemos el botón  verifica que estés en la capa Boton Capa Boton Selecciona la capa Botón y en esta realizaras el diseño del botón a crear
  • 67. 15. Ir a menú Insertar  Nuevo símbolo  Dar el Nombre: Boton o cualquier otro nombre. 16. Tipo:  Botón.  Presionar Aceptar 17. Si el botón lo vas crear crea 2 capas: una para el texto y otra para el rectángulo del botón  por ultimo diseña tu botón. Dándole los 3 estados. Recuerda que tu botón puede ser de cualquier forma. Ejemplo.
  • 68. 18. Regresa a la Escena  y selecciona el botón creado. 19. Después ir al panel de propiedades  Nombre de la instancia  coloca el nombre “valida” Nombre de la instancia
  • 69. 20. Selecciona el Rectángulo de texto 1 y en propiedades agrega el Nombre de instancia: “usuario” 21. Selecciona rectángulo de texto 2 y en propiedades agrega el Nombre de instancia: “contrasenia” Rectángulo de texto 1 Rectángulo de texto 2
  • 70. 22. Selecciona el rectángulo de texto mensaje  En propiedades asigna el Nombre de instancia: “mensaje” 23 .Ve resultado final Rectángulo de texto mensaje
  • 71. Ahora puedes cambiar algunas propiedades como: color de letra, tamaño, tipo de letra, relleno, etc.
  • 72. 24. Para finalizar ahora selecciona la capa “CODIGOS” 25. Selecciona el Fotograma 1, dar clic  Presionar F9 y agrega el siguiente código… Fotograma 1
  • 76. 1. Inicie el documento “BannerIntel.fla”, encontramos que existen siete capas, las capas contienen clips de película listos para animar por código. 2. Antes de comenzar, es necesario asignarles un nombre de instancia para poder referenciarlos en nuestro código, comenzaremos con el Carro3D. Seleccionamos nuestra imagen del carro y nos vamos al panel de propiedades, en el recuadro donde dice nombre de instancia escribimos “Carro3D”.
  • 77. 3. Ahora seleccionamos nuestro logo y nos vamos al panel de propiedades, en el recuadro donde dice nombre de instancia escribimos “Logo”. 4. Después seleccionamos nuestro texto y nos vamos al panel de propiedades, en el recuadro donde dice nombre de instancia escribimos “Texto”.
  • 78. 5. En la capa de acciones seleccionamos nuestro fotograma ubicado en el Fotograma 1, abrimos nuestra ventana de Acciones clic en el menú “Ventana – Acciones” o presionamos “F9”. 6. En la ventana de acciones lo primero que necesitamos hacer es importar nuestras clases (instrucciones) al documento y lo podemos hacer con el siguiente código.
  • 83. 1. Crear un nuevo documento con las siguientes propiedades • ActionScript: 2.0 • Ancho: 600px • Alto: 450px • Cuadros por segundo: 30fps • Fondo: El deseado incluso puede ser una imagen de fondo
  • 84. 2. Crear las siguientes capas: 3. Ahora Inserta un Nuevo símbolo  Tipo clip de película  Nombre ecualizador  Aceptar
  • 85. 4. Dentro del Símbolo Ecualizador  Crear las 2 capas siguientes: 5. En la capa de Barras Ver dibuja unas barras verticales 6. Una vez terminado las barras selecciona la capa Barras Ver  después clic derecho sobre las barras  Convertir en símbolo  Dar el nombre de Barras musicales  Tipo Clip de película
  • 86. 7. Ahora distribuye todas las barras en capas.  Teniendo la capa 1 activa  Da clic derecho sobre las barras  Distribuir en capas. 8. Todas la capa resultantes animar cada 10 Fotogramas de tal forma que quedara 10, 20, 30 y 40.  y aplica interpolación de moviente clásica.
  • 88. 1. Crea Nuevo documento y aplica los siguientes ajustes. • ActionScript: 2.0 • Alto:400px • Ancho: 750px • Velocidad de fotogramas: 30fps • Fondo: El que gustes
  • 89. 2. Ahora crea las siguientes capas con el orden especificado. Nota: Puedes variar el orden pero toma en cuenta que los colores y el personaje este siempre visibles. Capas creadas
  • 90. 3. Para esta practica se necesitaran: • Un Cursor • Fondo • Imagen a pintar • Botones para la paleta de colores
  • 91. 4. Para crear los botones puedes usar un botón sencillo o buscar en internet “splashes” para usarlos como paleta de colores. 5. Importa o vectoriza una paleta de colores en ILLustrator  Colocarla en la capa paleta.
  • 92. 6. Coloca sobre tu capa colores  cada uno de los botones que definen el color a rellenar
  • 93. 7. Ahora coloca sobre la capa FONDO la imagen a usar como fondo de tu animación.
  • 94. 8. Busca en internet y descarga una imagen para colorear  Abre Illustrator  importa la imagen descargada  Busca la opción en la barra de propiedades “Calco de imagen” 9. Despliega la lista y selecciona  la opción “Logotipo en blanco y negro”. 10. Ahora presionar el botón “Expandir” 11. Una vez expandida la imagen da clic derecho sobre esta  y elige la opción “Desagrupar”  Guarda la imagen con otro Nombre y como archivo de Tipo: Adobe Illustrator (*.AI)
  • 95. 12. Ahora importa el archivo de Illustrator a la biblioteca de Flash  Actica la primera casilla “Capa 1” para seleccionar todos los elementos de la imagen y Por ultimo “Aceptar”.
  • 96. 13. Busca en la biblioteca la imagen de Illustrator importada  Su icono debería lucir de la siguiente forma.
  • 97. 14. Ahora sobre la capa “IMG VECTORIZADA”, arrastra la imagen con extensión “.ai” a la escena principal.
  • 98. 15. Y ahora para terminar esta sección da clic derecho sobre la imagen vectorizada  y selecciona “Separar”. 16. Notaras que se formaron rectángulos de diferentes tamaños esto significa que todo esta correcto. Da clic fuera para deseleccionar todo y ahora quítale el fondo al pájaro para que solo se muestra el contorno del mismo Imagen sin fondo blanco
  • 99. 17. Ahora selecciona cada parte de la imagen  y conviértela en un símbolo de Tipo botón. Ejemplo: BTNALAS Clic derecho  Convertir en símbolo NOMBRE: BTNALASTIPO: BOTON ACEPTAR NOTA: Cada elemento que conviertas en símbolo relaciónalo con la extremidad ejemplo: BTNALAS, BTBPATAIZQ, BTNPATADER, BTNOJOIZQ, BTNOJODER, BTNPICO, BTNVARITA, ETC.
  • 100. 18. Después selecciona cada elemento de la imagen convertida en símbolo. Ejemplo seleccionar “BTNALAS”  ir a panel de propiedades y en Nombre de la instancia colocar “ALAS”, sin comillas. TOMA EN CUENTA QUE EL SIMBOLO ESTA COMPUESTO POR BTNALAS Por tanto selecciona cada parte de la imagen o extremidad y asígnale el nombre después de la palabra BTN al nombre de la instancia dejemplo: BTNPICO, BTNPATADER, BTNPATAIZQ, ETC. Nombre de extremidad o parte
  • 101. 19. Ahora selecciona Fotograma 1 de la capa Acciones 1  Presiona F9  Escribe el siguiente código.
  • 102. 12. Después selecciona Fotograma 1 de la capa Acciones 2  Presiona F9  Escribe el siguiente código.
  • 103. 13. Selecciona el primer Botón de color  Presiona F9  Escribir el siguiente código. 14. Y así selección el segundo, tercer, cuarto y quinto Botón (O los que tengas). Y aplica el mismo código Botón Código Color Hexadecimal
  • 104. 15. Ahora selecciona cada extremidad de la imagen  Presiona F9  Escribir el siguiente código. 16. Realiza el paso 15 para cada parte de la imagen  solo cambia el nombre de la instancia por la parte que hayas seleccionado. Botón BTNALAS Nombre de la instancia: ALAS Botón BTNCUERPO Nombre de la instancia: CUERPO
  • 107. 1. Crear un nuevo documento de Flash con los siguientes características. • Ancho: 400 • Alto: 550 • Velocidad de Fotogramas: 30fps • Color de Fondo: Al gusto
  • 108. 2.Ahora crea las siguientes capas 3.Selecciona la capa “Componentes de reproductor”  Realizaras el agregado de los componentes siguientes “MediaPlayBack” y “List”. NOTA: Dichos Componentes debe ir en la capa de “Componentes de reproductor”
  • 109. 2. Ir a ventana  componentes  Media  MediaPlayBack  y arrastrarlo al escenario. 3. Teniendo seleccionado el componente “MediaPlayBack”  ir a panel de propiedades  Nombre de instancia y colocar “ControladorDeAudio” MediaPlayBack Nombre de Instancia
  • 110. 4. Dentro de propiedades ahora selecciona el botón “Panel de vinculaciones” 5. Se mostrara un Panel “Inspector de componentes” Panel de vinculaciones
  • 111. 6. Asegúrate que estés en Pestaña “Parámetros” Inspector de componente” 1. Pestaña parámetros 2. Activa ON 2. Activa MP3 MediaPlayBack Ajusta tamaño
  • 112. 7. Ir a ventana  componentes  User Interface List y arrastrarlo al escenario. Ajusta el tamaño de List Componente List
  • 113. 8. Teniendo seleccionado List  ir propiedades  nombre de la instancia  colocar “ListaDeCanciones”. 9. Activa MultipleSeleccion. Nombre de la instancia
  • 114. 10. Colócate sobre la capa Fondo  aplica un fondo de imagen deseado. FONDO
  • 115. 11. Ahora colocaremos unas etiquetas donde se mostrara el nombre del tema y la canción en reproducción. Para esto busca los componentes “Label”  arrastra 2 Label al escenario. Componentes “Label” Selecciona y arrastra la “Label” al escenario
  • 116. 12. Selecciona la primer Label  ir a propiedades  Nombre de instancia  colocar “LblCantidadDeCanciones” Label 1 También verifica PARÁMETROS DE COMPONENTE y estable los valores aquí especificados
  • 117. 13. Selecciona la segunda Label  ir a propiedades  Nombre de instancia  colocar “LblTitulo” También verifica PARÁMETROS DE COMPONENTE y estable los valores aquí especificados Label 2 Label 1
  • 119. 14. Ahora selecciona Capa “COMPONENTES DE REPRODUCTOR”  Presiona F9 y agrega el siguiente código. Parte 1.
  • 121. 15. Seleccionar el componente de Lista de canciones Presiona F9  Agrega el siguiente código.
  • 122. 16. Ya para casi finalizar guarda el archivo de Flash o muévelo a una carpeta con el nombre Reproductor (Nota: El nombre de la carpeta puede ser cualquiera) 17. Y dentro de esta carpeta creada crea otra llamada Musica (Nota: Esta carpeta si debe llamarse “Musica” ya que esta almacenara a las canciones usadas)
  • 123. 18. Ahora dentro de la carpeta Música crea otra carpeta llamada “Pistas De Audio” (Nota: No cambies el nombre de esta carpeta) 19. Abre un bloc de notas  Copia el siguiente código.
  • 124. 20. Guarda el bloc de notas dentro de la Carpeta Reproductor  Musica  con el nombre de “Lista de canciones.asp”. 21. LISTO HAS TERMINADO