If you are familiar with the Adobe product line there is inconsistency between Photoshop/Illustrator/Flash/Fireworks/InDesign and support for various subsets of blendmodes which is rather annoying especially for us Flash guys. This project overzealously named the 'Ultimate Blend Mode Collection' is an attempt to standardize this unofficially on Adobes behalf. So marrying up Photoshop designs and Flash layouts with unsupported blendmodes won't be nearly as annoying as has been previously. Further to this, these custom blendmodes allow for control to exaggerate and undo the blendmode effects. What this means is you do not have to double up the blendmode effect by duplicating the DisplayObject instance with the same blendmode you can just multiply the single blendmode effect - simple and quite effecient.

So far I have completed the following custom blend modes :

• Add
• Hard Mix
• Hardlight
• Glow
• Subtract
• Stencil Luma
• Extrapolate
• Difference
• Average
• Lighter Color
• Lighten
• Color Dodge
• Stencil Alpha
• Stamp
• Softlight
• Silhouette Luma
• Silhouette Alpha
• Screen
• PinLight
• Phoenix
• Overlay
• Negation
• Multiply
• Linear Light
• Linear Dodge
• Linear Burn
• Darken
• Desaturate
• Exclusion
• Color Burn
• Alpha
• Darker Color

These are working though have issues of dirty-ness on alpha channels (explained below) for blending layers :

• Reflect
• Freeze
• Heat
• Vivid Light

These custom blend modes are currently in development :

• Color
• Hue
• Luminosity
• Saturation
• Dissolve

How to use custom blend modes

I have only provided a method to use these custom blend modes included with the 'Ultimate Blendmode Collection' for Flex and CS4 users. This is because the PBJ files are compiled into a SWC so you will need to be able to reference SWCs from your FLA or SWF compiler to use the custom blend modes I have mentioned. The syntax to apply a custom blend mode can be achieved via any of the following approaches :

or

or you can manipulate the shader

Tips for writing your own custom blend modes

Here are some potentially huge gotchas and lovely time savers for those wanna be pixel shader writers (like myself) :

1. Un-multiply alpha before carrying out your shader algorithm. You might already know that Flash pre-multiplies the alpha channel onto the rgb channels this means that if you want to know what the actual rgb components are you will need to do the following :
   PLAIN TEXT
   Actionscript:

   1. void
   2. evaluatePixel()
   3. {
   4.         float2 uv = outCoord();
   5.        
   6.         float4 src1Rgba = sampleLinear(src1, uv);
   7.         float src1Alpha = src1Rgba.a;
   8.         if(src1Alpha>0.0) src1Rgba.rgb *= 1.0/src1Alpha; //This line un-multiplies the alpha from the rgb channels
   9. }

2. When your done manipulating your blending layer against the base layer it's more than likely you will need to composite your new blending layer and base layers together while preserving the alpha components. The following should be useful for this :
   PLAIN TEXT
   Actionscript:

   1. void
   2. evaluatePixel()
   3. {
   4.         ......
   5.  
   6.         interpolateAlpha = src2Rgba.a;
   7.         inverseAlpha = 1.0-interpolateAlpha;
   8.  
   9.         dst.rgb = src2Rgba.rgb+src1Rgba.rgb*inverseAlpha;
   10.         dst.a = min(1.0, src1Alpha+src2Alpha);
   11. }

3. Make sure you clamp the components you are altering between 0.0 and 1.0 outside these will give you unusual results between tests made with the Pixel Bender Toolkit and from a published Flash movie. This bit of code ought to fix this :
   PLAIN TEXT
   Actionscript:

   1. void
   2. evaluatePixel()
   3. {
   4.         float3 minRgb = float3(0.0, 0.0, 0.0);
   5.         float3 maxRgb = float3(1.0, 1.0, 1.0);
   6.        
   7.         ......
   8.  
   9.         dst.rgb = clamp(dst.rgb, minRgb, maxRgb);
   10. }

4. Because Flash premultiplies alpha and I explained earlier about why you may need to un-multiply alpha from the rgb components. It's important to know from this there is a certain degree of losiness and this article by Mario is a great Actionscript explanation (completely unrelated to shaders) of this and is one among many others crying out for help (like me). You may notice in the example below which demonstrates these custom blend modes (or in your own tests) a certain degree of image dirty-ness and this dirty-ness is due to this. I am still working on a way to reduce or get around this - any ideas are certainly welcome - and I've highlighted the shaders above most affected by this.
5. When applying a shader the input sources for the blending and base layer are automatically set. This is great but doesn't allow for setting any further image4 inputs. From my tests if I do try to do this then the Flash Player crashes every time. This is bug and generally bugging me because I can't complete other custom blendmodes based on random math like the Dissolve blendmode

