Archive for January, 2008

Sunday, January 27th, 2008

Mike Chambers has a great post on parsing RSS in AS3 with as3syndicationlib. I had some info on this in development but Mike’s post is very simple and just posting the code here for reference.

import com.adobe.utils.XMLUtil;
import com.adobe.xml.syndication.rss.Item20;
import com.adobe.xml.syndication.rss.RSS20;

import flash.events.Event;
import flash.events.IOErrorEvent;
import flash.events.SecurityErrorEvent;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.net.URLRequestMethod;

private var loader:URLLoader;

//url of rss 2.0 feed
private static const RSS_URL:String = "http://feeds.feedburner.com/MikeChambers/";

//called when user presses the button to load feed
private function onLoadPress():void
{
 loader = new URLLoader();

	//request pointing to feed
 var request:URLRequest = new URLRequest(RSS_URL);
 request.method = URLRequestMethod.GET;

	//listen for when the data loads
 loader.addEventListener(Event.COMPLETE, onDataLoad);

	//listen for error events
 loader.addEventListener(IOErrorEvent.IO_ERROR, onIOError);
 loader.addEventListener(SecurityErrorEvent.SECURITY_ERROR, onSecurityError);

	//load the feed data
 loader.load(request);
}

//called once the data has loaded from the feed
private function onDataLoad(e:Event):void
{
 //get the raw string data from the feed
 var rawRSS:String = URLLoader(e.target).data;

	//parse it as RSS
 parseRSS(rawRSS);

}

//parses RSS 2.0 feed and prints out the feed titles into
//the text area
private function parseRSS(data:String):void
{

	//XMLSyndicationLibrary does not validate that the data contains valid
 //XML, so you need to validate that the data is valid XML.
 //We use the XMLUtil.isValidXML API from the corelib library.
 if(!XMLUtil.isValidXML(data))
 {
 	writeOutput("Feed does not contain valid XML.");
 	return;
 }

	//create RSS20 instance
 var rss:RSS20 = new RSS20();

		//parse the raw rss data
 	rss.parse(data);

		//get all of the items within the feed
 	var items:Array = rss.items;

		//loop through each item in the feed
 	for each(var item:Item20 in items)
 	{
 		//print out the title of each item
 		writeOutput(item.title);
 	}
}

private function writeOutput(data:String):void
{
 outputField.text += data + "\n";
}

private function onIOError(e:IOErrorEvent):void
{
 writeOutput("IOError : " + e.text);
}

private function onSecurityError(e:SecurityErrorEvent):void
{
 writeOutput("SecurityError : " + e.text);
}

Check out the full post on this at Mike’s blog.

Friday, January 25th, 2008

Moses has posted some nicely presented info on Go performance.

So far it looks almost neck and neck with TweenLite in drop dead sprints for fastest performing exhaustive tween kung fu-ing.

Although these are not really for competition it is to mainly show patterns for design for purposes that you need. Where this is a more apples to apples comparison (Go vs TweenLite) as the other kits have other overhead such as filters, utilities, even pathing for AnimationPackage and Tweener. TweenLite solved this by separating out into TweenFilterLite and just making TweenLite for animation (and keeping file size extremely small, virtual machine advantages). There is just no excuse for the F9 Tween class though, what the…

It is one thing to build, another to share, another to present information in a very consumable way and then another to make that whole presentation look really good. Moses, like polygonal labs, throws down some nice demos and information posts.

Go was late to the AS3 Animation kit game after pwning with FuseKit in the AS2 age (especially the creative agency love), I think it was the right time as it was released the TweenLite and TweenBencher performance testing utilities put a focus on performance to see just how many more cycles we could get out of AS3 from an animation kit. When building your own animation kits or contributing to one, these observations from various aims helps in the code design.

I still use Tweener in most production work, and TweenLite when I need really small assets if there are going to be many of them. But, I have started to use Go in a kit I am building that I hope to share more in the future, and used it in a small game. But by the speed of the tests and my own experiments it is pretty clear to see that both TweenLite and Go would be excellent base layers to animation kit architecture and Tweener is a bit more on top of that with the filters and bezier tools that it is really a more complete package with less work to do as your animation gets more complex (colors, saturation, bezier, etc). But if you were looking to build your own animation kit or for micro assets a base like Go or a base kit like TweenLite is the way to go). Some notes from Moses’s tests show that performance and sync are also what starts to fall apart as performance critical mass is reached. Go and Tweener held sync the best.

