Archive for October, 2007

Thursday, October 25th, 2007

Alternativa Game is a leap forward in isometric 3d engines for flash. A gigantic leap…, would you expect this kind of quality of software out of anyone but the Russian Alternativa Game group? Check it out NOW.

The demo runs suprisingly smooth. I had to kick down the quality just a bit to get started but once I did that it was very smooth, full 360 degree turning, texturing levels, render quality, day/night, and many more features. You have to try the day and night, check the lighting coming out of the window…

More from Anton Volkov:

This is technological demoversion of an Alternativa3D Flash engine, which was made within Alternativa MMORPG development. This engine uses Flash player version 9 as a platform, and, as far as we know, works in all full-flash-supporting browsers. Alternativa3D is optimized with upcoming game features in mind, and utilizes some non-trivial solutions to show game graphics quickly.

Main features:

  • Three-dimensional geometry and 3D-sprites. Buildings and landscape are made in a fair 3D, objects with complex geometry — using sprites, including multi-phase ones.
  • Lighting system, including ambient, directional and omni lights. Changing daytime, diffuse and sunlight, automatical “in-corners” shading, dynamic shadows, including sprite shadows.
  • Texture and light quality settings (it is really important without 3D hardware acceleration in Flash).
  • Low processor load (excluding moments of lighting change and camera rotation, which happen not too often and is not critical for the game).

This is on par with Paul Spitzer’s amazing FPS flash engine.

You can follow this amazing development over at the Alternativa Game blog. I suspect quite a bit of interest now that they have thrown it down. Apparently when Anton and the guys of Alternativa throws down, they bring it!

This is only possible in AS3, this would be nothing more than a prototype test in AS2 but in AS3 it is fast enough and much much more capable of building stuff like this.

Thursday, October 25th, 2007

Flash is great, but accessibility can sometimes be a problem if it is not paid attention to. Direct linking, deep linking, back button support, these are very important to wire up in your applications. I am seeing many new RIAs, apps, sites, interactives still not do this and it is quite annoying.

The great thing about the web is that is gave users the ability to control the presentation and the context, from outside the presentation. By allowing users to use the back button and change urls in the address bar this was empowering. Empower your users and ad campaigns to get to different places of your application easily with deep linking, it is required for usability.

But this is hard right? Not really with great tools. What are you waiting for, SWFObject and SWFAddress make up THE platform right now for deep linking, embedding and back button support. These kits have been exhaustively tested and are very compact scripts to help you embed and then provide deep-linking, back button support and direct linking instantaneously almost.

Download SWFObject

Download SWFAddress

Both of these kits are well tested and provide instant small simple components of which to build complex systems on top of. SWFAddress builds on SWFObject tested embedding script and provides the tools you need to get deep linking running in your application in no time.

Note of caution, design implications (architecture design)

When you drive off the URL such as with direct and deep linking in Flash it does change your order of how you handle operations when you have to take into account the URL state. The first thing you have to do is when you receive an onChange event from SWFAddress that the URL has changed, you need to parse it and take action. However if you plan to deep link and provide usability throughout your flash site or app (even in the forms or multistep processes driven by URL) then you need to plan for this event and work this into your architecture for the url handling within the flash framework for your site.

A scenario might be:

  1. User using your flash app
  2. User clicks link or new section of your flash application
  3. INSTEAD of just animating the state in the flash application, you have to just update the section or URL (location.hash in javascript that provides the # name linking allowing the browser to stay put, or in this case SWFAddress.setValue((“/sectionname/page1″)),
  4. THEN the flash app or site is REACTIVE to the URL, reads in “sectionname/page1″ parses it and then animates to sectionname/page1.
  5. Or detect if the change came from the app or the URL directly and handle that differently in the onChange event with a subsystem.

Rather than just animating the app state or changing it, or showing that next photo on the button event, your button event would change the URL, then the flash monitoring the URL would push the onChange event. After that either animate in the next section or take appropriate action per the user requested action.

It isn’t like this for all areas or states of your application but you have to decide what is directly linkable, and when you want a state directly linkable then you have to wire it this way. Obvious choices are navigation items in your site, but they might also be specific cases like a multi-page form wizard that you want to link to step 3 directly, or a movieclip that someone can pass #3m2s to advance the movie by the url. There are many cases where you might want to provide deep linking into your flash application.

I know it sounds complicated? but it really isn’t, just a reversed way of thinking which we will highlight in the future with a tutorial and a fluid flash template. The SWFAddress site has great samples and examples, SWFAddress sets up the onChange handling in these samples and examples of how to do it in AS1, AS2 and AS3 so pick it up.

Download SWFObject

Download SWFAddress

Enable Deep Linking in Flash in 8 lines of code to start with SWFAddress:

From SWFAddress Documentation

1) Insert the SWFAddress script in your page directly after the SWFObject file.


