To celebrate my newfound freelance status, I created a new splash animation for my site. It’s my attempt to bring back the old-school ‘Skip Intro’ era :). It’s an ‘After Effects’ style text animation using papervision, combined with some tweens and flash 8 filters. It’s semi-random, so each time you watch it, it’s slightly different. Only 24k (not including the music). Music is by Funkstörung .
Category Archives: Flash
Papervision 3D Ribbon Experiment.
This weekend I got a chance to play with Papervision. I combined Papervision with my bezier tween class to come up with this. It looks kind of like the ribbon that gets twirled around in gymnastics.
Papervision is the first Flash 3D framework that’s gained real traction in the dev community. The code is well organized and documented which makes a nice change. Also there is a lot of active development happening, including an AS3 version in the works.
You can download the ribbon source code here. To use this source, you will first need to download the Papervision code using an SVN client. Once you’ve downloaded papervision, copy over the contents of the zip file.
If you’re using Eclipse, the easiest way grab papervision is to install Subclipse, then do a File -> Import -> ‘Checkout Projects from SVN’. Enter the repository URL: http://svn1.cvsdude.com/osflash/papervision3d. Eclipse will create a new project for you and download the files.
Be aware that papervision is alpha and some things may not work. For more papervision help, check instructions here and here.
Rotating 3D Marquee Experiment (with Source)
This swf shows a marquee of letters scrolling across a 3D panel that rotates according to the mouse position. In this post I thought it would be helpful to walk you through how I got to the final swf by combining a few different pieces of code. The swf is a combination of a custom text rendering effect using BitmapData, the DistortImage class, and a simple 3D engine. (All these examples require Flash 8 or higher).
Initially I was experimenting with text effects using the BitmapData object. Using BitmapData can give some interesting raster effects, that you can’t create just with movieclips. With BitmapData you typically want to work on a small canvas, since calculating per pixel effects across a large area can be very CPU intensive.
The idea is to repeatedly copy a blurry letter movieclip into the bitmap using BitmapData.draw() to give the fade in effect. The fade out effect comes from copying in a 5% alpha background color every frame. After playing around for a while I came up with this:
Once I was here I thought it would be nice to give this a perspective effect, like watching a marquee text scroll in Time Square. True perspective effects are the holy grail for Flash developers and have been hard to achieve until recently when the awesome DistortImage class was released by the creators of Sandy (based on orginal code by the genius Andre Michelle). This class will chop up any movieClip or bitmapData into multiple triangles, then skew the triangles to fit any 4 corner points. DistortImage causes image quality loss and rendering artifacts, so this technique is not useful if you want 100% image clarity. I took the bitmapData object and applied it to a DistortImage. I also modified the text effect so that the text now scrolls horizontally.
Once here it was a reasonable leap to have the panel move in a 3d space. For this I could have used Sandy or similar, but really i just need a very simple engine to give a 3d perspective render on the 4 panel corner points. From this list of 3D flash engines, I found Andre Michelle’s Simple 3d Engine. Modifying this to render a plane gives this:
Combining the 3d plane and the DistortImage gives the SWF at top. This required converting the 3D engine to an AS2 class.
Fix for cross-domain ExternalInterface 'Unspecified error'
Making a note of this here because I don’t see it in any of the docs.
When using ExternalInterface cross-domain (i.e. the swf and JS are on different domains) you may get an ‘Unspecified error’ message in IE. Debugging in Visual Studio gives an ‘unknown exception’ in the return statement of this function:
function __flash__addCallback(instance, name) {
instance[name] = function () {
return eval(instance.CallFunction("
}
}
The fix is to add
System.security.allowDomain("*");
in your AS code. ExternalInterface requires the allowDomain to be set when HTML-SWF cross-scripting is performed even though it’s local to your browser. Thanks to my co-worker Sean Neville for this information.
(Note that you will also need to set allowScriptAccess="always" in the swf embed tags to allow cross-scripting)
Brightcove's Fullscreen Video Player
For the last year and a half I’ve been working at Brightcove, helping build out their Flash front-end. Last week I got to add fullscreen functionality to the brightcove.com video player – before youTube, google video etc :). Fullscreen mode is accessible via the full-screen button or by right click. Check out an example below.
It was fairly straight-forward to implement following the documentation. One thing to note is that keyboard input is disabled in fullscreen mode due to security restrictions, which means we had disable the video overlay menu functionality. Since fullscreen mode requires at least Flash v9.0.18, users with earlier versions are prompted to upgrade in the SWF via express install.
Gabocorp Still Rocks the House
I was disappointed when the FWA’s Most Infuential Flash site of the Decade poll did not include the first Flash site that really blew my mind – Gabocorp.
Rob at the FWA let me know that after 2 weeks of trying to locate Gabo, he’s finally found a version of Gabo’s 1997 site and put it online.
I remember first seeing the Gabocorp site (9 years ago!) and being blown away. At the time I was doing multimedia CD-ROM development using Visual Basic, C++ and Director. It was amazing – not only that you could achieve such smooth, seamless full-screen animations, but that that you could do it on the web! I knew I had to get into flash development.
The cinematic feel, use of sound, and seamless transitions still stand up today.
Latest Tweets