Export Layers to SWF with JSFL

jsflIt's embarrassing but until the other week I hadn't a reason to do anything (beyond tinkering) with JSFL. JSFL can be especially useful for simplifying or automating tasks in the Flash IDE and that isn't breaking news. I think I understand why I haven't been using JSFL too much until recently. The major problem I discovered is the documentation is very poor, if you search JSFL you get exactly diddly squat on how to use JSFL. And alas Googling JSFL aint much better with the term "JSFL Reference" the only adobe link is this one. Considering this help reference is 5 years old doesn't inflate confidence in learning the latest and greatest JSFL has to offer - this is really pathetic Adobe. If someone can find an official decent resource on JSFL it would be appreciated, SURELY that isn't it :) So despite not being able to find a great JSFL reference Eventually I was referred to this great JSFL reference. The JSFL script I needed to write was really quite basic and for Actionscript developers writing JSFL it is very familiar territory so I was somehow blindly confident.

So I will describe the usefulness of this JSFL script by first explaining the task or problem at hand it solved for me and hopefully you find it useful also.

The Problem

I had a rather complex vector map (12 MB) in a SWF. Embedding the whole map would be obviously be a BAD idea for loading times but fortunately only very small portions of this map had to be used at any time. Though the suker punch to this idea is that the map isn't grouped to these portions - sigh.

The Solution

So I started with some unavoidable and rather laborious instance naming grinding which I did within Flash. Once I had completed this I had literally 100's of Movieclips associated to Classes that needed to be published and when I hit this I  realised - JSFL I love you! So I distributed these MovieClips to layers then ran this script and viola all the layers are published as swfs using the layer name as the published SWF name - ba da boom ching :)

The way this script works is that publishes any layer that isn't a folder or a guide on the main timeline. Then sets all the layers to guides, then loops through the layers desired to be outputted to SWF then changes them to a normal layer so that only this layer is the only one in the published SWF. Once the publish loop is completed all layers are then set back to their original states.

Rather simple I thought and a huge time saver for mindless SWF publishing. To run this JSFL simply double click it or drag it onto Flash then you will be prompted to select the output directory. Then sit back, relax or even take the evening off and tell your project manager you're hard at work!

You can view the source or download this script here - get it while it's hot!

FITC Pixel Bender Source Code

benderIn my efficiency FITC talk I covered some topics regarding programmatically rendering to the DisplayList - efficiently and practically. This covered some simple examples showing what can be done in PixelBender with Shaders including blendModes, lighting effects and transitions. If you would like the source code for these examples you can get them from my code.google repository.

These shader examples only represent a taste of what's possible using Shaders but I think what's most important is to note these shader examples are really practical unlike a lot of the psychedelic effects you may of seen. For me I especially found that introducing more blend modes has made the process of matching designs in Flash a whole lot easier. I will shortly post a complete list of brand spanking new blend modes for Flash via Shaders with open source code so that everyone can take advantage of these blend modes.

Compiling Shader SWCs with ANT build-files

Cool AntIn my talk I briefly introduced the concept of using Flex to compile to a SWC containing Shaders. If you've used Shaders it's rather annoying you have to load in an exported Shader .pbj file at runtime before you can use a Shader. I really like the idea of having my shaders in a SWC to get around this problem. But this is also useful as a means to distribute your Shaders especially for the Shaders I use often like custom blendModes and some filter effects.

I usually compile SWCs via an ANT buildfile in Eclipse and I will provide this handy script to you as open source code. I like using ANT because it makes it very easy for me to automate the task of creating SWCs then even carrying out other tasks like FTPing.

As well as compiling SWCs and SWFs using ANT I also often publish documentation using these build-files and as my FITC talk briefly covered Javadoc in regard to 'coding conventions' I will also include the source code for how to convert your Javadoc notation to HTML documentation using Flex with asdoc via an ANT build-file.

But before you use these ANT build-files it's important to mention you will need to setup up the appropriate .prefs file to match particular variables to your system.

Here is an example which demonstrates the .prefs file for the SWC ANT build-file

compc 		=/Applications/Flex SDK 4/bin/compc
src    		=/classes
outputFile 	=/swc/TheSWC.swc

