Dot AS

return

2007-07-10T15:57:00.000-06:00

So to say I've been lax in posting would be an understatement. I just haven't had much actionscript development to do at work and I program all ruby at home. However I do have an exciting development coming down the line. In the vein of Aral's SWX I have a mini-framework I am working on to make xml easier. I am also going to continue my xml tutorials shortly and hopefully syndicate them to actionscript.org.

Navigating XML with E4X

2007-06-11T15:51:00.000-06:00

So last time we learned to load xml from an external source. Now we're going to learn how to handle it in as3 with e4x. E4x is neat. It basically allows you to navigate the xml as if it were a native flash object (part of the reason I don't get SWX). So lets start with out previous example:

import flash.net.*

var sourceURL:String = "http://www.minorleaguebaseball.com/gen/stats/xml/clubs/482/schedule.xml";

function loadXML(path:String):void {
var request:URLRequest = new URLRequest(path);
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.addEventListener('complete', dataLoaded);
xmlLoader.load(request);
}

function dataLoaded(e:Event):void {
trace(e.target.data);
}

Now if you look at the result of the trace you'll see that there are basically a bunch of team nodes with team nodes nested in them. This is the main data we need. Now in order to get this data all we need to do is the following (note: since the first part won't change we'll only be dealing with the data loaded function from here on):
function dataLoaded(e:Event):void {
var boxScore:XML = new XML(e.target.data)
for each(var game in boxscore.game){
trace(game)
}
}

This will out put each game individually. E4X uses the familiar dot syntax to access xml. If you only want to get a child node of an object, the game, you use a single dot. However if you wanted to get the descendant node, the team, you would use two dots (e.g. boxscore..team). I think that may be it for now. I want to keep these lessons short and sweet. Next I'll cover getting attributes and child/descendant nodes with odd characters(hyphens and whatnot) We'll also begin to flesh out the boxscore app be creating classes for the games and the teams.

Simple XML Loader

2007-06-06T17:03:00.000-06:00

In my work I deal a lot with xml and have become proficient at getting data. I also write scrapers for another project on working on. The result of this is I am going to start a series covering how to handle xml in flash. First we'll deal with loading the xml. For the example I will use a real example for a project I did to create a box score for each game for a minor league team. The feed can be found here. So feel free to play around with it. To load the xml you'll need the flash.net library. So lets start our skeleton project. Just a note, 482 is the team id, changing it will get you a schedule for a different team.

import flash.net.*

var sourceURL:String = "http://www.minorleaguebaseball.com/gen/stats/xml/clubs/482/schedule.xml";

function loadXML(path:String):void{

}

So in order to load the XML we need two classes: URLRequest and URLLoader. Whenever you're doing anything with any url, you'll need URLRequest. So the basic plan is to create a URLRequest object and then pass it to URLLoader. Next we add an event listener to the loader for the complete event and then we load the url. The final result is shown below.

import flash.net.*

var sourceURL:String = "http://www.minorleaguebaseball.com/gen/stats/xml/clubs/482/schedule.xml";

function loadXML(path:String):void {
var request:URLRequest = new URLRequest(path);
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.addEventListener('complete', dataLoaded);
xmlLoader.load(request);
}

function dataLoaded(e:Event):void {
trace(e.target.data);
}

This is just a quick and dirty example. It merely reads the xml, it doesn't pass an variables to it. Also this includes no error checking. All that stuff will be covered later. Another less readable version of the first function could be:

function loadXML(path:String):void {
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.addEventListener('complete', dataLoaded);
xmlLoader.load(new URLRequest(path));
}

Granted it only saves you a line, but I've seen a lot of people use URLRequest that way. I prefer the first method as I think its a bit more readable. Next I'll cover how to read the xml once you get it. Ta-ta for now.

New addition to asinmotion

2007-05-25T12:46:00.000-06:00

The other day I was developing a component for our cms. I ran into a problem where I needed to execute an animation in one scope, but in another scope I needed to run it's animation in conjuction with a series of others. What did I do? Added a new feature to ASinMotion, append. With this you can string together different animation, as of now, they must be the same type, either parallel or queue, but I plan on changing that. I also want to run the animations not only in reverse order, but completely in reverse e.g. run it from the end position back to its origin. I hopefully will get that done next week. If you have questions about ASinMotion post a comment or a message on the Google Code site.

http://code.google.com/p/asinmotion/

