Anyway, the point: This is Preso! It’s kind of an Adobe Connect clone, built with Flex 4 and Red5. It allows you to have a presentation online.
You start a room, upload some images (that go with your presentation), start the webcam/audio stream and share the direct link with your friends or your audience and go! Here’s a little demo that should give you an idea.

Feel free to check it out! Let me know what you think of it!

Near the end of June, I started a little experiment, just for fun, which would just immitate fridge magnets. I wanted to make it a multi-user experience. So everybody hitting the page would see the changes that are being made realtime. I built the first version and was quite happy.

But a few days ago, it struck me: I can just use the code I used for that experiment and port it to the iPad using the iPhone Packager (which comes with Flash CS5). So I did!

Although I had to change some of the code (loading settings files, etc), I was actually able to build this application rather quickly. I also added a multi-room feature, so everybody can have their own fridge with magnets
So you can now actually leave your boy/girlfriend a message on a virtual fridge (with no food in it) and then mail him/her the link! He/She can then rearrange the letters and leave you a message in return; Fridge-magnet style! That’s geeky, right!?

About the application

‘Spread the word’ is both an iPad and a browser application.
The clients are built using Flash Builder (for the browser app) and Flash CS5 (iPad app). The multi-user support is a Red5 application.

‘Spread the word’ online

You can view the application in the browser by hitting the following URL:

http://spreadtheword.nocreativity.com

If you want to have your own fridge, just add ‘?myOwnFridge’ (replace ‘myOwnFridge‘ with a name of your choice). For example

• http://spreadtheword.nocreativity.com?test
• http://spreadtheword.nocreativity.com?mySecretRoom
• http://spreadtheword.nocreativity.com?imOnAHorse

‘Spread the word’ for iPad

Currently the iPad application is only available though my Cydia repo. I will however be trying to get it into the Apple App Store (I know about 3.3.1, I’m still giving it a shot ). The app also supports rooms, so feel free to go crazy (but be nice, there’s kids on the internet )

If you want to install the iPad application you need a jailbroken iPad. If you haven’t added my repository to your Cydia sources yet, follow these instructions:

1. Open Cydia on your jailbroken iPad
2. Go to the ‘Manage’ tab
3. Tap ‘Sources’
4. Tap ‘Edit’ in the upper right corner
5. Tap ‘Add’ in the upper left corner
6. Fill in the following URL: ‘http://nocreativity.com/cydia’
7. Tap ‘Add source’
8. You’re done!

To install Spread The Word for iPad, do this:

1. Open Cydia on your jailbroken iPad
2. Go to the ‘Sections’ tab
3. Find the ‘noCreativity’ section
4. Tap on the application (there’s only one in that list right now, so you can’t do anything wrong from this point on )
5. Tap ‘install’ in the upper right corner
6. Tap ‘Confirm’ in the upper right corner
7. When the installation is done, exit Cydia. Spread the word should be installed now. Have fun!

Credits

Eventhough I created this app myself, I owe a big thank you to Eugenia Furman for letting me use her beautiful letters. Those are actually real letters, which she created herself. They’re for sale on Etsy. They’re really awesome. Make sure you go and check out her other work. I totally love it!

V1

A few weeks ago, in Amsterdam, Ralph explained a bit about it during his session. And then finally yesterday (actually the day before…), I bit the bullet and spent the evening making it happen. Only 4 hours later I had a first version that got pretty close to it.

Check this very first edition on the following URLs. The text is generated using AS3, so you can just make it show any text you want. Just change the URL params

• Particle fun V1 (with blur)
• Particle fun V1 (without blur)

The particles move to a perlin-map (red & green) with text in front of it. The color of each pixel is used to determine whether the particles has to move up,down,left or right and how far. Not how fast… That left all particles moving almost equally fast… Which is kind of a minor downside to me… Seeing how it almost was 6AM, I felt it were a good idea to catch some sleep…

V2

When I woke up a few hours later, I felt the irresistible need to improve the effect of the particle swarms and optimize some code in order to squeeze a few more frames per second out of the code.

