Most of my Flash apps or websites use XML files, either for communication or initial data. They can get quite large, reaching about 100 kb or more is not seldom. You might say: so what?! 100 kb is like nothing for a bandwidth nowadays! Well, if you’ve every used iPhone tethering in an area where there is no 3g network, you start appreciating every single byte you won’t have to suck from the net. (On a side note: That’s when Opera really comes in handy.)

XML files compress really well

Because XML usually contains a lot of repetitive elements (noticably tags and attributes), they are like a compressor’s darling. Just zip a few of your XML files and you’ll see.

Now I kind of always thought that on nowadays webservers gzip compression is activated by default anyway. Which was wrong, at least for quite a bunch of servers I use.

Activate GZip compression

If your server installation contains the deflate module (which is the case for all of the ones I use), then you can simply add the following line to your .htaccess file:

# compress all html, plain text, xml, css and javascript:
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-javascript

AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-javascript

I’ve also tried more complex constructs found on the web, but they resulted in «Internal server errors» which is why I’ll go along with this simple one for now.
The effects are dramatic! I usually get about 70% – 80% of reduction for non-minimized files,

Examples

Uncompressed Compressed Reduction
Javascript minimized
MooTools YUI compressed
66,867 20,964 68.6%
Javascript minimized
MooTools uncompressed
102,991 27,599 73.2%
XML/CSS combined
A larger initial XML file for a Flash website of mine
84,316 18,229 78.4%
XML/CSS combined
A larger initial XML file for a Flash website of mine
84,316 18,229 78.4%
HTML
A swiss news website, 20 Minuten
148,587 29,385 80.2%
HTML
My blogs home page
51,638 12,991 74.8%

Tools

If you want to test your website, these pages are very informative (first one is faster, second one more informative):

http://www.whatsmyip.org/http_compression/

http://www.gidnetwork.com/tools/gzip-test.php

I also like this one, although it only gives you little info on content-encoding. But very much on top of that :-)
http://www.wmtips.com/tools/info/

This little Firefox addon will tell you wether any site you visit has GZip activated:
https://addons.mozilla.org/en-US/firefox/addon/54647 (Content Encoding Detector)

Conclusion

HTML websites will profit a lot from this compression, as well as Flash sites (if just for your swfobject.js) that use textual communication. And best of all: it won’t need any kungfu effort on your side! And: practically all browsers support it. (I’ve only heard of problems with IE6, but then, you know, f*** IE6)

Update:

A more complete solution for your .htaccess file:

<IfModule mod_deflate.c>
	AddOutputFilterByType DEFLATE text/html
	AddOutputFilterByType DEFLATE text/xml
 
	AddOutputFilterByType DEFLATE image/x-icon
 
	AddOutputFilterByType DEFLATE text/css
 
	AddOutputFilterByType DEFLATE text/javascript
	AddOutputFilterByType DEFLATE application/javascript
	AddOutputFilterByType DEFLATE application/x-javascript
	AddOutputFilterByType DEFLATE text/x-js
	AddOutputFilterByType DEFLATE text/ecmascript
	AddOutputFilterByType DEFLATE application/ecmascript
	AddOutputFilterByType DEFLATE text/vbscript
	AddOutputFilterByType DEFLATE text/fluffscript
 
	AddOutputFilterByType DEFLATE image/svg+xml
	AddOutputFilterByType DEFLATE application/x-font-ttf
	AddOutputFilterByType DEFLATE application/x-font
	AddOutputFilterByType DEFLATE font/opentype
	AddOutputFilterByType DEFLATE font/otf
	AddOutputFilterByType DEFLATE font/ttf
	AddOutputFilterByType DEFLATE application/x-font-truetype
	AddOutputFilterByType DEFLATE application/x-font-opentype
	AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
	AddOutputFilterByType DEFLATE application/vnd.oasis.opendocument.formula-template
</IfModule>

(Source)

betabits