Here is the code you may like to use as a reference to compiling your Shader files into a swc

  1.  
  2. package {
  3. import flash.display.Shader;
  4. import flash.utils.ByteArray;
  5.  
  6. public class Shaders {
  7.  
  8. [Embed("RippleTransition.pbj", mimeType="application/octet-stream")]
  9. private static var RippleTransitionData : Class;
  10.  
  11. [Embed("Bloom.pbj", mimeType="application/octet-stream")]
  12. private static var BloomData : Class;
  13.  
  14. [Embed("BlendModeSoftlight.pbj", mimeType="application/octet-stream")]
  15. private static var SoftLightBlendModeData : Class;
  16.  
  17. // Transitions
  18. public static var rippleTransition : Shader;
  19.  
  20. //Lighting
  21. public static var bloom : Shader;
  22.  
  23. //BlendModes
  24. public static var softLightBlendMode : Shader;
  25.  
  26. protected static var inited : Boolean = init();
  27.  
  28. private static function init() : Boolean {
  29. rippleTransition = new Shader(new RippleTransitionData() as ByteArray);
  30.  
  31. bloom = new Shader(new BloomData() as ByteArray);
  32.  
  33. softLightBlendMode = new Shader(new SoftLightBlendModeData() as ByteArray);
  34.  
  35. return true;
  36. }
  37. }
  38. }
  39.  

Download the handy ANT buildfiles here

If you are interested in writing your own ANT build files read up about this here

FITC Amsterdam Presentation

Thanks for all those who attended my FITC talk 'Efficient Programming Practices for AS3'. I had nightmares hardly anyone would show up but instead the venue was packed with a special mention to the support from the lads at Agency Republic crew - much appreciated!

Despite some early nerves (which I thank you for baring with) the talk covered a lot of practical information regarding efficiency and Actionscript. It's actually the first time I've attended an exclusively Flash conference and 'god damn' I talked at it - pretty cool or terrifying.

If you would like to ask me questions regarding my presentation feel free to do so by email. You can also find out more about my presentation here including references and source code examples.

Lastly I would like to thank Shawn Pucknell the organizer of the FITC. I think everyone who attended would agree that him and his crew have done a fantastic job. He even had time to give me some presentation pointers just before I went up - so thanks mate for going an extra mile. Maybe next time I won't drop the microphone ;)

Tweensy goes public

I know it's late but better late than never, Tweensy just turned 0.2 and is now available as a public beta. In this release Tweensy has been split into the 2 flavors Zero and Original and has an expansion FX package.

I've been spending quite a while tightening all the bolts in Tweensy and to get it as efficient and feature packed as possible and its paid off. I've managed to get Tweensy to run much faster than the previous fastest AS3 Tween engine which was TweenLite/TweenMax - wowzas!

Tweensy gets this performance boost compared to other tween engines because #1 it's type safe, has an option to use Object Pooling and utilizes a DoubleLinked list rather than a Dictionary or Array. The final method you can use for speed improvement in Tweensy is by rendering through a BitmapLayer using TweensyFX which circumnavigates the DisplayList and this most often provides a higher frame rate at the penalty of using more RAM - but I think that's acceptable.

Tweensy is type safe due to a collection of tween plugins which allow for targetting commonly tweened Objects such as MovieClip, DisplayObjects, ColorTransforms etc. This means creating new plugins for example Papervision's DisplayObject3D very easy, so DisplayObject3D could benefit from the performance of Tweensy property tweening as well. But regardless of this a fallback plugin allows for Tweensy to tween any public property for any Object.

But don't think Tweensy is just an efficient tween engine it's also feature packed to rival (or beat in my opinion) any other AS3 tween engine available today. And anything it doesn't fulfill feel free to feature request it. I've taken some time to write up a wiki page to help users get started. As well every method and class is commented so you should be able to use the documentation files to find out exactly what's contained within Tweensy library very easily. But if you're new to using a tween library I recommend you to read the getting started wiki page.

Not only is Tweensy feature packed and more efficient than other tween engines, TweensyZero weighs in at about 2.9KB making it an ideal product to use in banners - where every KB counts.

