adobe flash cs5

ADOBE FLASH

CS5

PROGRAMACIÓN

ACTIONSCRIPT 3.0

BRAULIO R. ALVAREZ GONZAGA

Braulio Alvarez Gonzaga – Adobe Flash CS5 - ActionScript

2

Crear galería de imágenes en flash CS5

1. Importar imágenes a la biblioteca2. 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ódigo8. 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 flash2. 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 boton6. Agregar el siguiente código

fscommand("fullscreen","true");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ías2. Insertar una imagen en el primer fotograma3. Duplicarlo 40 fotogramas y de esa forma insertar 3 imágenes4. Crear una capa llamada botones5. Crear en la capa botones un rectángulo y convertirlo a botón6. Darle nombre de instancia al botón7. 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:

import flash.events.Event;bnoticia2.addEventListener(MouseEvent.CLICK,noticia2);function noticia2(c:Event):void{

gotoAndPlay("foto2");}bnoticia1.addEventListener(MouseEvent.CLICK,noticia1);function noticia1(c:Event):void{

gotoAndPlay("foto1");}bnoticia3.addEventListener(MouseEvent.CLICK,noticia3);function noticia3(c:Event):void{

gotoAndPlay("foto3");}


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 damosnombre de instancia cpbalon.

3. Alineamos el objeto en el centro del escenario y observamos en la pestaña depropiedades la posición actual: x = 275, y = 200.

4. Creamos una capa llamada acciones y en el primer fotograma agregamos el siguientecódigo.

import flash.events.Event;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 = 275cpbalon.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 306. 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 siguientenombre 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:

import flash.events.Event;

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 circunferencia2. Convertir el objeto en clic de película (F8) y agregarle nombre de instancia cpbalon3. Agregar una capa de acciones4. 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 circunferencia2. Convertir el objeto en clic de película (F8) y agregarle nombre de instancia cpbalon3. Agregar una capa de acciones4. 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:

import flash.events.Event;cpbalon1.addEventListener (MouseEvent.MOUSE_DOWN,arrastrar);cpbalon2.addEventListener (MouseEvent.MOUSE_DOWN,arrastrar);cpbalon3.addEventListener (MouseEvent.MOUSE_DOWN,arrastrar);

cpbalon1.addEventListener (MouseEvent.MOUSE_UP,soltar);cpbalon2.addEventListener (MouseEvent.MOUSE_UP,soltar);cpbalon3.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 relleno2. Convertirlos a símbolo y asignarles un nombre de instancia (cpcontorno y cprelleno)3. Crear una capa de acciones4. 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 objetocorrecto aparecerá en el escenario el siguiente mensaje: “ok es correcto” y si se suelta encualquier otra parte aparecerá el mensaje: “es incorrecto”.

Si se desea mostrar el contorno del recuadro donde se mostrará el mensaje se debe activar laopció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 laopción suavizada de la pestaña de propiedades de esto la opción utilizar fuentes dedispositivo.

6. En el primer fotograma de la capa de acciones ingresar el siguiente código:

import flash.events.Event;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 lasconvertimos 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 losconvertimos 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 fotogramahacemos lo siguiente:

5. Seleccionamos la herramienta texto y en su ventana de propiedades cambiamos a laopción texto clásico y seleccionamos texto dinámico, luego dibujamos un rectánguloque es el lugar donde se mostrará el texto y le asignamos el siguiente nombre deinstancia: 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ácteren la pestaña de propiedades de texto.

6. Finalmente crear una capa a la cual colocaremos el nombre de código y en el primerfotograma agregamos el siguiente código:

Nota: si se desea que la animacion salga en pantalla completa agrgar el siguiente código antesde todo:

fscommand("fullscreen","true");


14

import flash.events.Event;

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)){txtmensaje.text="OK ES CORRECTO";}elsetxtmensaje.text="ES INCORRECTO";}

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)){txtmensaje.text="OK ES CORRECTO";}elsetxtmensaje.text="ES INCORRECTO";}

cptxtvargas.addEventListener (MouseEvent.MOUSE_DOWN,arrastrar3);function arrastrar3 (a:Event):void{

cptxtvargas.startDrag()}cptxtvargas.addEventListener (MouseEvent.MOUSE_UP,soltar3);function soltar3 (a:Event):void{cptxtvargas.stopDrag()removeChild(cptxtvargas);if(cptxtvargas.hitTestObject(cpvargas)){


15

txtmensaje.text="OK ES CORRECTO";}elsetxtmensaje.text="ES INCORRECTO";}

cptxtborges.addEventListener (MouseEvent.MOUSE_DOWN,arrastrar4);function arrastrar4 (a:Event):void{

cptxtborges.startDrag()}cptxtborges.addEventListener (MouseEvent.MOUSE_UP,soltar4);function soltar4 (a:Event):void{cptxtborges.stopDrag()removeChild(cptxtborges);if(cptxtborges.hitTestObject(cpborges)){txtmensaje.text="OK ES CORRECTO";}elsetxtmensaje.text="ES INCORRECTO";}

