Monthly Archive for June, 2007

Page 2 of 3

Code speed-up tips!

Published on June 14, 2007 in ActionScript and Power-up Media. 0 Comments Tags: , , , , , .

Isn’t it just great how a few simple tricks can speed up your code? Here are some…
Al examples below are based on the fact that calling a method is way slower than just calculating the answer on the fly.
Here are some fast ways to replace common Math methods. In most cases this save half the time or more :!: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

//slow:
z = Math.abs(x);
//faster:
z = (x<0) ? -x : x;
 
//slow:
z = Math.min(x,y);
//faster:
z = (x<y) ? x : y; 
 
//slow:
z = Math.max(x,y);
//faster:
z = (x>y) ? x : y; 
 
//slow:
z = Math.floor(x);
//faster:
z = (x >>> 0); 
 
//slow:
z = Math.ceil(x);
//faster:
z = (x >>> 0) + 1; //mind the brackets! 
 
//slow:
z = Math.round(x);
//faster:
z = int(x); 
 
//slow:
z = Math.pow(x,2);
//faster:
z = x*x; //this one only works faster if the power is a fixed value; for-loops in case of a variable power are most of the time slower than the Math.pow!

Of course most of the above method replacements make your code more sloppy, so I suggest you only use these replacements when the speed of the application really matters (for example in huge for-loops) or in libraries or components which rarely need adjustment.

:idea: If you have any good additions to this list please let me know…

Flower animation experiment

Published on June 11, 2007 in Animation, Graphics and Power-up Media. 5 Comments Tags: , , , , .

Isn’t it just great experimenting with new techniques even though you don’t have any use for it (yet)?
Recently I made this animation of a flower ornament (grabbed from the “Flower Ornaments” font). I tried a couple of approaches to see which had the best result.
If you can see this, then you might need a Flash Player upgrade or you need to install Flash Player if it's missing. Get Flash Player from Adobe.

It was quite obvious I had to use a mask because animating the shape itself would just have been a great mess.
First I tried to use the shapetween to animate the mask, but I abandoned this approach quickly because the flower-shape turned out to be way too complicated to use a shapetween; I would have to make a new tween every 3 or 4 frames.

Then I started to paint the mask frame-by-frame. Each frame I made the mask a little bigger by using the brush tool. It was an time consuming job, but one hour later I got the job done. The result was OK, but unfortunately when I looked at the file size of the fla as well as the swf, it became clear to me that apart from time consuming this method was also space consuming. For just that little flower ornament the swf was already 117kB and the fla was even worse: almost 20mB. It turned out that a dot made by the brush tool has about 50 vector points; you do the math.

I started to think about other ways to get the same result without the huge file sizes.

I thought about using the flower shape as a mask itself and work backwards, brushing away the mask frame by frame. I failed just after I made the mask. Why? I just didn’t know where to start brushing. Because this animation has one start point but many different endpoints (because of all the leaves).

One last try then: a combination of the shapetween and the brush. Since the brush had too many vector points I started off using the oval-tool instead (which has only 8 points).
Using the shapetween would just save me bout half the frames, since I would have to make a new tween every 3 or 4 frames. And on the other hand it would have cost me way more time to make it, as the shapetween is quite unpredictable and I would have to experiment a lot to get the right tween… (this might work better on less complicated shapes though.)

All of this left me with just the oval tool and frame-by-frame approach. Each frame I expanded the oval mask by dragging it’s edges. In about the same time I did the brush version I completed this one and the result was pretty nice; a 17kB swf and a 101kB fla. Not bad at all!

fla and swf sizes
File sizes before and after.

Update (2008-01-30):
I uploaded the source of the animation. You can download it here: Flower Animation source.

Use “this”…

Published on June 11, 2007 in ActionScript and Power-up Media. 4 Comments Tags: , , , , , , .

Because “this” is just great!

Unfortunately many people omit them in their code :cry: . Not sure why though, but my guess is that they are ignorant or just lazy (don’t be offended if you don’t use the this keyword for another reason, but please let me know why).
Even Adobe (and Macromedia before them) neglects the this keyword. None of their examples uses this and it’s nowhere to be found in their own code either!
Shame on them!

At the company where I work we didn’t use the keyword up until a year or two/three ago. Some of us found the keyword to be very handy and convinced the rest (not sure which group I belonged to at that time).

First of all, using the this instance variables supplies you the option to declare a local variable with the same name:

1
2
3
4

this.myVar = "my instance var"; 
var myVar:String = "my local var"; 
trace(this.myVar); //my instance var 
trace(myVar); //my local var

(Note that the above code only works in a class and not in the timeline!)

This can come in really handy when you need to store some temporarily data, during a for loop for example.