2) Include or import one of the provided ActionScript classes. SWFAddress comes with versions for AS1, AS2 and AS3.3) Write your own navigation logic that will be executed when the address is changed.

SWFAddress.onChange = function()
{
    // Your code goes here.
}

3) Call the SWFAddress setter method from every button or action that requires deep linking.

this.onRelease = function() {
    SWFAddress.setValue('/portfolio/');
}

Check out the Asual blog (makers of SWFAddress) for more on good practices and bad practices with deep linking and more tips.Tips like:

Bad Practice: Address values naming using camelCase or other forms of custom convention

SWFAddress samples clearly define the best naming convention for deep links. Web addresses are case insensitive and the standard is lower case. For readability and Google SEO compatibility reasons the convention ‘my-deep-link’ is more appropriate than ‘myDeepLink’ or ‘My_deep_link’. The format http://domain.com/#/my-deep-link/?param=value is the only one fully compatible with the SWFAddress SEO rewriting.

Silverlight Deep Linking

This is also very simple in Silverlight to deep-link using javacript tools kits for Silverlight 1.0 which is javascript only, on location.hash change using a timer you could call an application method that might change the state or call certain transitions or move Canvases around, hide/show them, load content in, etc. Again, something you want to think about early on.

Other notes

SWFObject 2.0 beta5 is out and after 5 betas hopefully is nearing release

Pick up the code here for SWFObject 2.0

SWFObject 2 (script based) is the name again after a small switch and merge with UFO (standards based) to SWFFix but as Geoff Sterns pointed out, this seems to assume that something is broken.

SWFObject 2.0 is the new name again and let’s hope many more great tools are built on SWFObject 2.0 like SWFAddress which handles direct linking and back button support (using location.hash as most AJAX/RIA apps do to get deep linking and back button support).

Tuesday, October 23rd, 2007

Flash 9 has reached 93%/94% penetration rates. If 90% wasn’t good enough from July then September and now Oct/Nov numbers are at 94% and probably 95% by now. To put it in perspective last December Flash 8 was at 94%.

If you aren’t using Flash9 and especially AS3 now for performance and code reuse you are hurting yourself and your clients. The recent animation package comparisons in AS2 to AS3 show us the type of power that AS3 has. Now you can jusify it by the numbers…and the tests that compare and show 10 times improvement in scalability compared to AS2, even for small motion apps, getting the most out of performance is important.

Flash Player 6 Flash Player 7 Flash Player 8 Flash Player 9
Mature Markets1 99.1% 99.1% 98.4% 93.3%
US/Canada 99.0% 99.0% 98.5% 94.1%
Europe2 99.2% 99.2% 98.2% 93.7%
Japan 99.5% 99.5% 99.0% 93.7%
Emerging Markets3 Not surveyed in this wave

<!–

Notes

  1. Does not include Flash Player 5 and Emerging Markets.
  2. Supports Adobe Flash Video (FLV).

–>[source]

I won’t even go into the business reasons that include AS3 being Adobe’s main focus compared to AS2 and the AVM1, from now on AVM2 will be the staple of focus at Adobe for the Flash team. Support will continue but don’t get smoked by AS3 interactives that AS2 ones can’t compete with. Get your AS3 learn on

Monday, October 22nd, 2007

MosesSupposes posts a flash animation kit, TweenBencher, for benchmarking speed performance for Flash Animation Kits in AS3.

He also is calling for standards in Flash Animation kits but this is good and bad. I agree a common syntax should be used and the base components should be agreed upon and integrated into Flash, but standards need to be extremely simple and performing systems. We have seen how packaged Tween bloats and I think the Go approach mentioned below is a good direction for that. Adobe seems more open to this though talking about including SWFObject and possibly helping other kits like Papervision3D with performance enhancements.

