Manula con practicas de flash CS6, usando action Script 2.0 y 3.0. Pintar imagenes, guia para hacer un reproductor multimedia, uso de botones

1. 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

17. ActionScript
Stop();

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.

32. • 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

74. Introduciendo datos
incorrectos
Introduciendo datos correctos

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.

120. Parte 2.

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