Adobe ActionScript 3 para Diseñadores
Marlon Ceballos Xpert -‐ AATC
CERTIFIED INSTRUCTOR
Design Master CS4
CERTIFIED INSTRUCTOR
Flash ® Professional
Qué es Ac)onScript?
www.xpert.com.co
AUTHORIZED
2 Training Center
Por qué usar Ac)onScript? • Agregar interac+vidad a las películas Flash
www.xpert.com.co
AUTHORIZED
3 Training Center
Qué necesita el usuario?
www.xpert.com.co
AUTHORIZED
4 Training Center
Algunas ventajas de AS3 sobre AS2 • Mejor desempeño • Basado en ECMAScript • Estructura del lenguaje más organizada
www.xpert.com.co
AUTHORIZED
5 Training Center
AS3 en la línea de )empo • .fla
www.xpert.com.co
AUTHORIZED
6 Training Center
AS3 en la línea de )empo
www.xpert.com.co
AUTHORIZED
7 Training Center
Más allá del Script Assist
www.xpert.com.co
AUTHORIZED
8 Training Center
AS3 en archivos externos • .as
www.xpert.com.co
AUTHORIZED
9 Training Center
La Plataforma Flash
www.xpert.com.co
AUTHORIZED
10 Training Center
La Plataforma Flash • Adobe Flex
www.xpert.com.co
AUTHORIZED
11 Training Center
La Plataforma Flash • Adobe AIR
www.xpert.com.co
AUTHORIZED
12 Training Center
La Plataforma Flash • Adobe Flash Catalyst
www.xpert.com.co
AUTHORIZED
13 Training Center
Historia de Ac)onScript • Macromedia compra Future Splash Animator y lo convierte en Flash 1.0 (1996)
www.xpert.com.co
AUTHORIZED
Training Center
Historia de Ac)onScript • Macromedia Flash 5: Ac+onScript 1.0 (2000).
www.xpert.com.co
AUTHORIZED
Training Center
Historia de Ac)onScript • Macromedia Flash MX 2004: Ac+onScript 2.0 (2003).
www.xpert.com.co
AUTHORIZED
Training Center
Momentos históricos de Flash • Adobe Flash CS3: Ac+on Script 3.0 (2007).
www.xpert.com.co
AUTHORIZED
Training Center
Antes de iniciar...
www.xpert.com.co
AUTHORIZED
Training Center
Algunos mitos sobre AS3
Es muy diQcil de aprender AS3? (o es más diQcil que AS2?)
www.xpert.com.co
AUTHORIZED
Training Center
Algunos mitos sobre AS3
NO (Es bastante fácil, pero requiere prác+ca)
www.xpert.com.co
AUTHORIZED
Training Center
Algunos mitos sobre AS3
Es muy extenso este lenguaje?
www.xpert.com.co
AUTHORIZED
Training Center
Algunos mitos sobre AS3
SI (Es extenso como un @%*&)
www.xpert.com.co
AUTHORIZED
Training Center
Algunos mitos sobre AS3
Extenso = DiQcil?
www.xpert.com.co
AUTHORIZED
Training Center
Algunos mitos sobre AS3
NO Solo necesitas aprender la parte del lenguaje que vas a usar
www.xpert.com.co
AUTHORIZED
Training Center
Cómo aprendo AS3 en este curso? • • • • • •
Asistencia y puntualidad (esto incluye al profe) Prestar atención (nada de celulares, internet, emails, etc) Preguntar (las dudas son una bola de nieve) Prac+car (lo que no se prac+ca se olvida) Constancia y perseverancia (te ayudarán a hacer cosas cada vez más complejas) Gusto o al menos interés por AS3 www.xpert.com.co
AUTHORIZED
Training Center
Conceptos fundamentales de AS3
www.xpert.com.co
AUTHORIZED
Training Center
Conceptos fundamentales de AS3 • AS3 es un lenguaje orientado a objetos
www.xpert.com.co
AUTHORIZED
Training Center
Conceptos fundamentales de AS3 • Clases e instancias
www.xpert.com.co
AUTHORIZED
Training Center
Conceptos fundamentales de AS3 • Propiedades: – tamaño – color – velocidad – etc
www.xpert.com.co
AUTHORIZED
Training Center
Conceptos fundamentales de AS3 • Métodos (funciones): – moverse – detenerse – etc
www.xpert.com.co
AUTHORIZED
Training Center
Conceptos fundamentales de AS3 • Eventos: – acelarar – frenar – etc
www.xpert.com.co
AUTHORIZED
Training Center
Variables
www.xpert.com.co
AUTHORIZED
Training Center
Donde guardo mis huevos?
www.xpert.com.co
AUTHORIZED
Training Center
Tipos de variables
www.xpert.com.co
AUTHORIZED
Training Center
Tipos de variables
www.xpert.com.co
AUTHORIZED
Training Center
Tipos de Variables / Tipos de datos • Number: cualquier número (enteros, decimales, posi+vos, nega+vos) • int: números enteros (posi+vos o nega+vos) • uint: enteros sin signo (posi+vos) • String: cadenas de caracteres • Boolean: false / true • Otros: Null, void, Object, Array www.xpert.com.co
AUTHORIZED
Training Center
Definir una variable • var nomVariable:JpoDato; • Ejemplo: var valor:Number; • Ejemplo2: var nombre:String; www.xpert.com.co
AUTHORIZED
Training Center
Definir una variable • Los nombre de variables NO deben contener: – Espacios (usa underscores) – Caracteres especiales (usa letras números, guiones y underscores)
• NO iniciar nombres con números
www.xpert.com.co
AUTHORIZED
Training Center
Asignar valor una variable • Guardar los huevos en la caja apropiada.
www.xpert.com.co
AUTHORIZED
Training Center
Asignar valor una variable • Ejemplo: valor=100; • Ejemplo2: nombre = “Pedro Gonzales”; • Ejemplo3 var valor:Number = 10; www.xpert.com.co
AUTHORIZED
Training Center
Funciones (o métodos) tareas Tarea1 Tarea3 Tarea2 Tarea5
Tarea4
www.xpert.com.co
AUTHORIZED
Training Center
Definir una Función • func+on nomFuncion():void { tarea1; tarea2; ... }
www.xpert.com.co
AUTHORIZED
Training Center
Definir una Función • Ejemplo: function mensajes():void { trace(mensaje1); trace(mensaje2); trace(mensaje3); }
www.xpert.com.co
AUTHORIZED
Training Center
Llamar (ejecutar) una Función • nomFuncion(); • Ejemplo: stop(); • Ejemplo2: trace(“mensaje”);
www.xpert.com.co
AUTHORIZED
Training Center
Parámetros de una Función • corra(); <-‐-‐ necesitar parámetros? opcional deténgase(); <-‐-‐ necesita parámetros? NO • vayaHasta(); <-‐-‐ dónde? parámetro requerido imprimaDocumentos() <-‐-‐ cuál? requerido • vayaHasta(Cra 12 No. 13-‐23); imprimaDocumento(cot001.doc, cot002.doc); www.xpert.com.co
AUTHORIZED
Training Center
Propiedades • CaracterísJcas de un objeto: – tamaño – color – velocidad – etc
www.xpert.com.co
AUTHORIZED
Training Center
Propiedades • Nombre de instancia – cuadrado_mc – boton_btn – nombre_txt
www.xpert.com.co
AUTHORIZED
Training Center
Propiedades • Propiedades de un MovieClip – x,y (ubicación) -‐> pixeles – scaleX, scaleY (escala) -‐> valor entre 0 y 1 – width, height (tamaño) -‐> pixeles – rota)on (rotación) -‐> grados entre 0 y 360 – alpha (transparencia) -‐> valor entre 0 y 1 – visible (visibilidad) -‐> Boolean
www.xpert.com.co
AUTHORIZED
Training Center
Propiedades • Sintaxis: objeto.propiedad = valor; • Ejemplo1: cuadro_mc.x = 100; • Ejemplo2: cuadro_mc.alpha = .5; www.xpert.com.co
AUTHORIZED
Training Center
Display List • El Display List es una lista jerárquica con+ene todos los elementos visibles de un .swf
www.xpert.com.co
AUTHORIZED
Training Center
Display List • Display Object: NO pueden contener otros elementos visuales • Display Object Containers: pueden contener otros elementos visuales – addChild() – addChildAt() – removeChild() – removeChildAt() www.xpert.com.co
AUTHORIZED
Training Center
Display List • Un objeto creado dinámicamente debe integrarse explícitamente al Display List para que pueda ser visible – var nombre:Clase = new Clase(); addChild(nombre);
www.xpert.com.co
AUTHORIZED
Training Center
Eventos
Nadie  escucha... www.xpert.com.co
AUTHORIZED
Training Center
Eventos
No ocurre nada... www.xpert.com.co
AUTHORIZED
Training Center
Manejo de Eventos con Listeners
Evento
Listener www.xpert.com.co
Función AUTHORIZED
Training Center
Estructura de un Event Listener • objeto.addEventListener(TipoEvento.EVENTO, funcion)
• Ejemplo: boton_btn.addEventListener(MouseEvent.CLICK, mover)
mover(); www.xpert.com.co
AUTHORIZED
Training Center
Estructura del manejo de un Evento •
boton_btn.addEventListener(MouseEvent.CLICK, mensaje); function mensaje(evento:MouseEvent):void { trace("Ud presionó un botón"); }
www.xpert.com.co
AUTHORIZED
Training Center
Algunas Clases de Eventos • MouseEvent – CLICK = “click” – MOUSE_UP = “mouseUp” – MOUSE_DOWN = “mouseDown” – MOUSE_OVER = “mouseOver” – MOUSE_OUT = “mouseOut” – MOUSE_MOVE = “mouseMove”
www.xpert.com.co
AUTHORIZED
Training Center
Algunas Clases de Eventos • KeyboardEvent – KEY_DOWN = “keyDown” – KEY_UP = “keyUp”
www.xpert.com.co
AUTHORIZED
Training Center
Algunas Clases de Eventos • Para iden+ficar la tecla que fué presionada en un evento, se usa la propiedad KeyCode la cual devuelve un código que inden+fica cada tecla.
www.xpert.com.co
AUTHORIZED
Training Center
Algunas Clases de Eventos • Event – ENTER_FRAME = “enterFrame” – EXIT_FRAME = “exitFrame” – COMPLETE = “complete” – RESIZE = “resize”
www.xpert.com.co
AUTHORIZED
Training Center
Condicionales • Permiten tomar decisiones de acuerdo a si se cumple o no algo.
www.xpert.com.co
AUTHORIZED
Training Center
Condicionales • Si tengo o más puedo comprar
si no, debo seguir ahorrando www.xpert.com.co
AUTHORIZED
Training Center
Condicional if • if (ahorro >= 50) { comprar(); } else { ahorrar(); } www.xpert.com.co
AUTHORIZED
Training Center
Operadores • Los operadores son expresiones usadas para hacer comparaciones. • Normalmente se usan para evaluar un condicional.
www.xpert.com.co
AUTHORIZED
Training Center
Operadores condicionales • • • • • • •
== es igual a < es menor que > es mayor que <= es menor o igual que >= es mayor o igual que != es diferente que ! no es www.xpert.com.co
AUTHORIZED
Training Center
Algunos operadores matemá)cos • + (suma) • -‐ (resta) • * (muljplicación) • / (división) • += (suma el mismo valor de la variable) • -‐= (resta el mismo valor de la variable) • ++ (suma 1 al contenido de la variable) • -‐-‐ (resta 1 al contenido de la variable) www.xpert.com.co
AUTHORIZED
Training Center
La Clase Math • Las propiedades y métodos de esta clase no se pueden acceder por instanciamiento (clase está+ca).
www.xpert.com.co
AUTHORIZED
Training Center
Algunos métodos de la clase Math • random(); – Genera valores aleatorios entre 0 y 1 (sin incluirlo).
• round(); – Redondea el valor de un número.
• floor(); – Redondea “por debajo” el valor de un número.
• ceil(); – Redondea “por encima” el valor de un número. www.xpert.com.co
AUTHORIZED
Training Center
LOOPS • Los loops son estructuras que se usan para ejecutar varias veces un bloque de código. • Suelen ser usadas en conjunto con los Arrays. • Se ejecutan antes de que la pantalla se actualice (no se usan para animación).
www.xpert.com.co
AUTHORIZED
Training Center
LOOP for • Estructura – for (inicializarVariable; condicional; acumulador) { tarea1; tarea2; tarea3; }
www.xpert.com.co
AUTHORIZED
Training Center
LOOP for • Ejemplo – for (var i:Number=0; i<5; i++) { trace(i); }
www.xpert.com.co
AUTHORIZED
Training Center
LOOP while • Estructura – while (condicional) { acumulador; tarea1; tarea2; tarea3; }
www.xpert.com.co
AUTHORIZED
Training Center
LOOP while • Ejemplo – while (i<5) { i++ trace(i); }
www.xpert.com.co
AUTHORIZED
Training Center
Arrays • Es un +po especial de variable que permite guardar más de un dato. • Los datos que componen un array quedan referenciados por un valor de index que inicia en 0;
www.xpert.com.co
AUTHORIZED
Training Center
Definición de un Array • Estructura: var nombreArreglo:Array = new Array(); • Ejemplo: var alumnos:Array = new Array();
www.xpert.com.co
AUTHORIZED
Training Center
Asignar datos a un Array • Mediante un constructor – var nombres:Array = new Array(“Luis”, “Carlos”, “Andres”);
• Sin el constructor – var nombres:Array = [“Luis”, “Carlos”, “Andres”];
• Asignación a un Array ya definido – nombres = [“Luis”, “Carlos”, “Andres”];
www.xpert.com.co
AUTHORIZED
Training Center
Asignar datos a un Array • Mediante su índice – nombres [0] = “Luis”; – nombres [1] = “Carlos”; – nombres [2] = “Andres”;
• Si el índice ya está ocupado por un valor, éste será reemplazado
www.xpert.com.co
AUTHORIZED
Training Center
Algunos métodos de la clase Array • push(); – Asigna un elemento al final del array y retorna la nueva longitud;
• pop(); – Remueve el úljmo elemento del array y retorna el valor de ese elemento;
www.xpert.com.co
AUTHORIZED
Training Center
Algunos métodos de la clase Array • shi[(); – Elimina el primer elemento de un array y retorna el valor de ese elemento.
• unshi[(); – Agrega un o más elementos al inicio de un Array y retorna la nueva longitud.
www.xpert.com.co
AUTHORIZED
Training Center
Algunos métodos de la clase Array • forEach(); – Ejecuta una función en cada elemento del array;
• reverse(); – Invierte el orden de los elementos dentro del array
www.xpert.com.co
AUTHORIZED
Training Center
Dibujar con AS3 • En AS3 los comandos de dibujo usan la clase Graphics • Cada clase que permite dibujar en AS3 usa la instancia de la clase Graphics (graphics) sin necesidad de declarar el instanciamiento de la misma. • El dibujo es soportado por las clases visuales (display classes) Shape, Sprite y MovieClip www.xpert.com.co
AUTHORIZED
Training Center
Métodos de la Clase Graphics • Dibujar líneas: curveTo(), lineTo() • Dibujar formas: beginBitmapFill(), beginFill(), beginGradienFill(), drawCircle(), drawEllipse(), drawRect(), drawRoundRect, (drawRoundRectComplex (), endFill () www.xpert.com.co
AUTHORIZED
Training Center
Métodos de la Clase Graphics • Definir el es)lo de las líneas: lineGradientStyle(), lineStyle() • Mover el “lápiz”: moveTo(); • Borrar gráficos: clear(); www.xpert.com.co
AUTHORIZED
Training Center
Pasos para crear un forma cerrada 1. Definir el punto de inicio: moveTo() 2. Definir el es+lo de la linea: lineStyle(); 3. Iniciar el relleno: beginFill() 4. Dibujar: lineTo() y curveTo() 5. Finalizar el relleno: endFill()
www.xpert.com.co
AUTHORIZED
Training Center
Filtros • fl.filters – Este paquete conjene clases para aplicación de efectos bitmap. Algunas de las clases de éste paquete son: • DropShadowFilter() • BlurFilter() • GlowFilter()
www.xpert.com.co
AUTHORIZED
Training Center
Filtros • Aplicación de un filtro: objeto.filters = [new filtro()] • Ejemplo: cuadro_mc.filters = [new DropShadowFilter()];
www.xpert.com.co
AUTHORIZED
Training Center
Filtros • Configuración y aplicación de un filtro: var filtro:DropShadowFilter filtro = new DropShadowFilter(); filtro.color = 0x00FF00; filtro.blurX = filtro.blurY = 20; filtro.angle = 45; filtro.distance = 20; filtro.strength = 1; filtro.alpha = 1; forma. filters = [filtro]; www.xpert.com.co
AUTHORIZED
Training Center
Animación con AS3 • Cuando se anima en AS no existe el concepto de frames
www.xpert.com.co
AUTHORIZED
Training Center
Animación con AS3 • fl.transiJons – Este paquete conjene clases para crear efectos de animación. Algunas de las clases de éste paquete son: • • • • •
Blinds() Fade() Fly() TransijonManager() Tween() www.xpert.com.co
AUTHORIZED
Training Center
Animación con AS3 • fl.transiJons.easing – Este paquete conjene clases que son usadas por las calses del paquete fl.transi)ons para crear efectos “easing” (aceleración y desaceleración). Algunas de las clases de éste paquete son: • • • •
Back() Bounce() Elasjc() None() www.xpert.com.co
AUTHORIZED
Training Center
Animación con AS3 • Definición y aplicación de la clase Tween: var nombre:Tween; nombre = new Tween(objeto, "propiedad", funcionEasing, valorInicio, valorFinal, duracion, sec/mil);
www.xpert.com.co
AUTHORIZED
Training Center
Animación con AS3 • Ejemplo: var interpola:Tween; interpola = new Tween(cuadro_mc, "alpha", None.easeNone, 0,1,1, true);
www.xpert.com.co
AUTHORIZED
Training Center
Animación con AS3 • Algunos métodos de la clase Tween – start() – stop() – resume() – rewind() – yoyo()
www.xpert.com.co
AUTHORIZED
Training Center
Animación con AS3 • Algunos eventos de la clase Tween – MOTION_START = “mojonStart” – MOTION_STOP = “mojonStop” – MOTION_RESUME = “mojonResume” – MOTION_FINISH = “mojonFinish”
www.xpert.com.co
AUTHORIZED
Training Center
Trabajo con texto en AS3 • Flash permite crear 3 +pos de caja de texto pero solo es posible manipular 2 de ellas con AS3: – Dinamic Text – Input Text
www.xpert.com.co
AUTHORIZED
Training Center
Trabajo con texto en AS3 • Para crear texto de forma dinámica, se usa la clase TextField() • Ejemplo: var texto:TextField = new TextField();
www.xpert.com.co
AUTHORIZED
Training Center
Trabajo con archivos externos • Para cargar elementos externos como texto, imágenes y películas SWF usamos las siguientes clases: – URLRequest() -‐> guarda la ruta – URLLoader() -‐> texto (txt, xml) – Loader() -‐> binarios (imagenes, swf)
www.xpert.com.co
AUTHORIZED
Training Center
Trabajo con archivos externos • Estructura: var nombre:URLRequest = new URLRequest ("rutaArchivo"); • Ejemplo: var ruta:URLRequest = new URLRequest("img/foto_01.jpg");
www.xpert.com.co
AUTHORIZED
Training Center
Trabajo con archivos externos • Estructura: var nombre:Loader = new Loader(); nombre.load(varURLRequest); • Ejemplo: var carga:Loader = new Loader(); carga.load(ruta);
www.xpert.com.co
AUTHORIZED
Training Center
Trabajo con archivos de sonido • El trabajo con sonido en AS3 incluye el uso de la siguientes clases: – URLRequest() – Sound() – SoundChannel() – SoundTransform()
www.xpert.com.co
AUTHORIZED
Training Center
Trabajar con Video • El trabajo con video usa las siguientes clases: -‐ NetConnecJon() -‐ NetStream()
www.xpert.com.co
AUTHORIZED
Training Center
Trabajar con Video • Componentes del flujo de trabajo con video:
FLV F4V
Clase NetConnection
Clase NetStream
www.xpert.com.co
Clase Video
AUTHORIZED
Training Center
Trabajar con Video FLV F4V
Clase NetConnection
Clase NetStream
Clase Video
• Los archivos de video (flv/f4v) pueden estar en un servidor de streaming como Flash Media Server o simplemente alojados en un server.
www.xpert.com.co
AUTHORIZED
Training Center
Trabajar con Video FLV F4V
Clase NetConnection
Clase NetStream
Clase Video
• Se requiere una conexión al servidor la cual es realizada con la clase NetConnecJon()
www.xpert.com.co
AUTHORIZED
Training Center
Trabajar con Video FLV F4V
Clase NetConnection
Clase NetStream
Clase Video
• La clase NetStream() maneja el flujo de datos del video.
www.xpert.com.co
AUTHORIZED
Training Center
Trabajar con Video FLV F4V
Clase NetConnection
Clase NetStream
Clase Video
• Finalmente el video es visualizado mediante la clase Video()
www.xpert.com.co
AUTHORIZED
Training Center
XML • Es un lenguaje de e+quetado que permite estructurar información para ser reu+lizada • Permite crear tus propias e+quetas • No con+ene infomación de presentación o “es+los”
www.xpert.com.co
AUTHORIZED
Training Center
XML • El proceso de cargar un XML externo es exactamente igual a cargar cualquier texto • Ejemplo:
www.xpert.com.co
AUTHORIZED
Training Center
Clases • Son “moldes” de los objetos que creamos • Permiten organizar el código • Permiten reusar el código • Propiedades, Métodos y Eventos
www.xpert.com.co
AUTHORIZED
Training Center
Ejemplos de Clases en AS3 • MovieClip() • Stage() • Buyon() • Text()
www.xpert.com.co
AUTHORIZED
Training Center
Declaración de una Clases en AS3 • Package { public class NombreClase { public funcjon nombreFuncion() { tarea; } } } www.xpert.com.co
AUTHORIZED
Training Center
Scope, Alcance o Dominio • private: – Los métodos y propiedades sólo pueden ser usadas dentro de la clase en que se definen
• public: – Los métodos y propiedades pueden ser usados fuera de la clase en que se definen
www.xpert.com.co
AUTHORIZED
Training Center
Tener en cuenta con las Clases: • El nombre del archivo .as que con+ene la clase debe ser el mismo de la clase y del constructor. • Las clases en AS3 no pueden ser private, por lo tanto es opcional el uso de public. • El constructor NO retorna valores
www.xpert.com.co
AUTHORIZED
Training Center
Document Class • El Document Class permite enlazar un clase con la línea de +empo de un archivo .fla • Se define en el panel propiedades donde se escribe el nombre de la clase a enlazar. www.xpert.com.co
AUTHORIZED
Training Center
Errores comunes de compilación • 1046: Type was not found or was not a compile-‐+me constant: Tween. -‐> falta importar la librería • 1120: Access of undefined property None. -‐> no se ha definido la variable, clase, etc o +ene otro nombre
www.xpert.com.co
AUTHORIZED
Training Center
Quieres estar en contacto? • Twiier: @adobexpert • Facebook: hsp://facebook.com/adobecolombia/ • Blog: hsp://www.xpert.com.co/blog/ • Tutoriales: hsp://www.tutorialesadobe.com
www.xpert.com.co
AUTHORIZED
Training Center