How to get the custom blend modes

I have placed my PBJ, PBK and SWC files on a code.google project. I have also put together a brief getting started page. If you want to get an idea of what's possible using these custom blend modes the simple example below should help to demonstrate this. Also make sure you try out a few of the various base and blending layers I have set up to see what does what.

References

If you are interested in writing your own blend modes I used quite a few sources in order to collect the algorithms used in the examples seen above - here are the main sources :
http://www.pegtop.net/delphi/articles/blendmodes/
http://blog.mouaif.org/?p=94
http://www.nathanm.com/photoshop-blending-math/

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!

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.

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

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

Download the handy ANT buildfiles here

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

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 ;)

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.

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.

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

Array push vs. Array index

Don't use the push function on an Array instead use the Array length property and set on the Array like so list[list.length] = data; Or if that's not enough for the best performance (about 600% faster) than using push don't use the Array length property at all. To do this keep the Array length as an external variable and increment/decrement it as you add and remove items from the Array.

Array emptying - length 0 vs. A new Array

If you need to empty an Array there is a handy option to do this via setting the Arrays property length to 0. You would think this would be the better option as you are avoiding creating a new Array and ultimately saving memory. Though it's interesting to know as a trade off using length to clear an Array is not faster in performance (in most cases). Using length is more efficient when you might need to clear more than 510 Arrays in a single execution, otherwise creating a new Array via [] is the faster option again.

Var declarations on multiple lines vs. Var declarations on a single line

If you need to declare a few variables it's slightly more efficient to do so on a single line i.e.
var a:int=0, b:int=0, c:int=0;
vs.
var a:int=0;
var b:int=0;
var c:int=0;

Using Xor to swap variables

Using Xor is very handy if you want to swap variables but don't want to create a third variable i.e.

a = a^b;
b = a^b;
a = a^b;
Like most people I thought this would be more efficient but it's not compared to creating a third variable and then doing the swap. In fact it's about 300% more efficient to do the swap this way. Though honestly I still have a soft spot for the Xor method.

var oldB:int = b;
b = a;
a = oldB;


Multiplication vs. Division

When working with Math in Actionscript multiplications seem to always run faster than divisions so instead of 5000/1000 use 5000*0.001 it's about 130% faster.

Type casting comparison

When type casting the keyword as is 250% more efficient than casting by Type(item); Though surprisingly not using either is about 1400% more efficient.

Long vs Short variable names

Though this one is debatable because it results in illegible code. Shortened variable names do give a millisecond or so improvement if iterating many 1,000's of times in a single loop. Though I think this is a last resort in code optimization as the differences are really marginal.

Though it has to be known Object Pooling is not a silver bullet. There are definitely pitfalls to Object Pooling this most of all includes cleaning the Object for reuse. I'll get back to this in just a moment but first I have to talk about Object Pools generally.

In short an Object Pool allows you to retrieve an instance of a particular type of Object by checking it in and out of a resource pool. The concept of checking in and out resources is very consistent when using an Object Pool. Though handling the situation when a pool is empty is not.

There are three approaches I will talk about when handling an empty pool :

1) The Unbounded Pool

The pool has a boundless size and Objects are added as required to the resource pool on check out. This ensures that an Object will always be returned on check out.

2) The Capped Pool

The pool has a constant size and the resource pool is populated during the construction of the pool. This allows you to have all the memory overhead in the pool construction and not during check out. Though when check outs occur to an empty pool it won't return an Object.

3) The Queue Pool

The pool has a minimum size and the resource pool is populated during construction like option 1 it has the benefit of a maximum size - allowing the pool to grow. Unlike option 2 when the pool's maximum size or flood limit is reached and a check out occurs on an empty pool then this request is queued. Requests in the queue will be eventually dropped if not fulfilled within a defined timeout or alternatively resolved once an Object is checked in. This doesn't guarantee that the check out will be fulfilled by the Object Pool but does ensure that pools don't grow uncontrollably and when they reach flood limits that the next fulfilled check out should be the last.

Each of these approaches to controlling the resource pool size have unique benefits and the option you choose depends on how size matters :). Lets say in one scenario that Object memory allocation is inexpensive and having 1,000's to even 10,000's of Objects is no big deal then option 1 is a good choice. Especially considering it's simple and reliable. Though in another scenario where the same number of Objects are checked in as out and as a safe guard when a checkout occurs on an empty pool it can be suppressed then option 2 is a good choice. And doubly so considering a lot of the memory overhead of Object construction is on the Object Pool constructor and the pool will never grow out of your control. Though lastly if you can't suppress check outs on empty pools and the next Object checkout should be the last one and you need to limit your pool size due to the Objects being expensive then option 3 is more than likely the best approach for you.