The second and most important reason to use this, is that it keeps your code clean and neat. It will help you to visually distinguish the local variables from the instance variables. This is vital if you work in a team on the same project or if other people need to work on your project later on (bug fixing, implementing new feature, etc.)
In all these cases it’s important to scan through someone’s code quickly and see at a glance where a certain variable comes from or is declared. If you omit the this keyword you would first have to scan the entire method to see if, maybe, the variable is declared local in this method. While if you do use the this keyword you know for sure it is declared in the Class definition and you know you can use it throughout the entire class (and in case of a public var, throughout the entire code).

So using the this keyword gives you more control over your code and it lets you (and your colleagues) programme in old or other peoples code much faster!

If you don’t use the this keyword at the moment, I hope this post convinced you to try out the this keyword for a while (even if it’s only for one single project) and I’m sure you never want to programme with out it, ever again.

If you already did use the this keyword, maybe this post wil help you to convince some ignorant fools in your vicinity :D .

How Adobe sucks on interaction design…

Published on June 7, 2007 in Interaction design and Power-up Media. 4 Comments Tags: , , , .

…at least when it comes to installing the Flash Player plug-in for IE.

 Just great! now I have to help people with installing the Flash Player because Adobe makes the install procedure way harder than necessary! Here is the story:

First of all, most people who need to install the Flash Player are probably not as handy and familiar with the internet like you and me. And they were most certainly linked to the install page by the site they wanted to view.

Note that I emphasized the word “need” because these people want to see a certain site (or other Flash-app for that matter), but therefore they need to install the player! Remember that the Flash Player is just a tool!

Like I said, most people who need the player are internet rookies, so the trick would be to keep the procedure as simple and clean as possible. That way people can’t click the wrong buttons or panic because they are afraid to click anything at all (like my mother always does :roll: ).

Unfortunately the install procedure is just the opposite simplicity.
It starts at the first page:

1) There  is too much text and it’s all over the place; causing the panic effect.

2.1) There is some stuff about the Google Toolbar. Why??? I want to install the Flash Player. Nothing more, nothing less.

2.2) The Google Toolbar-install is preselected.
If I wanted that toolbar I would have downloaded it elsewhere! But OK, if they want to point out how useful the toolbar is, fine! but DON’T PRESELECT IT!!! If I want it I can select it myself, thank you!

3) The “Install Now” button is somewhere in the middle of the page. Put it on the top or the bottom of the page so people can find it! I admit it’s a clear button, but if you’re using a small resolution (still normal to most people though) you could just as easily miss it when scrolling down too fast.

4) The instructions on how to install are BELOW the install button!?!?
This means that when I press the install button I miss out on the part where they tell me about the security alert on the next page. Which leaves “my mother” clueless when the alert shows on the next page.

Somehow all above problems are gone when you try to install the player on Firefox. So they know how it must be done, but they just refuse somehow…

Anyhow; if the user gets to the second page (most users probably are already scared of by the first page) it’s slightly better… if the player was installed. But if the user clicked the “Don’t Install” button (because he didn’t read the instructions on the first page) there is no message telling the user the installation has failed because he didn’t allow Adobe products to be installed. Resulting in the following situation:
Failed Flashplayer install

They display a small version of the instruction on this page again (saying “click Yes” while there is no “Yes” button for miles around :? ), but if your browser screen is not big enough (like in the image below) you see the warning after you pressed “Don’t Install”, leaving the user clueless on what to do next (no “installation failed” message, remember).

Flash install security

If Adobe doesn’t change the install procedure of the Flash player I’m afraid many inexperienced internet users can’t get the player to install and will never experience the beauty of Flash… :cry:

PS: this story is based on real end-user feedback (some of them even sending me screenshots of the install procedure) which means I’m not just assuming this procedure sucks, it means:

I know this procedure suck!

Photosynth

Published on June 5, 2007 in Check this! and Power-up Media. 0 Comments Tags: , , , , .

Just great… my intention with this blog was to write most of my posts about myself, my opinion and stuff I make (and not just quote from other blogs or post links to “cool” sites), but already after just a few posts here is something I just coulndn’t keep from you*:

Photosynth

It’s a program which allows you to take a bunch of photos from some place and create a 3D-scenery without any sweat. It’s just some alpha version so you can’t use your own photo’s, but it’s still really exciting to view the examples they’ve got on their site (see “try it” (need to install a pc-only plug-in)).

Photosynth - screenshot

Go check it out:
http://labs.live.com/photosynth/default.html

Here are some explanatory videos:
http://www.ted.com/index.php/talks/view/id/129
http://channel9.msdn.com/Showpost.aspx?postid=220870

*) If you already heard of it, don’t blame me for posting it just now, but blame yourself for not telling me about it :P