I went down a few algorithmic roads recently, digging into path finding and – for some obscure reasons – bit manipulations. Or byte. Whatever.

Along this way some utility methods (or functions) were born, and I thought: May be some day some of them may be in use to any of you ;)

For my dear non-geeky readers: A bit is the smallest part in software. It’s either this or that, either 0 or 1, either false or true. With a group of 2 bits you already have 4 states: 00, 01, 10 and 11. With 8 it’s 256 and so on (2^n).

As it would be too boring to just type 0 or 1, and because we have more than 2 fingers, man invented numbers to accumulate these bits: so 9 stands for 1001, and because 9 is shorter than 1001, we prefer 9. Some even write AB for 10101011, but that’s where we come back to geeky world.

So after this highly informative introduction, let’s get to some code. First, let’s count bits:

static public function countBits( value : uint ) : uint {
	var count:uint = 0;
	while (value) {
		if ( value & 1 ) {
			count++;
		}
		value >>>= 1;
	}
	return count;
}

Example:
countBits( 0xAB ) -> 5

Now sometimes you might wanna know: Does this data contain no more than 1 bit? We could just ask countBits( value ) == 1. But that’s not as speedy as it should be, right? So here we go:

static public function is_1_bit( value : uint ) : Boolean {
	var count:uint = 0;
	while (value) {
		if ( value & 1 ) {
			if (count == 1) return false;
			count++;
		}
		value >>>= 1;
	}
	return count == 1;
}

Examples:
is_1_bit( 0xAB ) -> false
is_1_bit( 0×400 ) -> true

uint are by the way 32bit data, so a maximum of 32 of these bits we’re talking about can be turned on or off. That’s a lot of data. 4′294′967′296 combinations (though not that high compared to the numbers we read every day in the newspapers recently). Anyway, sometimes we might wanna access and set only a group of bits (usually 4 or 8) within this quite large row of bits:

static public function getBitGroup( value : uint , group : uint , len : uint = 4 ) : uint {
	return ( value >> (group*len) ) % (1 << len);
}
 
static public function setBitGroup( value : uint , groupValue :uint , group : uint , len : uint = 4 ) : uint {
	var pos:uint = group * len;
	var mask:uint = n_bits(pos);
	var right_bits:uint = value & mask;
	value >>>= pos + len;
	value <<= len;
	value |= groupValue;
	value <<= pos;
	value |= right_bits;
	return value;
}

Don’t they look just groovy?! Yeah baby!

Anyway, that’s all for now. Stay tuned for some crazy path finding. If I find time (sometimes I wonder how all those bloggers find their time to write so much..) Not to mention Twitter. Boohaa.

031609_garbage_canAs 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…)

Sometimes you need to test your Flash stuff with different plugin versions. Even if you just want to run some performance tests, it is very useful to switch to the release player (see below for another example).

For windows there is a neat Firefox Plugin that makes switching quite a snap. On Mac there is one too – I haven’t tested it, but it’s supposed to work (though I’m not too sure about that when I read these comments here). Still I prefer to work with Safari and I kind of dislike the thought of starting Firefox to just switch Plugins.

wspluginswitcher-iconFortunately I’ve found another solution: WSPluginSwitcher. This one comes as a Cocoa app and once configured (you really should read this wiki page), it works real well for me. Also they have prepared plugin versions for you to download (though the most recents are missing, but no big deal really).

As for the speed tests, let me just give you another example (impressing enough for me to wanna switch players for real world testing).

In Debug Player:

method...................................................ttl ms...avg ms
tare [2]                                                      0     0.00
CSSFastParser                                               603   120.60
CSSRegExpParserFast                                         987   197.40
CSSRegExpParserFastAdvanced                                1457   291.40
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

In Release Player:

method...................................................ttl ms...avg ms
tare [2]                                                      0     0.00
CSSFastParser                                               354    70.80
CSSRegExpParserFast                                         972   194.40
CSSRegExpParserFastAdvanced                                1469   293.80
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