ASinMotion

2007-05-23T13:46:00.000-06:00

I just created a google code project for my animation framework in as3. I wrote it before cs3 came out, but I still don't like having to write xml to animate, it's many more lines of code.

Check it our here.

Runtime skinning of components

2007-05-22T12:30:00.000-06:00

One awesome new feature in Flash CS3 is the ability to skin components at runtime. This is great because at work I develop flash components for a cms system (my work). Since they are included in many different sites the colors have to be configurable at runtime in order to fit with the site. Before I had to create my own components which was very tedious, especially since a solution already exists. Now that that's done, how do you do it? First create a component. The use setStyle method. The first argument is the skin you want to replace. This varies for each component but can be found in the livedocs here. The next argument is the skin to replace the current skin. Since the second argument just has a type of Class that leaves it wide open to what you can use. Enjoy!

edit:Fixed the link.

ReleaseOutside replacement

2007-04-24T14:41:00.000-06:00

I was recently trying to figure out how to replace the releaseOutside as2 event in as3. In most cases you can just add the listener to the stage since you usually don't care where the mouse was released, just that it was released. If you specifically need to know the mouse was released outside the object, you can use the method senocular illustrates here.

Flash CS3 is out!

2007-04-24T14:06:00.000-06:00

Unless you lived in a cave, you should know that last week Flash CS3 was finally released. I have not gotten to play with it yet, but am trying to convince my work into upgrading. I am really excited about the Flex Kit that they released which allows you to easily author Flex components in Flash, which is great. The weakness I always saw in Flash was that you had to absolutely position everything, which added many lines of code and became very repetitive. Flex conquered that problem but was too rigid in its creating of components. The integration of the two technologies is very exciting. Another great CS3 feature is the ability to create an animation in flash and then have it export the code to as3. I mean really, thats ridiculously cool. One of the people who helped implement was none other than THE Robert Penner. In case you haven't heard of him, his easing equations are pretty much used by every codebased animation package in flash. This is all very exciting and I'll post a review once I have time to play.

Timer Class

2007-04-17T14:58:00.000-06:00

One of my favorite things about as3 is the new Timer class. If you've ever done much coding in actionscript 1 or actionscript 2 then you've had to deal with setInterval. While this was a huge step forward, there we're a lot of issues. The new evolved form of this is the Timer class. The time class allows to to start a timer, either for a set number of intervals or indefinately, and then set a delay and execute a method on the 'timer' event, which is fired after each delay, as well as the 'timerComplete', which is fired after the set number of intervals. The first and most obvious use of this is for an animation framework. What really makes this great is in the method called by the timer event can access the current count in the method as well as the total interval count in order to track progress. Here's some code showing a simple setup.

import flash.util.Timer;
var delay:Number = 1000;//delay in milliseconds
var intervals:Number = 10;//number of interval, if not given defaults to zero
var counter:Timer = new Timer (delay,intervals);
counter.addEventListener('timer',iteration);
counter.addEventListener('timerComplete',finished);
function iteration(e:TimerEvent):void{
var progress:Number = e.target.currentCount/e.target.repeatCount;
trace(progress+" percent done")
}
function finished(e:TimerEvent):void{
trace('Done');
}

More info here: http://livedocs.adobe.com/flex/201/langref/flash/utils/Timer.html

Best Beers in America

2007-04-12T13:28:00.000-06:00

Severely off topic, but I love beer. The way most people enjoy a fine meal is the way I enjoy a good beer. So when I found a list of the 25 Best Beers in America it just had to be mentioned. I've had the Dogfish IPA and Sam Adams Black Lager, which I love. The rest I'm determined to try, just gotta find them.

Flex

2007-04-10T12:14:00.000-06:00

So I am really starting to get into Flex. The idea sounds promising. I hated how in flash apps, half of my code was just dedicated to the dynamic positioning of objects, flex seems to solve this. I hope to get my hands dirty with flex pretty soon. Still have lots more reading to do before I have something to show, hopefully work will get me the books pretty soon.

SWX, huh?

2007-04-06T07:33:00.000-06:00

One thing I have a huge weakness for is Boagworld. I spend many many hours a world listening to Paul and Marcus ramble on and it makes me smile. Anyways through boagworld I learned about Aral Balkan and through his blog I learned about SWX. Now my biggest problem with SWX is I just don't really see where it fits in. Granted, I haven't had much of a chance to play with it, but it seems like the what it accomplished could be done through XML, which I love, or flashvars. Who knows, I may become a convert, but right now I have other things I'm trying to learn.

