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

Currently I have these options added to the Image class:

View image
Views image in new window/tab. I used NavigateToURL to make this happen.

Save Image as..
Saves image on your computer. I used my ImageClass.saveLocal() to make this happen. This is only available within FP10, but I think this is no problem anymore because < a href = "http://www.adobe.com/products/player_census/flashplayer/version_penetration.html" > 93 % (September 2009) has FlashPlayer 10, so most people have it, and I don’t support outdated software

Copy Image location
Copies the url to the clipboard, using System.setClipboard(url). It’s a pity I can’t create a ‘Copy Image’ function, because pushing bitmapdata into the clipboard is only supported in AIR.

Send Image
Sends the url to the mail-client, using “mailto:&body=” + src. Also a pity; I can’t add the image directly into the mail.

How to enable the contextmenu:

I still love this class, I use it a lot. I want to encourage you to please add these kind of usability things to your apps / websites. And share them! Yes, it takes some extra time to create/add it, because this IS the finishing touch, but a lot of people will like this kind of features.

Download
Check out the Image class atgooglecode

check it out
http://code.google.com/p/stroep/
..or directly go to the source:
http://code.google.com/p/stroep/source/browse/