As we all know Flash’s garbage collector is a hell of a beast. It tries to free memory from “unused” objects (aka objects not somehow cross-referenced by the root). So from time to time our garbage collector checks for those objects and kicks them out of memory.. at least some of them.

There are lots of articles written about the garbage collector and I’m not going into it any deeper. Let’s just summarize that no developer likes that kind of behaviour — it’s totally unpredictable. System.gc() would help a little, but it’s only available to debug players.

You may say: what do you care about memory handling! And I’d answer: not that much actually! :-) But what I really care about is false behaviour that can result.

Within Flash we have two ways to keep weak references to objects: Dictionary and weak listeners (weak method closures). We use weak references so that objects will be collected by the garbage collector. Now when it comes to Dictionaries, they behave as I’d expect. A “dead” object won’t be listed in a for each loop. But events events events…. they’ll be dispatched to each and every “dead” object residing in memory!! Which is such a pain in the ass really!

After a lot of testing I can give only the advice you’ve probably heard many times before:

Always remove listeners! Even the weak ones!

Otherwise you have to potentially deal with unexpected behaviour. I may gonna create some utility class for that that deals with this problem.

(more…)

You may have seen this. If not, it’s worth a watch:

Yesterday I had a presentation at the SFUG meeting covering some bits of my rewritten BBML framework (originated from the project laax.com). I’ve tried to share some insights into the technical concept and strategies for CSS parsing, CSS selectors and layout validation.

Picture by Marc Liyanage

It’s been surprisingly fun (I give credits to the beer sponsored by Nemos). People even managed to pretend they’d be interested in what I was prosing, so credit to them too!

I’d also like to mention that there’ll be the swiss flash event soon: Flash at the Lake will not only pamper you with appearances of great national and international Flash enthustiacs, it will also give anybody attending the pleasure to enjoy one of Zurich’s greatest locations with people who don’t think of you as a storm lightning adorer when you sit in the sun twittering Flash into the clear lake. And all that to a fantastic price. Check it out at fatl.ch

So here we go with the presentation (Quicktime so you can enjoy the marvelous effects):

I did a quick port of a «graphic demo» called «metatunnel» (created by FRequency).

Paulo Falcão ported this to Javascript using canvas.

To make the set complete I ported Paulos JS version to Actionscript, just quick’n'dirty.

Click on it to start the animation:

(more…)

swffit is a great little library that smartly resizes your flash movie depending on its content. It gives you native scrollbars for free whenever your content is longer than the browser window. Another strategy is to always have the flash movie fill 100% the browser window and let Flash do the scrolling.

There are a lot of PRO for the swffit way:

• It gives users the system scrollbar. Users are used to that, they know what it means, they know how to deal with it.
• Mouse wheels just work! It’s scrolling a standard browser window, no magic at all: great! (You have to use this otherwise)
• It’s easy to implement.

Still there is a CONTRA side:

• You’ll need javascript (well, that’s no biggy at all – as a matter of fact, you’re just pretty in the desert without javascript in todays websites)
• You have no control over scrollbar design (neither a biggy – as another matter of fact I consider that a good thing anyway, but don’t tell the brand agency ;-)
• It has performance disadvantages. Well that I consider a biggy! Because the movie will always be in its full height, it will do rerender for the entire area!! Imagine long page with animations here and there: Given Flash’s «not so fast» rendering engine, this can become a huge performance killer. Let me give you a quick’n'dirty example: Full Height compared to «Cropped» to Window Height (just resize browser window to real small size to see the big difference).

Conclusion: I’m just glad I found one good reason to not declare my internal scrollbar like in www.betabong.com as complete bullshit ;-)

In AS1 and AS2 we had access to arguments.caller within a function/method scope. This is not the case anymore in AS3. I wonder why. And I wonder why I can’t find a workaround, because everything should be there under the hood:

ActionScript 3.0 enables a method closure to automatically remember its original object instance (from Adobe ActionScript 3.0 * Core language features)

Method Closure are quite a wonderful thing: They come in handy in many situations, especially when it comes to event listening and handling. And they stay kind of wonderful in terms of «hidden magic». Hidden magic is all that stuff never officially explained by Adobe. These things often are very core to the language (e.g. exact processing order, frame splitting, event handling), but Adobe decided – certainly for reasons – to only let us see and manipulate what common developers are to see and manipulate.