I ruined the rest of my day coming up with another version. This time the perlin-map’s color would not just serve as a guide who tells the particles where to go and how far. The map would actually act as a force field: Each pixel would accelerate the particles on both the x and y-axis. As a result: we have now very different speeds of particles! And it looks pretty cool too! Example below. The text can be controlled using the URL parameters.

• Particle fun V2

Watch out! Nerd time!

This final version (well… final…) looks pretty good in my opinion. A few details about it:

• 25000 particles (1 particle = 1 pixel)
• runs up to 85fps (Capped this at 50fps, otherwise it the animation would be too wild)
• The bitmapdata object’s dimensions: 750 x 350

Most important things

During this experiment I learned a lot about optimization. A few things that might come in handy some time:

• Instead of using setPixel() for every single pixel you wish to animate, only update the bitmapdata once using setVector(). You can get the vector of pixelvalues from the bitmapdata obj using getVector(). Then change the values in the vector. When done, appy the new values to the bitmapdata object using setVector(). This will give you some valuable milliseconds (believe me: every millisecond counts when doing 25 000 loops per frame)
• Instead of looping through long arrays  (or even vectors) use linked lists: They’re easy and fast!
• Bitwise operations might look very unhuman, but they can buy you a great deal of milliseconds! Make sure you check the bitwise possibilities that there are out there. A lot of great minds have shared ‘common’ calculations in the form of bitwise operations that turn out to be just a bit faster.
• Think a lot about what kind of calculations you’re going to make and most importantly: When? For example in my first version: I get the pixelvalue from the perlinmap every iteration of the loop (times 25 000). However in version 2, after generating the perlin map, I immediately calculated the forces of every pixel and saved the values in a vector. I then request those values in the loops. This kind of precalculations will give you valuable milliseconds per frame and thus more fps.
• When editing pixel per pixel, make sure to lock()/unlock() your bitmapdata. That will prevent the bitmap from updating after every change. Again: giving you more milliseconds for your viewing pleasure!

I can’t really post any technical optimization tips (since I really just got started myself) but there are tons of articles out there on this topic. I suggest you check those out for more practical optimization tips.

I’m looking into doing more experimentation regarding particles. If you have any optimization techniques that I should know off, don’t hold back to educate me Either way: I really love this, so stay tuned!

Sources: Click (Flash Builder 4 project)

private function onNetStatus(e:NetStatusEvent):void{
	switch (e.info.code){
		case"Netconnection.Connect.Success":
			trace("You connected!");
		break;
		case "Netconnection.Connect.Closed":
			trace("You disconnected!");
		break;
	}
}

As a very lazy developer, I tend to think that comparing strings like this is just crazy. And ugly! So I made my life just a little better by creating my own class that holds ‘InfoObjects‘ with the ‘code‘, ‘level‘ and ‘meaning‘ properties. That way you can just compare the ‘event.code.info’ to a class constant. No need for copy-pasting codes from the Adobe site, or debugging your code in order to find you made a typo in one of those strings…

I ran the table (listing all of the NetStatus codes) through a simple XML parser and ended up with a very neat Actionscript class (which I’m sharing, so it’s up for grabs! Download link at the end of this blogpost!). Using it looks way more natural!

private function onNetStatus(e:NetStatusEvent):void{
	switch (e.info.code){
		case NetStatusInfo.NETCONNECTION_CONNECT_SUCCESS.code:
			trace("You connected!");
 
			// returns the code property (same as 'toString()')
			trace(NetStatusInfo.NETCONNECTION_CONNECT_SUCCESS.code); 
 
			// returns the level property
			trace(NetStatusInfo.NETCONNECTION_CONNECT_SUCCESS.level); 
 
			 // returns the meaning of this status change
			trace(NetStatusInfo.NETCONNECTION_CONNECT_SUCCESS.meaning);
		break;
		case NetStatusInfo.NETCONNECTION_CONNECT_CLOSED.code:
			trace("You disconnected!");
		break;
	}
}

However….

