Archive for September, 2007

Sunday, September 30th, 2007

Zeh Fernando’s AS2 and AS3 Flash Animation Kit Tweener has inspired a JSTweener port to javascript, why thanks Yuichi Tateno (secondlife).

This actually could be used quite easily with Silverlight and an AgTweener could be very easily created from this. The Tweener like syntax with an object and adding tweens of available properties as an object or array is very simple and could make animation systems much more standard if everything used this not to mention easier for developers to animate in any presentation layer. The syntax makes for the best of the Animation Packages currently available for AS3. If this could be used in other kits it would make animation pretty standard and simple when changing platforms.

JQuery is very lightweight and has a similar syntax on their animate() call. There are many animation javascript kits such as mootools, jquery, dojokit and prototype and others that have similar functionality but it is all handled differently.

JSTweener

JSTweener.addTween(element.style, {
time: 3,
transition: 'linear',
onComplete: function() {},
width: 200,
height: 200,
left: 500,
top: 300
});

JSTweener Source

JSTweenerRepo

Samples:

Found via Zeh

Saturday, September 22nd, 2007

Take a look at this amazing custom 3d isometric engine for building 3d virtual worlds. This literally just popped up on the scene. It seems that they are progressing nicely, not sure how much it can handle in terms of multiple assets but they have a sample of a house and many effects such as lighting (day+night changes), interpolation, zooming levels etc. They are using their own custom 3d engine and texturing system but it is probably highly inspired by the new 3d engines available out there.

Try out the sample here

 

Now we have all the techs in one engine. Now we also can add bump-mapping and unique lighting FX (say, some green light on a wall near the grass). The engine has some optimization potential, but speed is mainly based on a texture quality settings.

It is supposed that all the objects will be in a 1 pixel = 1 centimeter scale.

Keys:

  • Spacebar — change daytime
  • Mouse wheel — change scale
  • Shift + wheel — tex quality
  • Ctrl + wheel — lightmap quality
  • Alt + wheel — groung quality
  • Q — tex interpolation on/off

The real-time lighting and 3d aspects of this look very promising. There are strong limitations to bulk in 3d in flash, for instance if you had a view with 100-200 homes and zoomed out with this I would like to see the performance then. Amazing work by this Russian development team.

Via Den Ivanov from Park

All the demos from this engine are excellent here’s some:

Saturday, September 22nd, 2007

Sascha over at hexagonstar aka h1dd3n.r350urc3 has created a very cool AS3 Animated Bitmap Class. You might be asking, why would you need this, you already have movieclip animation and time-based animation? Well when making games sometimes you want to lock in a certain framerate or create assets/sprites (in the classical sense) you know will be pixel based that you need to lock their framerate say at 24 while the flash application can run much faster when you need to base off frame-based animation or enterframe situations as your game tick().

In game development sometimes the platform outspeeds the designed activity such as back in the day when the “turbo” button appeared on the 33MHz computers from 16MHz. DOS games built without this knowledge were unplayable because they were so fast. Flash with AS3 is all about performance and speed and at some point controlling that for a pixel based 2d game or iso game might be necessary if you need the rest of the SWF to run faster. You can also do time based animation rather than frame-based animation but there are always times when this could

This class helps situations when you have to have an animated bitmap sequence but don’t want to include all the files for each frame, rather you put them all in one and the SWF export is much smaller and this is always good.

You can download the class including demo source code and demo image here.

Be sure to head on over to hexagonstar and h1dd3n.r350urc3 because there is a sample there and also a photoshop CS script to help create these and adds a nice little capability to any game development pipeline.

From Sascha:

What are the advantages over using a generic MovieClip? When writing games you might have several animated graphics (also called sprites, but not related to the AS3 Sprite class) that should run with a different framerate than the game’s global framerate. Let’s say your game runs with a global framerate of 99 and you put several animated sprites into your game that were created for playing back with a framerate of 24. With a MovieClip all those sprites would also play with a framerate of 99 which means they play way too fast. However with an AnimatedBitmap you can set every framerate individually. There are a couple of other advantages like that a Bitmap is more lightweight than a MovieClip and it has a isPlaying() method. Also it changes the way of how to embed assets. Instead of embedding many files for one animation only one image for a whole animation sequence is embedded which has positive effects on the file size. The ring sequence used in the demo has 21 frames that use 102Kb as single images but only 44Kb when they are combined to one image.

Thanks Sascha! Be sure to check out the other great old skool gaming tools that hexagonstar has come up with, good stuff like the hexagon framework.

Thursday, September 20th, 2007