I think that a standard is already emerging out of the AS3 toolkits leading the way Tweener, TweenLite, AS3Easing , Animation Package, Animation System, Twease and possibly Go (as Fuse had many users) which is the replacement in AS3 for Fuse that is unreleased. I think the developer market will decide that. Also, the big draws to good kits are simplicity, size, performance and maybe most important, the community and author’s willingness to get out there as technology changes. Right now Fuse is a bit behind in the last aspect, I think people are already enjoying the smaller Tweener, TweenLite kits that have simple syntax and are extremely small. Go is going the right direction in making the pieces much smaller as I agree when you have to use two kits there is extra uneeded duplication.

MosesSupposes might release a Fuse 3 still (built from Go?) but that is still in an private beta stage ( for Go- not Fuse) fairly recently and seems a bit unsure as to whether it will be released or not per the blog.

To forewarn the fanbase, this is not a release announcement, no major progress to announce at this time.

I’ve been holding my cards close since I came up with these concepts around January of this year but it’s time I layed ‘em on the table.

Fuse 3 (if built) will be a combination Physics + Tweening Engine with 2D + 3D animation & sequencing capabilities.

The idea is that all details are registered with a central class (probably FuseCentral) that monitors and prevents overlap between various handlers during runtime.

From the description of Go it seems pretty flexible and useful with making your own syntax but sometimes flexibility there creates a partitioned platform as syntaxes emerge, but it can also change with the best simple syntax. I think making it pluggable is more important than custom syntax, actually I wish animation kits all used the same syntax. Right now that is the biggest hurdle getting people to switch. Also, syntax that still works in AS2 is a bit attractive such as Tweener and TweenLite so that work in AS2 and AS3 does not hinder maintenance.

I have an idea cooking, now in private beta, called Go. I will be posting shortly with some background information on what led me to this approach, but right away let me share the concept and architecture with you.

  • Go is a lightweight – around 4k – portable set of base classes for creating your own AS3 animation tools.
  • Go provides an agile, purposeful architecture that is highly extensible.
  • Go is not a does-it-all Kit (a la Fuse), but such a kit can be built using Go. If Fuse was a vending machine, this is more like a knife and a pan and a way to cook for yourself.
  • Go does not require special syntax to use. You can instead, design your own.
  • Go’s engine is efficient, capable of processing a jaw-dropping 10-20,000 individual animations on a typical system. (Disclaimer: it remains to be seen how Go will perform in a real-world setting.)
  • Go is designed to encourage developers to use tweening, physics and 3D together.
  • Go is inspired by the popular Cairngorm framework in its approach. That tiny set of classes does so much, truly useful without dictating your code.

At this point in the Animation Kit game for Flash, real tests matter, and performance will start to become the main focal point as well as simplicity from released and completed packages that have strong communities and user bases. I think the kits that have succeeded well and created platforms have been the most simple and compact (the evolution is this way) that can be used as base kits in other larger systems. Starting with simple core systems that perform is good systems design to help minimize complexity as long as the pieces together aren’t too complex to use for general coders in Actionscript. Looking forward to watching this space progress.

Sunday, October 21st, 2007

Here is a performance test by Jack at GreenSock who created TweenLite and TweenFilterLite that tests Tweener, TweenLite, Fuse/ZigoEngine and Twease animation kits for flash. This test is only AS2 but in this test TweenLite is quite a ways ahead in means of performance for many tweens via code. I would like to use this in AS3 to check the speeds there as well but from the onset it appears if you have many tweens that the smaller TweenLite kit compared to the AS2 version of Tweener and Twease is the better bet for performance.

Personally I don’t do much AS2 other than maintenance or converting to AS3 so I will be digging into this further this week in AS3 to check the speeds.

In Jack’s AS2 benchmark it appears they are pretty even up until around 150-200 Tweens per half second. If your application is built in AS2 and has more than 200 Tweens per second (very possible in gaming and just to have processing left over for other things) then TweenLite seems like it has less overhead. TweenLite is pulling in a respectable 10FPS on this machine at 500 tweens per .5 seconds.

