Adobe flash-cs5

ADOBE FLASH
CS5
PROGRAMACIÓN
ACTIONSCRIPT 3.0
Lic. BRAULIO R. ALVAREZ GONZAGA

Lic. Braulio Alvarez Gonzaga – Adobe Flash CS5 - ActionScript
2
Crear galería de imágenes en flash CS5
1. Importar imágenes a la biblioteca
2. En la capa vacía insertar una imagen en el primer fotograma y luego en el segundo
fotograma insertar la siguiente imagen presionando F7.
3. Hasta esta parte deben de haber 1 imagen en cada uno de los cuatro fotogramas.
4. Agregar una capa botones y en la capa botones hacer lo siguiente:
5. En el menú ventana/bibliotecas comunes/botones – luego seleccionar la opción de
botones PLAYBACKFLAT y agregar cuatro botones.
6. Darle el nombre de instancia a los botones (banterior,bsiguiente,binicio,bfin).
7. Crear una capa código
8. Escribir el siguiente código
import flash.events.Event;
stop();
bsiguiente.addEventListener(MouseEvent.CLICK,siguiente)
function siguiente (c:Event):void
{
nextFrame();
}
banterior.addEventListener(MouseEvent.CLICK,anterior)
function anterior (c:Event):void
{
prevFrame();
}
binicio.addEventListener(MouseEvent.CLICK,inicio)
function inicio (c:Event):void
{
gotoAndStop("1");
}
bfin.addEventListener(MouseEvent.CLICK,fin)
function fin (c:Event):void
{
gotoAndStop("4");
}

3
Hacer que una animación aparezca en pantalla completa
1. Crear una animación en flash
2. Luego agregar el código
fscommand("fullscreen","true");
3. Hasta esta parte si se ejecuta la animación aparece en pantalla completa.
4. Agregar un botón desde menú ventana/bibliotecas comunes/botones.
5. Poner el nombre de instancia boton
6. Agregar el siguiente código
boton.addEventListener(MouseEvent.CLICK,salir);
function salir(z:Event):void
{
/*trace("si funciona mi boton")*/
fscommand("quit");
}

4
Galería de imágenes para noticias
1. Ver regla y arrastrar líneas guías
2. Insertar una imagen en el primer fotograma
3. Duplicarlo 40 fotogramas y de esa forma insertar 3 imágenes
4. Crear una capa llamada botones
5. Crear en la capa botones un rectángulo y convertirlo a botón
6. Darle nombre de instancia al botón
7. Agregarle un número a cada botón y presionar control + b para acoplarlo al
botón creado.
8. Agregar un nombre a cada grupo de fotogramas en la opción etiqueta
(foto1,foto2,foto3)
9. Agregar una capa código y agregar en el primer fotograma el siguiente
código:
bnoticia2.addEventListener(MouseEvent.CLICK,noticia2);
function noticia2(c:Event):void
{
gotoAndPlay("foto2");
}
{
}
{
}

5
Mover un objeto por medio de botones
1. En la primera capa “botones” crear los botones y asignarles nombre de instancia:
barriba, babajo, bderecha, bizquierda, breset.
2. En la segunda capa crear un objeto, luego lo convertimos a clic de película y le damos
nombre de instancia cpbalon.
3. Alineamos el objeto en el centro del escenario y observamos en la pestaña de
propiedades la posición actual: x = 275, y = 200.
4. Creamos una capa llamada acciones y en el primer fotograma agregamos el siguiente
código.
bderecha.addEventListener (MouseEvent.CLICK,derecha);
function derecha(d:Event):void
{
//cpbalon.x=cpbalon.x+5;//
cpbalon.x+=5
}
bizquierda.addEventListener (MouseEvent.CLICK,izquierda);
function izquierda(d:Event):void
{
//cpbalon.x=cpbalon.x-5;//
cpbalon.x-=5
}
barriba.addEventListener (MouseEvent.CLICK,arriba);
function arriba(d:Event):void
{
cpbalon.y-=5
}
babajo.addEventListener (MouseEvent.CLICK,abajo);
function abajo (d:Event):void
{
cpbalon.y+=5
}
breset.addEventListener (MouseEvent.CLICK,reset);
function reset (d:Event):void
{
cpbalon.x = 275
cpbalon.y = 200
}