What are these ominous Loaders is what people ask when they first start into AS3?  Loaders help to facilitate the loading of sprites or content that aren’t in the DisplayObjectList tree just yet.  Loaders allow you to load all types of files swf, jpg, png, etc and put them right in the display list.  A very simple basic load is below to describe the basics of loading content.  This can be used many ways within individual classes or shared and add in multiple file downloading.  You might add zip file downloading and then automatic upzipping of assets to load in.  There are many ways to architect your downloading and preloading but this is the basics of a loader in AS3.

var request:URLRequest = new URLRequest("content.swf");
var loader:Loader = new Loader();

loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadProgress);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);

function loadProgress(event:ProgressEvent):void {
var percentLoaded:Number = event.bytesLoaded/event.bytesTotal;
percentLoaded = Math.round(percentLoaded * 100);
trace("Loading: "+percentLoaded+"%");
}
function loadComplete(event:Event):void {
trace("Complete");
}

loader.load(request);
addChild(loader);

All DisplayObject instances have a loaderInfo property consisting of a LoaderInfo instance that provides information about that object’s loaded content (if applicable). The Loader instance contains this property along with an additional contentLoaderInfo property which represents the LoaderInfo instance of the content being loaded. When loading content into a Loader, the contentLoaderInfo property is the object you would want to add listeners to for information about the loaded content such as when new bytes are being loaded into the player (for a preloader) and when loading has completed.

The events associated with LoaderInfo instances includes:

  • complete:Event — Dispatched by the associated LoaderInfo object when the file has completed loading. The complete event is always dispatched after the init event.
  • httpStatus:HTTPStatusEvent — Dispatched by the associated LoaderInfo object when a network request is made over HTTP and Flash Player can detect the HTTP status code.
  • init:Event — Dispatched by the associated LoaderInfo object when the properties and methods of the loaded SWF file are accessible. The init event always precedes the complete event.
  • ioError:IOErrorEvent — Dispatched by the associated LoaderInfo object when an input or output error occurs that causes a load operation to fail.
  • open:Event — Dispatched by the associated LoaderInfo object when the loading operation starts.
  • progress:ProgressEvent — Dispatched by the associated LoaderInfo object as data is received while load operation progresses.
  • unload:Event — Dispatched by the associated LoaderInfo object when a loaded object is removed.

[source]

Thursday, September 20th, 2007

UPDATE: See a sample of this Preloader that allows many files to be downloaded.

There are some great videos and links on the downloader object from Microsoft for Silverlight.

In Silverlight you can create an object called a downloader that probably stems from the htc ie5.5 downloader that was part of ajax beginnings, it is ver similar to the XMLHTTP object but it has zip capabilities. This downloader can download individual files or zip file packages that you can grab xaml, xml, images, script etc from them and use them or load them in to xaml files. This helps to keep things compact and allows for preloaders and smoother beginnings of your animations where needed.

The zip downloading is attractive and much of this is going on in Flash AS3 with FZip or ASZip AS3 packages. These are made possible with ByteArray and BinarySockets and other fun tools that give no limits. In Silverlight all you have is javascript or the silverlight downloader object to get other data at runtime.

Downloading assets in Silverlight is different than in Flash. Flash compiles libraries to swf files, it can load pngs, it can preload anything in numerous ways. Silverlight does not compile to one file or into compressed binary currently and this offers flexibility but it also makes file sizes at their default size very big. PNGs for instance can’t be zipped any smaller usually but in Flash9 these are sometimes 1/10th the size of the actual file when compressed better in the SWF file. Even if you zip them in Silverlight they are still around the same size. Silverlight XAML files compress well and these can get very large if lots of pathing is used.

Flash has always been the master at smallest file sizes and even the player itself is extremely small, under a MB. Silverlight 1.0 which is just javascript is 1MB, the Silverlight 1.1 plugin with DLR support is going to be 4MB currently (it still is in alpha so it could come down).

Currently in Silverlight 1.0 this is just a javascript release, the DLR and C# version of Silverlight 1.1 Alpha probably has 6 months or a year. So with no byte array binary handling or sockets of any type except javascript ajax, downloader is your only option now. But it is a good tool for now to help with preloaders and bringing files in smaller to make your rich applications and games faster.
Currently the only createObject call that is supported is the “downloader” object. I would like to see more here like a “socket” object but when Silverlight 1.1 launches with C#/python/ruby support things may change in this regard.

To create a downloader you do this in javascript:

