SWF It Good

Adobe Evangelist Daniel Dura visits Travelocity

So today Daniel Dura, an Adobe Evangelist, came by Travelocity to talk about Flash, Flex and AIR. It was interesting to here him speak and his hair was redder then pictures led on. But I won’t hold that against him.

History and Examples

If you have ever seen anyone from Adobe speak, you know they have to go over the History of the Flash Player, AVM, JIT and all that. Luckily he didn’t have to talk about the history of the web as some Adobe eseminars do.

Once he got past that some people asked questions about some of Adobe’s technologies. I’m not quoting Daniel, but he compared Flash to Silverlight and AIR to WPF. One thing I didn’t know is that the debugger and even the compiler are open source. Though I will never want to rewrite the compiler. Nice Adobe

Oh and they showed this killer travel app that they cooked up.

Examples

I don’t know what the rest of the audience’s background is but I though it was good he went over using AS3 in FlexBuilder. Some examples were using E4X, Arrays and DisplayObjects. Afterwards he created a simple Flex rss reader for his blog. Then converted to an AIR app which is quite simple if you didn’t know.

What was not easy was him showing us how to compile it only using the command line. Thankfully after that he showed how to do that in FlexBuilder (cake).

Next was an HTML example, I forgot what the example was. Though he remined me that you can call flash packages in JavaScript. The way it works is their is the flash engine and the JavaScript engine. The JavaScript engine says, “Hey, I can’t find this DropShadowFilter thing…Oh, I’ll look in the Flash engine. There it is.” That is really exciting to me. See my post on calling Flash class in Javascript.

After that he talked about the other AIR specific packages.

• Drag and Drop
• Service Monitor
• SqlLite

(An aside) One thing I saw that was awesome cause I love the in operator and for each but I didn’t know you could do this

[as]var array:Array = ["butter", "eggs", "sugar"];

trace((2 in array));[/as]

Good Job Daniel. You reawakened my want to use AIR.

Oh see his Air Code

Add comment April 15th, 2008

How to create a PureMVC app with Actionscript 3

Update at: How to Add and Remove Mediators in an Actionscript 3 PureMVC App

So I have been working alot w/ PureMVC, well everyday for the last month to be exact. I’m going to try to explain PureMVC the best way I know how. It may not be the best, but I hope it can get you started. And when you learn something let me know.

So the example I am doing is a simple one using Lee Brimelow’s code from the ActionScript 3 Advanced XML example. The only difference between his and what I changed is some method name changes and putting it in PureMVC.

So if you don’t know what PureMVC is or you are quite confused on how to use it…well so am I . I’m still learned and hopefully can teach some stuff. I’m not going to go into the specifics of this framework but think of it as a way to introduce a lot separation of code using the Model, View, Controller. I’ll explain what I see as the benefits after I explain the example.

Look at lee’s example:

[as]var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, onLoaded);

stage.addEventListener(MouseEvent.CLICK, changeColor);