Why isn’t this just event based? Right now the Netconnection dispatches a NetStatusEvent.NET_STATUS. Most people find this very acceptable. I, myself, tend to think it’s funny. The classname (NetStatusEvent) is pretty darn clear about the fact that the event triggered is related to the netstatus… Duh?!
Anyway: after having listened to that event and having caught it, we now need to evaluate the event.info.code property (which will return a string like ‘NetConnection.Connect.Success‘)… Why is that??
Why not just dispatch NetStatusEvent.NETCONNECTION_CONNECT_SUCCESS? Wouldn’t this be more consistent with the rest of Actionscript?

It would only make life better:

1. No more copy-pasting of ‘codes‘. They’re just constants in the NetStatusEvent class.
2. No chance of runtime bugs because of typo’s made in the string itself. The use of constants makes sure the compiler knows when you’re doing something horrible, and allows him to throw that error right in your face!
3. Auto-completion! Because life should be made easier by computers; not harder!

I think that an implementation like mentioned above would be pretty cool (and perhaps more logical). At least to me…

Download

Feel free to use, modify, marry this class (and pass it on onto your children) if needed. If I overlooked anything or there’s a better way of doing this, feel free to ping me and I shall correct myself asap!

Enjoy!

Download: Click

However I soon learned the microphone feed didn’t go through the SoundMixer of the Flash Player, therefor would would not be able to be analyzed. There was a workaround with FMS/RED5 and bouncing the stream off the server but that’s rather overkill (not to mention the lag).

However…
Mike Chambers and Lee Brimelow were in Paris the other day where they demoed/demo’ed/demo-ed (how the hell do you spell that word??) a few new features of the upcoming AIR release. If you don’t already know, you’ll probably have guessed it by now but (just to be crystal clear): The microphone is accesible for computeSpectrum in the AIR runtime. Check out the demo on Lee’s blog

Lee stated on his blog he couldn’t talk about this feature being brought to the Flash Player, but I’m pretty confident Adobe will do so
Even though I’m not much of an AIR developer, I like the idea of having access to both microphone and camera… I can image a few cool applications using those features…

By the way: If you don’t already know: there’s a great site with all kinds of intresting articles on the subject. If you’re interested, make sure to check it out: getMicrophone().

So I started moving some code around and after a few minutes, I found myself rewriting the whole thing… That’s not a bad thing since now we’ve got one handy class that can do about just everything a Bezier Animator should be able to do.
Demo time!

There’s still a little bug somewhere which allows the target to ‘run away’ from the bezier, and I haven’t gotten quite to the root of the problem, but I really felt I had to share this. Also there are some imperfections when you disable the orientToPath and scaleByPath properties. I will look into fixing those asap.

I really love the idea of animation movieclips using bezier curves. It looks so natural and yet zo intriguing… I will do some experiments and upload them later on, showing the coolness behind this simple animation engine.

Sources
Download the above demo source (Flash Builder 4 project): Click
Download the BezierAnimatioin class: Click

During the conference I attended Joshua Davis‘ session which really inspired me. I’ve never seen Joshua Davis present, nor did I know his work. Let me be as crystal clear about this as I can be: The man is a freakin’ genius!
During his session he showed a few demo’s of bezier animated stuff. I felt like trying that myself, and this is what I came up with.

The basic concept is to create a bezier in Actionscript and animating movieclips using the bezier as its motion path.

• Basic principle (this is actually just a basic pentool (without the option of adding new points ))

The following versions use the same concept as this one, except instead of fixed anchor points, they all use random points defined in 2 planes. This makes a bit of variety possible allthough the main animation stays the same and that’s absolutely cool!

• Animation fun
• Animation fun V2

I added a few keyboard controls to give you some control of what is happening

• spacebar = show the handles
• r = clear the bitmap
• p = pause the animation
• n = randomize handles
• b = blur more