6
Animar un texto
1. Crear un texto y colocarlo fuera del escenario.
2. Presionar control + b (para separar)
3. Presionar anticlick y seleccionar distribuir en capas.
4. Dar a la primera letra interpolación clásica y arrastrar hasta una posición.
5. Presionar F6 para en el fotograma 30
6. Ir al fotograma 200 y presionar f5 (duración se queda estática)
7. Hacer lo mismo con las demás letras teniendo en cuenta que la siguiente letra aparece
después que se ha detenido la letra anterior y debe de detenerse también.

7
Disminuir y aumentar el tamaño de un objeto
1. Importar una imagen al senario , convertirla a clic de película y darle el siguiente
nombre de instancia: cpimagen
2. Crear tres botones y darles los siguientes nombres de instancia:
bsaumentar,bdisminuir,breset
3. Crear una capa código y agregar el siguiente código en el primer fotograma:
baumentar.addEventListener(MouseEvent.CLICK,aumentar);
function aumentar (e:Event): void
{
cpimagen.scaleX = cpimagen.scaleX*1.25;
cpimagen.scaleY = cpimagen.scaleY*1.25;
}
bdisminuir.addEventListener(MouseEvent.CLICK,disminuir);
function disminuir (e:Event): void
{
cpimagen.scaleX = cpimagen.scaleX*0.50;
cpimagen.scaleY = cpimagen.scaleY*0.50;
}
breset.addEventListener(MouseEvent.CLICK,reset);
function reset (e:Event): void
{
cpimagen.scaleX = 1;
cpimagen.scaleY = 1;
}

8
Mover un objeto al ritmo del mouse
1. En la primera capa crear una circunferencia
2. Convertir el objeto en clic de película (F8) y agregarle nombre de instancia cpbalon
3. Agregar una capa de acciones
4. En el primer fotograma de la capa de acciones agregar el siguiente código
cpbalon.startDrag (true);
5. Luego ocultamos la señal del mouse con el siguiente código
cpbalon.startDrag (true);
Mouse.hide();

9
Arrastrar un objeto
1. En la primera capa crear una circunferencia
2. Convertir el objeto en clic de película (F8) y agregarle nombre de instancia cpbalon
3. Agregar una capa de acciones
4. En el primer fotograma de la capa de acciones agregar el siguiente código
cpbalon.addEventListener(MouseEvent.MOUSE_DOWN,arrastrar);
function arrastrar (e:Event): void
{
cpbalon.startDrag();
}
cpbalon.addEventListener (MouseEvent.MOUSE_UP,soltar);
function soltar (e:Event): void
{
cpbalon.stopDrag();
}

10
Mover tres objetos con el mouse usando la misma función
1. Crear tres objetos en el primer fotograma.
2. Convertirlos a CLICK DE PELÍCULA y asignarle nombre de instancia (cpbalon1,
cpbalon2,cpbalon3)
3. El ejercicio pretende mover tres objetos usando únicamente dos funciones (arrastrar
y soltar)
4. Crear una capa de código y en el primer fotograma ingresar el siguiente código:
cpbalon1.addEventListener (MouseEvent.MOUSE_DOWN,arrastrar);
cpbalon1.addEventListener (MouseEvent.MOUSE_UP,soltar);
function arrastrar (e:Event) :void
{
e.target.startDrag();
}
function soltar (e:Event) :void
{
e.target.stopDrag();
}