Side notes:

The TweenLite system was highly performative on all three measures. That system also features a very small filesize footprint, making it a clear choice for banners or other filesize-restrictive projects.

Go & Tweener were the only systems here that synced their animations – others ran out of sync to different degrees which yields less visually favorable results. Actually, it looks kind of neat in the tests! But you don’t want out-of-sync animation in your real-life projects. This effect can be clearly seen using the open-source TweenBencher utility, included in the Go package.

Tuesday, January 22nd, 2008

Seraf, True to the word WOWEngine was released today. It is still a work in progress but it is the first 3d physics engine out of the gate. It is built with many open source kits that are emerging. It can use any of the 3 major flash 3d engines (pv3d, sandy, away3d) and it is built on APE AS3 2d physics engine.

WOW-Engine use Sandy library for all the 3D mathematical computations (matrix, 3D vector, plane). The inner architecture of the engine is also inspired by Sandy’s one.

Collisions and physical reactions are possible thanks to the AS3 physic engine made by Alec Cove, named APE(version 0.2.).. Even if APE is a 2D physic engine, it is possible to extend the contraints on volumes, and that’s the purpose of WOW-engine. WOW-engine extends APE, and allows to simulate physics on 3D volumes.

WOW-Engine is capable to handle positions and rotations of abstract objects, which need to be linked to some visual objects (2D or 3D). The visual objects can be drawn thanks to another library (Sandy3D , Papervision3D, Away3D for 3D).

WOW-Engine use and depend of the Data Structures classes written by polygonal labs.

Basic technical Demos :

Advanced technical Demos:

Tutorials:

Sunday, January 20th, 2008

Here is a well done game based on the popular Line Rider phenomenon, only this one is Line Golf and it is using the APE AS3 2D Flash Physics Engine. I am sure game sites are just as excited as game developers like myself about the prospects of games that are more dynamic and fun and even 3d with the flash kits of today all thanks to the power of AS3.

Play Line Golf at Candy Stand

This was posted on the APE Google Group where onedayitwillmakeit explains more on how he modified APE for use in the game.

Sunday, January 20th, 2008

Who’s up for some flash 3d gauntlet? Away3d and Fabrice have posted a pretty sweet demo that samples a 3d level with a little 3d avatar running around (animated).

Fabrice has some other good notes on keeping assets in flash low poly and not relying on full 3d or shrinking that down where possible. For instance in making the walls they are more dynamic and just extrudes not really 3d point collections.
Most 3d usages (even outside flash) resort to this to make sure the featured 3d models get all the processing power and polys needed to look good but still be optimized for flash 3d (fake software rendered 3d — slower). I agree and also am interested in loading 3d flash assets as compiled SWFs, but that has it’s own set of duplication whoas. It has to be designed/planned very smart to pull off a game that can perform well.

The stuff for generating 3d worlds in flash from the FPS demo from Animas (Paul Spitzer), the intense work going on at Alternativa Game, toolkits like AS3 Geometry Exporter for 3dsmax (to away, sandy or papervision 3d format/types). And of course all the great 3d engines, physics engines and animation kits that have helped make the 3d flash pipeline for actionscript 3 (as3) a little more optimized and quite fun.

Monday, January 14th, 2008


Just recently through the holidays Degrafa has made some great strides as a very cool SVG pathing and designers toolkit for Flex. I have to say some recent Flex apps have really looked good like Picnik and Buzzword but this kit looks to clean up the lack of design and default style-itis that has plagued most common Flex Apps.

This so far looking like a pretty strong kit for bringing the designer pipeline into Flex to provide some really nice looking web styled apps. It has a direct crossover to Silverlight and Path objects that are largely just a series of data created in Expression or exported from Illustrator into XAML. The one benefit of Flex/Flash is it compiles to a very small SWF where with Silverlight you have to package the XAML in a zip and use the downloader object to extract it out. These XAML files and Paths can get massive as I am sure the ones for Degrafa will for Flex but the compile option is nice as it is compressed heavily.

