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

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í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: 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 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.

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 = 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: 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 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:

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 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:

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 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:

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"; } else txtmensaje.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"; } else txtmensaje.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"; } else txtmensaje.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"; } else txtmensaje.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"; } else txtmensaje.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 texto seleccionando la herramientra texto/ texto clásico / introducción de texto. Asiganarle nombre de instancia (rpt1)



Dibujar un cuadro de texto seleccionando la herramientra texto/ texto clásico / texto dinamico. Asiganarle nombre de instancia (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

Asiganarle nombre de instancia (btnsgt1)




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 {

if(int(rpt2.text)==14) nota+=2; nextFrame();

} Fotograma 03

stop(); btnsgt3.addEventListener(MouseEvent.CLICK, fl_ClickToGoToNextFrame3); function fl_ClickToGoToNextFrame3(event:MouseEvent):void { if(int(rpt3.text)==8) 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. Le colocamos el nombre de instancia btnsgt

Cuadro de texto tipo texto dinámico. Le colocamos el nombre de 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) 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+=10 gotoAndStop(1,"pregunta2"); }

Cuadro de texto tipo introducción de texto. Le colocamos el nombre de instancia 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+=10 gotoAndStop(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ón de texto. Le colocamos el nombre de instancia rpt2


Cuadro de texto tipo introducción de texto. Le colocamos el nombre de instancia txtnombre

Cuadro de texto tipo introducción de texto. Le colocamos el nombre de 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); 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 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); 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

Education

Adobe flash-cs5