LATEST UPDATE: Twitter modified their crossdomain policy, which put an end to my flash fun... In other words, this doesn't work anymore the way I wrote it and I don't wanna spend any time updating it! *sigh*

I rewrote the myTweets AS2 flash badge using AS3 and I thought it might be a good idea to share the code and source files. (Links at the end of the post.)

I'd like to focus on a few items that caused me a few minor headaches here and there in hopes of saving others the trouble. When you can't find an answer in flash's documentation or in Moock's Essential Actionscript 3.0, google it and you'll probably find what you're looking for.

Let's get started.

Don't forget your imports

New calls requires new imports that you may not be familiar with. For example, getting an url requires code within the flash.net framework. It could be easy to overlook, so keep your eyes open. Here's my list for this project:

import fl.transitions.Tween;
import fl.transitions.easing.*;
import flash.display.*;
import flash.events.*;
import flash.net.*;
import flash.ui.*
import flash.utils.*

Calling a function that requires an EVENT

When the stage resizes, I have an event listener attached to the stage that calls resizeHandler. The resizeHandler function appears to require an EVENT as an argument... but I want to fire it immediately when my swf loads to position my clips on the stage... and I don't want to create another event to do this. What to do?

The event listener:

stage.addEventListener(Event.RESIZE, resizeHandler);

The resizeHandler function:

// RESIZER
private function resizeHandler(event:Event):void {
	//trace("resizeHandler: " + event);
  	//trace("stageWidth: " + stage.stageWidth + " stageHeight: " + stage.stageHeight);
	myBtn.x = int((stage.stageWidth/2)-(myBtn.width/2));
	myBtn.y = int((stage.stageHeight/2)-(myBtn.height/2));
	textBox.x = myBtn.x;
	textBox.y = myBtn.y;
	loadImg.x = myBtn.x+300;
	loadImg.y = myBtn.y+102;
	dateTxt.x = myBtn.x+11;
	dateTxt.y = myBtn.y+135;
};

The answers turn out to be super simple. I just pass null as an argument and resizeHandler accepts that.

 resizeHandler(null);

Customizing the right-click context menu

What hung me up on this one was how to attach the context menu to the stage, as opposed to an object on the stage. With all of the new syntax swirling around it's hard to know what's acceptable and what's not. Root, stage, this... In the end, line 43 did the trick. Good 'ole reliable "this."

// create the context menu, remove the built-in items, add our custom items
var newCM:ContextMenu = new ContextMenu();
newCM.addEventListener(ContextMenuEvent.MENU_SELECT, onContextMenuHandler);
newCM.hideBuiltInItems();
var link1:ContextMenuItem = new ContextMenuItem("Visit DaveCurry.net" );
link1.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, grabLink1);
newCM.customItems.push(link1);
var link2:ContextMenuItem = new ContextMenuItem("Visit Twitter");
link2.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, grabLink2);
newCM.customItems.push(link2);
this.contextMenu = newCM;
 
function onContextMenuHandler(event:ContextMenuEvent):void {
event.target.customItems[0].enabled = true;
event.target.customItems[1].enabled = true;
}
 
// contextMenu link1
function grabLink1(event:ContextMenuEvent) {
var myRequest:URLRequest = new URLRequest("http://www.davecurry.net");
navigateToURL(myRequest);
}
 
// contextMenu link2
function grabLink2(event:ContextMenuEvent) {
var myRequest:URLRequest = new URLRequest("http://www.twitter.com");
navigateToURL(myRequest);
}

Using FlashVars with AS3

This one is huge. At work, we rely on FlashVars to make our projects more dynamic. When you're working with CMS and you need to tell your flash object a few things... you can't beat 'em.

Here's how I ended up coding for FlashVars in AS3. They're not as integrated as before, but we accept that and move on.

First I want to check for their existence. If found, I populate the variables with the values defined in FlashVars.

If FlashVar values are not found, I declare them in my code so my swf won't break. Breaking is no good.

// sort FlashVars
var keyStr:String;
var paramObj:Object = LoaderInfo(this.root.loaderInfo).parameters;
for (keyStr in paramObj) {
	// sort flashVars
	if (keyStr == "userID") { userID = String(paramObj[keyStr]); }
	if (keyStr == "totalTweets") { totalTweets = Number(paramObj[keyStr]); }
	if (keyStr == "timerTweets") { timerTweets = Number(paramObj[keyStr]); }
	if (keyStr == "tweetColor") { tweetColor = Number(paramObj[keyStr]); }
	if (keyStr == "dateColor") { dateColor = Number(paramObj[keyStr]); }
}
 
// if no FlashVars are found - define values
if (userID == null) {
	userID = "1905521";
	totalTweets = 5;
	timerTweets = 5;
	tweetColor = 0x000000;
	dateColor = 0x000000;
}

Consuming the XML

In AS2, XML is a no-brainer. I've been using the same chunk of foolproof code forever, and now I have to think about it? No problem, it's covered.

For the XML Twitter returns, I want to loop through and grab some of the data to define a few variables with, and some of the other data I'll push into arrays.

The XML I'm hitting is this:
http://twitter.com/statuses/user_timeline/1905521.xml

Here's a chunk of that XML from the top:

<?xml version="1.0" encoding="UTF-8"?>
<statuses type="array">
  <status>
    <created_at>Sat Oct 20 22:56:39 +0000 2007</created_at>
    <id>351115132</id>
    <text>I need to go buy the Orange Box.</text>
    <source>im</source>