All about Degrafa

Yes the launch includes shiny buttons…

Sphere Sample (right click for source)

Also, it appears it is a way to bridge the pathing and pipeline for flash or Silverlight. At one of the contributors blogs they mention this:

We have lot of interesting features planned for the coming releases. There is also a converter app that will be made available for converting the juicy Degrafa graphics to XAML.

Degrafa has gone live.

Developing…

Sunday, January 13th, 2008

Here is an interesting look to start the new year at Google Trends for some common keywords to this blog audience. Comparing AS2, AS3, Silverlight and actionscript you can see that there is some pretty interesting things happening.

as3 as2 actionscript silverlight  

First off, AS2 and AS3 are clouded because they are also related to EDI and EDI-INT so they get a bit inflated. Silverlight though is pretty unique in the naming. So from this graph we can see this happening:

  • Silverlight and AS3 are growing rapidly
  • Silverlight is crossing over as3 or meeting it
  • The market looking for Silverlight is about 8-10 times as large as actionscript/as3/as3
  • Silverlight and AS3 are growing, AS2 has no growth left and is an EOL language (end of life)
  • AS2 (even with crossover to EDI trends for “as2″) leveled out, where AS3 is starting to lift to a larger market. This is strongly due to it being a fun language based on ES4 and interests programmers.
  • The as3 effect started right in March-April 2007 (hrm I started this blog in April 2007 coincidenc? j/k :))

Another chart including Flex shows a better picture of the keyword wars between flex and silverlight.

as3 as2 actionscript silverlight flex

So from this graph we can see this happening:

  • Flex has a large buzz
  • Adobe’s marketing efforts are many while silverlight is more unique and focused
  • Flex, as3 and Silverlight are popular, and growing in their support (the growth market for technology is in these areas, not in tech from Flash 8/as2)
  • AS2 still taking a nosedive

Flash and Flex programmers and designers should know that with Silverlight 2.0 release coming and the capabilities of Silverlight 2.0 more competitive, flashers should be working on Flex, Flash9 or at least AS3 if not Flex. The RIA competition market will heat up immensely this year with Silverlight 2.0 and possibly Flex3 and coding and programming for Flash and Flex is becoming more involved. It also has a very strong competitor in Silverlight 2.0 coming that will drive this market.

This is all great news if you are ready for it, if you are still coding actionscript2 (AS2) and paying no mind to Silverlight, Flex or at least actionscript3 (AS3) then you will see your market slowly start to fade as things are ramped up and more of a programming focus in the vector wars. If you are a flash coder and ignoring Silverlight, your solutions will suffer. If you are a silverlight coder or .NET coder and ignoring the Flex and AS3 rise your solutions will suffer. I have been playing in AS3, Flex and Silverlight for over a year on both now and they are an entirely new platform with great programming models. The competition puts focus on this market so it is a great time to be skilled in these areas.

Friday, January 11th, 2008
Interesting library for html to flash front end. Basically this runs off the HTML in your page to draw the same in Flash. I am sure there are great pitfalls in this but when controlled this could be very key in a flash add-on to CMS or CMS content. Might be useful for many things.

Wrapper is a cross-browser compliant HTML/CSS rendering engine written in ActionScript that sits on top of your standards compliant HTML page. Wrapper eliminates cross-browser issues and makes integrating ActionScript and HTML/CSS projects possible without needing to compile.

Wrappers strives to answer the most common problems web designers face without forcing them to learn too many new things. Most web sites can be created in HTML or CSS, then when you need to extend Wrapper’s capabilities you can either use JSON to call functions within ActionScript or you can load compiled plug-ins. Wrapper also has built in methods within CSS to load custom fonts, display elements as any shape, and fill them with linear or radial gradient background colors. ActionScript’s event model is also implemented within Wrapper’s HTML. Wrapper’s best features are the ones that you get for free because of how it is set up. It’s like getting all the great features of the Flash Player without needing to deal with compiling and being able to create your content the same way any HTML page would be created. Wrapper is fully accessible to the search engines and integrates well with any back-end technology.

