Conferencia ActionScript 3 con plastilina para diseñadores

USER GROUP Adobe

User Group

ActionScript 3 con plastilina para dise単adores

Marlon Ceballos @adobexpert Xpert - Colombia Adobe User Group & Adobe Authorized Training Center CERTIFIED INSTRUCTOR

Design Master CS4

CERTIFIED INSTRUCTOR

Flash 速 Professional

Marlon Ceballos • Manager Colombia Adobe User Group -­‐ Xpert • Manager Colombia Acrobat User Group • Moderador en el Adobe Community Help • Director de capacitación cerCficada -­‐ Xpert • Adobe CerCfied Instructor: CERTIFIED INSTRUCTOR

Design Master CS4

– Flash CS4, Photoshop CS4, InDesign CS4, Illustrator CS4, Acrobat 9 Pro Ex

• Adobe CerCfied Instructor -­‐ Design Master CS4

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Por qué una charla básica de AS3?

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Qué es Ac1onScript?

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Por qué usar Ac1onScript?

• Agregar interacCvidad a las películas Flash

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Qué necesita el usuario?

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Algunas ventajas de AS3 sobre AS2 • Mejor desempeño • Basado en ECMAScript • Estructura del lenguaje más organizada

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Algunas diferencias entre AS2 y AS3

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Interactuar con un botón en AS2

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Interactuar con un botón en AS2

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Interactuar con un botón en AS3

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Interactuar con un botón en AS3

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Crear un campo de texto en AS2

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Crear un campo de texto en AS3

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Crear una instancia de símbolo AS2

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Crear una instancia de símbolo AS3

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

AS3 en la línea de 1empo • .fla

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

AS3 en la línea de 1empo

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Más allá del Script Assist

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

AS3 en archivos externos • .as

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

La Plataforma Flash

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

La Plataforma Flash • Adobe Flex

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

La Plataforma Flash • Adobe AIR

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

La Plataforma Flash • Adobe Flash Catalyst

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Historia de Ac1onScript • Macromedia compra Future Splash Animator y lo convierte en Flash 1.0 (1996)

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Historia de Ac1onScript • Macromedia Flash 5: AcConScript 1.0 (2000).

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Historia de Ac1onScript • Macromedia Flash MX 2004: AcConScript 2.0 (2003).

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Momentos históricos de Flash • Adobe Flash CS3: AcConScript 3.0 (2007).

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Antes de iniciar...

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Algunos mitos sobre AS3

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Hay que ser ingeniero para poder programar?

NO Cualquier persona puede aprender a programar

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Es muy dificil aprender AS3?

NO (Es bastante fácil, pero requiere prácCca)

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Es muy extenso éste lenguaje?

SI (Es extenso como un @%*&)

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Extenso = DiUcil?

NO Solo necesitas aprender la parte del lenguaje que vas a usar

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Debo hacer todo en AS3?

NO Se busca un balance para determinar qué hacer con las herramientas de Flash y qué con AS3

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Cómo aprendo AS3?

• • • • •

Adobe

Gusto o al menos interés por AS3 Bases fundamentales (charlas, internet, cursos) PracCcar (lo que no se pracCca se olvida) Aprende a buscar en la referencia del lenguaje Constancia y perseverancia (te ayudarán a hacer cosas cada vez más complejas)

User Group

h"p://aug.xpert.com.co

USER GROUP

Conceptos fundamentales de AS3

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Conceptos fundamentales de AS3 • AS3 es un lenguaje orientado a objetos

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Conceptos fundamentales de AS3 • Clases e instancias

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Conceptos fundamentales de AS3 • Propiedades: – tamaño – color – velocidad – etc

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Conceptos fundamentales de AS3 • Métodos (funciones): – moverse – detenerse – etc

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Conceptos fundamentales de AS3 • Eventos: – acelarar – frenar – etc

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Variables

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Donde guardo mis huevos?

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Tipos de variables

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Tipos de variables

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Tipos de Variables / Tipos de datos • Number: cualquier número (enteros, decimales, posiCvos, negaCvos) • int: números enteros (posiCvos o negaCvos) • uint: enteros sin signo (posiCvos) • String: cadenas de caracteres • Boolean: false / true • Otros: Null, void, Object, Array

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Definir una variable • var nomVariable:1poDato; • Ejemplo: var valor:Number; • Ejemplo2: var nombre:String;

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

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

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Asignar valor una variable • Guardar los huevos en la caja apropiada.

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Asignar valor una variable • Ejemplo: valor=100; • Ejemplo2: nombre = “Pedro Gonzales”; • Ejemplo3 var valor:Number = 10; Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Funciones (o métodos) tareas Tarea1 Tarea3 Tarea2 Tarea5