11
Comparar dos objetos e imprimir un mensaje en el escenario
1. Crear dos óvalos en la primera capa: uno solo contorno y otro con relleno
2. Convertirlos a símbolo y asignarles un nombre de instancia (cpcontorno y cprelleno)
3. Crear una capa de acciones
4. Crear una capa que diga mensaje y hacer lo siguiente: seleccionar la herramienta
texto, cambiar a texto clásico y seleccionar texto dinámico.
5. En el primer fotograma de la herramienta texto dibujar un rectángulo con la
herramienta texto y asignarle un nombre de instancia: txtmensaje.
Nota: en el ejercicio se van a comparar dos objetos, cuando el objeto se pose sobre el objeto
correcto aparecerá en el escenario el siguiente mensaje: “ok es correcto” y si se suelta en
cualquier otra parte aparecerá el mensaje: “es incorrecto”.
Si se desea mostrar el contorno del recuadro donde se mostrará el mensaje se debe activar la
opción mostrar contorno que se encuentra en la pestaña propiedades del texto.
Si aparece en la pestaña salida un mensaje sobre la fuente, entonces se debe activa en la
opción suavizada de la pestaña de propiedades de esto la opción utilizar fuentes de
dispositivo.
6. En el primer fotograma de la capa de acciones ingresar el siguiente código:
cprelleno.addEventListener (MouseEvent.MOUSE_DOWN,arrastrar);
function arrastrar (a:Event):void
{
cprelleno.startDrag()
}
cprelleno.addEventListener (MouseEvent.MOUSE_UP,soltar);
function soltar (a:Event):void
{
cprelleno.stopDrag()
removeChild(cprelleno);
if(cprelleno.hitTestObject(cpcontorno))
{
txtmensaje.text="OK ES CORRECTO";
}
else
txtmensaje.text="ES INCORRECTO";
}

12
Presentación del ejercicio
01 objetos creados y convertidos en click de película
02 mensajes si la comparación es correcta
03 mensajes si la comparación es incorrecta

13
Crear una aplicación que compare el nombre de los escritores con su fotografía y muestre
1. En la primera capa la cual llamaremos escritores, exportamos cuatro imágenes y las
convertimos a símbolo.
2. A las fotografías les asignamos nombre de instancias: cpmistral, cpvargas, cpgabriel,
cpbryce y cpborges.
3. Luego con la herramienta texto escribimos el nombre de los escritores y los
convertimos a símbolo y les asignamos los siguientes nombres de instancia:
cptxtvargas, cptxtbryce, cptxtgarcia, cptxtmistral, cptxtborges.
4. Creamos una capa nueva y le colocamos de nombre mensaje y en el primer fotograma
hacemos lo siguiente:
5. Seleccionamos la herramienta texto y en su ventana de propiedades cambiamos a la
opción texto clásico y seleccionamos texto dinámico, luego dibujamos un rectángulo
que es el lugar donde se mostrará el texto y le asignamos el siguiente nombre de
instancia: txtmensaje.
Nota: si se desea que el texto que va a aparecer en el rectángulo no sea seleccionable,
entonces desactivar la opción que dice seleccionable que se encuentra en la opción carácter
en la pestaña de propiedades de texto.
6. Finalmente crear una capa a la cual colocaremos el nombre de código y en el primer
fotograma agregamos el siguiente código:
Nota: si se desea que la animacion salga en pantalla completa agrgar el siguiente código antes
de todo:

14
cptxtmistral.addEventListener (MouseEvent.MOUSE_DOWN,arrastrar);
function arrastrar (a:Event):void
{
cptxtmistral.startDrag()
}
cptxtmistral.addEventListener (MouseEvent.MOUSE_UP,soltar);
function soltar (a:Event):void
{
cptxtmistral.stopDrag()
removeChild(cptxtmistral);
if(cptxtmistral.hitTestObject(cpmistral))
{
}
else
}
cptxtbryce.addEventListener (MouseEvent.MOUSE_DOWN,arrastrar2);
function arrastrar2 (a:Event):void
{
cptxtbryce.startDrag()
}
cptxtbryce.addEventListener (MouseEvent.MOUSE_UP,soltar2);
function soltar2 (a:Event):void
{
cptxtbryce.stopDrag()
removeChild(cptxtbryce);
if(cptxtbryce.hitTestObject(cpbryce))
{
}
else
}
cptxtvargas.addEventListener (MouseEvent.MOUSE_DOWN,arrastrar3);
{
cptxtvargas.startDrag()
}
cptxtvargas.addEventListener (MouseEvent.MOUSE_UP,soltar3);
{
cptxtvargas.stopDrag()
removeChild(cptxtvargas);
if(cptxtvargas.hitTestObject(cpvargas))
{

15
}
else
}
cptxtborges.addEventListener (MouseEvent.MOUSE_DOWN,arrastrar4);
{
cptxtborges.startDrag()
}
cptxtborges.addEventListener (MouseEvent.MOUSE_UP,soltar4);
{
cptxtborges.stopDrag()
removeChild(cptxtborges);
if(cptxtborges.hitTestObject(cpborges))
{
}
else
}
cptxtgabriel.addEventListener (MouseEvent.MOUSE_DOWN,arrastrar5);
{
cptxtgabriel.startDrag()
}
cptxtgabriel.addEventListener (MouseEvent.MOUSE_UP,soltar5);
{
cptxtgabriel.stopDrag()
removeChild(cptxtgabriel);
if(cptxtgabriel.hitTestObject(cpgabriel))
{
}
else
}