Both 10.0.22.87, and exported as release swf. Oh, and by the way tested with another useful tool from Grant Skinner: AS3 Performance Testing Harness.

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.

Sev presenting...
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!

Flash at the lake Swiss Flash User Group Conference. 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):

This is a follow-up of this.

metatunnel-pixelbender

Yeah well, I was more than optimistic to show those JS guys how fast Flash can be with the help of some brand new Adobe magic – but Pixel Bender was, unfortunately, quite disappointing:
(more…)

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:

The Flash plugin is required to view this object.

(more…)

GridFitType has a great impact on Text rendering:

The Flash plugin is required to view this object.

Well not really much to say here:

  • NONE Good for animation and people who prefer Font appearance over readability
  • SUBPIXEL Good compromise between readability (small sizes) and appearance
  • PIXEL Pure nonsense if you ask me

What I really wonder though is: Why on earth can’t I adjust fractioned text sizes (aka float)??? In the IDE, yes you can. By actionscript, no you can’t. I don’t get it.. anybody knows why that is? And more importantly: is there some fancy workaround? (in the example I’m just scaling the text fields, but that’s not really a cool solution).

I did some speed tests today, comparing two string parsing methods. And I’ve made some very interesting discoveries: The execution speed between SWF compiled for debugging and those compiled without differs.

Ha! Okay, that’s not that much of news (even for me). But what astonishes me is how much this speed gap can be, especially when it comes to massive data calculations. I somehow always had a somewhat 20 percent speed decrease in mind (I was just presuming, me dumb). But for a 3d particle test we’re talking factor 8!!

Now this made me curious… so I’ve tested with Debug and Release Player both debug and release SWFs:

Debug Player running Debug SWF

Flash Debug in Debug

Debug Player running Release SWF

Release in Debug

Release Player running Debug SWF

Debug in Release

Release Player running Release SWF

Release in Release

A few conclusions:

  • Never release a SWF file with debug code (or otherwise said: put only stuff online from bin-release, never bin-debug). Though common users won’t notice the speed decrease, your friendly flash developers may, at least if you’re app is somewhat cpu intensive. And of course: debug SWF are much bigger in size (just in case you give a fuck about flash devs ;-)
  • Speed tests should be played in the release player. Why? After all, I wouldn’t care if the relation would stay the same. Usually you just need to know how much faster one thing is compared to the other one, so that would do it. But unfortunately the ratio won’t always be the same. In the above example the ration is 3.66 for debug and 2.92 for release. And it can differ muuuuch more.

The last one bugs me quite a bit. It’s just a pain in the ass to export a release build each time you wanna compare performance. And it also means you can’t do quick’n'dirty trace outputs for the time result (not a biggy if you’re testing within a Flex project though).

So here we go with two wishes for Adobe:

  • Let us quickly test release builds within Flex Builder (a simple command would do it – I thought it might be «Run Testapp» (instead of «Debug Testapp»), but that just doesn’t bring up the Debugger (and same speed)
  • An option to turn off debugging mode in Debug Player!!! That would solve almost all problems, and we could also use our Plugin for normal browsing without performance penalties (is this why Youtube eats so much cpu here?

I don’t discover as many bugs nowadays as I’ve used to in the old days when I was beta testing for Macromedia. But it happened today, and I’ve just installed the newest Flash Player 10.0.22.87 to be sure.

It happens to DisplayObjects A inside DisplayObjectContainers B inside DisplayObjectContainer C, when

  • A was not initially visible (not inside initial scroll rect of C)
  • A is in 3D mode (I just change rotationY for that)
  • B is in «cached as Bitmap» (cacheAsBitmap would do, I go with DropShadowFilter in the example)
  • C’s scrollrect property is set, so A is shows up (well, it doesn’t – that’s the bug after all ;)

Here the example:

bug-3d-shadow.swf
(more…)