Wrapper is currently released as a fully functional open source beta for Flash Player 9. Wrapper is set up as a pre-compiled plug-in but can easily be integrated into any Flex or AIR applications or even as an ActionScript framework for creation of compiled projects.

Documentation can be found in the wiki and news about this project can be found at http://motionandcolor.com

Examples can be found in the downloads http://code.google.com/p/htmlwrapper/downloads/list

Source is for everything is in svn http://code.google.com/p/htmlwrapper/source

I checked it out and it looks pretty well done, most of the time HTML to Flash or vice versa has to be a semi-controlled environment in terms of the markup. This and FlashML which is only AS2 I am using a partially converted to AS3 are part of my rotation for HTML<–>Flash content challenges for research right now. Usually most CMS in Flash has content loaded into the flash and then an alternate (sometimes similar) representation, here this is trying to merge the two which has it’s challenges.

Try out a demo (view source)

EDIT: Title dyslexia


Thursday, January 10th, 2008

Using SharedObjects in Flash is very simple. Flash has SharedObjects that have been in the player since Flash6 when the introduction of Flash Communication Server which is now Flash Media Server which is releasing version 3 soon (also remote SharedObjects in Red5 is an open source RTMP media server that is based on Flash Media Server). So we can thank this release for SharedObjects, Camera objects, Audio, lots of the NetConnections, protocol enhancements and many other things. However to keep the tips simple we will just touch on the local usage and post a series of posts on these objects.

SharedObjects locally and remote have changed the way offline is thought about and are the backbone of many offline systems and prototypes. They have been influential in moving storage locally to remote in a lightweight AMF0 or AMF3 format.

SharedObject is in the flash.net namespace in AS3.

Here we show how to use the local version of a SharedObject to store data in the most simple form.

import flash.net.SharedObject;
var so:SharedObject = SharedObject.getLocal("userData");
so.data.username= "user1377";
so.data.pwdhash= "[hash] or pwd";
so.flush(); // writes changes to disk

You can see this is extremely simple to store data.Here we show how to use the local version of a SharedObject to retrieve data in the most simple form.

import flash.net.SharedObject;
var so:SharedObject = SharedObject.getLocal("userData");
var username:String = so.data.username;
var pwdhash:String = so.data.pwdhash;

That is it! In the most basic form SharedObjects are more simple than cookies and also are quite nice living outside the bounds of the cookies folder. If a user deletes all cookies it will not delete the SharedObjects. To delete SharedObjects you need to roght click on the Flash player, go to Settings and delete the objects there.You can store any type of data Flash supports from objects to numbers to strings in the SharedObject data.

import flash.net.SharedObject;
var so:SharedObject = SharedObject.getLocal("userData");
so.data.username= "user1377";
so.data.uid= new Number(1337);
var obj:Object = new Object();
obj.prop = "value";
so.data.userobj= obj;
so.flush(); // writes changes to disk

For large applications SharedObjects local are great because users can have their SharedObject space set to a high amount of space or unlmited for large offline type apps or more complex apps stored in a state object. It gets interesting when you pass this to the server in AMF or extremely compact AMF3 format to a remote stored object, via remoting, Shared Object events or any way you want to.We will be posting more on remote shared objects and some of the other tools such as Camera and Streams for AS3 over the coming weeks and deeper into the Sync Events for remote and local SOs.Sephiroth has a great Python tool to peer into the SOs on disk.

The first version of SharedObject Reader was written in python 2.2.
This new version is written in C# (C Sharp) as it’s now part of FlashDevelop editor.

Red5 also does this as well as many AMF kits.

Sync Events for SharedObject (as they change they launch a sync event)

Event object type: flash.events.SyncEvent
SyncEvent.type property = flash.events.SyncEvent.SYNC

Read more at adobe docs:

flash.net.SharedObject

Sample from AS3 docs showing usage

