Page 1

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

Conferencia ActionScript 3 con plastilina para diseñadores  

Conferencia dictada a los miembros del Colombia Adobe User Group - Xpert por Marlon Ceballos - Adobe Certified Instructor