[sourcecode language='jscript']
// Event handler for initializing and executing a download request.
function onMouseLeftButtonUp(sender, eventArgs) //sample mouse button click
{
// Retrieve a reference to the plugin.var slPlugin = sender.getHost(); // Create a Downloader object.
var downloader = slPlugin.createObject(“downloader”);

// Add DownloadProgressChanged and Completed events.
downloader.addEventListener(“downloadProgressChanged”, onDownloadProgressChanged);

downloader.addEventListener(“completed”, onCompleted);

// Initialize the Downloader request.
// NOTE: downloader APIs disallow file: scheme
// you must run this sample over localhost: or off a server or the following call will fail
downloader.open(“GET”, “promo.zip”);

// Execute the Downloader request.
downloader.send();
}

// Event handler for updating visual progress indicator
function onDownloadProgressChanged(sender, eventArgs)
{
// Calculate the downloaded percentage.
var percentage = Math.floor(sender.downloadProgress * 100);
// Update the Rectangle and TextBlock objects of the visual progress indicator.
progressText.text = percentage + “%”;
progressRectangle.width = percentage * 2;
}

function onDownloadCompleted(sender, eventArgs)
{
// Retrieve the XAML content from the downloaded package file.
var jacketBrowserXaml = sender.getResponseText(“jacketBrowser.xaml”);

// Create the objects from the XAML content.
var jacketBrowser = plugin.content.createFromXaml(jacketBrowserXaml);

// Add downloaded XAML content to the plugin.
sender.findName(“rootCanvas”).children.insert(0, jacketBrowser);

// Retrieve a reference to the Image object representing the jacket.
var jacketImageSlice = sender.findName(“jacketSlice”);

// Set the Source property of the Image object to the specific jacket image
// within the downloaded Zip package file.

jacketImageSlice.setSource(sender, “rotation01_green.png”);
}[/sourcecode]
This video is the quickest way to understand the whole downloader setup.But this is also a very simple example. The hard part is deciding where to put your preloaders and how to load things in. If you are putting your XAML in a zip file you will need to have a preloader in a container XAML file as the main control and then a Canvas object to load that XAML into. This complicates many things and is really a design approach from the beginning.

In coming posts I will be posting a multifile preloader, a single file preloader, a zip preloader and some sample setups for silverlight projects and Flash projects based on zip and direct preloading.

I will put this sample script to work below for preloading files in Silverlight 1.0:
[sourcecode language='jscript']
///////////////////////////////////////////////////////////////////////////////
//
// PreloaderMultifileClassLibrary.js
// The MIT License
//
// Copyright (c) 2007 Ryan Christensen, drawk llc
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the “Software”), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
//
///////////////////////////////////////////////////////////////////////////////

// setup the namespace objects to be good javascript form
// Ag1 = Silverlight 1.0 library
if(!window.B)
window.B={};
if(!window.B.Ag1)
window.B.Ag1={};

if (!window.Sys)
window.Sys = {};

if (!window.Silverlight)
window.Silverlight = {};

Silverlight.createDelegate = function(instance, method) {
return function() {
return method.apply(instance, arguments);
}
}

B.Ag1.PreloaderMultifileAssets = function()
{
// TODO alow JSON or Array passed
// loads up the asset arry to cycle through
this.resourceArray = new Array();
}

B.Ag1.PreloaderMultifileAssets.prototype =
{
loadAssetsArray : function()
{
this.resourceArray[0] = “spinner.png”;
// add your images/zips/files to load here
for (var i=1; i<=16; i++)
{
this.resourceArray[i] = “drive_in_files/image” + i + “.png”;
}
this.resourceArray[i++] = “drive_in_files/bg.png”;
this.resourceArray[i++] = “drive_in_files/c1.png”;
this.resourceArray[i++] = “drive_in_files/c2.png”;
this.resourceArray[i++] = “drive_in_files/c3.png”;
this.resourceArray[i++] = “drive_in_files/c4.png”;
}
}

// total pages available
B.Ag1.PreloaderMultifile = function(control)
{
this.plugIn = control; // Store the host plug-in
this.currentDownload = 0; // Current resource to be downloaded
// this.maxNumPages = maxNumPages;
this.preloaderMultifileAssets = new B.Ag1.PreloaderMultifileAssets();
this.preloaderMultifileAssets.loadAssetsArray();
// alert(this.preloaderMultifileAssets.resourceArray);
this.downloadAssets();
}