Still, I’d like to have to possibility to dig deeper if I want. If there is a MethodClosure Type, why is there no way to access its properties. After all it holds a reference to its owner. I may wanna know what the owner is! I admit that its not that there aren’t many obvious reasons why I would do so, but there are! For example:

public function get width() : Number {
	var caller : * = MethodClosure( arguments.callee ).owner;
	if ( isChild( caller ) ) {
		return widthValueForChild;
	} else {
		return actualWidthValue;
	}
}

May be may be there is a way.. I’m not a hardcore byte array hacker, but if I find a solution (or explanation why o why), I’ll update this post.

I used to use float:left a lot for my layouts. But it can be a pain in the ass for several reasons – which of them the main may be that the surrounding box doesn’t surround it (so you’d have to come up with some stupid clearfloat-hacks).

Anyway, I recently discovered somewhere a great alternative (you can call it hack too, but then everything a little fancy that’s supposed to work with IE is a hack, isn’t it?).

So while until now I’d have something like this:

.inlinebox {
	float:  left;
	width: 49%;
	min-height: 100px;
}

the new method goes like this:

.inlinebox {
	display: -moz-inline-stack;
	display: inline-block;
	vertical-align: top;
	zoom: 1;
	*display: inline;
	width: 49%;
	min-height: 100px;
	_height: 100px;
}

That’s looks quite more complex. And it certainly is. But it works like a charm on all browsers I’ve tested (IE7, Safari, FF3). _height, zoom and *display are some crappy IE hacks obviously. The zoom attribute by the way is quite interesting, as it activates the hidden (IE only) CSS attribute hasLayout.

It also has some very nice benefits, like the alignement to the bottom…

Example

View Example

	<style type="text/css" media="screen">
		.codeexample span {
			background-color: #68B6FF;
			-webkit-box-reflect: below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.8, transparent), to(rgba(255, 255, 255, 0.8)));
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
			margin-right: 10px;
			margin-bottom: 40px;
			width: 140px;
			padding: 10px;
		}
		.inlinebox1 {
			display: block;
			float:  left;
			min-height: 32px;
		}
 
		.inlinebox2 {
			display: -moz-inline-stack;
			display: inline-block;
			vertical-align: bottom;
			zoom: 1;
			*display: inline;
			min-height: 32px;
			_height: 32px;
		}
 
	</style>
 
	<div class="codeexample">
		<h3>Float: left</h3>
		<span class="inlinebox1">Inlinebox</span>
		<span class="inlinebox1">Inlinebox</span>
		<span class="inlinebox1">Inlinebox Inlinebox Inlinebox Inlinebox Inlinebox Inlinebox</span>
		<span class="inlinebox1">Inlinebox</span>
		<span class="inlinebox1">Inlinebox</span>
		<span class="inlinebox1">Inlinebox</span>
		<span class="inlinebox1">Inlinebox</span>
 
		<h3 style="clear: both;">Inline Block</h3>
		<span class="inlinebox2">Inlinebox</span>
		<span class="inlinebox2">Inlinebox</span>
		<span class="inlinebox2">Inlinebox Inlinebox Inlinebox Inlinebox Inlinebox Inlinebox</span>
		<span class="inlinebox2">Inlinebox</span>
		<span class="inlinebox2">Inlinebox</span>
		<span class="inlinebox2">Inlinebox</span>
		<span class="inlinebox2">Inlinebox</span>
	</div>

When I first saw – years ago – a pic of this concept car, I thought yeah, that may be the right direction, intelligent design with a subtle retro touch (just linking to its successful history, I’d say). But they’ve never actually built it. And I wonder why..

(more…)

Edel*flash, a swiss site dedicated to swiss flash excellence, got redesigned as a wordpress blog. I think it’s a real nice and wise update. Well done, Simurai!

On a side note, first award in v2 is Hugman, designed and concepted by my friend Tobi (also well done!)

A sweet nice canvas demo with some (pseudo?) 3D. A lot of code for a little story. But I like it. You’ll gonna need a fast computer ;)