package {
    import flash.display.Sprite;
    import flash.events.MouseEvent;
    import flash.events.NetStatusEvent;
    import flash.net.SharedObject;
    import flash.net.SharedObjectFlushStatus;
    import flash.text.TextField;
    import flash.text.TextFieldAutoSize;
    import flash.text.TextFieldType;

    public class SharedObjectExample extends Sprite {

        private var mySo:SharedObject;

        public function SharedObjectExample() {
            buildUI();
            saveBtn.addEventListener(MouseEvent.CLICK, saveValue);
            clearBtn.addEventListener(MouseEvent.CLICK, clearValue);

            mySo = SharedObject.getLocal("application-name");
            output.appendText("SharedObject loaded...\n");
            output.appendText("loaded value: " + mySo.data.savedValue + "\n\n");
        }

         private function saveValue(event:MouseEvent):void {
            output.appendText("saving value...\n");
            mySo.data.savedValue = input.text;

            var flushStatus:String = null;
            try {
                flushStatus = mySo.flush(10000);
            } catch (error:Error) {
                output.appendText("Error...Could not write SharedObject to disk\n");
            }
            if (flushStatus != null) {
                switch (flushStatus) {
                    case SharedObjectFlushStatus.PENDING:
                        output.appendText("Requesting permission to save object...\n");
                        mySo.addEventListener(NetStatusEvent.NET_STATUS, onFlushStatus);
                        break;
                    case SharedObjectFlushStatus.FLUSHED:
                        output.appendText("Value flushed to disk.\n");
                        break;
                }
            }
            output.appendText("\n");
        }

        private function clearValue(event:MouseEvent):void {
            output.appendText("Cleared saved value...Reload SWF and the value should be \"undefined\".\n\n");
            delete mySo.data.savedValue;
        }

        private function onFlushStatus(event:NetStatusEvent):void {
            output.appendText("User closed permission dialog...\n");
            switch (event.info.code) {
                case "SharedObject.Flush.Success":
                    output.appendText("User granted permission -- value saved.\n");
                    break;
                case "SharedObject.Flush.Failed":
                    output.appendText("User denied permission -- value not saved.\n");
                    break;
            }
            output.appendText("\n");

            mySo.removeEventListener(NetStatusEvent.NET_STATUS, onFlushStatus);
        }

        // UI elements
        private var inputLbl:TextField;
        private var input:TextField;
        private var output:TextField;
        private var saveBtn:Sprite;
        private var clearBtn:Sprite;

        private function buildUI():void {
            // input label
            inputLbl = new TextField();
            addChild(inputLbl);
            inputLbl.x = 10;
            inputLbl.y = 10;
            inputLbl.text = "Value to save:";

            // input TextField
            input = new TextField();
            addChild(input);
            input.x = 80;
            input.y = 10;
            input.width = 100;
            input.height = 20;
            input.border = true;
            input.background = true;
            input.type = TextFieldType.INPUT;

            // output TextField
            output = new TextField();
            addChild(output);
            output.x = 10;
            output.y = 35;
            output.width = 250;
            output.height = 250;
            output.multiline = true;
            output.wordWrap = true;
            output.border = true;
            output.background = true;

            // Save button
            saveBtn = new Sprite();
            addChild(saveBtn);
            saveBtn.x = 190;
            saveBtn.y = 10;
            saveBtn.useHandCursor = true;
            saveBtn.graphics.lineStyle(1);
            saveBtn.graphics.beginFill(0xcccccc);
            saveBtn.graphics.drawRoundRect(0, 0, 30, 20, 5, 5);
            var saveLbl:TextField = new TextField();
            saveBtn.addChild(saveLbl);
            saveLbl.text = "Save";
            saveLbl.selectable = false;

            // Clear button
            clearBtn = new Sprite();
            addChild(clearBtn);
            clearBtn.x = 230;
            clearBtn.y = 10;
            clearBtn.useHandCursor = true;
            clearBtn.graphics.lineStyle(1);
            clearBtn.graphics.beginFill(0xcccccc);
            clearBtn.graphics.drawRoundRect(0, 0, 30, 20, 5, 5);
            var clearLbl:TextField = new TextField();
            clearBtn.addChild(clearLbl);
            clearLbl.text = "Clear";
            clearLbl.selectable = false;
        }
    }
}