While working on a game, I created a function spawner. The idea was to make a function which would call a function like createEnemy() a hundred times with an interval. So I quickly created a static function. Yes, I could use Chain, but this function was created in a minute and I haven’t thought of that class.
public static function create(total:int, interval:int, func:Function, delay:int = 0):void { for (var i:int; i < total; ++i)
{
setTimeout(func, delay + interval * i);
}
}
[/as]
This function is easy to understand. Maybe it's not needed as a new class, but it could be handy in a game. By the way; I use setTimeout a lot, it’s sometimes easier than the Timer class. You could call the function like this (if it is placed in a class called Spawner): [as] Spawner.create(1000, 1000, createEnemy); // a new enemy should be created after a second, a thousand times
While profiling this peace of code I found it is a bit intensive and could be optimized very simple.
So, what is the problem? This profiler shows the memory usage of a empty flash calling the example Spawner.create function: I have used FlashPlayer 10.1 (release) and the FlashDevelop for profiling.
See the column ‘count’, which represents the current count of objects. For some reason there are a lot of ‘Functions’ (2000?). There are also 1000x ‘Array’ and ‘SetIntervalTimer’. Now I don’t know what that exactly means, but it is a lot, right? I haven’t used Arrays yet, so setTimeout must be using arrays internally. I think because the intervals are created inside a loop, they are already instantiated and there must be some references to objects too. Inside this test, the createEnemy function is empty, so it is a bit unexpected what happens here.
So I tried to rewrite the code a bit to see if it makes a difference if they are not instantiated at the same time, but create a new interval after one time-out has been called (after each other). It is not very hard to do, so here it is: public static function create(total:int, interval:int, func:Function, delay:int = 0):void { setTimeout(createNext, delay, total – 1, interval, func, delay); }
private static function createNext(total:int, interval:int, func:Function, delay:int):void { if (func != null) { func(); if (total > 0) setTimeout(createNext, interval, total – 1, interval, func, delay); } }
The Spawner.create works the same as before, only it is not creating all intervals inside a loop, but passes a reference to the function to the new timeout. Now take a look at the profiler again:
There are less ‘Functions’ and only 11 ‘SetIntervalTimer’, which could be considered as better. Conclusion: If you are using [i]setTimeout[/i], you should be aware how to use it and check if you could improve it in your own app/game.
This article is some training for your JavaScript skills. I love Actionscript , and I am also starting to like JavaScript. However, coding in JavaScript (if you’re an flasher) feels like Actionscript 1.0. It’s a pity there aren’t decent editors, especially if you want to write object-oriented-code, which is kinda possible with JavaScript . At the moment I think VisualStudio has a great (best?) JavaScript editor, but I really wish there was a tool for JavaScript like FlashDevelop (a clean editor for Actionscript projects) with great intellisense, code completion and snippets etc. But we should not focus on tools, lets focus on the language and get the most out of it. HTML5 is an hot topic today, and it seems using JavaScript is an important part of it, so why not learn more of it? I have seen some stunning HTML5 examples over the last year. As a developer it is very interesting to see how others code JavaScript. By the way; Personally I find it very funny to see how JavaScript has changed it’s ‘image’. Some of us remember the good days in Netscape. JavaScript was .. *kuch* not fast and associated with ugly rainbow mouse pointers and aggressive popup screens. Now it is mostly associated with HTML5, which has a more friendly association 😉 I think the ‘image’ of JS has slowly changed after great frameworks like jQuery have reached the developers. I think jQuery is awesome, I advice to give jQuery a try.
Anyway, there are (ofcourse) some techniques to code like Actionscript in JavaScript. These snippets have helped me to understand object oriented JavaScript. For too long I did not even tried to learn what was possible with JavaScript because I thought it was a very limited language. Maybe some information is outdated; I am still learning, so please share your feedback.
Object oriented javascript
In javascript it is possible to create sort-of classes, public and private vars, getters/setters and there are even constructors. A function could be seen as a class. This is a bit strange at first, but if you use it for a while you will understand. Now lets create our own class right now. Note: Javascript is prototype based language and natively hasn’t real classes, so all we do is work around this, and find some structure in the architecture of our applications/games.
Lets port some stuff of this Color Class to javascript. It has private vars and public functions.
Declare classes
Defining classes is as easy as defining functions, because you could consider as almost the same. After creating an function, you could already make some instances of it. The example below creates a Color class with a public variable called value. After that we create 2 instances of the Color class with some other values.
Note: I use the same code conventions as Actionscript: Classes should be UpperCased, functions/vars should be lowerCased and constants should be FULL_CAPS. I use an underscores for private vars. function Color( value ) { this.value = value || 0; alert(“Color created with value: ” + value) }
var myRedColor = new Color(0xFF0000); // create instance of Color (a red one) var myOrangeColor = new Color(0xFFCC00); // create instance of Color (an orange one) alert( myRedColor.value ); alert( myOrangeColor.value );
Public / Private
In actionscript it is very useful to use encapsulation, which is a mechanism for restricting access to other objects. The previous+following example should work in all browsers. The difference between public and private vars/functions in javascript can be declared like this: function Color( value ) { // public variable this.value = value || 0xFFFFFF; // set default value to 0xFFFFFF for parameter if it isn’t defined
// private variable var _name = “test”;
// public function this.getRandomColor = function( ) { return Math.random() * 0xFFFFFF; }
// private function function getNiceColor() { return 0xffcc00; } }
// create instance of Color var color = new Color(0xFF0000); alert( color.value ); // returns red color alert( color.getRandomColor() ); // returns random color
// not possible : alert( color.getNiceColor() ); error in console; property does not exist, because function is private. alert( color._name ); // error in console; property does not exist, because variable is private.
I think with this principles (maybe in combination with namespaces, see below) you can create clean javascript code.
Packages > Namespaces
Now before using classes in javascript I had some conflicts with function and variable names because there were unwanted duplicates. I have written a little helper tool to use namespaces. It helps to prevent those conflicts. Now it looks more like Actionscript 3, only there is no such thing like ‘imports’. This snippet works in all browsers. /// create namespace like ‘com.yourcompany.projectname’ function Namespace(namespace) { var parts = namespace.split(“.”); var root = window; for(var i = 0; i < parts.length; i++)
{
if(typeof root[parts[i]] == "undefined")
{
root[parts[i]] = {};
}
root = root[parts[i]];
}
} // creating my own namespace here
Namespace("nl.stroep.utils");
nl.stroep.utils.Color = function(value) // create class inside package
{
this.value = value || 0xFFFFFF;
} var myRedColor = new nl.stroep.utils.Color(0xff0000);
alert(myRedColor.value);
[/as]
Getters and Setters
Now it is possible to use getters and setters. NOTE (!): Ofcourse this method does not work in IE, so this is pointless but also a bit cool to see how far we could go. Anyway there are 2 ways to define them. Read more about it here. I think the __defineGetter__ way is better; it looks ugly but you still have access to private objects.
Take a look at this getter/setter declaration example. It’s not as clean as AS3 getters/setters but it works like a charm in my browser :P [as] function Color( value ) {
/* public getter */ this.__defineGetter__(“value”, function() { alert(“getter called; current value: ” +value); return value; });
/* public setter */ this.__defineSetter__(“value”, function(val) { alert(“setter called; new value: ” +val); value = val; });
// public variable. For a strange reason I have to put this below the get/set definition. this.value = value || 0xFFFFFF; }
// create instance of Color var color = new Color(0xFF0000); color.value; // getter color.value = 0xff0000; // setter
Constants
Javascript has a const too, you could use it instead of var. Ofcourse this is not implemented in IE, so it is also pretty pointless to use.
Mix them all
Now lets use namespaces, getters/setters and private/public variables and functions together. This is a simplified ported version of this Color Class. With this class you can modify the red,green and blue channels of a color individually. In the original class it is possible to lighten/darken the color too, but for this post I left these functions, because this only illustrates the possibilities of nice OO javascript. Namespace(“nl.stroep.utils”); nl.stroep.utils.Color = function( color ) { /* PUBLIC FUNCTIONS */
this.grayscale = function( val ) { val = val || 0; if (val < 0){ val = 0; }
if (val > 255) { val = 255; }
/* PRIVATE VARIABLES */ var _value = color; var _red; var _green; var _blue;
/* PUBLIC VARIABLES */ this.value = _value;
};
With this javascript class, you could use it like this: var color = new nl.stroep.utils.Color(0xFFCC00); // define orange. color.green = 0; // remove green.. now it is red.. color.blue = 255; // add some blue.. now it is purple.. alert(color.value.toString(16)) // alerts FF00FF and that is purple.
Hope you enjoyed this article. Feel free to share or comment.
This post is mostly targeting to developers who like to dive deeper into actionscript and are searching for a another way to start a project. In my opinion there are missing a lot of these types of posts, so I just share mine. This post is a collection of post I have never posted in 2010. I hope it will trigger more flashdevelopers to share there view on this topic. Disclaimer: There are several ways to start a flashproject, and I don’t think my examples are the best way, but I hope they challenge you to think about your setup. In case you work in a webteam, it’s important to work in a way that is understandable and transparent. You should talk to each other what you really need and expect from each others code.
Use existing frameworks (?|!)
There are companies who use very transparent architecture frameworks like PureMVC or RobotLegs, others use there own frameworks and build on that. Personally I don’t use that big frameworks (yet) as architecture base, because I don’t create that large applications/sites and for now its more overkill than helpful I guess. There are also some helper frameworks like casalib and templelibrary around, which can provide you a set of (util-)classes and interfaces. This post is not created to discuss if its better or not to use these already accepted frameworks. If it fits your needs and you want to standardize flash coding; just use it; they are great and very helpful. At the other hand some (mostly larger) frameworks are hard to understand and requires some learning curves / basic skills. I am currently working on flashflowfactory, which is designed to be an easy-to-learn framework, mostly for medium/small websites which needs deeplinking and page transitions; you should check it out. So at the other hand, it is cool to create your own framework and you will learn a lot from it, but there is already lots of good stuff on the internets.
Building
Get your tools For most projects I’d love to use FlashDevelop. It’s my code editor of choice. I’m Dutch and this is a free tool, so there is no need to look at other tools 🙂 Download and install it and follow the instructions. Install the latest debug activeX player and download the latest Flex SDK. After you tried FlashDevelop for a while, just donate some money to support the project. Even if your Dutch. Just give back. Oh, and download the duplicate plugin and you don’t want to switch to another tool ever.
Setup of the site assets I love to store my assets inside an SWC, which are viewable (with some logic) in Flash IDE too. Mostly I use the Flash IDE to generate an SWC. All my ‘views’ like pages, vectorimages, bitmaps, icons and advanced animations are stored inside that SWC. This of course except the assets I want to load from external sources. I don’t use much code on the timeline, except some play/stop()-commandos, because it stopping an animation cannot be done more clear than on the timeline. I don’t feel ashamed anymore to say that I sometimes put code on the timeline (think of a preloader, framelabel jumps etc). As long as you keep the project structured, this should never be a problem. All my views (that need to be accessible from code) are linked to external classes. In this way I can get the most out of the Flash IDE too; there are lots of animation- and designthings that cannot be done quickly with code. So don’t forget the Flash IDE; It’s a really powerful tool. Don’t loose your creativity on code only.
So what is the plan? It’s important to plan your website/application. If you want to be serious, at least just make a small plan. In case of a webteam: Make a checklist what should be done, where you are currently working on and what is done. Having a list of todo’s helps to be more open. In case of a personal project: Most projects fail if you don’t write things down, because you loose overview and also the interest for your potential killer-app. Just break things down into small peaces.
Getting control
What do you need to get started? Some people start creating cool UML diagrams, others just grab some piece of paper. Others start in Photoshop creating the design rightaway, but it would be helpful to create a wireframe in some cases. What the most important thing is, is to be aware of what you are going to create and which classes you need. Don’t start to think about the features (yet), think plain. What is the essence of this app? What does it needs to do before it ‘works’? What is needed to get to this point, and how would you built it? Think about how to setup a useful way for navigation. You want to use deeplinking? At what point/place should this happen? What kind of events do we need? Are there recurring elements? Which things should be (dynamic) components, what should be fixed/hardcoded? Which creative parts are hard to develop, and which parts should be more creative? Also add to your todo-list the hours you think it would take to build it; you get more awareness of how to deal with time managing.
Start collecting puzzle pieces It’s time to collect things we need. It maybe sounds stupid, but why wouldn’t you start with collection the global things? These things are important. Think about if you want to use frameworks and which parts you would code yourself. Are you going to use programmatic tweens? You could use a tween engine. Create a basic HTML file, embed the flash already. Create your package-structure. I don’t know if its is the way, but I love to write down stub- or pseudo code. Create as much empty classes which need to be filled. Keep in mind you need to refactor a lot of times if you start like this, but I don’t mind. This forces me to keep thinking about the structure, refactoring is a good thing, right?
Learn from the past; find recurring elements Now I have created a mini framework for setting up a website with pages. In my professional life I use Flash to create a lot of viral websites. Most of the pages are not the same, every design is different and has it’s own ‘thing’. So most of the times I find it difficult to fit this into a system. At the other hand, I like to prevent to have too much abstract classes; I want too keep things clear. However the challenge is to find the recurring elements and create a system which can be reused later. This is one of the reasons why I am developing flashflowfactory. Some examples; I always want to have deeplinking, I want to have a transition when I go from page A to page B. And I would love to have the ability to go from page A to page C etc. I also want to send simple events/notifications to anywhere in the application. Well the framework covers that already, however it is still in progress. I love to keep its simplicity in usage, but also the fact I already used it in multiple projects and it slowly satisfies my everchanging needs.
Keep the freedom From the coding perspective, I love to have a structured project, even if the designs are not that consequent. Mostly I start with creating the raw pages. These are mostly the starting point. I have already said I am using SWC’s for the views; I point the base Class of a MovieClip to my classfiles (.as). Inside my class file I say it extends Sprite. As Classname I mostly give the same path, only I add VC (ViewComponent) after the name. For example; When creating a contact page, I use ‘ContactPage‘ as base class, and ‘ContactPageVC‘ as class name. This allows me to add the view from code (by adding the view-component) or to just put it directly from the library on the stage inside the Flash IDE. Yes, it is a bit pain in the ass to apply this to lots of pages/components, but it gives freedom of how to use your assets. If anyone knows a better/more simple solution, let me know!
I am working very hard for the first release of flashflowfactory. There are lots of code tweaks and more improved documentation already. More about the framework and some introductions can be found in this earlier post. Now I really want to make it easy for lots of people. I already got some helpful tips from users/testers. So I am collecting everything that is needed to make it as usable as possible. I am working on demo projects and it is still alpha.
Serving as SWC
Nowadays every AS3 framework is being served as SWC. This makes it very easy to add it to any project. So I really needed to create this too 🙂 However I thought it was easy, but I stumbled to a little problem:
I am using TweenLite, but is is not legal to serve code from GreenSock/TweenLite on googlecode, because of the special license model. Now all the flashflowfactory transitions make use of TweenLite. So when I would like to create an SWC of the framework + the transitions, I must include TweenLite. So, and that is the only option, I need to serve the transitions as a separate package. This makes me think. I am using TweenLite because it is my favorite tweenengine. I could use another tween engine, with a MIT license. But then the users of the framework should fully switch to that engine, or include multiple tweenengines in their projects (which would be crazy). So the new plan is to create an SWC of the framework without any default transition. Then I will serve multiple packages with the default transitions ported to some famous tween-engines, so you could make a choice. If you want to use Tweenlite you should download the TweenLite pack etc.. I have created the packs for TweenLite, Tweener, gTween and eaze-tween. I thought this whole license-thing was a problem, but when I take a closer look; Now you can make use your own favorite tweenengine. I think more choice is better (in this case).
Here is a simple list with links to AS3 tween engines. In this post I am comparing TweenLite / TweenMax, Tweener, Tweensy FX, Eaze Tween / EazeFX, gTween, BetweenAS3. I don’t know if it is useful, but now I have all data on one page.
Previous year I was working on a little class called Chain. Chain is a delayed function-calling util class for AS3. Now I was already working at a updated version which could animate too (see this tweet from last year). Basically it has become a small tween engine. You have to know there are much better tween engines, like TweenLite, Tweener, eaze tween, gtween etc.. So you don’t need a new tween engine, and definitely not this one 🙂 I just love to share some thoughts.
I just finished this to see how far I could come and where I have to deal with by creating such an engine. It is just fun to develop classes which will bring you to a higher level of coding, because I really want to become an actionscript sensai master or something. When starting the animation part, I was very inspired by this post, which has the same idea of combining jQuery-syntax-style with tweening, which I was already using in Chain. Making a class chainable is very easy, you just have to return the class instance on every public function, like this: package { public class ExampleChain { public function add():ExampleChain { trace(this, “saying hi!”) return this; } } } This already allows you to do this: var chain:ExampleChain = new ExampleChain(); chain.add().add().add().add(); I think this is very powerful and we should use more chaining.
Anyway, Chain was originally created to make delayed function calling. I wrapped code around this feature, so it is still usable like it was intended, only I improved some functions and added tweening. You can pass a complete handler to the play() function. And it is also possible to reverse the full chain, even with animation.
Here again, the original simple usage var myChain:Chain = new Chain(); myChain.add(one, 2000) .add(two, 500) .add(three, 1000) .play(3, onChainComplete); // play 3 times
// some functions function one():void { trace(“one”) } function two():void { trace(“two”) } function three():void { trace(“three”) } function onChainComplete():void { trace(“done.”); myChain.destroy(); } /* trace output: one two three one two three one two three done. */
Animated chain example var myChain:Chain = new Chain(); myChain .animate(myMc, {x:300,y:100}, 700, Easing.elasticInOut) .wait(200) .animate(myMc2, {rotation:100, alpha:0.5}, 500, Easing.quartIn) .wait(200) .play(2, onChainComplete); // play 2 times
function onChainComplete():void { trace(“done.”); myChain.destroy(); }
As you can see, you can still chain things, it animates multiple movieclips, and it can be played multiple times. It is very readable, which I really like. It works also in reversed order too, so you can reverse the full animation (pointless but cool)!
If you don’t want to animate, but instantly apply settings to a displayObject, you can use apply(mc, {vars}), of couse this equals animate(mc,{vars},0) but it is more elegant.
To control the Chain, you have can use: stop() Stop playing, use doContinue to play futher from current point doContinue() Continue playing after a stop reset() Reset indexes, start from first point. If reversed, start at last point
So how does it work? Well it is still based on the same old add() function. When you call the animate() function, internally, it is collecting the properties of the tween. Then it is calling the add() function, with a reference to a protected function playTween(), which is always the same. So when you play the chain, it just calling a local function every time, which handles the animation.
For now, I don’t have any special properties; no auto-alpha, no short-rotation, blurfilters or tinting etc. You can only animate properties of movieclips.
So how does tweening (animation over time) work? This is the formula I am using: _target[property.name] = property.startValue + ((property.endValue – property.startValue) * _easeFunc(currentTime – _startTime) / _duration); This needs a little explanation. For example: When you add {x:100} as object to Chain for animation, “x” is the property.name, and 100 is the property.endValue. I am also getting current “x” value of the displayobject (which should move); this is the property.startvalue. Imaging this is currently 75. If you would write down the values into the formula, it looks like this: myMc[“x”] = 75 + ((100 – 75) * _easeFunc(currentTime – _startTime) / _duration)); Now, as you can see, this is more readable. The only thing that is still vague is the ease function. Now I have to say this was a bit hard for me to understand at the first time, but it became very clear when I did understand what is does. I have read the book ‘Making things move’ from Keith Peters (aka bit-101), which is a great reference and eye opening book for programmatic animation, trigonometry and other cool stuff. There is a chapter where animation over time is explained, which was really helpful creating the tween engine, and this time calculation. Now the time calculating returns a ratio, which is needed for the easing functions. I also studied some famous other tween engines; most of them use basically the same formula. By the way, the easing equations are used from Robert Penner.
Now, I really wanted to reverse the animations too. After some headache, the solutions was very simple. The time calculation is a value between 0-1, so I did 1 minus the time ratio 🙂 _target[property.name] = property.startValue + ((property.endValue – property.startValue) * _easeFunc(1 – (currentTime – _startTime) / _duration));
Another problem I had to deal with was the fact that animating 1 thing at a time is very boring. So I invented the animateAsync(), which works almost exactly like the animate(), only you could pass the duration and the delay as separate values. So you can move a clip for 700 milliseconds, and call the next chained item after 75 milliseconds. To compare: when using the animate() function, if you move an item for 700 milliseconds, it will take 700 milliseconds when calling the next chained item. This could cause strange behaviors and isn’t easy to manage (especially when you want to wait till all animations are done), but I its a nice feature I think. Again, even the async’s can be played in reversed order. var myChain:Chain = new Chain(); myChain .animateAsync(myMc, {x:300,y:100}, 700, 10, Easing.elasticInOut) .animate(myMc2, {rotation:100, alpha:0.5}, 500, Easing.quartIn) .wait(200) .play(2, onChainComplete); // play 2 times
function onChainComplete():void { trace(“done.”); myChain.destroy(); }
To clear all references, you should call the myChain.destroy(); function. This clears the references to all added functions, and clears the internal tween list.
update 02/11/2010: – added show/hide/rotate function – added shortRotation option – added scale (no need to define scaleX and scaleY separately) – optimized chain; chain items are stored by duration inside dictionary to save lots instances (where duration is the same) – added Chain.create for fast creation of an instance – updated apply function (extra param; apply on start) – several coding style fixes – added destroyOnComplete to animate() function
So if you are interested in the code, you can find it inside my googlecode: » Chain Tween sources
While working on a game, I created a function spawner. The idea was to make a function which would call a function like createEnemy() a hundred times with an interval. So I quickly created a static function. Yes, I could use Chain, but this function was created in a minute and I haven’t thought of that class.
Quick post for all FlashDevelop and flashflowfactory users. I have created a projectfile and templates for flashdevelop.
This article is some training for your JavaScript skills. I love Actionscript , and I am also starting to like JavaScript. However, coding in JavaScript (if you’re an flasher) feels like Actionscript 1.0. It’s a pity there aren’t decent editors, especially if you want to write object-oriented-code, which is kinda possible with JavaScript . At the moment I think VisualStudio has a great (best?) JavaScript editor, but I really wish there was a tool for JavaScript like FlashDevelop (a clean editor for Actionscript projects) with great intellisense, code completion and snippets etc. But we should not focus on tools, lets focus on the language and get the most out of it. HTML5 is an hot topic today, and it seems using JavaScript is an important part of it, so why not learn more of it? I have seen some 
Here is a simple list with links to AS3 tween engines. In this post I am comparing TweenLite / TweenMax, Tweener, Tweensy FX, Eaze Tween / EazeFX, gTween, BetweenAS3. I don’t know if it is useful, but now I have all data on one page.
Previous year I was working on a little class called