Interview question: I was reading RaganWald’s blog and ran across this interesting tid-bit. The gist of the article is, “ask a very simple programing question that can be answered during a phone interview to weed out people who can’t program a lick.”

Write a program that prints the numbers from 1 to 100. But for multiples of three print “Fizz” instead of the number and for the multiples of five print “Buzz”. For numbers which are multiples of both three and five print “FizzBuzz”.

Since a lot of managers read RaganWald’s blog you just might get this yourself in your next interview. So heads up.

Here’s my very simple solution: (download some code)

So that essentially gets the results your looking for but it is very inefficient. The first thing you can do is place all that code in a function and it will run about 3 times faster. The reason for that is because local variables are stored in the chip cache and not in system RAM.

Then I started messing around with the code to see how fast I could get it to run. The first thing I did was take out the trace statements and substitute a counter in their place. I did this because I just want to see how fast the algorithm will run without introducing system noise from tracing to the output panel.

Here’s that code:

I messed around quite a bit, tried using some ternary operators and such but that didn’t help. I was came up with a way of removing the && conditional in the first if-statement by asking this: if( -fizz - buzz == 0) That produces the same count but didn’t make a significant change in the time it took to run through the loop.

Replacing the for-loop with a do-while also didn’t make a meaningful difference.

You know what did make a huge difference? Using AS3. “No duhhh”, right? :-)

The AS3 code ran roughly 21 times faster. Happy days.

I thought that making variables out of the modulus results in the beginning of the loops so that they only had to be calculated once would speed things up but again, not much, if any difference.

I’d love to see it if you can find a more optimized algorithm in Actionscript.

Problem: if you use the drawingAPI to create a rectangle with a stroke then the stroke will be centered on the edges of the rectangle. That means if you are drawing a rectangle that is 50 pixels wide and has a stroke of 10 pixels then the visible width of the rectangle will be 60 pixels. The width of the containing MovieClip will also report 60 pixels.

visibleRectangle = rectangleWidth + strokeWidth/2

That’s probably not what you want.

I ran into this problem with the ZuneMediaPlayer at Zune.net. The panels needed to be created with the drawingAPI because they had to be skinable. Their color, alpha, strokeWidth are all contained as settings in XML. The artists wanted the panels to have a 2 pixel gap between them, simple enough. But some of the designs would have a border/stroke and others would not.

Plus, as you can see that if you have a thick stroke with less that full alpha then you’ll see the fill cutting across half of the stroke. Again, not very appealing.

I created a PerfectRectangle class to handle all the math conversions to produce what you would expect. You pass the strokeWidth, rectangleWidth/Height and it does the math so that the fill is drawn inside of the stroke and the width/height of the rectange ( fill and stroke ) will be the width/height that you pass.

I haven’t decided how to wrap this up in my framework yet so this class just stands alone. You can use it as is, extend it, or just use this as a starting point to wrap this into your own framework. I also did some experimenting in Flex and it gives the same results. I’ll work on an AS3 class to go along with this when I have time.

Grab hold of the code here.

Below is a portion of the drawPanel method from the PerfectRectangle class.

I’m sure you’re all thinking: that’s just what the world needs: another geek blogging about Flash. Well, I wouldn’t argue with you but here I am anyway.

I’m currently working deep within the belly of the beast - Microsoft. I work for the Xbox team and let me tell you it’s really hard getting anything done in a place like this because my coworkers are often product testing games like Gears of War or Big Bumpin‘ right next to me. Oh the distractions.

You can see some of my handywork here and there on Xbox.com and Zune.net. If it’s done with Actionscript then I either coded it myself or supervised. When I’m not working on the web sites I’m usually prototyping future designs for the Xbox360. Hey, did you know that the GUI for the next version of the Xbox is going to be built with Adobe Apollo? . . . It isn’t, but I had you going there for a second didn’t I? :-)

If I were the type of person who liked to show off - which I am - then I’d suggest that you take a look at LiquidText. I can’t wait to rewrite this for AS3 and see how much faster it runs.

I feel that it’s a real privilege to be added to MXNA. The best feature of Flash/Flex/Apollo will always be the community.