B.Ag1.PreloaderMultifile.prototype =
{
downloadAssets : function()
{
//alert(this.preloaderMultifileAssets.resourceArray);
var _file = this.preloaderMultifileAssets.resourceArray[this.currentDownload];
if(_file != null && _file != undefined)
{
this.downloader = this.plugIn.createObject(“downloader”);
this.downloader.addEventListener(“downloadProgressChanged”, Silverlight.createDelegate(this, this.downloadProgressChanged));
this.downloader.addEventListener(“completed”, Silverlight.createDelegate(this, this.downloadCompleted));
this.downloader.open(“GET”, this.preloaderMultifileAssets.resourceArray[this.currentDownload]);
this.downloader.send();
}
},
downloadProgressChanged : function(sender, args)
{
try
{
var progressRect = this.plugIn.content.findName(“progressRect”);
progressRect.width = (sender.downloadProgress) * 450;
}
catch(e)
{
}
},
downloadCompleted : function(sender, args)
{
this.currentDownload++;
var progressText = this.plugIn.content.findName(“progressText”);
var progressPercent= this.plugIn.content.findName(“progressPercent”);
if (this.currentDownload < this.preloaderMultifileAssets.resourceArray.length)
{

progressText.text = “Downloading: ” + this.preloaderMultifileAssets.resourceArray[this.currentDownload];
progressPercent.text = parseInt((this.currentDownload/this.preloaderMultifileAssets.resourceArray.length)*100) + “%”;
this.downloader.open(“GET”, this.preloaderMultifileAssets.resourceArray[this.currentDownload]);
this.downloader.send();
}
else
{
// Hide progress UI
var downloadUI = this.plugIn.content.findName(“downloadUI”);
this.plugIn.content.findName(“fadeDownloadUI”).begin();
downloadUI.isHitTestVisible = false;

progressPercent.text = “100%”;
progressText.text = “Downloading Complete”;

// initialize canvas and anmiations
this.plugIn.content.findName(“innerCanvas”).Visibility = ‘Visible’;
this.plugIn.content.findName(“IntroAnimation”).begin();
}
}
}