Adobe

User Group

Tarea4

h"p://aug.xpert.com.co

USER GROUP

Definir una Función • funcCon nomFuncion():void { tarea1; tarea2; ... }

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Definir una Función • Ejemplo: function mensajes():void { trace(mensaje1); trace(mensaje2); trace(mensaje3); }

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Llamar (ejecutar) una Función • nomFuncion(); • Ejemplo: mensajes(); • Ejemplo: stop(); • Ejemplo2: trace(“mensaje”); Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

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

User Group

h"p://aug.xpert.com.co

USER GROUP

Propiedades • Caracterís1cas de un objeto: – tamaño – color – velocidad – etc

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Propiedades • Nombre de instancia – cuadrado_mc – boton_btn – nombre_txt

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Propiedades • Propiedades de un MovieClip – x,y (ubicación) -­‐> pixeles – scaleX, scaleY (escala) -­‐> valor entre 0 y 1 – width, height (tamaño) -­‐> pixeles – rota1on (rotación) -­‐> grados entre 0 y 360 – alpha (transparencia) -­‐> valor entre 0 y 1 – visible (visibilidad) -­‐> Boolean

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Propiedades • Sintaxis: objeto.propiedad = valor; • Ejemplo1: cuadro_mc.x = 100; • Ejemplo2: cuadro_mc.alpha = .5; Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Display List • El Display List es una lista jerárquica conCene todos los elementos visibles de un .swf

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Display List • Display Object: NO pueden contener otros elementos visuales • Display Object Containers: pueden contener otros elementos visuales – addChild() – addChildAt() – removeChild() – removeChildAt() Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

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

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Eventos

Nadie  escucha...

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Eventos

No ocurre nada...

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Manejo de Eventos con Listeners

Evento

Adobe

User Group

Listener h"p://aug.xpert.com.co

Función USER GROUP

Estructura de un Event Listener • objeto.addEventListener(TipoEvento.EVENTO, funcion)

• Ejemplo: boton_btn.addEventListener(MouseEvent.CLICK, mover)

mover(); Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Estructura del manejo de un Evento

boton_btn.addEventListener(MouseEvent.CLICK, mensaje); function mensaje(evento:MouseEvent):void { trace("Ud presionó un botón"); }

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Algunas Clases de Eventos • MouseEvent – CLICK = “click” – MOUSE_UP = “mouseUp” – MOUSE_DOWN = “mouseDown” – MOUSE_OVER = “mouseOver” – MOUSE_OUT = “mouseOut” – MOUSE_MOVE = “mouseMove”

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Algunas Clases de Eventos • KeyboardEvent – KEY_DOWN = “keyDown” – KEY_UP = “keyUp”

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Algunas Clases de Eventos • Para idenCficar la tecla que fué presionada en un evento, se usa la propiedad KeyCode la cual devuelve un código que indenCfica cada tecla.

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Algunas Clases de Eventos • Event – ENTER_FRAME = “enterFrame” – EXIT_FRAME = “exitFrame” – COMPLETE = “complete” – RESIZE = “resize”

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Condicionales • Permiten tomar decisiones de acuerdo a si se cumple o no algo.

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Condicionales • Si tengo o más puedo comprar

si no, debo seguir ahorrando

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Condicional if • if (ahorro >= 50) { comprar(); } else { ahorrar(); }

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Operadores • Los operadores son expresiones usadas para hacer comparaciones.

• Normalmente se usan para evaluar un condicional.

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Operadores condicionales • • • • • • • Adobe

== es igual a < es menor que > es mayor que <= es menor o igual que >= es mayor o igual que != es diferente que ! no es User Group

h"p://aug.xpert.com.co

USER GROUP

Algunos operadores matemá1cos • + (suma) • -­‐ (resta) • * (mulCplicació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) Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Gracias!

Adobe

User Group

h"p://aug.xpert.com.co

USER GROUP

Próximas charlas • • •

Adobe

Mejores prácCcas para el diseño editorial Inverse KinemaCc con AS3 AIR

User Group

h"p://aug.xpert.com.co

USER GROUP

Quieres estar en contacto?

• Twiher: @adobexpert • Facebook: h"p://facebook.com/adobecolombia/ • Blog: h"p://www.xpert.com.co/blog/ • Tutoriales: h"p://www.tutorialesadobe.com • MagazineXpert: h"p://www.magazinexpert.com • Si1o web oficial AUG: h"p://aug.xpert.com.co

Adobe

Adobe

User Group

User Group

h"p://aug.xpert.com.co

USER GROUP