Curso ActionScript 3 para diseñadores

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