UPDATE: Jack has updated the test to include AS2 (the dog) and AS3 for Tweener and TweenLite. This version in AS3 the threshold is much much higher and Tweener at 1200 tweens comes in around 10fps on this machine while TweenLite comes in at 1200 tweens at 15-20fps. They again are pretty even until around 800 tweens per second on this test machine where a critical mass is hit, at that point TweenLite starts scaling a bit better and around 1200 tweens is roughly double the FPS. I need to look further at the benchmark test as it is made by one of the authors but Jack is a respectable source and offers the source so anyone is willing to look at this. Results will vary but I think this still shows Tweener has a slightly smaller overhead (which when you compound it with many short tweens it adds up) but does not negate the use or quality of Tweener as 1200 tweens per half second is very respectable thanks to the new AVM2 virtual machine in AS3, but it is always important to perform to save up room for other kits such as Papervision3D and memory for more assets. I think this has been a very worthwhile exercise and I think that a need for a comparison tool for all animation kits in AS2 and AS3 (or just AS3 as we move forward), it will only improve both toolkits. Also, not just straight tweens but bezier, color, filters and general movement.

As always thanks Zeh, Jack and Nate for your excellent toolkits and work that you put out there.

Wednesday, October 17th, 2007

Currently working on some motion detection with flash/c# and webcams right now. Here’s a basic overview of some motion detection source files and tricks. Most motion detection is based on snapshots and finding brightness of a pixel with all combined colors, then comparing that to previous snapshots to detect enough variance and thus movement. If you have a webcam hooked up, this sample in Flash AS3 highlights this well showing the camera on the left, then the brightness snapshots on the right. It also has an indicator to the amount of movement due to much brightness.

C#

Here is a nice example of motion detection using various motion detection algorithms in C#. This is built on the very slick AForge.NET Computer Imaging Library.

If you ever wanted your own motion detection or recording it is all possible with the basics of checking brightness and snapshots in the most simple form checking how much change or variance their was to bright pixels or the count of bright pixels compared to previous snapshots.

// Calculate white pixels

private int CalculateWhitePixels( Bitmap image )
{
    int count = 0;
    // lock difference image
    BitmapData data = image.LockBits( new Rectangle( 0, 0, width, height ),
        ImageLockMode.ReadOnly, PixelFormat.Format8bppIndexed );
    int offset = data.Stride - width;
    unsafe
    {
        byte * ptr = (byte *) data.Scan0.ToPointer( );
        for ( int y = 0; y < height; y++ )
        {
            for ( int x = 0; x < width; x++, ptr++ )
            {
                count += ( (*ptr) >> 7 );
            }
            ptr += offset;
        }
    }

    // unlock image
    image.UnlockBits( data );
    return count;
}

Flash AS2

In Flash this is also possible here is a good article from Flash8 that explains cycling through each pixel to compare the image data and implement motion detection from a webcam.

For instance the basics here show how you can compare each pixel and the change in the brightness for each pixel:

//accuracy
tolerance=10;

//color of the current pixel in the current snapshot
nc=now.getPixel(x,y);

//red channel
nr=nc>>16&0xff;

//green channel
ng=nc>>8&0xff;

//blue channel
nb=nc&0xff;

//brightness
nl=Math.sqrt(nr*nr + ng*ng + nb*nb)

//color of the same pixel in the previous snapshot
bc=before.getPixel(x,y);

//red channel
br=bc>>16&0xff;

//green channel
bg=bc>>8&0xff;

//blue channel
bb=bc&0xff;

//brightness
bl=Math.sqrt(br*br + bg*bg + bb*bb);

//difference in brightness between now and before
d=Math.round(Math.abs(bl-nl));

if(d>tolerance)
{
//there was a change in this pixel
}

Flash AS3

Here is a link to grab a conversion of the AS2 Flash motion detection above to AS3.

Source of AS3 motion detection here.

Grant Skinner has done some interesting things with motion detection with Flash and webcams in the past in the incomplet gallery.

C# or other hardware accelerated capable kits are faster but AS3 and Flash with the new AVM2 virtual machine  should be about 10 times faster than AS2 as much of the improvement in performance and the virtual machine is on iteration speed increases such as loops (i.e. pixel loop).

Wednesday, October 3rd, 2007

The 3d engines in Flash and the power of AS3 virtual machine and programming language is inspiring all kinds of killer stuff on the web, winning awards, on lists and all over the web. It is going to get even more intense with the new Astro releases.

