Ejemplos prácticos en Action Script 3.0
Ejemplo del uso for • creamos un clip de película y lo tendremos en la biblioteca • sacamos varias instancias y las nombramos de manera que podamos acceder a ellas con un contador – caja1 – caja2 – ….
• hacemos un bucle for para que vaya lanzando un evento para cada instancia creada en el escenario • cada instancia del clip, puede tener otra instancia dentro del tipo texto para que aparezca su nombre – recuerda la anidación
• for (var i:uint = 1 ; i <= 5 ; i++){ • this["clip"+i].nombre.text = this["clip"+i].name; • this["clip"+i].addEventListener(Event.ENTER_FRAME,mover); • }
• function mover(event:Event){ • with(event.currentTarget){ • x+=Math.random()*10 • if (x>425)x=-30; • } • }
Ejemplo de funciones • podemos tener varios clips de película, con varios botones y con varias cajas de texto dinámico. • podemos cambiar las propiedades de estos clips de película usando los botones como desencadentes de eventos
• •
estado1.text = "el valor alpha del clip contenedor1 es "+contenedor1.alpha; estado2.text = "el valor alpha del clip contenedor2 es "+contenedor2.alpha;
• • • • • • • • • •
function cambiartransparencia(queclip:uint) : String{ var texto:String; if (this["contenedor"+queclip].alpha==1){ this["contenedor"+queclip].alpha=0.5; } else { this["contenedor"+queclip].alpha=1; } texto = "el valor alpha del clip contenedor"+queclip+" es "+this["contenedor"+queclip].alpha; return texto; }
• • • • • • • • • •
visibilidad1.addEventListener(MouseEvent.CLICK,visibilidadClick1); function visibilidadClick1(event:MouseEvent) { estado1.text = cambiartransparencia(1); } visibilidad2.addEventListener(MouseEvent.CLICK,visibilidadClick2); function visibilidadClick2(event:MouseEvent) { estado2.text = cambiartransparencia(2); }
Ejemplo de clases • las clases son ficheros as que podemos crear en Flash y luego importar para usar en nuestros ficheros fla
• Creamos un fichero as dentro de un paquete, con su nombre de clase y su constructor. • debemos tener métodos y variables con nivel de acceso (public, private…)
el fichero as • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
package { public class Saludo { // Atributos public var texto_saludo:String = "Un saludo para "; private var _nombre:String; public var prop1:String = "hola"; public function getProp1 ():String { return prop1; } // Constructor public function Saludo () { } public function saludar ():void { trace (texto_saludo + _nombre); } public function get nombre ():String { return this._nombre; }
public function set nombre (valor:String):void { if (valor.length > 4) { this._nombre = valor; saludar (); } } } }
el fichero fla • var miSaludo:Saludo = new Saludo (); • miSaludo.saludar ();
Ejemplo transiciones Tween • Tween es una clase que podemos utilizar para crear transiciones. • Debemos disponer de clips de película a las que aplicar la transición
• • •
import fl.transitions.Tween; import fl.transitions.TweenEvent; import fl.transitions.easing.*;
• • • •
var tw1: Object = new Tween(elemento1, "x", Strong.easeOut, elemento1.x, 150, 3, true); var tw2: Object = new Tween(elemento2, "x", Strong.easeInOut, elemento2.x, 150, 46, false); tw1.addEventListener(TweenEvent.MOTION_FINISH, finAnim1); tw2.addEventListener(TweenEvent.MOTION_FINISH, finAnim2);
• • •
function finAnim1(event:TweenEvent) { trace("animación 1 completada !"); }
• • •
function finAnim2(event:TweenEvent) { trace("animación 2 completada !"); }
Ejemplo de movimiento • es muy habitual asignar la posicion x y de un objeto al mouse. • pero tb podemos utilizar efectos matemáticos • utilizando simplmente divisiones o random…podemos crear efectos muy interesantes
• •
var contenedor:MovieClip = new Contenedor(); addChild(contenedor);
• • • • • •
contenedor.x = 100; contenedor.y = int(10+(380-(contenedor.width/2))*Math.random()); contenedor.roza=0.75; contenedor.elasticidad=0.60; contenedor.velocidadx=0; contenedor.velocidady=0;
•
contenedor.addEventListener(Event.ENTER_FRAME,moverContenedor);
• •
function moverContenedor(event:Event){ contenedor.velocidadx=(contenedor.velocidadx*contenedor.roza)+(mouseXcontenedor.x)*contenedor.elasticidad; contenedor.x+=contenedor.velocidadx; contenedor.velocidady=(contenedor.velocidady*contenedor.roza)+(mouseYcontenedor.y)*contenedor.elasticidad; contenedor.y+=contenedor.velocidady; }
• • • •
Ejemplo de frenado • var contenedor:MovieClip = new Contenedor(); • addChild(contenedor); • • • •
contenedor.x = 100; contenedor.y = int(10+(380-(contenedor.width/2))*Math.random()); contenedor.roza = 2 + Math.random()*9; contenedor.addEventListener(Event.ENTER_FRAME,moverContened or);
• function moverContenedor(event:Event){ • contenedor.x += (mouseX-contenedor.x)/contenedor.roza; • contenedor.y += (mouseY-contenedor.y)/contenedor.roza; • }
Efectos en el texto • Podemos dar formato al texto, cargar texto dinámico como texto plano, html o variables. • Pero tb podemos tratar este texto …con sus formatos correspondientes vía código. • Los efectos pueden ser espectaculares.
• • •
var palabras:Array = ["fotograma","escena","etiqueta","fotograma clave","símbolo","capa","guía"]; var velocidades:Dictionary = new Dictionary(); var cantidad:uint = 100;
• • • •
for(var i:uint = 0;i
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
function crearCampo() { var formato:TextFormat = new TextFormat(); formato.size = 9 + Math.random() * 20; formato.color = Math.floor( Math.random() * 0xFFFFFF ); formato.font = "Verdana"; var campo:TextField = new TextField(); campo.defaultTextFormat = formato; campo.autoSize = TextFieldAutoSize.LEFT; var posicion:uint = Math.random()*palabras.length; campo.text = palabras[posicion]; velocidades[campo] = 5 + Math.random() * 10; campo.x = -campo.width; campo.y = Math.random() * stage.stageHeight; campo.addEventListener(Event.ENTER_FRAME,mover); addChild(campo); } function mover(event:Event) { var campo:TextField = event.target as TextField; campo.x += velocidades[campo]; if(campo.x > stage.stageWidth) { campo.removeEventListener(Event.ENTER_FRAME,mover); delete velocidades[campo]; removeChild(campo); crearCampo(); } }
Efectos en texto estatico • incluso aunque nuestra caja de texto…sea estático…tb se le pueden aplicar efectos interesantes vía código
• •
var texto:String = campo_txt.text; campo_txt.text = "";
• • •
var palabras:Array = texto.split(" "); var indice:uint = 0; var maximo:uint = palabras.length;
•
stage.addEventListener(Event.ENTER_FRAME,mostrarPalabra);
• • • • • • • • • •
function mostrarPalabra(event:Event) { campo_txt.appendText( palabras[indice] + " " ); indice++; if(indice == maximo) { stage.removeEventListener(Event.ENTER_FRAME,mostrarPalabra); } }
Filtros en imágenes • los filtros se pueden aplicar vía diseño o vía código. • en una imagen, el filtro puede ser muy recomendable. • en este caso, no es necesario ni convertirla a movie clip
• • • •
var datos:BitmapData = new BitmapData(300,400,true,0xFF000000); var bmp:Bitmap = new Bitmap(datos); bmp.blendMode = BlendMode.OVERLAY addChild(bmp);
•
stage.addEventListener(Event.ENTER_FRAME,crearRuido);
• • • • • • •
function crearRuido(event:Event) { var semilla:uint = Math.random() * 100; var perfilbajo:uint = Math.random() * 120; bmp.alpha = .5 + Math.random() * .5; datos.noise(semilla,perfilbajo,200,8,true); }
Crear formas • incluso sólo con código podemos crear nuestras propias formas.
• •
var lienzo:Shape = new Shape(); addChild(lienzo);
• • • • • • • • • • • •
for(var i:uint = 0 ; i < 10 ; i++) { for(var j:uint = 0 ; j < 10 ; j++) { var color:uint = Math.random() * 0xFFFFFF; var posX:uint = j * 30; var posY:uint = i * 30; lienzo.graphics.beginFill(color); lienzo.graphics.drawRect(posX,posY,30,30); lienzo.graphics.endFill(); } }
•
stage.addEventListener(Event.ENTER_FRAME,dibujarCirculo);
• • • • • • • • • • • • •
function dibujarCirculo(event:Event) { var rndX:uint = Math.floor(Math.random() * 10); var rndY:uint = Math.floor(Math.random() * 10); var color:uint = Math.random() * 0xFFFFFF; var posX:uint = 15 + rndX * 30; var posY:uint = 15 + rndY * 30; lienzo.graphics.beginFill(color); lienzo.graphics.drawCircle(posX,posY,15); lienzo.graphics.endFill(); }