Now I'll get back to Object cleaning, this sets an Object to the state it was in after construction which is important because check out is a replacement for constructing anew. The scenario when dirty Objects are added into the resource pool is often known as a cesspool and is considered an anti-pattern but honestly it's up to you to wether this worries you or not. Though in regard to Object cleaning it's also important to note this is where a clear pitfall emerges. If the process of cleaning is more expensive than construction then you should really consider not using an Object Pool.

If Object cleaning is important to you it gets interesting when consider the time and place to do this in your Object Pool class. It would seem logical to clean the Object within the check in method to ensure a cesspool never occurs. Though this could limit the Object Pool to containing a specific type of Object. This is because cleaning an Object is almost always subjective to type i.e. cleaning a DisplayObject is different to cleaning a BitmapData. Then thinking about this problem further the solution is "be kind rewind" - so the checkinee must clean before checkin. Problem solved.

And with every problem tackled there is another to solve. Creating an Object is also subjective to type due to parameters it may require in construction :( Unfortunately there isn't as ideal way to construct a Class with a dynamic number of parameters in Actionscript like function.apply offers for Functions. The simplest and most effective solution to this is once again the create process is external also. Another problem solved - hopefully that's all :)

So now that's enough talk on Object Pool's and hopefully it's given you some points to consider when creating your own Object Pool class. There's an example below demonstrating the Object Pool concepts I've used and discussed above and has a small performance victory. What this example demonstrates is the performance cost in reinitializing the particle effect constantly. As you will see there is quite a noticeable difference between pooling or not but when you compare one pool concept over another there's not much difference other than size handling features they offer which could save you performance.

If you would like to download the source code used in this example you can do so here

To reproduce this rotation problem or visual glitch it seems to only occur when the target angle is after PI and the current angle is before (and vice versa). To fix this is quite simple and it's also interesting to see other peoples different mathematical approaches to solving this common problem, I've seen a few and a fix is a fix but here's mine.

Below is an broken down version of the equation I've used to solve this problem where cA is your current radians and tA is your desired radians.

Though this equation can easily be done in a single line which is my preference.

Also further to this it's important that the cA and the tA be normalized so they are not greater than Math.PI*2 or less than -Math.PI*2, if you're not sure then this equation will sort this out for you.

I also understand some people may not prefer to be using the unit radians to express an angle. If this is you then it's really no problem at all, just make sure cA and tA are in degrees and exchange Math.PI to the equivalent degrees value of 180.

I have also included an example SWF below to better demonstrate this situation with and without the fix. To undo the fix change the radio button selection to 'normal' to see the error. In this example the green line is the target angle, the blue line is the current angle and the grey line is the location of PI or 180 degrees.
]]> http://www.lostinactionscript.com/blog/index.php/2008/10/20/simple-rotation-problem/feed/ 2 http://www.lostinactionscript.com/blog/index.php/2008/10/11/flash-in-the-can-2009-amsterdam/ http://www.lostinactionscript.com/blog/index.php/2008/10/11/flash-in-the-can-2009-amsterdam/#comments Sat, 11 Oct 2008 06:45:25 +0000 Shane McCartney http://www.lostinactionscript.com/blog/?p=80 A couple of weeks ago I was asked by Shawn Pucknell director of the FITC events to talk at the upcoming 2009 conference. I graciously accepted his offer with some degree of terror as I've not presented to a group of people quite as large as the FITC event attracts.

There's a great line-up and more importantly a diversity of presenters from David Carson to Joshua Davis, so I think there will be something for everyone.

My talk will be on 'Efficient programming practices in AS3' and this does sound like the title of a quite dusty and dull book. When I proposed this talk among others (as he wanted a few ideas) to Shawn I had these awful visions of someone ranting for what might seem a lifetime by analysing Actionscript syntax examples to get across what might be an interesting point but instead emptyied the room. So in order to make this topic fun and information packed I will present these concepts visually by the well used practice of analogies. The format of the visuals I can't say yet but don't get your hopes up on some song and dance routine.

The talk is going to be really exciting and challenging for me, so that any one who knows a little Actionscript can get at least one takeaway. Enough said, for a line-up of the speakers or presentations follow the links and hope to see you in Feb 2009.