Category Archives: Flash

TiltViewer – A 3D Flickr Image Browser

TiltViewer

TiltViewer allows you to browse Flickr’s most interesting images in a 3D space. Images are pulled from Flickr’s Interestingness list.

TiltViewer was built using Away3D, a branch of Papervision. Currently Away3D provides better handling of mouse events for nested 3D Objects. One limitation of Away3D is that there is no access to a 3D object’s sprite, so you can’t apply filter or alpha effects. I’m guessing that soon these features will be added to both engines.

Does a 3D UI give more functionality than the equivalent 2D interface? No, but its certainly a lot cooler! Part of the motivation to build this was to explore ways to make 3D interfaces simple and intuitive.

Being able to load Flickr images into a 3D engine was recently made possible when Flickr added crossdomain XMLs to it’s image servers. Thanks Flickr!

Click here for more about TiltViewer.

Checkout Vuvox – a Flash RIA for Remixing Media

Vuvox is a very cool Flash RIA that allows you to create interactive slideshows from your uploaded images, video and audio. Once your media is in the system it can be displayed via a variety of Flash templates. I helped out with some of the templates, as did the awesome Quasimondo.

Vuvox allows you to upload your content via Flickr or Picasa, and has a Facebook widget for easy sharing of your presentations. Check it out here.

AS3 Tween Engine Comparison

One of the most popular AS3 tween engines in Zeh Fernando’s Tweener. Another tween engine I just found out about is Jack Doyle’s TweenLite. Both are great lightweight engines that provide a convenient syntax for handling tweens.

There is also Flash’s built in syntax for handling tweens. Until today I thought that calling an AS3 tween in Flash required the Flex framework, but it turns out that in addition to Flex’s mx.effects.Tween there is also a Tween class built into the Flash Player: fl.transitions.Tween. This works exactly like Flash’s AS2 tween class.

So, which is the best one to use? Tweener and TweenLite both offer an easier way to handle multiple tweens, delayed tweens, color tweens and more. TweenLite is smaller at 2k, over Tweener’s 10k. I haven’t dug into all the details of both, but for most cases, TweenLite does everything you need.

One other thing I love about TweenLite is that by default it will overwrite previous tweens to the same object. This means if you apply many tweens to the same object (for example a button color tween on rollover/rollout), you won’t start piling up tween objects in memory. In practice, the memory usage for a tween object is very small, but its nice to know that over a long period of time youre SWF won’t be leaking memory.

roofs v4.0 goes live

byroofs

roofs is Agnieszka Garofeanu’s great design portfolio. I helped Agnieszka with the coding for the site. The site uses a variable height SWF as described by Hoss Gifford here. This allows browsing multiple large images easily by using the browser scroll bar. I like the way the site navigation is really simple, allowing you to focus on the content.

Sharing AS3 Classes with a loaded SWF

I recently hit a strange bug when trying to share AS3 classes between a ‘shell’ Flex SWF and a loaded ‘module’ SWF. When you do this with Flash player 9.0.28, a run-time error is generated: “ReferenceError: Error #1074: Illegal write to read-only property [ClassName] on global. at global$init()”.

I imagine one solution is to prevent the shared classes from being compiled into the module swf. There is info on excluding classes using Flex here. This doesn’t seem to be possible using the Flash 9 public Alpha. Does anyone know how to exclude classes with Flash 9?

attachMovie() in AS3

Using external assets is great, but for some types of projects it makes sense to include your assets in the FLA as library symbols. According to this AS3 migration cheatsheet, attachMovie() has been removed in AS3. Does this mean we can no longer attach library symbols to the stage in AS3? Fear not flashers, you can still attach library symbols in AS3. Here’s how:

  1. In the Flash 9 IDE, create a new flash document.
  2. Create a new library symbol, call it “Test”. Draw some awesome graphics.
  3. Right click the symbol and open the symbol properties. Check the “Export in Actionscript” checkbox. By default Flash will use the symbol’s name as the Class name, and will warn you that a class for this symbol is to be automatically created. This class name replaces the old AS2 “linkage id”.
  4. On the main timeline, frame 1, add this code:

    [as]this.addChild(new Test());[/as]

    What this code is doing is creating an instance of your new class, and adding that instance to the main timeline’s displayList. (This new syntax is actually a lot more logical and consistent than the old attachMovie() syntax).

  5. Test your movie, see your awesome graphics.

To take this a step further you can associate some code with your new Symbol by creating an AS class file for it. Here’s how:

  1. Save the FLA from above somewhere.
  2. Create an AS file for your new symbol. To do this, create a text file using any text editor, or in the flash IDE with File->New->Actionscript File. Save the new file as “Test.as” in the same folder where your FLA is. (The AS file needs to be in the FLA’s class path. By default, the class path includes the current folder).
  3. Add your custom class code in the AS file and save it.

    [as]package{

    import flash.display.MovieClip;

    public class Test extends MovieClip{

    public function Test(){
    trace(“This code runs when the Test class is instantiated”);
    }
    }
    }[/as]

  4. Test your movie. You will see the trace in the output window..

Here is a good intro tutorial on using AS3 and Flash 9, which covers the above in more depth, as well as the new AS3 document class.

Note this information only applies when using the Flash 9 IDE, not Flex 2 , since Flex 2 doesn’t have a library.