presentación de acto framework parte ii

Co-Fundador de Molamil. Diseñador/programador interactivo, autodidacta. Más de 10 años de experiencia en agencias en Argentina, España y Dinamarca.

Ramiro Espada

Nuestra experiencia usando ACTO en la creación de sites interactivos,campañas.

• Muchas animaciones.• 1 o 2 desarrolladores por

proyecto.• Poco uso de eventos (AS2)• El efecto WOW valía más que

todo.• Contenidos dinámico? Sí, con

vars en un .txt

Flash antes…

• Muchas animaciones con código.

• Varios desarrolladores por proyecto.

• Frameworks son populares, gráficos en 3D, sistemas de partículas, augumented reallity etc…

• Todo es multilingüe, dinámico, escalable, basado en algún CMS…

Flash ahora…

La arquitectura no es una buena practica, es la clave para ejecutar el proyecto sin sorpresas.

Un salto revelador…

Mejorar nuestro proceso de trabajoestructura de carpetas, listas de tareas en google docs (TODOs)…

Consolidar un entorno comúnusando todos las mismas herramientas para una instalación y comunicación más rápida, SVN, FDT, ant…

public class TusClasses extends AbstractView {

public override function init():void{}

public override function draw():void {}

public override function destroy():void {}

}

AbstractView

Empiezadefiniendo la estructura del site en acto.xml

Haz una maqueta interactiva del site en la que puedas navegar por todas las páginas.

Discrimina el contenido en paginas y blocks,si solo una instancia del contenido es visible a la vez que otro contenido similar, es una pagina, si está presente en mas de una ocasiónes un block.

Crea containers,piensa en capas, adapta los containers de acuerdo al tamaño del Stage para optimizar el rendimiento.

Incluye otros frameworks en la carpeta libTweener, Away3D, Papervision, analytics, SWFAddress, etc…

Crea una librería de gráficos para tuProyecto.swcincluyendo solo gráficos, animaciones, tipografías, sonidos, todo sin referencias a clases externas, para evitar sorpresas con referencias recursivas.

Construye los diferentes “views”incluyendo en tus clases los elementos visuales en tuLibreria.swc public class Frontpage extends AbstractView {

private var libreria:frontpage; // en tuLiberia.swc

public override function init():void{

libreria = new frontpage();

librería.titular.text = “HOLA”;

}

}

Crea componentesdiscriminando aquellos objetos que van a ser utilizados más de una vez en diferentes páginas o blocks: botones, contenedores de imágenes, preloaders, reproductores de video, scrollbars, etc…

Usa destroy() recursivamente

public class Frontpage extends AbstractView {

private var button:SimpleButton;

public override function init():void{

button = new SimpleButton();

addChild(button);

button.label = “Siguiente Pagina”;

button.init();

}

public override function draw():void {}

public override function destroy():void {

button.destroy();

}

}

Pon el contenido en acto.xml<page id="frontpage" extends="abstractPage” target=“Frontpage">

<prop name=”texts”>

<prop name=”titular" value=”HOLA ACTO!"/>

</prop>

</page>

public class Frontpage extends AbstractView {

private var texts:Object;

public override function init():void{

libreria = new frontpage();

libreria.titular.text = texts.titular;

}

}

En acto.XML

<include target=”textos.xml"/>

<page id="frontpage" extends="abstractPage” target=“Frontpage">

<prop name="texts" value="{texts.frontpage}"/>

</page>

En textos.XML

<?xml version="1.0" encoding="UTF-8" ?>

<acto>

<prop name="texts">

<prop name="frontpage">

<prop name="TITULAR"><![CDATA[Break the pattern by playing]]></prop>

</prop>

</prop>

</acto>

Usa correctamente eventos y handlersdescribiendo siempre lo que acaba de suceder, nunca lo que debería suceder después.

Primero crea todo y luego refínalo,valen más 25 páginas “más o menos” hechas, que 2 páginas perfectas y 23 sin hacer.

Simula el resultado del backend compartiendo con el equipo de backend la estructura del xml que quieres recibir antes de que hayan empezado, puedes ahorrarte en hacer un nuevo parser y crear un lenguaje común.

Crea comandos

<command id="sendToFriend" type=“SendToFriendCommand" target=“sendToFriend.php">

<param name="firstName" required="true"/>

<param name="lastName" required="true"/>

<param name="companyName" required="true"/>

<param name="email" required="true” validator="EmailValidator"/>

<handler type="sendToFriendFormSubmitted"/>

</command>

package com.molamil.hpci.command {

import com.molamil.hpci.events.HPCIErrorEvent;

import com.molamil.hpci.events.HpciEvent;

import com.molamil.hpci.Controller;

import flash.net.URLVariables;

import org.molamil.acto.commands.RemoteCommand;

public class SendToFriendCommand extends RemoteCommand {

protected override function parseResponse(data:*):* {

var params:URLVariables = new URLVariables(data);

if(params.status == "1”) {

dispatchEvent(new HpciEvent(HpciEvent.SEND_TO_FRIEND_COMPLETE));

return true;

}

dispatchEvent(new HPCIErrorEvent(HPCIErrorEvent.SEND_TO_FRIEND_ERROR, params.error));

return false;

}

}

}

Usa SWFAddresspublic class Controller extends App {

private var swfAddressController:SWFAddressController;

public function init():void {

swfAddressController = new SWFAddressController(this);

swfAddressController.init();

}

}

Implementa el trackingpublic class Controller extends App {

private var _gaController:GAController;

private function confCompleteHandle(event:ConfLoadEvent):void {

_gaController = new GAController(this);

_gaController.account = props.googleAnalyticsAccount;

_gaController.visualDebug = props.isTrackingDebug;

_gaController.mode = props.trackingMode;

_gaController.init();

}

}

Busca errores y elimina erroresrevisando todo lo que sucede gracias a los niveles del Logger:Logger.LEVEL_WARNING;Logger.LEVEL_INFO;Logger.LEVEL_SEVERE;Logger.LEVEL_DEBUG;

Usa diferentes managerscreando diferentes animaciones de transición entre paginas y blocks.

Crea animaciones que añadan valor al contenidocontando con la colaboración de alguien que no haga código. Es muy fácil hacer algo cutre, pero requiere talento, inspiración y tiempo hacer algo interesante.

Divide el trabajoen equipo acorde con lo que cada uno hace mejor y mas rápido

ACTO + Desarrollador = Reusar, organizar, hacer cambios sin compilar, conectar con diferentes tecnologías…

ACTO + Diseñador = Hacer skins, cambiar todos los botones o tipografías en un solo lugar…

ACTO + Animador = Concentrarse en los detalles chulos, crear transiciones, efectos para rollovers…

ACTO + Copywriter = Cambiar el texto en un documento separado de la configuración, donde solo hay texto…

ACTO + Jefe de proyecto= Tener una maqueta lo antes posible, hacer cambios sin perder la vida, minimizar tiempo de integración…

ACTO hace nuestro negocio mas competitivo,trabajando mas rápido conseguimos más tiempo para concentrarnos en los objetivos principales del site, haciendo la experiencia mas consistente y completa.

Tienes alguna duda, o quieres compartir tu experiencia ?

MOLAMILVestergade 41456 Copenhague

+45 6019 6005

molamil@molamil.comwww.molamil.com

Hablamos