<truncated>false</truncated>
    <user>
      <id>1905521</id>
      <name>Dave Curry</name>
      <screen_name>DaveCurry</screen_name>
      <location>Seattle, WA</location>
      <description>Dave Curry is an award-winning technical creative director and flash developer at POP, a strategic interactive agency in Seattle.</description>
<profile_image_url>http://s3.amazonaws.com/twitter_production/profile_images/33089582/darthcurry_square_normal.jpg</profile_image_url>
      <url>http://www.davecurry.net</url>
<protected>false</protected>
    </user>
  </status>
  <status>
etc...

To loop through, I'll use "for each" within specific nodes. First in the user data for the imageURL and screenName, and again in the status for everything else, including the tweets themselves.

I should note that this section gets kinda long because I'm rebuilding the date Twittered into a more readable string.

myXML = new XML(myLoader.data);
// run through it
for each (var user:XML in myXML.status.user) {
	// grab image
	if (imgURL == "") { imgURL = user.profile_image_url[0]; }
	// grab screen name
	if (screenName == "") { screenName = user.screen_name; }
};
for each (var tweet:XML in myXML.status) {
	// populate tweets
	twtArray.push(tweet.text);
	// populate tweet ids
	idsArray.push(tweet.id);
	// populate created_at
	var t:String = tweet.created_at;
	// format date
	// remove the junk at the end
	var tempDate:Array = t.split(" +");
	//trace(tempDate)
	// now spilt it apart again
	var splitDate:Array = tempDate[0].split(" ");
	// now split apart the military time
	var splitTime:Array = splitDate[3].split(":");
	// factor in the offset
	var myHour:Number = splitTime[0];
	// determine AM or PM
	var amPm:String;
	int(myHour) >= 12 ? amPm = "PM" : amPm = "AM";
	// fix hour
	if (myHour < 0) { myHour+=12; }
	myHour > 12 ? myHour = myHour-12 : myHour = myHour;
	// now put it all back together again
	var myDate:String = String(splitDate[0]+" "+splitDate[1]+" "+splitDate[2]+" at "+myHour+":"+splitTime[1]+" "+amPm+" GMT");
	dteArray.push(myDate);
};
//trace("done");
//trace("imgURL = "+imgURL);
//trace("screenName = "+screenName);
//trace("twtArray = "+twtArray);
//trace("idsArray = "+idsArray);
//trace("dteArray = "+dteArray);

...and you can see that I have a great affinity for the trace function.

getURL is dead, long live URLRequest

This didn't really hang me up, but it is worth noting that you have to specifically activate a movieClip with buttonMode to use it as a button.

// activate the button
myBtn.buttonMode = true;
myBtn.addEventListener(MouseEvent.CLICK, grabURL);

Once you've activated your movieClip and you've created an event listener to handle a mouse click, you're ready to create your URLRequest.

private function grabURL(event:MouseEvent):void {
	var myRequest:URLRequest = new URLRequest("http://twitter.com/"+screenName+"/statuses/"+currentID);
	navigateToURL(myRequest);
};

That's it, the rest was pretty easy to switch over.

You can grab the source files here and you can see it embedded fullscreen here.

BTW, I didn't use the Twitter flash api that Twitter has on their site because I prefer XML to JSON.

The Legend of Zelda - Phantom Hourglass

Zelda launched a few weeks ago and we continue to get great feedback on the site. Creating for Zelda is an honor and a treat, and being such big fans of the franchise certainly makes our job easier. I just finished the game the other day and really enjoyed the new controls. The stylus is indeed mightier.

I'm very pleased to announce the launch of POP's new Arts Marketing site, showcasing the amazing work we do for arts clients and our unbeatable team. Everyone involved worked very hard to deliver a clean and elegant experience and all I can say is, "Job well done!"

Not to miss is the Select Your Own Seat case study which recounts the overwhelming effectiveness of SYOS, our Flash application that integrates with Tessitura in real-time and offers patrons an innovative way to find and purchase tickets online.

http://www.popartsmarketing.com/

Pokémon Battle Revolution, the third site in our Pokémon trilogy, recently launched and we couldn't be happier with the results. The entire POP team did an incredible job on each of these sites and we feel that the new harmonizing look of Pokemon-Games.com is spot on.

Now, if only I could find some time to take on the Elite 4 in Pokémon Diamond, life would feel complete!

Pokémon Battle Revolution

Pokémon Diamond and Pokémon Pearl

Pokemon-Games.com

For a brand new, major metropolitan museum, this is embarrassing.

There were many more examples, but photography in the museum is frowned upon.

Brad and I stumbled upon this mini-scene from Super Mario Bros. right in front of the Art Institute. Tons of post-its strategically stapled to a telephone pole. No doubt the work of some 8-bit savvy students.

Click here for a few more pics.

Find my Miis on Nintendo's Check Mii Out Channel.

This is just plain awesome. Not only did I get a copy of WarioWare: Smooth Moves for winning Kottke's Celebrity Mii Contest... I also got a one of a kind Zach Braff Celebrity Mii sculpture from Fabjectory.com. Simply awesome!

Many thanks again to Jason Kottke and Mike at Fabjectory.com!

Wouldn't that be neat?

I'm happy to announce the launch of a POP sibling site we've created to showcase some of our favorite interactive entertainment experiences:

http://arcade.pop.us