Note: much that follows is sarcasm. I can’t wait to play with all the shinny new toys in CS3/Flex/Apollo….

Adobe, I’m really pissed at you. I just read a review of some of the features that Photoshop CS3 has coming, a few of which aren’t in the beta. They sound amazing. So amazing that I’d really like to get back into photography just for the joy of photo editing. But you know what? I don’t have the fraking time!

Why don’t I have the time? Well, let’s go down the list:

First and foremost as a professional Flash developer I have to stay on top of all the features. I have a pretty good handle on that. AS3 is a challenging switch but it’s coming along. If that were it I’d be golden but noooooo.

Because there’s Flex to learn. I already have an idea for a project to build in Flex so I have to get that going. Flex is awesome and I’ll be a better developer for learning it. And oh yeah, I also have to learn the ins-and-outs of Eclipse. Nice, lets just add another IDE to master while we’re at it.

And gee, I better not take too long getting up to speed on Flex because, wait for it, Apollo is coming out soon. The good news is that it sounds like Apollo development will be very similar to Flex. Hopefully it will just be adding onto the feature set. So that helps but it’s still a lot to get a handle on.

I almost forgot, the Flash 9 authoring tool is going to have a new interface and lots of new features, along with all the other CS3 apps. From what I’ve seen I really like it. It won’t take much to get comfortable with it but you know there will be those times when you try to do something you used to do and can’t find the control or something. That will put a small dent in development time until it becomes second nature.

So my dance card is full. I have to keep up with the new features in Flash plus learn Flex and Apollo. That’s doable.

But wait, there’s more. You just added those really cool new features to Photoshop. Now I’ve been around Photoshop for a long time so it’s pretty easy to pick up the new features. That’s not the problem. It’s that I don’t have time for photography any more. Really, photography is very time consuming and I’d love to get back to it if there were time but it just isn’t going to happen. But it’s very tempting with PS CS3.

Adobe, you’ve created some amazing applications that in turn allow your users to create amazing things. Think back to the Stamp tool, how cool was that when it came out. And then someone made a deal with the devil and created the Healing Brush. Plus Flash/Flex/Apollo are the foundation for RIA and it’s possible that Apollo is going to put a huge dent in Microsoft.
So kudos to you Adobe. But before you relax too much I want to be the first person to make a feature request for CS4. Just add this one feature to CS4 and the universe will officially be yours. You ready? Here it is: a Freeze Time button. Just one little button that we can press that will freeze time so that we can learn and play with your products at a nice leisurely pace. You know what. If that’s too much to ask for then just come out with Slow Time for CS4 and then when it’s perfected you can come out with Freeze Time in CS5.

I’ve been messing around with code optimization. Like creating a variable to hold an array.length instead of using the array.length in a for/loop.

I’ll post some details later when I’m pretty sure I know what I’m talking about but essentially I’m iterating through an array with a length of 100,000 - [”0″,”1″, “2″,…”99,999″].

Anyway, I thought I’d try it out when compiled as AS3, just for the sake of comparison. After a few minutes of converting the code - I’m just learning AS3 now - I get it to run without errors. I create a variable to hold the current Date, count through the loop, and then get the Date again and trace the difference between the two dates to the output panel. But my output keeps coming up as zero. I check the code again. Can’t find anything wrong. What the frak?

Then I add another 0 to the count when creating the array so that it contains all the numbers between 0 and 999,999 - that’s a length of one-million. Run the code again and get an output of 16.

So the problem was that counting through an array of just one-hundred-thousand didn’t take a millisecond.

Okay, that was fast.

Just for giggles I ran it up to a length of ten-million. That took 125 milliseconds. I tried the same thing back in AS2 but got the beloved warning that the script is taking too long and would I like to abort. So I dropped it down to a length of one-million and that took 656 milliseconds.

So, in this trivial instance AS3 is running 6,560 times faster than AS2. Nice work guys.

Correction:

The AS3 code is only running 52-times faster than the AS2 code. I forgot to divide by the time it took the AS3 code to run - 125 milliseconds.

Here’s my math in case I’m screwing it up again: it takes the AS2 code 656 milliseconds to run through the loop 1-million times. I get a timeout before it will go up to ten-million so lets just multiply the result of the 1-million loop by 10 and assume that would be how long it would take: 6.56 seconds.

