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.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:

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.

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?

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.

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:

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:

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]).

Update: Take a look at this great article about the performance of this casting method. http://jacksondunstan.com/articles/1305

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?

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!

More info:
http://www.flashrealtime.com/m2d/
https://github.com/egreenfield/M2D
http://projects.stroep.nl/m2d/
http://labs.adobe.com/technologies/flashplatformruntimes/incubator/
http://blog.visualjazz.com.au/good-stuff/making-mountains-out-of-a-molehill-how-to/

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.

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

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:

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 good. Conclusion: If you are using setTimeout, you should be aware how to use it and check if you could improve it in your own app/game.

Quick post for all FlashDevelop and flashflowfactory users. I have created a projectfile and templates for flashdevelop.

When you have installed FlashDevelop, it will automatically extract/install itself.

» Download here (flashdevelop flashflowfactory assets.fdz)

Related:
» More flashdevelop assets

This article is some training for your JavaScript skills. I love Actionscript , and I am also starting to like JavaScript. However, coding in JavaScript 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 possible with JavaScript . At the moment I think VisualStudio is the 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 associated with HTML5, which is supposed to be the future and it will be bright I refuse to put my opinion about this topic here.
I think the ‘image’ of JS has slowly changed after great frameworks like jQuery have reached the developers. jQuery is awesome, I advice to use jQuery as default in all sites/apps.

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 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.

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 it is 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. Oh and since javascript looks like as1.0, I sometimes use an underscore before private vars

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:

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.

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.

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.

With this javascript class, you could use it like this:

Hope you enjoyed this article. Feel free to share or comment.

I hope 2011 will be a successful year!

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, and not so much for the newbies to web design or those just starting out in online web design degree programs. 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!

Happy 2011! Please share your thoughts.