16

17
Hacer un examen y mostrar el puntaje obtenido
1. Se deben crear 3 capas
 Capa examen
 Capa botones
 Capa acciones
Capa examen:
Fotograma 01
Fotograma 02
Fotograma 03
Fotograma 04
Dibujar un cuadro de texto
seleccionando la herramientra
texto/ texto clásico / introducción
de texto.
Asiganarle nombre de instancia
(rpt1)
de texto.
(rpt2)
de texto.
(rpt3)
texto/ texto clásico / texto
dinamico.
(notafinal)

18
Capa botones:
Ir a la opción ventana de la barra de MENU / BIBLIOTECAS COMUNES / BOTONES y agregar un
botón cualquiera (en preferencia que muestre la opción avanzar)
Visión de las capas y fotogramas

19
Fotograma 01
Fotograma 02
Fotograma 03
(btnsgt1)
(btnsgt2)
(btnsgt3)

20
Capa acciones:
En cada fotograma de la capa acciones se va a agregar código teniendo como referencia el
nombre de instancia asignado a los botones y los cuadro de texto.
El código se agregará haciendo CLICK derecho en cada fotograma de la capa acciones y
seleccionar la opción acciones.
Tal como se muestra en la imagen.
Fotograma 01
stop();
var nota:Number=0;
btnsgt1.addEventListener(MouseEvent.CLICK, fl_ClickToGoToNextFrame);
function fl_ClickToGoToNextFrame(event:MouseEvent):void
{
if(int(rpt1.text)==11)
nota+=2;
nextFrame();
}
Esta parte asigna el valor de cada
pregunta bien contestada el cual
se sumara y luego lo mostrara en
el resultado es decir el cuadro de
texto de nombre de instancia
notafinal.
Esta condición verifica si la
respuesta ingresada es correcta.

21
Fotograma 02
stop();
btnsgt2.addEventListener(MouseEvent.CLICK, fl_ClickToGoToNextFrame2);
function fl_ClickToGoToNextFrame2(event:MouseEvent):void
{
nota+=2;
nextFrame();
}
Fotograma 03
stop();
btnsgt3.addEventListener(MouseEvent.CLICK, fl_ClickToGoToNextFrame3);
function fl_ClickToGoToNextFrame3(event:MouseEvent):void
{
nota+=2;
nextFrame();
}
Fotograma 04
notafinal.text=String(nota);
Resultado de la aplicación
1. 2.
3. 4.

22
Crear un examen con clave y resultado
Crear cuatro escenas shif+f2
En el primer fotograma de la capa presentacion de la escena inicio se agrgan los siguientes
objetos
Primer fotograma capa objetos (inicio)
Cuadro de texto tipo introducción
de texto.
Le colocamos el nombre de
instancia txtnombre
Cuadro de texto tipo introducción de
texto, en la opcion parrafo cambiar
por comportamiento contraseña
Le colocamos el nombre de instancia
txtclave
Agregamos un boton.
instancia btnsgt
Cuadro de texto tipo texto
dinámico.
instancia txtmensaje.

23
Primer fotograma capa acciones(inicio)
Ingresamos el siguiente código:
stop();
var nombre:String;
var nota:Number=0;
btnsgt.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler);
function fl_MouseClickHandler(event:MouseEvent):void
{
nombre=txtnombre.text
if ((txtnombre.text=="braulio")&&(txtclave.text=="123456"))
gotoAndStop(1,"pregunta1");
else
txtmensaje.text="ACCESO DENEGADO...";
}
Primer fotograma capa objetos (pregunta1)
Primer fotograma capa acciones(pregunta1)
btnsgt.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler_2);
function fl_MouseClickHandler_2(event:MouseEvent):void
{
nota+=10
gotoAndStop(1,"pregunta2");
}
de texto.
instancia rpt1
Agregamos un boton.
instancia btnsgt