One amazing implementation using this latest tech is Paul Spitzer’s FPS Engine in Papervision3D. Wait til you see this…

Paul Spitzer’s FPS Engine

This is by far the smoothest and best textured FPS like control for Flash I have seen yet.

Mouse click and move – look around
e – walk forward
d – backward
s – strafe left
f – strafe right

What is cool about this is it isn’t just for games, this can be used for all types of applications but Paul is giving us a glimpse of the possible gaming platform in 3d that Flash could become. It hasn’t been confirmed but Paul just might be some sort of Flash superhero. There have been other FPS like movement in pv3d and other3d flash kits or canvas but they just aren’t as smooth and well put together as this and my processor doesn’t melt on this one.

Another cool 3d room type app is Tim Knip’s Floor Planner Using Papervision3D

This looks like it can be a very cool way to implement useful apps with 3d flash not just games.

Also recently we highlighted a 3d editor and real-time texture lighting isometric 3d engine.

Tuesday, October 2nd, 2007

Adobe has announced the release of the inital developer views of AIF and Hydra in “Astro” the next version of the flash player (10).

AIF (Adobe Image Foundation) like AIR (Adobe Integrated Runtime) is a new technology just out of the gate but it does show that Adobe is into innovating and the vector wars. AIR is beta2 and Flash player 9 “moviestar” updates for video are coming along nicely but here we have more news out of MAX in Chicago that AIF is now available.

What is AIF? It is a new imaging and effects technology to help people create their own filters for Flash (blur, drop shadow etc are defaults). Hydra the new language for this is reminiscent of processing.org (if you haven’t been to flight404.com since the 90′s then processing is all it is about there) and Cg from nVidia to write and test shaders. The fact that it is based on GLSL (OpenGL Shading Language) will help it easily port shaders coming in 3d gaming into Flash which is really sweet. The direction slowly is that Flash and maybe Silverlight will become more of gaming platforms and this is a nice point in that direction.

From Adobe here is what AIF is:

Introduction to the Adobe Image Foundation Toolkit Technology Preview

The Adobe Image Foundation (AIF) Toolkit preview release includes a high-performance graphics programming language that Adobe is developing for image processing, codenamed Hydra, and an application to create, compile and preview Hydra filters and effects. The toolkit contains a specification for the Hydra language, several sample filters, and sample images provided by AIF team members. The AIF technology delivers a common image and video processing infrastructure which provides automatic runtime optimization on heterogeneous hardware. It currently ships in After Effects CS3 and will be used in other Adobe products in the future. The next release of Flash Player, codenamed Astro, will leverage Hydra to enable developers to create custom filters, effects and blend modes.

Hydra is a programming language used to implement image processing algorithms in a hardware-independent manner. Some benefits of Hydra include:

  • Familiar syntax that is based on GLSL, which is C-based
  • Allows the same filter to run efficiently on different GPU and CPU architectures, including multi-core and multiprocessor systems in a future update
  • Abstracts out the complexity of executing on heterogeneous hardware
  • Supports 3rd party creation and sharing of filters and effects
  • Delivers excellent image processing performance in Adobe products

Reaction is that this is a strong Adobe direction to move towards more capable technology as in AS3 and Hydra and allow more customizable possibly hardware rendered and accelerated shader like technology for Flash filters. The new AVM2 and AS3 allow for faster processing and pixel based operations that you need for buildng filters and or shaders.

This is pretty interesting, it isn’t full blown hardware rendering which would just be excellent. So far hardware accelerated full screen stretching in Flash 9 Moviestar beta and now filters will have an element of hardware capable rendering, it should help performance. Full hardware acceleration seemingly will not happen in Flash 10 so the 3d engines and new 3d elements from Adobe are all software rendered still. However dual and multi-core processing will help rendering of 3d in flash BUT video cards are more prevalent than dual or multi-core for some time. Basic hardware rendering even for a low bar could greatly change the flash platform.

It is still a while off yet but it was good to know that performance and shaders/filters are getting attention but hardware rendering not just yet for 3d and basic drawing/rendering. One thing is for sure, in 2007 developing interactive for the web is being shook up and changing rapidly.

Here’s a video taken by Aral Balkan of the Astro presentation at MAX

[youtube="http://www.youtube.com/watch?v=ympeCv8lLmw"]