Loading images in as3

2007-04-05T13:50:00.000-06:00

This one is short because I'm behind at work. To load an image in as3 you use the Loader class which is part of flash.display. You first need to create an URLRequest object and then pass the object to loader. The neat thing about loader is that it acts as a psuedo proxy class to where you can attach it to the stage and set its properties before the image is loaded. However if you need to perform some event after it is loaded you'll need to add a listener to contentLoaderInfo property of the loader class and not the loader itself. Here's some sample code.

import flash.display.*;
import flash.net.URLRequest;
var rect:Shape = new Shape();
rect.graphics.beginFill(0xFFFFFF);
rect.graphics.drawRect(0, 0, 100, 100);
rect.graphics.endFill();
addChild(rect);
var ldr:Loader = new Loader();
ldr.mask = rect;
var url:String = "http://www.unknown.example.com/content.swf";
var urlReq:URLRequest = new URLRequest(url);
ldr.load(urlReq);
addChild(ldr);

One important note, if you are loading the image from another server (i.e. a mashup) you'll need to load a policy file to manipulate it. This is done by creating a loader context object and passing the policy file to Securtiy.loadPolicyFile.Next you have to pass the loaderContext as a second argument of the load method of the loader class.

Security.loadPolicyFile("http://www.unknown.example.com/crossdomain.xml")
var context:LoaderContext = new LoaderContext(true)
ldr.load(urlReq,context)

Enjoy!

Sorry for the delay

2007-04-03T14:37:00.000-06:00

I found this thread (http://www.kirupa.com/forum/showthread.php?t=223798). This was started by Senocular, whom I have much respect for, and has many AS3 tips and hints.

sIFR

2007-03-19T22:55:00.000-06:00

One great example of using flash to enhance a website while still making it accessible is Scalable Inman Flash Replacement, or sIFR. The basic principle is that screen readers need the text to be there, but plain text is ugly and you have limited fonts. While image replacement is an option, this would require to you make an image every time the text changes. Enter flash. sIFR uses a combination of javascript and flash to dynamically replace and render text on your webpage. Also since its just the same tiny flash movie being loaded, it actually will load faster than if you were to create images for each text block. Here's the webpage with more information.

Flash and Web Standards

2007-03-19T22:49:00.001-06:00

Now you can be the best flash developer in the world, but unless you have you head around some of the other aspects of web development, you'll lose out on a lot of jobs. Web standards is about making web site accessible to all browsers and all people. To do this you separate content, design, and action. Here's an article on a list apart about using flash in web design.

Proxy Classes

2007-03-19T11:36:00.001-06:00

If you've never read a book about design patterns, you should. If you have, you're probably familiar with the proxy class. Basically a proxy class acts as a middleman between two pieces of code. How does this apply to AS3? If you do anything really cool with Flash then you will end up deal with some external data. Since you can't act on the data until it is loaded, but its often a pain to delay the code, a proxy class is a great candidate. For example, an image. You want to load the image, set its position, size, etc. but you can't do anything til it is loaded. If you write a proxy class you can tell it to load the image as well as set its properties. It will merely store these variables until the image is loaded and then it will enact all the properties on the images. If you've worked much with external data, you can see how handy this is. This may be short and leave you with a lot of questions, but I am going somewhere with this over the next couple of posts, so be patient.

Advanced ActionScript 3 with Design Patterns (review)

2007-03-09T07:02:00.000-06:00

I'm about halfway through with this book and enjoying it so far.(By the way, this is the one from abode and not the O'reilly one) The writing manages to cover the subject without being too formal. There are also tons of examples. I am one of those people that learn from examples or by doing. You could give me 10 pages of explanation, but a simple example will be more effect for me. Being a self taught programmer, its nice to learn some of the more formal programming, like design patterns and object oriented design. I probably wouldn't recommend this book as an introduction to programming or maybe not even to AS3, but if your familiar with both, this book is a great way to get your head around design patterns.

There's also a review over on Actionscript.org here.

Link to a url

2007-03-08T20:04:00.000-06:00

I'm going on vacation so this will be it til wednesday. Today we cover linking to a url. It's pretty straightforward.

import flash.net.*;

