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