cptxtgabriel.addEventListener (MouseEvent.MOUSE_DOWN,arrastrar5);function arrastrar5 (a:Event):void{

cptxtgabriel.startDrag()}cptxtgabriel.addEventListener (MouseEvent.MOUSE_UP,soltar5);function soltar5 (a:Event):void{cptxtgabriel.stopDrag()removeChild(cptxtgabriel);if(cptxtgabriel.hitTestObject(cpgabriel)){txtmensaje.text="OK ES CORRECTO";}elsetxtmensaje.text="ES INCORRECTO";}


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 textoseleccionando la herramientratexto/ texto clásico / introducciónde texto.Asiganarle nombre de instancia(rpt1)



Dibujar un cuadro de textoseleccionando la herramientratexto/ texto clásico / textodinamico.Asiganarle nombre de instancia(notafinal)


18

Capa botones:

Ir a la opción ventana de la barra de MENU / BIBLIOTECAS COMUNES / BOTONES y agregar unbotón cualquiera (en preferencia que muestre la opción avanzar)

Visión de las capas y fotogramas


19

Fotograma 01

Fotograma 02

Fotograma 03

Asiganarle nombre de instancia(btnsgt1)




20

Capa acciones:

En cada fotograma de la capa acciones se va a agregar código teniendo como referencia elnombre 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 yseleccionar 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 cadapregunta bien contestada el cualse sumara y luego lo mostrara enel resultado es decir el cuadro detexto de nombre de instancianotafinal.

Esta condición verifica si larespuesta ingresada es correcta.


21

Fotograma 02

stop();btnsgt2.addEventListener(MouseEvent.CLICK, fl_ClickToGoToNextFrame2);function fl_ClickToGoToNextFrame2(event:MouseEvent):void{


}

Fotograma 03

stop();btnsgt3.addEventListener(MouseEvent.CLICK, fl_ClickToGoToNextFrame3);function fl_ClickToGoToNextFrame3(event:MouseEvent):void{


}

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 siguientesobjetos

Primer fotograma capa objetos (inicio)

Cuadro de texto tipo introducciónde texto.Le colocamos el nombre deinstancia txtnombre

Cuadro de texto tipo introducción detexto, en la opcion parrafo cambiarpor comportamiento contraseñaLe colocamos el nombre de instanciatxtclave

Agregamos un boton.Le colocamos el nombre deinstancia btnsgt

Cuadro de texto tipo textodinámico.Le colocamos el nombre deinstancia 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.textif ((txtnombre.text=="braulio")&&(txtclave.text=="123456"))gotoAndStop(1,"pregunta1");elsetxtmensaje.text="ACCESO DENEGADO...";

}

Primer fotograma capa objetos (pregunta1)

Primer fotograma capa acciones(pregunta1)

Ingresamos el siguiente código:

btnsgt.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler_2);

function fl_MouseClickHandler_2(event:MouseEvent):void{

if(int(rpt1.text)==6)nota+=10gotoAndStop(1,"pregunta2");

}

Cuadro de texto tipo introducciónde texto.Le colocamos el nombre deinstancia rpt1



24

Primer fotograma capa objetos (pregunta2)

Primer fotograma capa acciones(pregunta2)Ingresamos el siguiente código:

btnsgt.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler_3);

function fl_MouseClickHandler_3(event:MouseEvent):void{

if(int(rpt2.text)==15)nota+=10gotoAndStop(1,"resultado");

}

Primer fotograma capa objetos (resultado)

Primer fotograma capa acciones(resultado)

txtminombre.text=String(nombre);txtnota.text=String(nota);

Cuadro de texto tipo introducciónde texto.Le colocamos el nombre deinstancia rpt2


Cuadro de texto tipo introducciónde texto.Le colocamos el nombre deinstancia txtnombre

Cuadro de texto tipo introducciónde texto.Le colocamos el nombre deinstancia 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, elresultado 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 fotogramaHacer un rectángulodel tamaño de laimagen enminiatura y darleAlfa 20%

Hacer un rectángulodel tamaño de laimagen enminiatura y darleAlfa 20% con uncolor 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);img1btn.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler);img2btn.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler);img3btn.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 laimagen 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 deinstancia: listacolores

Asignar el siguiente nombre deinstancia: 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 siguientecódigo.

Asignar el siguiente nombre deinstancia: 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);function fl_MouseClickHandler_2(event:MouseEvent):void{

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

Documents

clic de pelcula

si se desea

nombre de

presionar

los botones

presionar

import flash

opcin dataprovider