The AS3 code takes 125-milliseconds to run through the 10-million loop. 6560 / 125 = 52.48. So the AS3 code is only running 52.48 times faster.

Sorry about the mistake.

Now I’m somehow disappointed that AS3 is only 50-times faster than AS2. Like that’s a small thing.

You can download the code here. Note: you’ll need the Flash9 Alpha to republish the AS3 code.

I was running through a simple tutorial for loading XML into Flex and displaying it in a DataGrid when I got the following error:

[RPC Fault faultString=”Error #2148: SWF file file:///C:/Documents and Settings/…/My Documents/xmlParsing/bin/xmlParsing.swf cannot access local resource Blades.xml. Only local-with-filesystem and trusted local SWF files may access local resources.” faultCode=”InvokeFailed” faultDetail=”null”]

If I go into the bin folder and launch the SWF directly then everything loads and works correctly. That right off is a tip that it’s probably a security issue. Sure enough. With a little research I found it.

• In the Navigator panel Right-click and select Properties
• In the lefNav select Flex Compiler
• In the Additional compiler arguments: field add the following argument: -use-network=false

So my arguments read: -locale en_US -use-network=false

It would seem that this setting has to be made for each project.

Stupid security settings. :-)

When I Googled this problem I only got three hits back. My guess is that this will be a common problem so it wouldn’t hurt for others to duplicate this solution to make it easier for others to find.

Aside: I had to create the Flex category to for this post. Nice to start things off with a fraking error.

Here’s a little nuance about loops that I never thought of before. If you are looping through an array you would probably write the code like this:

output:0 of 4 : Star Wars
1 of 5 : LOTR
2 of 5 : Matrix
3 of 5 : Superman
4 of 5 : Close Encounters

You’ll notice that I’m adding an element to the array which I’m looping through. That’s almost never a good idea. However I want to illustrate something with this. I add to the array after tracing the output so the first time through the loop the length is 4. Each time afterwards it was 5. And the for/loop noticed this.

Here’s the important thing: each time through the loop the for-conditions are rechecked. That means movies.length is evaluated over and over again. To optimize the loop we could create a variable that holds the value of the array length and then use that in the for-condition. That way the array length is only evaluated once.

The change would look like this:

output:

0 of 4 : Star Wars
1 of 5 : LOTR
2 of 5 : Matrix
3 of 5 : Superman

You can see that the movies.length was still increased but the loop didn’t run through it because the variable is set before loop runs.

If the array that you are looping through is going to change during the loop then you must use the first approach. But it’s unlikely that you’ll do that often, or hopefully ever, so go with the second case and you’re code will run faster.

While you’re at it you can optimize even further by looping through the array backwards. The Flash VM can count backwards through a loop faster than it can forwards.

Here’s a variation of the Random Walk - see original post.

All that’s different is that it reacts to mouse movement. Every time the mouse moves the existing drawing is cleared and the random walk begins again from the (_xmouse, _ymouse) position.

Download

It’s amazing to me how something so simple can be so subtlety beautiful. Below is a demonstration of a random walk, or drunkards walk as it is sometimes called. Simply put, each step is a random distance and angle from the previous step.

Download FLA

The code needed to create this is rather simple. It uses nothing more complex than the drawingAPI and an onEnterFrame. Note: there are no checks to make sure that the last step stays on the visible stage. If you want to play around with this you could do things like randomly change the color, use curveTo instead of lineTo, have multiple walkers of varying colors walking around simultaneously, etc. Use your imagination.

A bit of code that you might find useful are the first two lines of code from the drawVector function. This code finds the point to draw to when it only knows the starting point, distance and angle. This bit could come in handy in a number of instances.

Here’s a demonstration using my video.Maru pre-compiled clip to create a custom video interface in Flash in less than 2 minutes. Okay, it isn’t pretty. I’m just going for speed.

To start with the FLA is completely blank with absolutely no code. The only thing in the Library is my pre-compiled MovieClip which you can download yourself.

There is also a lot more functionality than this. I just wanted to cover the basics.