Papervision 2.0 BorgEffects – Flash Version

Yesterday I snagged Andy Zupko's super-amazing BorgEffects download which demos his new Effects branch for Papervision 2.0. It's very exciting stuff!

Since I'm not a big-time Flex user, I converted his borgEffects.as for use in the Flash IDE and decided to make it available for download. I thought it might be helpful to those struggling with Flex to Flash conversions.

Of course, I couldn't resist making a few changes by just messing around;

randomly changing the colorTransform settings onClick

using a different texture

changing the clippingPoint

etc...

To highlight the Flex to Flash diffs, I've commented my BorgEffects_flash.as like so:

// the FLEX WAY
//dae.load(XML(new shipAsset()), mats);
// the FLASH WAY
dae.load("cube.dae", mats);

To make it all hum, you'll need the latest build from the Papervision respository and be sure to point the BorgEffects_flash.fla Actionscript 3.0 Classpath to the class files in /branches/Effects/src.

Download the source files and have fun.

EDIT: I'm not sure exactly which revision of Great White this demo used, but since 2007 I'm sure a lot has changed. Proceed with caution!

This entry was written by Dave, posted on December 29, 2007 at 3:36 pm, filed under Articles, Design, Flash, Notes. Leave a comment or view the discussion at the permalink.

Talking to Twitter via Actionscript 3.0

Please note this post is OLD; from way back in 2007!

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.

This entry was written by Dave, posted on October 21, 2007 at 8:48 pm, filed under Articles, Design, Flash. Leave a comment or view the discussion at the permalink.

Real Life Zach Braff Celebrity Mii from Fabjectory.com

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?

This entry was written by Dave, posted on April 15, 2007 at 6:50 pm, filed under Awards, Design, Miis, Notes. Leave a comment or view the discussion at the permalink.