Curso ActionScript 3 para diseñadores

Page 1

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


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.