var url:URLRequest = new URLRequest(url goes here)
navigateToURL(url)

Tada! That's it. The url request object is used in pretty much all external communication in flash. So learn to love it.

A proper text editor

2007-03-07T21:40:00.000-06:00

If you've been around for a while and active in the programming community, you've heard of Textmate. It is pretty much the de facto programming IDE for the Mac. For a long time there was nothing even close to it on the Windows. The along came E. While E is different than Textmate, it still incorporates a lot of the same great features. One thing I'm excited about, but haven't had time to figure out yet is the built in subversion and cvs support. If that's greek to you, I'll go over it in another post. Anyways E is all the buzz about the blogosphere, I've seen it mentioned in no fewer than 3 blogs I subscribe to. So what's so great about it? First, built in support for textmate bundles. What is a bundle? A bundle inculdes code snippets, as well as code commands. While the current Actionscript bundle has not been updated for AS3, it doesn't take much to convert it over. For example I wrote a snippet where I type pkg and then hit tab and it types out:

package {
class {
}
}

Also if you hit shift+enter, it will type out the basic structure for a function. The possibilities of what you can do are endless. Besides the bundles other neat features are multiple selections or column selections. It's very configurable and extendable. It's still in beta right now, so check it out while its free. Even when it is out it will only be about $35 which is a bargain for an IDE. Most others I've looked at have been in the $200 range. Brian out.

Custom Class

2007-03-06T00:56:00.000-06:00

So in as2 you had to create a class in a file with the same name. i.e. MyButton is in MyButton.as. This is the same in as2. The differences are in the namespaces. In as2 a namespace was declared in the class definition:

class com.example.MyClass{
}

An important thing to note is for the namespace to be valid the class would have to be in example folder which was in the com folder. In as3 its done like this.

package com.example{
public class MyClass{
}
}

Also in as3 you can have multiple classes in one file, but only one public class. So you can have private class in the package, or declare a class outside the package definition that will only be available to the code in that file. That's all for today.

Events

2007-03-04T21:25:00.000-06:00

One of the biggest changes to the Actionscript language is the way events are handled. I am still having trouble getting used to it. I learn best by example so here goes. In as1/as2 you could write code for an event by doing this:

mybutton1.onClick = function(){
.....code goes here
}

This no longer works in as3. All functions tied to events have to added through the addEventListener command. Before I show an example, let's talk about why this is better. Since you are adding a listener to a function rather than declaring a function for an event, you can have multiple functions listen for one event. Also it allows you better house keeping because you can add and remove functions for events rather than just using this

mybutton1.onClick = null;

So now to the code. Here's the example, I'll break it down after wards.

mybutton1.addEventListener('click',myFunc)

function myFunc(e:MouseEvent){
}

Now ideally all this would be in a class, but I'll get to that later. First you have an object, make sure it can recieve the event you're trying to attach. For instance, the bitmap object cannot recieve click events. Now you can either use the string 'click', or the event constant, in this case, MouseEvent.CLICK. Then you declare a function. It is absolutely necessary that the one and only variable received by the function is an event of the appropriate type or generic event type. I have had many errors popup because I forgot this. Also in order to use events you must import the flash.events.* library either the whole thing or just a specific class in it. See here for the events library. To remove an event you just calls removeEventListener with the exact same arguments. That's all there is.

Intro

2007-03-04T21:17:00.000-06:00

So this is my first post. I always had tried to create a blog in the past, but the biggest problem was I lacked focus. That resulted in lackadaisical posting and no real theme to attract a demographic. So what do I plan to do with this blog? Well as of the release of Flex Builder2 and Flash Player 9 Alpha. Actionscript has evolved into a legit programming language with a true object oriented structure, which is awesome. The downside? A lot of people had hacked together Actionscript code in the past and are now lost. So I want to educate you about AS3, while at the same time teaching you a bit about programming as a whole. So post may just be code snippets with a brief explanation. Others may be links to articles I think would be worth your time. I'll just have to see how the mood strikes me. One thing I will say, I am not going to post pure fluff posts, just to post. If there are design concepts (MVC, Singleton, DRY) or philosophies (extreme programming, getting real) that you want to know let me know. If there's something you could do in as1 or as2, but can't figure out how to do in as3 let me know. This is my way of giving back. At the same time I may not know the answer, I'm learning to and by no way profess to be an expert. I hope you enjoy.