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

Transcripción

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

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"); 2

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"); 3

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"); 4

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

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

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

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(); 8

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(); 9

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(); 10

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"; 11

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 12

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"); 13

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)) 14

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"; 15

16 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 Dibujar un cuadro de texto seleccionando la herramientra texto/ texto clásico / introducción de texto. Asiganarle nombre de instancia (rpt1) Fotograma 02 Dibujar un cuadro de texto seleccionando la herramientra texto/ texto clásico / introducción de texto. Asiganarle nombre de instancia (rpt2) Fotograma 03 Dibujar un cuadro de texto seleccionando la herramientra texto/ texto clásico / introducción de texto. Asiganarle nombre de instancia (rpt3) Fotograma 04 Dibujar un cuadro de texto seleccionando la herramientra texto/ texto clásico / texto dinamico. Asiganarle nombre de instancia (notafinal) 17

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 18

19 Fotograma 01 Asiganarle nombre de instancia (btnsgt1) Fotograma 02 Asiganarle nombre de instancia (btnsgt2) Fotograma 03 Asiganarle nombre de instancia (btnsgt3) 19

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

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

22 Crear cuatro escenas shif+f2 Crear un examen con clave y resultado 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. 22

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) Cuadro de texto tipo introducción de texto. Le colocamos el nombre de instancia rpt1 Agregamos un boton. Le colocamos el nombre de instancia btnsgt 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"); 23

24 Primer fotograma capa objetos (pregunta2) Cuadro de texto tipo introducción de texto. Le colocamos el nombre de instancia rpt2 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"); Agregamos un boton. Le colocamos el nombre de instancia btnsgt Primer fotograma capa objetos (resultado) 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 Primer fotograma capa acciones(resultado) txtminombre.text=string(nombre); txtnota.text=string(nota); 24

25 Resultado

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 26

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 images/miniaturas/img1.jpg images/miniaturas/img2.jpg images/miniaturas/img4.jpg 27

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 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 El efecto al reproducir es el siguiente: 28

29 Darle a cada botón el siguiente nombre de instancia img0btn Img1btn Img2btn Img3btn 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"; 29

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 30

31 Hacer aparecer un figura seleccionado forma y color 1. Presionar F7 y seleccionar el componente combobox y arrastrarlo a la escena. Asignar el siguiente nombre de instancia: listacolores 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: listaformas 31

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

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: Asignar el siguiente nombre de instancia: btnenter 7. Agregar una nueva capa llamada Actions y en el primer fotograma agregar el siguiente código. 33

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); 34

35 Reproducción final