[/sourcecode]
If you change your Silverlight handleLoad to something like this you can use the class above for list of files before it plays the xaml animations and presentation.
[sourcecode language='jscript']
handleLoad: function(plugin, userContext, sender) { // be sure to add these parameters, by default they are not added
// alert(plugin.id + ” : ” + userContext + ” : ” + sender.toString());
plugin.content.findName(“innerCanvas”).Visibility =’Collapsed’;
plugin.content.findName(“innerCanvas”).Opacity = 0;
var preloader = new B.Ag1.PreloaderMultifile(sender.getHost()); // pass in the silverlight control

[/sourcecode]
I will have a complete tutorial of this soon.

Friday, September 14th, 2007

Zeh has posted an excellent cheat sheet for Tweener Easing Penner equations based on the original cheat sheet by Nate Chatellier. This is a very nice visual lookup to see what easing equation you want to use on your motion animations. Usually it is a trial-error approach without some visualization like this unless you were going to Robert Penner’s site visualization tool. It is not specific to Tweener in visualizing the Penner easing equations as many kits use them such as Fuse (AS2), TweenLite, Animation Package etc.

View the large demo here

Download from Tweener on Google Code

Download the source

View Robert Penner’s Easing Visualization Tool

Thanks Zeh/Nate one again and always Robert Penner!

Thursday, September 13th, 2007

Incremental Blogger has posted a very well done mouse gesture/handwriting/tablet PC silverlight demo. ByteArray has a similar script for flash with a Mouse Gesture library but this is very accurate to real handwriting.

Tuesday, September 11th, 2007



Flash Performance and HD (H.264) Video Progress

Fast performance is needed for good video combined with interactivity especially. Quickly comparing AS2 to AS3 shows that AS3 and the AVM2 virtual machine in Flash9 is much faster. If you are combining Flash and video especially when it is time to go HD, you will need performance.

Compare AS2 to AS3 rendering: AS2 & AS3 Note the as2 item only has 10000 pixel operations, the as3 item has 50,000 and is considerably more usable, in fact the AS2 version isn’t usable since it is slow. [source] This is a good test because it checks the movement of every pixel on the screen which leads me to video performance.

Flash HD in the FLV format is pretty nice looking today in Flash9 with AS3. But to keep up there are more formats and a move to support H.264/MPEG-4 AVC I am sure for online TV/Movie market.

The reason to bring up performance and video is because the video battle on the web is heating up even more between Adobe and Microsoft with Flash Video and Silverlight Video. The recent released info regarding HD on Flash is to combat Silverlight HD video that is looking pretty good.

Silverlight Performance and HD Video VC-1

View this Halo 3 video in Silverlight HD:

View it->

Recently Silverlight came out last week officially on Wednesday, really the 1.0 release is just a video and javascript release but when you view the videos below you will see that they have a short coup de tat on Flash video at the moment in terms of HD quality video.

Silverlight also has been pushing TV on the internet. See these samples that are actual TV on web pages already using Silverlight.

  1. Home Shopping Network Online
  2. ET Emmy’s coverage
  3. They also have WWE and MLB.com baseball already using Silverlight video.
  4. Netflix online video uses Silverlight

Flash video is cool and you can do great fun things like neave.tv (flash 8) and high definition FLV video in flash9 with AS3 and on occasion AS2 if it is just video with full screen flash but when you are talking TV and movie quality, it is still up for grabs but both are looking good especially Silverlight and that Halo 3 video.

Flash video is updating to H.264 [source]

Tinic Uro reports the beta player of flash that has HD now. Currently the FLV format is the web leader (you tube, Google video) but is not as good quality as Silverlight until they update to H.264 at least in terms of standards video. This is probably 6 months off?

Video literally changed in the internet in the last two weeks with the Flash announcements and Silverlight launching. I am surprised at Silverlight’s adoption rate and partnerships so far with the 1.0 offering which lacks many programming tools, but I see why on the video front why they did it. When 1.1 comes out it has all the programmer toys, and it will attract a lot of attention I think. It is all about performance and HD video right now.

Yes yes… Quicktime has done HD/H.264 video for a while but Quicktime is just a video format really, it will be able to be used in the new flash video as well as other formats but it doesn’t have the interactive platform behind it like Flash and Silverlight have.

The difference is the choice of format and standards. Silverlight with VC-1 and Flash going to H.264 codec. They are largely competing standards that are both “HD”.

The good news is we have competition to bring really high quality video to the web, the mashups with HD video in interactive games, demos, advertising etc will be very fun.

Tuesday, September 4th, 2007

Adobe released the numbers on Flash9/AS3 capabilities/penetration of the market and AS3 is now even more ready for primetime at 91%.

AS3 and the new Flash9 virtual machine AVM2 is ready to be used and performance gained from it. When you develop AS2 in Flash9 it uses the older, clunkier AVM1, this does not give the performance benefit that using AS3 and the new virtual machine will give you.

Currently AS3 apps are about 6-10 times faster than the AS3 counterparts. Also, AS2 code and the community is drying up and moving to AS3 where it is much more capable and ready for better performance of things like pseudo 3d engines like papervision, sandy and away3d and it can handle all types of binary manipulation and sockets that lead to very coo apps like emulators, pdf creators, compression tools, and of course with more performance, better games and more room for more content.

Flash9 AS3 penetration as of June 1, 2007:

Flash Player 6 Flash Player 7 Flash Player 8 Flash Player 9
Mature Markets1 99.3% 99.3% 98.5% 90.3%
US/Canada 99.4% 99.4% 98.7% 90.5%
Europe2 99.3% 99.1% 98.2% 90.5%
Japan 99.8% 99.8% 99.0% 89.8%
Emerging Markets3 97.7% 97.6% 94.4% 89.4%

[source]

This is as of June, it is September and most likely due to their projections that we are at 92% which is almost critical mass.

But ok, cmon, is it really worth it in performance?

Well back in late 2006 Carlos Ulloa did some early benchmarking which you can see here. As it turns out AS3 versions of the same effect from AS2 are at minimum 6-20 times faster. What can you do creatively with that much more power?

AS2 & AS3 Versions of the star test to compare AS2 to AS3 so you can judge for yourself [source]

My recommendation, get your AS3 learn on. See what BIG SPACESHIP thinks of AS3 here. Big Spaceship just recently got added to thefwa’s hall of fame – one of three agencies all time.

For future reuse of code and knowledge and to get the most performance out of our creative projects, it is the best option NOW. Your competitors are moving to it and already making more compelling offerings, how long are you going to hack it with just AS2 skills?

A good place to start learning is at kirupa and the senocular posts.

The trajectory of the flash player penetration should complete to around 95-96% by teh end of the year judging by the current player and flash 8 penetration trajectory, Flash9 has gone from 85% to 91% in 3 months, it slows down to about 2% a month once it hits 90% until a critical mass of around 98% for each player. Essentially by 2008 everyone should have moved on to AS3, if you haven’t, well…

Tuesday, September 4th, 2007

Recently the “seam carving” technology to size images in a content aware way to preserve the original intention of the photo has been really taking off. In fact, Joa Ebert and Mario Klingemann, two flash geniuses have created and optimized [2] an AS3 algorithm for seam carving based on the paper about this new technology that was highlighted at 2007 SIGGRAPH.