Tweensy also allows for tweening along complicated motion guides otherwise known as bezier curves. One thing that particularly annoyed me while using other tween engines is that the algorithim used for tweening a bezier curve resulted in the DisplayObject accelerating and decelerating as the curve distance increased and decreased. All completely regardless of the ease equation used! You'll get no such problem with Tweensy which gives precise control over tweening on a bezier curve. Other motion guides included in Tweensy include direction and orbit which are cool also but I won't go into any detail as the link above has more information on motion guides with Tweensy.

The Tweensy syntax is very similar to other tween engines and like the great AS2 tween engine FuseKit, Tweensy offers a series of methods which makes tweening otherwise complicated Objects easy. These methods include matrixTo, colorTransformTo, filterTo, functionTo, brightnessTo and contrastTo to name a few. Regardless of these methods the built-in to, from and fromTo methods provide the functionality of these functions - they are there purely for coding convenience. For example using Tweensy for tweening Matrices, ColorTransforms and SoundTransforms then applying them onto other Objects is quite easy.

  1.  
  2. import com.flashdynamix.motion.Tweensy;
  3. import flash.geom.Matrix;
  4.  
  5. var mtx:Matrix = myInstance.transform.matrix;
  6. mtx.tx = 200;
  7. mtx.ty = 200;
  8. Tweensy.to(myInstance.transform.matrix, mtx, 2.0, null, 0, myInstance);

Further to this I will quickly introduce the method functionTo, it is particularly useful if tweening the width and height of a component of some type which requires this to be done via a setSize method.

  1.  
  2. import com.flashdynamix.motion.TweensyGroup;
  3.  
  4. var tween:TweensyGroup = new TweensyGroup();
  5. var onUpdate:Function = function(current:Object):void{
  6. pane.setSize(current.width, current.height);
  7. }
  8. tween.functionTo({width:pane.paneWidth, height:pane.paneHeight}, {width:200, height:200}, onUpdate, 1);

Further to these cool features Tweensy offers an extras package containing classes to assist with matrix math for Transformations and ColorMatrixFilters. The MatrixTransform class allows for tweening transformations of skewX,skewY around a defined registration X and Y. While the ColorMatrix class allows for applying color transform effects such as brightness, contrast, threshold, colorize etc.

Though I hadn't mentioned it much above, TweensyFX hasn't gone without a few improvements these effects include Bump Mapping, Bulge(dent/indent), pixelation, rgb channel splitting, scan lines and reflection. These FX are mostly low hanging fruit so more exciting effects are to come. In case I hadn't mentioned it somewhere TweensyFX also allows the efficient drawing to a vector layer. As well tweening complicated vector elements such as curves, lines and gradients. This combined with the effects which can be applied onto a BitmapLayer in TweensyFX can result in some really nice results.

I hope you enjoy Tweensy, I and everyone I have introduced it to are, as well those involved in the private beta who have provided great feedback - thankyou. TweensyFX is now the product I will focus on now I consider the Tweensy Original product is maturing nicely. Which is a great stage for this project and for me because this is work I find more exciting.

As well as this update to Tweensy, I have been hard at work (in my limited spare time) on a AIR product code named 'Mr Sprite' which will support TweensyFX with sprite map animations. Mr Sprite can import or create a sprite sheet from a sprite sequence. Then allows for you to define animations sequences on the sprite sheet which can then easily be imported into Flash as a ByteArray at run-time or author-time. With Mr Sprite it will allow you to apply pre-rendered effects with dynamically generated ones at ease in an extremely optimized and efficient manner. I will try to get some examples and a private beta setup for this project soon.

Get Tweensy before it takes over the world at its new home on code.google




Me

I am Shane McCartney an Aussie Flash Developer who's currently working in London on a contractual basis. If you would like to check out some of the work I have done recently, go to my folio at shanemccartney.com.

Donate

If you find the source code or information provided on this site of such use that you would like to donate please do it is appreciated.

Your donation will help us to provide even more source code to the community and cover the cost of time to develop and maintain the source code we provide, thank you.









Meet me at

FITC Toronto