Thursday, January 14, 2010

Scripting Parte II

Ejemplo 2


En el ejemplo anterior hicimos nuestro primer script, ahora tomaremos ese ejemplo, y lo modificaremos para mostrar cómo hummingbird te permite animar objetos de una manera simple y potente. Primero que nada debes saber que hummingbrid incluye una herramienta de animación llamada TweenLite, esta es un tweener, la cual nos permite animar cualquier propiedad númerica de cualquier objeto usando interpolación. Primero debemos modificar el ejemplo anterior de la siguiente manera:

En el diseñador edita la página alex1 y agrega un componente de texto con el texto 'animate me' y con las coordenadas x e y tal cómo se muestra en la siguiente imagen:



El texto recién creado debe tener el nombre alex1_2 (recuerda que el sistema le asignará un nombre automaticamente), luego modifica la página de tal forma que tengas los eventos, tal cómo se muestra en las siguientes imágenes:


… Necesitamos la librería tweenlite, así que la incluimos en el evento imports.


... En el evento onCreated del objeto alex1_2 damos la posición inicial al texto. Nota el uso del parametro de evento me, el cual referencia al componente alex1_2.



...Por último modificamos el evento alex1_1_onClick , primero obetnemos una referencia al componente de texto que dice 'animate me', con esa referencia usamos tweenlite para animar la coordenada x del texto (usando su wrapper). Podríamos animar muchas propiedades al mismo tiempo usando la misma línea de código.

Guarda la página y ahora pruebala: abre otra pestaña o ventana en tú browser y escribe lo siguiente en la barra de direcciones: http://url/webdesigner/webdesigner.html?cp=alex1 , donde url es la url del servidor (reemplazalo con el que corresponda en tú caso). Presiona enter y el browser te debería mostrar tú página con los dos textos, haz click sobre el texto 'push me' y deberías ver cómo el texto 'animate me' se mueve suavemente de forma horizontal.
Ahora tienes una pequeña idea de la potencia de los scripts en Hummingbird. En los siguientes posts verás cómo usar las propiedades y métodos de los componentes para crear impresionantes web sites.

1 comment:

  1. Realmente impresionante el trabajo que están realizando, los felicito, voy a estar pendiente de este blog, porque me gustaría ver funcionando pronto el proyecto para poder poner manos a la obra y crear un site usando este sistema.

    ReplyDelete