24
Primer fotograma capa objetos (pregunta2)
Primer fotograma capa acciones(pregunta2)
btnsgt.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler_3);
{
nota+=10
gotoAndStop(1,"resultado");
}
Primer fotograma capa objetos (resultado)
Primer fotograma capa acciones(resultado)
txtminombre.text=String(nombre);
txtnota.text=String(nota);
de texto.
instancia rpt2
Agregamos un boton.
instancia btnsgt
de texto.
instancia txtnombre
de texto.
instancia txtnota

25
Resultado
1.
2.
3.
4.

26
Usar componentes
Presionar f7
Seleccionar UILoader
Guardar el archivo en una carpeta donde se encuentran las imágenes:
Para el ejemplo la carpeta se llama images y la primera imagen img0

27
Aquí se muestra la carpeta donde están guardadas las imágenes
Traer al escenario 4 UILoader
Asignarle a cada uno el siguiente recurso teniendo en cuenta la ubicación de las carpetas, el
resultado es el siguiente:
images/miniaturas/img0.jpg

28
Crear una capa botones
Crear botones y colocarlos sobre las imágenes en miniatura
Darles efectos en los fotogramas sobre y presionado y cortar el fotograma en reposo
El efecto al reproducir es el siguiente:
Cortar este fotograma
Hacer un rectángulo
del tamaño de la
imagen en
miniatura y darle
Alfa 20%
Hacer un rectángulo
del tamaño de la
imagen en
miniatura y darle
Alfa 20% con un
color diferente

29
Darle a cada botón el siguiente nombre de instancia
Crear una capa acciones y agregar el siguiente código:
img0btn.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler);
function fl_MouseClickHandler(e:MouseEvent):void
{
uilprincipal.source="images/"+e.target.name.substr(0,4)+".jpg";
}
img0btn
Img1btn
Img2btn
Img3btn

30
Resultado final:
Cada vez que se de CLICK en la imagen en miniatura aparecerá sobre un área específica la
imagen en una escala mayor

31
Hacer aparecer un figura seleccionado forma y color
1. Presionar F7 y seleccionar el componente comboBox y arrastrarlo a la escena.
2. Ir a propiedades y agregar los siguientes valores(opción dataprovider):
3. Presionar F7 y agregar otro comboBox a la escena:
Asignar el siguiente nombre de
instancia: listacolores
instancia: listaformas

32
4. Al objeto lista forma agregarle los siguientes valores (opción dataprovider):
Si reproducimos debe quedar así:

33
5. Ir a la opción ventanas/ bibliotecas comunes / botón y agregar un botón :
6. Arrastra el botón al escenario y darle el siguiente nombre de instancia:
7. Agregar una nueva capa llamada Actions y en el primer fotograma agregar el siguiente
código.
instancia: btnenter

34
import flash.display.Shape;
var figura,color:String;
var dibujo:Shape=new Shape();
listafiguras.addEventListener(Event.CHANGE, fl_figura);
function fl_figura(e:Event):void
{
figura=e.target.selectedItem.data;
}
listacolores.addEventListener(Event.CHANGE, fl_color);
function fl_color(e:Event):void
{
color=e.target.selectedItem.data;
}
btnenter.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler_2);
{
dibujo.graphics.clear();
if (color=="azul")
dibujo.graphics.beginFill(0x00196B);
if (color=="rojo")
dibujo.graphics.beginFill(0xf31C00);
if (color=="verde")
dibujo.graphics.beginFill(0x177920);
if (color=="amarillo")
dibujo.graphics.beginFill(0xF5F746);
if (color=="negro")
dibujo.graphics.beginFill(0x1C0000);
if (figura=="rectangulo")
dibujo.graphics.drawRect(100,100,100,200);
if (figura=="triangulo")
dibujo.graphics.drawTriangles(Vector.<Number>([100,200,200,200,150,100]));
if (figura=="cuadrado")
dibujo.graphics.drawRect(80,90,60,60);
if (figura=="circulo")
dibujo.graphics.drawCircle(100,200,80);
addChild(dibujo);
}

35
Reproducción final
01
02
03

Adobe flash-cs5

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (17)

Destacado

Destacado (13)

Similar a Adobe flash-cs5

Similar a Adobe flash-cs5 (20)

Más de Cesar Torres

Más de Cesar Torres (20)

Último

Último (20)

Adobe flash-cs5