A few days back I ran into a (at that time) weird problem where transparency was rendered black after a few frames. I had a hard time figuring out what was going on, and I just didn’t have a clue where to start looking. Google wasn’t really helping me out either. So I posted my problem on FlashFocus but nobody came up with the answer to my problem. Peter Elst asked Ralph Hauwert if he already had run into this problem. Mario Klingemann suggested that there might be a problem with the premultiplied alpha. At that time I didn’t know what premultiplied alpha was and seen as the problem resembled the example Mario gave, it seemed quite obvious he was right.

So I took peace with this, and decided to fall back to a non-transparent image format like JPEG. 2 days later Erwin Verdonk came up with the answer to the whole problem… I just had a hard time understanding it…

The root of the problem was me: I had totally forgotten that the draw() method of the BitmapData class didn’t clear the pixels before drawing… Yea, that’s emberassing, right?

But okay… That took care of some problems. I rewrote some of the code, and adjusted some settings.
The speed and the result are quite okay right now. However using 450MB and up of RAM usage might be a bit of a killer.
I’m wondering if I could take care of this using PNGencoder or perhaps JPGencoder.

But for now I’m happy… The final result (for now) can be seen here.

Thanks everybody for helping me out. You guys rock!

PS: The picture used in this experiment was taken by Thomas Heylen. Thanks Thomas!

You can view the previous version here.
The latest version can be viewed here.

I’m very happy with that, but there’s one little problem. I started to notice a very ugly black border around redrawn PNG transparency (which happens when the animation is pre-renderd).

Result without redrawing bitmap (aka: real time rendering)

Result when redrawing the bitmap (aka pre-rendering)

I have no clue what is going on… I have been looking into this issue all day, to no avail… If anyone knows what is going on, feel free to enlighten me.

The PNG file is fine, it’s not corrupt or badly exported, since it works just fine in different versions of the render engine. I do however wonder if redrawing a bitmap over and over again doesn’t create some kind of noise.

If you feel like giving it a shot you can download the .as file here, or get the complete Flash project (.fla + .as + assets) here. (The code is quite messy… Just so you know )
If anyone can point me into the right direction, your help would be much appreciated (and you shall be remembered forever)!

To illustrate the difference I uploaded 2 more versions.
Check out the previous version here (longer render time, but no PNG problem).
See the latest version here (using the faster implementation, generating very ugly black borders).

Edit: You can download the sources for V9 and V10 here to see the difference of the result.

A few weeks ago I had to create an innovative way to scroll in a page. I have seen tons of scrollbars in Flash and I found it hard to create something completely new. At one point I wondered if I could wire the scrollbar to a webcam using Actionscript… So I started experimenting around…

When I first started I quickly ran into a problem: How the hell do I know if anything is moving? So I actually got stuck right in the beginning.
I went on a Google trip which led me to Koen‘s post about motion detection. Koen was checking all the pixels (using nested loops) to calculate color values. I figured this generated way too much overhead. There had to be a better/simpeler way.

In his post Koen mentioned an article, written by Guy Watson, concerning an other way to get motion detection going. To make things simple: Guy just takes 2 pictures – one of the previous frame, one of the current – puts them on top of eachother, and applies the difference blend mode to the upper one: Tadaaa! There we go! The ‘unchanged’ pixels are blacked out. The remaining pixels are the difference in the picture… which reflects movement.

So I went back to Flash and put something similar together. All I had to do now was clean up the image, turn the difference remainings white, and detect what in the picture remains white.

That last part turned out to be quite tricky too. When I first got to that milestone I quickly checked the BitmapData class for intresting methods, but I didn’t find anything intresting. Later on, I talked to Peter Elst and Koen at Flex Camp, and they told me to look again because there actually was a function: getColorBoundsRect()

There we go: that’s a solution right there! And it worked out just fine!
You can test it for yourself in this little test application – requires a webcam (duh!)

Download

Flex Project source: source.zip
Webcam motion detector class (Actionscript 3): MotionDetector.zip

I was planning on adding a ‘sensitivity’ property for motion detection but that turned out to be a bit harder. So I decided to postpone that for now (procrastination is a bitch )
Feel free to suggest better ways of doing this. I’m still pretty sure I’m creating a bit too much overhead to make this work