Archive Page 2


Modulo (%) – the designer’s best friend

I became a programmer because I was a lazy designer. That is lazy as in “Why create fifty animations that are almost the same”, not “bah – good enough, customer isn’t going to care”. I want top results with as little effort as possible. So actionscript was the way to cut down on unwieldy timelines.

The downside of not having a programming degree is that a few of the useful concepts and methods remain obscured in a corner. As with modulo. For those of you with a maths degree, just skip down a few paragraphs. Designers – bear with me.

Modulo is a maths operator like multiply and divide are. It is most similar to divide as it returns the remainder from an integer division. Quick example: 13 % 10 = 3 because 13 can be divided once by 10 with three remaining. 23 % 10 is also three as 23 can be divided twice by 10 with three remaining.

So why should I care, the designer asks, this is all very interesting, but what practical value does it have? One scenario is my contribution to this mini challenge from Apt, although SIN is probably better in that case. I’ve used it most when laying out n-objects in a grid to calculate x-position. As % returns the remainder, you can multiply count and x-step and do a modulo on total width.

An example:

function placeItems():void {
  var numItems:int=45;
  var xstep:int=15;
  var ystep:int=15;
  var totalWidth:int=150;
  var item:MovieClip;
  for (var i:int = 0; i<numItems; i++) {
    item.x = (i*xstep)%totalWidth;
    item.y = Math.floor((i*xstep)/totalWidth)*ystep;


function createAnItem():MovieClip {
  var item:MovieClip = new myItem();
  return item;

Which results in this if you have a blue square in the library exported to actionscript as ‘myItem’


All the magic is in the last two lines of the for…next loop, it places items in a grid without needing help counters.
Look at item.x = (i*xstep)%totalWidth. It multiplies item count with distance between items and does a modulo on total width. I.e., if i*step is 330, 330%150 = 30. Combined with stepping y down with whole multiplies, we get a nice grid. Y value – if i*step is 330, it gives  2.2 when divided by total width, lose the decimal and we know it in row 2.

It’s super easy to change parameters. Set x/y-step or total width and you’re done. Just keep total width divisible by x-step, else the gird gets staggered.

Anyone else with good examples of modulo for layout?


Server result, who called?

I ran into a problem the other day. We integrate our flash application with a server-side image archive, allowing browsing from the flash front-end. That means loading a tree structure and contents of all folders. We only load the structure initially to optimize bandwidth usage – data about the contents of folder is loaded when the user selects a folder. That means the first time I select a folder for this session, a call to the server is made requesting the content of that folder. A call-back function is set which handles placing the data into the dataProvider and updating the view.

So far, so good. But there was a snag – to further optimise transferred data, we only return data about the images in the folder, not what folder they are in. So the call back function has no way of telling where to put the data unless we make sure that there’s only one call for folder contents at a time. Continue reading ‘Server result, who called?’


Easy tweaking of Flex component skins

We run a dark grey theme for our Print application. This has required quite a lot of tweaking to get it right and despite using the css way of configuring and skinning all components, Adobe did not have dark palettes in mind when they designed the Halo theme.


E.g.: to get the selected and rollover color right for lists, we had to extend and hack the Activator class because default color handling mixes the theme color with white to get the different shades needed. Which look quite odd in a dark theme. Continue reading ‘Easy tweaking of Flex component skins’


Program manager

Joel Spolsky of Fog Creek software has posted an interesting article:

Reading it was one of those “ah! I knew that” moments – where you’ve experienced something, but haven’t really put it into words.

The gist of the article is that a programming project needs someone who doesn’t write code to ensure that the end users needs aren’t forgotten. And that is really important because the person responsible for coding the project will almost inevitably focus on solving code problems, sacrificing end-user needs. I know that I do that myself. If I’m in charge of delivering code, that’s the focus; if I’m in charge of the design, end user needs are at the forefront. Continue reading ‘Program manager’


ErrorEvent – equivalent to throw new Error?

A technical question for you out there:

I had a class that dispatched an ErrorEvent which was not listened for by any other class. That resulted in the player popping up an error dialogue very similar to the one you get from throwing Errors – and not catching them.

Nice image – imagine a juggler throwing three or four Errors into the air and catching some of them.

The documentation for ErrorEvents says that ErrorEvents without listeners will be displayed by the debugger, but I can’t quite see how it’s handled. ErrorEvent inherits TextEvent, nothing special there. I just wonder how the flashPlayer detects these events. Is there hard coded special handling of Errors? Or are there attributes of the ErrorEvent that tells the player to treat it differently from other events?

File under “unecessary fidling with the API”


Flex “Workspace in use…” error – arg!

Most annoying thing about Flex Builder. If I work for a while in Flex, then quit and try to start Flex again it says “Workspace in use or cannot be created, blah blah”.

I can then either restart the pc  or use task manager to quit process “Javaw”.  I’m running FB 3.2 on Win XP (all patches and service packs thank you). It’s not a huge hassle to quit that process, it just seems like an unnecessary bug in a 3 point 2 version of a major application.

Has anyone found a workaround or perhaps knows what the cause is? A search showed that I’m not the only one annoyed by it, but there doesn’t seem to be a fix yet.


Web Services are suprisingly easy with Flex

Last time I had to work with web services, ActionScript2 was still hot stuff. Handling complex data was an absolute pain, mainly because of the woefully primitive XML implementation of AS2. Manually looping through children’s lists is not my idea of fulfilling programming tasks. Not that I realised how bad it was until AS3 showed up with E4X. “You mean I can just read the XML like an object or array? No way, that’s sci-fi!”

It was with a great deal of apprehension that I started on a new project that required integration with an external web service. But it turned out to be an absolute breeze. A small, hitherto ignored, menu item called “Data: Import Web Service (WSDL)” turned out to be very close to magic and became my new best friend.

Import Web Service takes an URI to the WSDL (web service definition language), loads and parses it and then lets you choose the methods you want to generate code for. It creates complete proxies with typed data classes for both in- and output. You can reload and regenerate classes if the web service changes, and you can add and remove methods at any time. All the generated code is accessible and well documented – although all is well documented with examples in the Flex help, I didn’t need more than the comments in the generated code.

I’m not claiming to have made a big discovery here, after all it’s part of the standard Flex Builder. But it just works so much better than I expected. Web Services have gone from being a royal pain to the easiest and most structured way of communicating with the server.