I have created a JSFL script for those who are using the Flash IDE a lot. Renaming movieclips over a timeline with motion-tweens cost a lot of time. Assigning and replacing classes to a certain movieclip could also be done faster, and mostly name of the symbol relates to the names on stage. I have created a 3-step wizard called ‘name it right!’, to speed up your everyday workflow. This command helps you to update a layer name, base class, symbol name and instances on the timeline very fast.
To indicate what happens when you run the command/script:
First select an instance on stage. Go to ‘Commands’ > ‘Name it right!’. You’ll get these three questions.
1/3 Rename library symbol name?
Enter the new symbol name in the prompt.
When you have selected ‘Export voor ActionScript’, it will automatically fill the ‘Class’ according this convention: ‘fileName.SymbolName’.
2/3 The library symbol already has a base class, change it?
Enter the new base class in the prompt.
If there is no base class defined, it will turn on ‘Export voor ActionScript’ and fill ‘Class’ as mentioned above.
3/3 Rename instance name across timeline?
This renames a movieclip instance on the complete timeline. It does not matter if there is a motion-tween on it. You only need to insure there is only one clip on that layer. Otherwise it will give you a note.
It will give you a name suggestion based on you Symbol name, like ‘mcSymbolname’
Cancel means: do nothing.
Install / use the JSFL script
To get it inside the Flash IDE under ‘Commands’, copy the .jsfl file to:
Windows 7 C:\Users\{username}\AppData\Local\Adobe\Flash CS5 or CS5.5\en_US\Configuration\Commands
Windows Vista: C:\Users\{username}\Local Settings\Application Data\Adobe\Flash CS5 or CS5.5\en_US\Configuration\Commands
Windows XP: C:\Documents and Settings\{username}\Local Settings\Application Data\Adobe\Flash CS5 or CS5.5\en_US\Configuration\Commands
Mac OS X: C:/Users/{username}/Library/Application Support/Adobe/Flash CS5 or CS5.5/en_US/Configuration/Commands
Run it by clicking the ‘Name it right!’ under ‘Commands’.
You could assign a key-combination under ‘Edit’ > ‘Keyboard shortcuts’ and then expand the ‘commands’-folder. I used CTRL-ALT-SHIFT-W for it.
Hope you could use it, post your feedback/suggestions below.
I recently started working at MediaMonks where they are using this interesting pattern of coding; behaviors as a class. I started playing with ‘behaviors’ myself to see how this could work for me. If you use this pattern once, you’ll wonder why you did not use it ever before 😉 This post will lead you through some examples and shows some benefits of using it. This post is written with focus on actionscript 3 developers, who can read code and knows already something about object oriented programming. The goal is to learn more and become a better developer.
What is a behavior?
Well I guess everybody knows what it means, but in terms of code I would say that a behavior-class is some kind of a simple controller with a target. It does one thing, it controls the target with a specific feature/goal. The idea is to add functionality by assigning a behavior to an object (composition), instead of extending it to get the functionality (inheritance). That sound complicated, so why not check out what it practically means?
Difference between inheritance and composition
Let’s say you want to program an object that follows your mouse. How would you create it? I would create a class named MouseFollowingSprite which has all functions to do that. Then I would extend or create an instance of that MouseFollowingSprite-class and BANG I’m done 🙂
Typical example of inheritance
class MouseFollowingSprite extends Sprite
Okay, lets write down that killer class: package nl.stroep.display { import flash.display.Sprite; import flash.events.Event;
/** * @author Mark Knol */ public class MouseFollowingSprite extends Sprite { private var _ease:Number;
public function MouseFollowingSprite() { init(); }
private function init():void { this.addEventListener(Event.ENTER_FRAME, handleEnterFrame); }
private function handleEnterFrame(e:Event):void { update(); }
(You see that? It’s nicely done with some eased motion :D)
I have never seen a problem with extending, but I had troubles with finding a good way to add other kind of functions to this type of classes. In terms of OOP, is a rule to write classes with a single responsibility, and we already passed that one. But imaging you want your mouse following sprite also to scale when you scroll with your mouse wheel. Well that would be easy: Just create a class named ScrollWheelScalingSprite, which extends MouseFollowingSprite. Now it has both functionality, when you would create an instance of it.
Let’s create our ScrollWheelScalingSprite, it would like this: package nl.stroep.display { import flash.display.DisplayObject; import flash.events.Event; import flash.events.MouseEvent;
/** * … * @author Mark Knol */ public class ScrollwheelScaleSprite extends MouseFollowingSprite { private var _ease:Number; private var _targetScale:Number; private var _hasListener:Boolean; private var _deltaRatio:Number = 0.1; private var _minimum:Number = NaN; private var _maximum:Number = NaN;
public function ScrollwheelScaleSprite() { _targetScale = this.scaleX;
init(); }
private function init():void { stage.addEventListener(MouseEvent.MOUSE_WHEEL, handleMouseWheel); addEnterFrameListener(); }
private function handleMouseWheel(e:MouseEvent):void { _targetScale += e.delta * _deltaRatio;
if (!isNaN(_minimum) && _targetScale < _minimum) _targetScale = _minimum;
else if (!isNaN(_maximum) &&_targetScale > _maximum) _targetScale = _maximum;
addEnterFrameListener(); }
private function addEnterFrameListener():void { if (!_hasListener) { this.addEventListener(Event.ENTER_FRAME, handleEnterFrame); _hasListener = true; } }
private function removeEnterFrameListener():void { this.removeEventListener(Event.ENTER_FRAME, handleEnterFrame); _hasListener = false; }
private function handleEnterFrame(e:Event):void { update(); }
if (Math.abs(this.scaleX – _targetScale) < .01)
{
removeEnterFrameListener();
}
}
}
}
[/as]
Let's go some deeper. What if you want a ScrollwheelScaleSprite which should not follow our mouse? That would be a problem, because it already has that functionality. However you could hack around around by adding some protected booleans, to enable the actual functions of the class. Name them like _mouseFollowingEnabled. When your class extend some other classes, you’ll probably need a _scrollWheelScalingEnabled too. In the constructor of the new class you just turn on/off the booleans and your done. But then again, if you want to use this to Bitmap, you have a problem, you cannot extend a Sprite and a Bitmap at the same time.
I mean, this is how we code, right? All classes have one responsibility, but could this example been done better? While writing, this post reminds me in a way to this older post of Keith Peters; you should read it. It also has a interesting discussion.
Create behaviors
As already stated, a behavior class is a controller. It deals with an object (we call it target) to add the actual behavior. Now I don’t think extending is bad, but I think we should use it with care.
Let’s create an abstract behavior class, which can be extended. (This is not needed, but very helpful for accessing the target and prevent duplicate code) [as] package nl.stroep.behaviors { import flash.display.DisplayObject;
/** * @author Mark Knol */ public class AbstractBehavior { protected var _target: DisplayObject;
public function AbstractBehavior(target: DisplayObject) { this._target = target; } } }
I think this does not require lots of explanation. We have a class, it saves a target that is passed from the constructor. We can do lot’s of stuff inside a behavior from this point.
Now, let’s convert our MouseFollowingSprite to a MouseFollowingBehavior, which should extends the AbstractBehavior. Most drastic change is to convert ‘this‘, to ‘_target‘ and change the constructor to make it an actual behavior: package nl.stroep.behaviors { import flash.display.DisplayObject; import flash.events.Event;
/** * @author Mark Knol */ public class MouseFollowBehavior extends AbstractBehavior { private var _ease:Number;
public function MouseFollowBehavior(target: DisplayObject, ease:Number = 5) { super(target);
_ease = ease;
init(); }
private function init():void { _target.addEventListener(Event.ENTER_FRAME, handleEnterFrame); }
private function handleEnterFrame(e:Event):void { update(); }
This is not magic, but it is very powerful. We can assign this behavior to a Sprite, but also to a Bitmap or Video etc. This would not that easy / possible with inheritance only. The class works standalone and we don’t need booleans to enable or disable the behavior.
Ok, let’s also create the scroll wheel scale behavior: package nl.stroep.art.behaviors { import flash.display.DisplayObject; import flash.events.Event; import flash.events.MouseEvent;
/** * … * @author Mark Knol */ public class ScrollwheelScaleBehavior extends AbstractBehavior { private var _ease:Number; private var _targetScale:Number; private var _hasListener:Boolean; private var _deltaRatio:Number; private var _minimum:Number; private var _maximum:Number;
public function ScrollwheelScaleBehavior(target: DisplayObject, ease:Number = 5, deltaRatio:Number = 0.1, minimum:Number = NaN, maximum:Number = NaN) { super(target);
if (Math.abs(_target.scaleX – _targetScale) < .01)
{
removeEnterFrameListener();
}
}
}
}
[/as]
Now we can assign a behavior very easy:
Example of applying the behaviors
var sprite:Sprite = new Sprite(); new MouseFollowBehavior(sprite); new ScrollwheelScaleBehavior(sprite);
You are now free to add the behaviors you’ll need, and leave the one you don’t need. It’s like creating little plugins. Fun eh? It’s nice to add parameters to the constructor, to make it less static. The other fun part is that if you build a behavior right, you could copy/paste it to another project or in you library, because it has no dependencies to classes you don’t want or need. Of course, this is not something new, you could have seen this in temple-lib but also the Hype-framework too, and maybe lots of other framework probably use this pattern in a way.
Now we know the difference: Inheritence:“I want a Sprite that follows my mouse” Behaviors:“I want something that makes a Sprite follow my mouse”
Killing the behaviors
The code examples in this post does not have any function to remove it, but if you want to remove a behavior, it would be wise to assign the behavior to a variable, and create a destruct() or destroy() function inside the behaviors to remove listeners and references to the target etc, and then set it to null.
[as] // Anywhere in your code: var myBehavior:MouseFollowBehavior = new MouseFollowBehavior(myMc);
// Somewhere in your code where you want to remove the behavior: myBehavior.destroy(); // a public function which removes all listeners, references etc myBehavior = null;
Conclusion
Behaviors are a cool and give clean reusable classes and I think we should use it more. It’s probably not new for you and the inheritence-example is not very realistic, but I hope it’s refreshing to look at it again. If you want to learn more design patterns, I also recommend this site.
If you think back on how you have coded in the past, what would you change now you know this pattern? BTW I want to learn more too, so don’t hesitate to leave some nice feedback below.
Oh, maybe you haven’t heard, but something unexpected will happen if you hold CTRL and click on the facebook like-button (found that in a YouTube comment; very lame).
Finally I have created and finalized my Actionscript 3 Event Generator, which was buggy but now it is very nice 🙂 As stated on twitter, if you are a flashdeveloper and use custom events in actionscript 3, you should use this tool because it helps you create custom event classes very fast.
Features: – Fast variable adding – Event type generation (static constants). Just use lower camelCased variables and they will be formatted nicely. – Meta data for a event dispatcher class. – Automatic clone() function – Automatic toString() function
I created a tool to created ‘grouped’ value objects nicely and very fast. It is using private classes. I found it useful enough to share it with you, so maybe if you are in need of such a tool, you are free to use it.
I am working on a Pie-chart class. Data visualisation is fun, so I want to create my own pie-chart. Reinventing the wheel (creating another pie-chart) is a good thing if you want to create a custom wheel, so you know how to modify to make it fit your needs. Now this post is not about the pie-chart, but about something I discovered inside the graphics class. Most flashcoders knows you can draw lines using graphics.lineTo. There is another way of drawing lines in actionscript, using the graphics.drawPath and graphics.drawGraphicsData function. Let’s take a look at it.
graphics.lineTo
The good old method. Drawing a line from point (x:100, y:150) to point (x:300, y:300). Check out these four lines of clear code. graphics.clear(); // start with blank canvas graphics.lineStyle(2, 0xFF9900); graphics.moveTo(100,150); graphics.lineTo(300,300);
graphics.drawPath
Now, you could also use this alternative way of drawing. There is no such thing as creating circles or squares using this method, only manual. It is using commands (moveTo, lineTo, curveTo) and has a separate list of data containing the actual values. All values in the data-list represents the x-positions (odd values) and y-positions (even values). So we are pushing x, y, x, y etc. When using CURVE_TO, you need to define four values; controlX, controlY, x, y. Take a look at the code: var commands:Vector. = new Vector.(); var data:Vector. = new Vector.(); commands.push(GraphicsPathCommand.MOVE_TO, GraphicsPathCommand.LINE_TO); // add 2 commands, moveTo and lineTo data.push(100, 150) data.push(300, 300); // push all values into data-list
graphics.clear(); // clear the canvas graphics.lineStyle(2, 0xFFCC00); // Set the stroke style graphics.drawPath(commands, data); // finally, draw it all As you could see, you need to write a bit more code. As you can see you can combine the graphics.lineStyle and the graphics.drawPath functions, so its not completely new.
By the way, did you know you could push multiple items to an list at a time?
graphics.drawGraphicsData
Be prepared, 12 lines to draw the same a line. var commands:Vector. = new Vector.(); var data:Vector. = new Vector.(); var path:GraphicsPath = new GraphicsPath(commands, data); var drawing:Vector. = new Vector.();
var stroke:GraphicsStroke = new GraphicsStroke(2); stroke.fill = new GraphicsSolidFill(0xFF9900); // The stroke definition with a fill
commands.push(GraphicsPathCommand.MOVE_TO, GraphicsPathCommand.LINE_TO); // add 2 commands, moveTo and lineTo data.push(100, 150) data.push(300, 300); // push all values into data, odd represents the x-positions, even represents the y-positions. So we are pushing x, y, x, y etc. drawing.push(stroke, path); // collect all data inside one list
graphics.clear(); // clear the canvas graphics.drawGraphicsData(drawing); // finally, draw it all
The drawGraphicsData function forces you to push all data into a new list. The fun thing is, you feel very exited when you have the last example running. I don’t know why, but getting advanced stuff working feels good. Note, for the last example we need to import these classes to draw that orange line. Five classes for one simple orange line, pretty impressive eh? 🙂 import flash.display.GraphicsPath; import flash.display.GraphicsPathCommand; import flash.display.GraphicsSolidFill; import flash.display.GraphicsStroke; import flash.display.IGraphicsData;
Borders/fills
When I first started to use this way of drawing lines, I noticed that I needed 2 lines of code to define a stroke. The fill is the last parameter of the GraphicsStroke class, and I really dislike to define all other optional parameters just to set that one parameter at the end. Oh, without a fill or color, a border is invisble 😉 Still don’t get it! The fill is a fun part of this advance drawing method. Now in the normal lineTo-world we know these linestyles graphics.lineBitmapStyle, graphics.lineGradientStyle, graphics.lineShaderStyle and ofcourse the graphics.lineStyle. Now if you want to create a border to be ‘filled’ with something, you could create a GraphicsSolidFill, GraphicsGradientFill, GraphicsBitmapFill or GraphicsShaderFill.
It is nice to know the same classes could be used to fill a shape, so they could be added to the drawing-list too. That is really a nice part of this advanced way of drawing, just add or remove instances of classes to the drawing-list (it should implement IGraphicsData).
You can now define fills, strokes and multiple paths before you actually draw it on the stage.
Saving graphics; saving numbers
The cool thing of this whole advanced drawing method is that you could save the commands/paths as a file and redo it more easy than graphics.lineTo. If you do generative arts this could be a benefit. There is no official function for saving the data, but you could write it yourself since we are dealing with numbers. When opening a file you could theoretically push all commands/paths/fills inside the drawing-list and you could draw the same drawing. I haven’t test this, but maybe you could save the whole vector as ByteArray using ByteArray.writeObject(), compress it and then you have a nice way of saving ‘graphics’. Another benefit, you could delay ‘the draw’ and still collect data which could be drawed later. Very handy if you are doing heavy generative arts.
Conclusion?
It is not easy to draw lines using the the advanced method, since you are dealing with vectors with numbers, instead of lines. It is cool to have every graphic-thing as a separate classes and fills are nicely done and easily swap-able. Graphics data is now more flexible. Adobe could add more graphics classes. I hope they will add support for custom strokes (like Illustrator). At the other side, most things still fit in the good-old lineTo coding-style, which is very clean and straight-forward. Anyhow, it is nice to see a new way of saving graphics.
When you are drawing lots of lines, this advanced way should bring better performance since it is delaying the actual draw. I haven’t benchmarked how much exactly, but since you can mix graphics.drawPath with graphics.lineStyle, it feels graphics.drawGraphicsData is syntactic sugar which has the benefits noted I already mentioned.
I also wonder if it there would be a performance boost if you create your own lineTo function (which only pushes data to a list) based on the graphics.drawGraphicsData, with one drawNow() function.
Hope this will inspire you to share other or new possibilities. var theEnd:GraphicsEndFill = new GraphicsEndFill(); // thanks for reading
Every one should write code that performs well. Do you use loops in your code? This is a simple trick everyone could apply to his loops.
How you write a loop
Mostly when people are writing loops, it looks like this: for(var i:int = 0; i < list.length; i++)
{
var item:MyItem = list[i];
item.doSomething();
item.doAnotherThing();
}
[/as]
Now this loops works, but there are some small things that could be improved. If you use lots of loops it should be needed to improve your loops, but I hope this is just nice to know anyway.
The optimized version
Take a look at the improved loop: var item:MyItem; var total:uint = list.length; for(var i:uint; i < total; i++)
{
item = list[i] as MyItem;
item.doSomething();
item.doAnotherThing();
}
[/as]
What is improved in this loop? If you take a close look in both loops you will see I access the list-item once using list[i], and assign it to a variable called item. I don’t what it is, but for me it looks like most people who write javascript always use list[i] instead of creating a var of it, is that right? It is important to know you don’t need to create the var inside the loop, but create it once outside the loop, and (re-)use it while looping. I forget this most of the times, but it is a good practice to check if all the variables you are using inside a loop. Most of the times variables could be defined outside the loop, which could increase performance big time.
The second thing is to define a variable called total, which pre-calculates the length of the loop as a local variable. If you don’t define it, the FlashPlayer checks the length of the Array every time in the loop, now it is like a constant. Note, when you are removing items from the list, you should ajust the total-variable too, since the total does not equal the length of the list anymore ofcourse. 😉
Another thing you probably noticed is that I used the ‘as’ keyword to give the FlashPlayer a direct hint of the type of variable. This another way of casting, and slightly faster than MyItem(list[i]).
Some other small things are to use uints for i and total in loops if you are using positive numbers. Another small thing is that you don’t have to define i = 0, only when you are using nested loops or re-using the i or j in the same function/scope.
Want a more freaky way to define the same optimized loop? for(var i:uint, item:MyItem, total:uint = list.length; i < total; i++)
{
item = list[i] as MyItem;
item.doSomething();
item.doAnotherThing();
}
[/as]
Are you using FlashDevelop? You could this for-loop snippet (scroll down).
Most of the loop-optimisation tips also applies to javascript.
I am really impressed by all molehill demos which already build. Molehill is the codename for GPU-accelerated rendering for flash. However I was kinda depressed when visiting the presentation Making A Molehill Out Of A Mountain on FITC Amsterdam. Accessing the GPU is really low-level. That is great news because it opens lots of possibilities, but it is depressing because it is low-level. Even if you are trying to be an pro/expert, you must be a freaking uber-talented geek to understand and be able to write shaders, assemblers, assembly (??) code which is needed for the real Molehill stuff. Respect for that. I am a geek, but that is way too difficult for me. I have tried to look to the content of AGALMiniAssembler from adobe, but I think thats not written by real humans. 😉
Great frameworks
My point is; we have to wait for great frameworks. There are already 3D engines which are molehill-enabled (Alternativa3D, Away3D and some others). The GPU gives render powers. A brilliant idea of Tom Kcha is M2D. He came up with a 2D rendering system which uses the GPU inside a framework. I think this is a little jewel and is experiment-worthy, because I am using 2d content most of the time. The example codes are understandable. No freaking shaders, but normal AS3-like code. I think there will be more frameworks which will use the power of GPU rendering soon.
Experimenting with M2D – Molehill 2d
If you want to see my test with M2D, take a look at my two different versions of 2000 smilies. I have noticed they both use a lot of CPU but the M2D version renders about 3x smoother. I think this whole idea of 2d content on GPU is awesome! 😀 Adobe should implement this in a way to the ‘normal flashplayer’. Yes, there are limitations in the current workflow. You are mostly limited to bitmaps only, so you’ll need to know something about real sprites and blitting. However if you are using the example files, it will convert lots of different types of object (movieclips, shapes, animated-gif-like-sprites) to bitmap-objects for you. Imaging if games will implement this, they will have more rendering powers for free; that is huge and promising.
On twitter I said M2D did not support alpha, but in the latest version there is an alpha property too. I still wonder how much M2D could be optimized to get most out of 2d GPU rendering.
Getting started with Molehill
Now, you want to use Molehill to, right? 😀 Let’s do it! Setting up a molehill-enabled environment is relative easy if you are using FlashDevelop:
1. Download the activeX incubator FlashPlayer for windows. IE uses activeX, and FlashDevelop tabs use IE. 🙂 2. Download latest version of flashdevelop 3. Download nightly build of the Flex SDK (You’ll need 4.5.0.19786) 4. Download this flashplayer_inc_playerglobal_022711.swc. This includes classes for Molehill. Rename it to playerglobal.swc and place it at (flex_sdk location)\frameworks\libs\player\10.1 5. Create a new AS3 project in FlashDevelop, and target FlashPlayer version 10.1 in the project properties. Keep the properties open and choose to publish in a tab. Then navigate to tab Compiler options, and add -swf-version=13 to the Additional Compiler Options. In the custom path to Flex SDK (same tab) you’ll need to point to the Flex SDK folder you have just downloaded.
This should be enough to start building molehill projects.. and also to use M2D:
Getting started with M2D
Now, download the M2D.swc (or latest version from github) and add it to your lib-folder. Right-click > add to library and your basicly ready to start building 2d GPU-accelerated flashcontent!
The future is bright. Can’t wait to see more great+fast performing examples using this technology. Now.. start making cool shit already!
I have created a JSFL script for those who are using the Flash IDE a lot. Renaming movieclips over a timeline with motion-tweens cost a lot of time. Assigning and replacing classes to a certain movieclip could also be done faster, and mostly name of the symbol relates to the names on stage. I have created a 3-step wizard called ‘name it right!’, to speed up your everyday workflow. This command helps you to update a layer name, base class, symbol name and instances on the timeline very fast.
I recently started working at 
Finally I have created and finalized my Actionscript 3 
I am working on a Pie-chart class. Data visualisation is fun, so I want to create my own pie-chart. Reinventing the wheel (creating another pie-chart) is a good thing if you want to create a custom wheel, so you know how to modify to make it fit your needs. Now this post is not about the pie-chart, but about something I discovered inside the graphics class. Most flashcoders knows you can draw lines using graphics.lineTo. There is another way of drawing lines in actionscript, using the graphics.drawPath and graphics.drawGraphicsData function. Let’s take a look at it.
Every one should write code that performs well. Do you use loops in your code? This is a simple trick everyone could apply to his loops.
I am really impressed by all