var xml:XML;
var kuler:Namespace = new Namespace(”http://kuler.adobe.com/kuler/API/rss/”);
var ka:Array = new Array();
var cc:int = 0;

function onLoaded(e:Event):void
{

xml = new XML(e.target.data);
var il:XMLList = xml.channel.item;
for(var i:uint=0; i<il.length(); i++)
{
var sl:XML = il.kuler::themeItem.kuler::themeSwatches[i];
var co:Object = new Object();
co.c1 = sl.kuler::swatch.kuler::swatchHexColor.text()[0];
co.c2 = sl.kuler::swatch.kuler::swatchHexColor.text()[1];
co.c3 = sl.kuler::swatch.kuler::swatchHexColor.text()[2];
co.c4 = sl.kuler::swatch.kuler::swatchHexColor.text()[3];
co.c5 = sl.kuler::swatch.kuler::swatchHexColor.text()[4];
ka.push(co);
}
drawColors(ka[0]);
}

function drawColors(c:Object):void
{
graphics.beginFill(parseInt(”0x” + c.c1));
graphics.drawRect(0, 0, 200, 200);
graphics.beginFill(parseInt(”0x” + c.c2));
graphics.drawRect(200, 0, 200, 200);
graphics.beginFill(parseInt(”0x” + c.c3));
graphics.drawRect(400, 0, 200, 200);
graphics.beginFill(parseInt(”0x” + c.c4));
graphics.drawRect(600, 0, 200, 200);
graphics.beginFill(parseInt(”0x” + c.c5));
graphics.drawRect(800, 0, 200, 200);
}

function changeColor(e:Event):void
{
if(cc == ka.length – 1)
cc = 0;
else
cc++;
drawColors(ka[cc]);
}

loader.load(new URLRequest(”http://kuler.adobe.com/kuler/API/rss/get.cfm?listtype=rating&itemsperpage=20″));
[/as]

most everything but the drawColors() function are going into the dataProxy.
What’s a dataProxy…hold on.

Make sure you download the swc or classes.

Here is what we are working with:

1. PurelyKuler (Main Class)
   1. call the facade
   2. pass the DisplayObject to the app (a PureMVC method)

   [as]package {
   import flash.display.Sprite;
   import flash.display.StageAlign;
   import flash.display.StageScaleMode;

   //your main class file. you know that!
   public class PurelyKuler extends Sprite
   {
   public function PurelyKuler()
   {
   stage.align = StageAlign.TOP_LEFT;
   stage.scaleMode = StageScaleMode.NO_SCALE;
   //get facade instance
   var facade:PurelyKulerFacade = PurelyKulerFacade.getInstance();
   // make sprite that will be the viewcomponent to the mediator
   var colorContainer:Sprite = new Sprite();
   addChild(colorContainer);
   //start it up and pass the sprite to the app.
   facade.startup(colorContainer);
   }
   }
   }
   [/as]

2. facade (PurelyKulerFacade)
   1. create singleton
   2. starts the app
   3. registers the command (StartUpCommand) I haven’t explained that yet
   4. notify – PurelyKulerConstants.STARTUP and pass the DisplayObject

   [as]package
   {
   import com.joshspoon.etc.purelyKuler.PurelyKulerConstants;
   import com.joshspoon.etc.purelyKuler.controller.*;

   import org.puremvc.interfaces.IFacade;
   import org.puremvc.patterns.facade.Facade;
   import org.puremvc.patterns.observer.Notification;

   public class PurelyKulerFacade extends Facade implements IFacade
   {
   // Singleton Method
   public static function getInstance(): PurelyKulerFacade {
   if (instance == null) {
   instance = new PurelyKulerFacade( );
   }
   return instance as PurelyKulerFacade;
   }

   // Broadcast the STARTUP Notification
   public function startup(app:Object):void {

   notifyObservers(new Notification(PurelyKulerConstants.STARTUP, app));
   }

   // Register Commands with the Controller
   // like EVENT this is listening for STARTUP to excute the StartUpCommand
   override protected function initializeController():void {
   super.initializeController();
   registerCommand(PurelyKulerConstants.STARTUP, StartUpCommand);
   }

   }
   }[/as]

3. SimpleCommand (StartUpCommand) – similar to your event handler
   1. registerProxy (KulerDataProxy) not spoke about yet
   2. registerMediator(PurelyKulerMediator) – not spoken of yet

   [as]package com.joshspoon.etc.purelyKuler.controller
   {
   import com.joshspoon.etc.purelyKuler.model.KulerDataProxy;
   import com.joshspoon.etc.purelyKuler.view.PurelyKulerMediator;

   import flash.display.*;

   import org.puremvc.interfaces.ICommand;
   import org.puremvc.interfaces.INotification;
   import org.puremvc.patterns.command.SimpleCommand;

   public class StartUpCommand extends SimpleCommand implements ICommand
   {
   override public function execute(notification:INotification):void
   {
   // Create and register proxy

   facade.registerProxy(new KulerDataProxy());

   // Create and register the mediator, colorContainer passed as the viewcomponent of the Mediator

   facade.registerMediator(new PurelyKulerMediator(notification.getBody() as Sprite));

   }

   }
   }[/as]

4. Proxy (KulerDataProxy) – connects to databases/REST/and the like
   1. setup connection for xml
   2. expose a loadInfo method for request of data
   3. onKulerLoad method just like lee’s except it notifies DATA_LOADED and passes the array of colors

   [as]package com.joshspoon.etc.purelyKuler.model
   {
   import com.joshspoon.etc.purelyKuler.PurelyKulerConstants;

   import flash.events.Event;
   import flash.net.*;

   import org.puremvc.interfaces.IProxy;
   import org.puremvc.patterns.observer.Notification;
   import org.puremvc.patterns.proxy.Proxy;

   public class KulerDataProxy extends Proxy implements IProxy
   {

   public static const NAME:String = “KulerDataProxy”;
   private var _loader:URLLoader;
   private var _xml:XML;
   private var kuler:Namespace;
   private var _ka:Array;

   public function KulerDataProxy( data:Object = null )
   {
   super ( NAME, data );

   setupNetwork();
   trace(NAME + ” ready”);
   }
   // has everything to prepare the data request to Kuler.
   private function setupNetwork():void
   {
   kuler = new Namespace(”http://kuler.adobe.com/kuler/API/rss/”);
   _ka = new Array();
   _loader = new URLLoader();
   _loader.addEventListener(Event.COMPLETE, onKulerLoad);

   }

   // function called to start action of dataProxy
   public function loadInfo():void
   {
   _loader.load(new URLRequest(”http://kuler.adobe.com/kuler/API/rss/get.cfm?listtype=rating&itemsperpage=20″));
   }
   // this is an overriden inherited function from PureMVC
   override public function getProxyName():String
   {
   return NAME;
   }

   //when data is loaded
   private function onKulerLoad(e:Event):void
   {
   //for more info see: http://www.gotoandlearn.com/player.php?id=65
   _xml = new XML(e.target.data);
   var il:XMLList = _xml.channel.item;
   for(var i:uint=0; i<il.length(); i++)
   {
   var sl:XML = il.kuler::themeItem.kuler::themeSwatches[i];
   var co:Object = new Object();
   co.c1 = sl.kuler::swatch.kuler::swatchHexColor.text()[0];
   co.c2 = sl.kuler::swatch.kuler::swatchHexColor.text()[1];
   co.c3 = sl.kuler::swatch.kuler::swatchHexColor.text()[2];
   co.c4 = sl.kuler::swatch.kuler::swatchHexColor.text()[3];
   co.c5 = sl.kuler::swatch.kuler::swatchHexColor.text()[4];
   _ka.push(co);

   }
   trace(”co.c1: ” + _ka[0].c1);

   //once all the color data is pushed in to the array
   //send notifications
   facade.notifyObservers(new Notification(PurelyKulerConstants.DATA_LOADED, _ka));
   }

   }
   }
   [/as]

5. Mediator (PurelyKulerMediator) -the view of the application
   1. create loading textField and add it to viewComponent(colorComponent)
   2. when data returns allow click
   3. draw colors.

   [as]// code created by Lee Brimelow http://www.gotoandlearn.com/player.php?id=65
   // modified by Josh Weatherspoon: http://etc.joshspoon.com/wp-content/uploads/2008/02/purelykuler_puremvc_example.zip
   package com.joshspoon.etc.purelyKuler.view
   {
   import com.joshspoon.etc.purelyKuler.PurelyKulerConstants;
   import com.joshspoon.etc.purelyKuler.model.KulerDataProxy;

   import flash.display.*;
   import flash.events.*;
   import flash.text.*;

   import org.puremvc.interfaces.IMediator;
   import org.puremvc.interfaces.INotification;
   import org.puremvc.patterns.mediator.Mediator;

   public class PurelyKulerMediator extends Mediator implements IMediator
   {
   public static const NAME:String = “PurelyKulerMediator”;
   private var _tf:TextField; // will display loading…
   private var _ka:Array = []; //array to hold color data from the Proxy
   private var cc:int = 0; // index in th _ka array

   public function PurelyKulerMediator(viewComponent:Object=null)
   {
   _tf = new TextField();

   super(viewComponent);// the colorContainer
   DisplayObjectContainer(viewComponent).addChild(_tf);
   loading();
   trace(NAME + ” started”);
   }
   // a PureMVC override
   override public function getMediatorName():String
   {
   return NAME;// passes name to access this in the app
   }
   // a PureMVC override
   override public function getViewComponent():Object
   {
   return viewComponent;
   }
   // what this mediator is listening for
   override public function listNotificationInterests():Array
   {
   return [PurelyKulerConstants.DATA_LOADED]
   }

   override public function handleNotification(notification:INotification):void
   {
   switch (notification.getName())// like Event.CHANGE
   {
   case PurelyKulerConstants.DATA_LOADED:
   _ka = (notification.getBody() as Array) // like evt.data
   changeColor();
   DisplayObjectContainer(viewComponent).addEventListener(MouseEvent.CLICK, changeColor, false, 0, true); //real events should only be in mediator and call change through notifications
   break;
   }
   }
   // calling the load method for the xml in teh proxy
   private function loading():void
   {
   _tf.text = “Loading…”;
   KulerDataProxy(facade.retrieveProxy(KulerDataProxy.NAME)).loadInfo();
   }
   //see lee’s example
   private function changeColor(e:MouseEvent = null):void
   {
   if(cc == _ka.length – 1)
   cc = 0;
   else
   cc++;
   drawColors(_ka[cc]);
   }
   //see lee’s example
   private function drawColors(c:Object):void
   {
   _tf.text = “”;
   viewComponent.graphics.clear();
   viewComponent.graphics.beginFill(parseInt(”0x” + c.c1));
   viewComponent.graphics.drawRect(0, 0, 200, 200);
   viewComponent.graphics.beginFill(parseInt(”0x” + c.c2));
   viewComponent.graphics.drawRect(200, 0, 200, 200);
   viewComponent.graphics.beginFill(parseInt(”0x” + c.c3));
   viewComponent.graphics.drawRect(400, 0, 200, 200);
   viewComponent.graphics.beginFill(parseInt(”0x” + c.c4));
   viewComponent.graphics.drawRect(600, 0, 200, 200);
   viewComponent.graphics.beginFill(parseInt(”0x” + c.c5));
   viewComponent.graphics.drawRect(800, 0, 200, 200);
   }
   }
   }
   [/as]

6. Lastly the constants I use in PurelyKulerConstants

[as]package com.joshspoon.etc.purelyKuler
{
// a little excess for this example but I like having a global place to store contants
public class PurelyKulerConstants
{
public static const DATA_LOADED:String = “DataLoaded”;
public static const STARTUP:String = “Startup”;
}
}[/as]

You can expand this and make another proxy or mediator and plug and play pieces, since you code is not tightly coupled. That is what I see as benefit.

That should be it. I hope that helps

Enjoy!

source

4 comments February 13th, 2008

Flash CS3 and the TileList

**UPDATE July 19th**
This code uses FlashVars and SWFObject. I ran into a problem, as we continued to build, w/ getting data to show in the swf.
To fix this error switch out[as]
so.addParam(”wmode”, “transparent”);
[/as]with[as]
so.addParam(”wmode”, “opaque”);
[/as]or delete it all together

**UPDATE July 19th**

I’m working on a TileList for work for a peek at our Portfolios. Right now I’m trying to adapt the TileList to my liking with back and forth button instead of the scrollpanel. But I wanted to share the wealth w/ what I’ve dug up on this Flash CS3 component. I find most of what’s online to be really crappy and not too robust.

I’ve provided a zip to my work: titelist.zip

[as]

import fl.controls.ScrollBarDirection;
import fl.events.ListEvent;
import fl.controls.listClasses.*;
import flash.net.*;
import flash.events.*;
import fl.data.*;

var xml:XML;
// this set a var for parameter xmlData that is set in the
// SWFObject
var _xmlData:* = root.loaderInfo.parameters.xmlData;

// if someone for got to set the xmlData parameter
// load default xml
if(_xmlData == undefined)
{
_xmlData = “xml/default.xml”
}

trace(root.loaderInfo.parameters.xmlData);
// request xml file
var requester:URLRequest = new URLRequest(_xmlData as String);
//load xml file
var loader:URLLoader = new URLLoader(requester);

//set dataprovider to the loaded xml
function setItems(evt:Event):void
{
xml = XML(evt.target.data);
trace(xml);
list.dataProvider = new DataProvider(xml);
}

loader.addEventListener(Event.COMPLETE, setItems);

//on click of item go to data/url
function onItemClick(e:ListEvent):void
{
navigateToURL(new URLRequest(e.item.data),”_self”);

}

list.addEventListener(ListEvent.ITEM_CLICK, onItemClick);

// Set scroll bar direction
list.direction = ScrollBarDirection.HORIZONTAL;

// position TileList and set column and row values
list.move(0,0);
list.columnWidth = 122;
list.rowHeight = 112;

list.width = 366;
list.height = 112;
list.columnCount = 3;
list.rowCount = 1;
[/as]

4 comments July 15th, 2007

Flash CS3 animator class and loading XML animation at runtime

So there is a new animator class. It works like FuseXML. The animations are set by nodes and attributes.
To do this:

1. start a CS3 document
2. make an mc called ‘abox’
3. make an animation
4. select the animation
5. Commands > Export Motion XML
6. name xml file “motion.xml”
7. create an actionscript layer
8. Then load XML as usual.

add:

[as]import fl.motion.Animator;
import fl.motion.MotionEvent;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.*;

var abox_xml:XML;
var requester:URLRequest = new URLRequest(”motion.xml”);
var loader:URLLoader = new URLLoader(requester);
var abox_animator:Animator;
loader.addEventListener(Event.COMPLETE, startAnimation);

function startAnimation(evt:Event):void {

abox_xml = XML(evt.target.data);
abox_animator = new Animator(abox_xml, abox);
abox_animator.play();

}[/as]

Add comment May 4th, 2007