...these be from google reader...


Archive for the ‘AS3’ Category

Extruded text in papervision3d, with the help of some real brains…

Friday, March 21st, 2008

Yesterday :buttrock: Den Ivanov :buttrock: posted a png extruder class at the papervision3d mailing list.

So, within an hour or so I had an experiment with BitmapData grabbed from a textfield rotating around in extruded 3d :)

Nope, still not even as good as the oldschool windows 3dtext screensaver (the barometer for all that is cool in this world). Certainly not for production (unless you happen to have a deep rooted fetish for EXTREMELY pixelated extruded rotating 3d text), yet, more 1337 than my previous attempt ;) .

Behold:


extruded text example
extruded text example2

what’s that? 360Flex Milan ?? You know you wanna register and see me there!!! (along with some AMAZING speakers).

C4RL05 thinks I’m cool!

Wednesday, January 16th, 2008

…well, not really… ;)

As a devout believer in the temple of RSS, I saw the papervision blog entry : 25 Cool Things to Do with Papervision3D way back in December. Three weeks later I now realize the Pioneer Kuro project I worked on was featured!

pioneer kuro website screenshot

Sadly, I did pretty much none of the 3d work (which is the sole reason it’s featured), that credit goes to Patrick Pietens. He created the cube, I implemented it into the Flex app. Still, it was quite a piece of effort, orchestrating the loadings, transitions from papervision to rendered 3d flv movies, to the actual sections of the site. This was a thesedays project designed by Valentijn Destoop, I was outsourced from nascom to do the actionscripting.

:ooh: apparently the site even received 3rd place at the “uber flash awards”! This is some german initiative… Big time, HUGE…must be… only, I can’t even google a link to it :D (news from Patricks blog, which is only readable through rss). (btw, Patrick, if you happen to read this, thanks for the kind comments on your blog :) Was a pleasure to work with you!)

More 3d text, this time in aliased flavor.

Monday, January 14th, 2008

UPDATE: Apparently the .swf was missing… it’s there now. I realize many of you spent sleepless nights shredding your nails with ye sharp fangs. Crisis is now over.

This is actually the first experiment I wanted to do, but I got too excited about the anti-aliased one. Not much to talk about here, just runs through the pixels and represents them as Cube instances. This time I used Tweener for the possibility of “auto animating” :ooh: Reminds me of that crappy windows 3d text screensaver, except, I don’t have shading… Hopefully I’ll build the courage to install great white soon… Maybe I could be like the cool kids and add fire to it too ;)

There is some ‘flickering’ going on between the individual Cubes. If time permits, I’d like to optimize this to combine as many Cubes into “stretched” cubes as possible. I’ve got a bunch of ideas stemming from these two experiments, hopefully I’ll be blogging a plenty :)



:buttrock: The mindblowing beyond LOBOTOMY Aliased 3d text toy :buttrock:

;)

Oh yeah, the code is shite, experiment stylee… the useful bits should be easy enough to extract. Just right click view source, then select “TextPixelsToCubes.mxml”.

Papervision3d text effect, using anti-aliasing for “rounder” 3d “shapes”

Thursday, January 10th, 2008

I’ve been wanting to do this for ages… Matter of fact, this was meant to be my “end of the year” post for 2007, but you know…

So, same old trick descending my sleeve. Create text, grab BitmapData from it, loop though its pixels and represent them with DisplayObjects.

Again, the ‘trick’ is to check which pixels are transparent. An interesting quality of Anti-Aliased text is that the “rounded” or “Anti-Aliased” pixels are the color of the text, except with varying transparency, meaning the text looks good on any color background.

I took advantage of this by generating “thicker” rows in the Z plane for darker pixels… Hard to explain in words, but let’s allow the screenshots and the app speak for themselves.


text effect screenshot, sakri
text effect screenshot, .net
text effect screenshot, blog
text effect screenshot, FTW!

Click here to fiddle with my toy… :ooh:

click here, or right click app for source

Naturally, the number of Planes makes it more or less impossible to animate the camera with an EnterFrame or so… It’s still cool to see the camera move around using direction keys. Perhaps with Seb Lee-Delisle’s frame by frame movie generator thingy-ma-bob…

Oh yeah, you’ll probably need a decent screen resolution for this… I didn’t bother optimize, for those screen challenged readers, I apologize.

Snow flakes. Flex3 cairngorm papervision tweener snow flakes…

Thursday, December 20th, 2007

Enough buzzwords for you? I wanted to use BlazeDS, but the buzzword overlords were not that kind with me ;) Just good ol’ E4X.

Two years ago we (nascom) made the same thing for club vaio. Unfortunately the old version is gone :( . It was as2 and some “custom 3d” (lol). Customized snowflakes has been done before by others (can’t find links), Seb Lee Delisle made a more realistic snowfall a few weeks back (thumbsup), but this project still has it’s merits :) The project was sold, with the premise of reskinning the old app, but it quickly became apparent that rebuilding from scratch using a more modern approach would be faster. (How things change in just two years!? :ooh: ) Using Flex and Cairngorm made the development extremely rapid and enjoyable. I spent 6-7 working days on this. I was encouraged to go for papervision (and tweener) by Lee Brimelow’s papervision3d experiments, mainly I was impressed with how he could achieve such a nice effect with so little code.

Anyway, here’s the screenshots :

snow fall screenshot

Snow fall, I have a basic ‘random wind engine’ using tweener. I set the max number of flakes to 25… on crappier machines more meant creeping slow death.

flake detail screenshot

I’m quite happy with the “random floating” of the detail flakes…


create your own flake screenshot

That’s supposed to be my favicon smiley d00d… quite the artist I am… :buttrock:

Behold, The Hercules-Trophy Snowflakes greeting app!

deep link directly to the flake pictured above

Ok, Holidays start here. Happy holidays, more exciting blogging in 2008!

:pirate:

Huge Comment Text Generator take 2

Monday, November 19th, 2007

One upping myself here… happens everyday. ;)

I overcame the font size limitation of my previous attempt at the ““Giant Letter Creator”” by focusing on the bitmap image, not the text field. So now, I create the desired text, in the desired font at size 12. Then I grab a BitmapData of it using matrix to scale it, and base the “comment text” rendering on this.

The result is much better… This is total overkill ofcourse, but you know, if you wanna surprise your friends when they update their cvs :D

Huge commenting text generator
huge times new roman
huge comic sans

This version even has buttons to generate commenting code!!! (// and /* */), and 5 lines of CSS!!!! DAMN LIFE IS GOOD!!! :ooh:

And then, There are still a few issues…

Naturally the bitmapdata size limitation in flashplayer… I solved that with, what else, and Alert.show() :D

THen, for monospace fonts this works great, however, for script fonts etc. the spacing of characters can overlap from time to time, meaning the “big character” sometimes has the wrong “small character” (duh, sounds really scientific, here’s an image):

Huge commenting text generator
script font problem

Again, the code is still quick and dirty, right click to view source or click here

:pirate:

One upping John Grden

Saturday, November 17th, 2007

So I created an as3 3d engine which pretty much pwns and humiliates papervision3d

…then I woke up from my fantasy and wept. :ooh:

John posted a “Giant Letter Creator” on his blog. The idea is nifty, but what caught my attention was that I could use my ‘trick’ from the Dazzling Bat Man Text Effect to, (and this is probably the only time in my life I can say this) ONE UP :buttrock: JOHN GRDEN :buttrock:

I know, pathetic, but I’m a dork like that :D

Anyway, what I figured was I could create the desired text in a big font, take a snapshot of it using bitmapdata, then run through the relevant pixels in the image to generate “huge commenting text” from any font and any character.

Now, I only had a good hour to spare, this version has shortcomings, but here it is (proof of concept style):
Huge commenting text generator
huge text preview

The code is quick and dirty, but there really isn’t much of it :) Either right click to view source or click here

What is truly craptacular is that in (flex only?) flash the size of a non embedded font has a maximum of 130 or something, bigger than that and nothing happens. I suppose I could fix this by scaling the snapshot of the text field… Maybe next week…

:pirate:

Your Balls Weren’t *That* Great Anyway…

Monday, October 22nd, 2007

…confessed Serge. Unfortunately the setting was not in a specialist Amsterdam nightclub, rather, at the SAP Lounge in Brussels. After an insane month working as a consultant at thesedays, I had only one day to prepare two sessions for the Adobe
Beyond Boundaries event in Amsterdam and Brussels. My topic was “introduction to AS3 for designer types”, and as conversion bait, I did some benchmarking between flashplayer9 (as3) and fp8 (as1/2). I ran and timed some loops (files : as2 as3), with fairly predictable results. Well, I was positively surprised by 5 secs for 1 billion loops in as3 :eek:.

I also wanted to showcase the speed increases for rendering graphics. I was hellbent on creating a cheap version of the Sony Bravia Bouncing balls commercial, in as2 and 3, then woo the crowd with flashplayer9 pwning and humiliating its older counterpart. Unsurprisingly, I didn’t finish the as2 version for Amsterdam, so, during my lunch break in Brussels I hacked it together. To my disbelief they both performed more or less equally?! Right then, my moment of bewilderment was broken by the entrance of Danny Dura, “right on time” I thought to myself. Danny quickly suggested I flag useBitmapCache, and use Shapes instead of Sprites, but to no avail. At this point Serge joined the conversation, suggested I save this nutcracker for later and showcase teh 1337N355 of AS3 with the famous papervision x-wing fighter demos. This is the point where, (within the hearing distance of a number of suit&ties from some other conference) Serge announced this blogposts title :D

Joking aside, wtf? I’ve uploaded the two files, feel free to test:

AS2
AS3

(and yes, they are different files, for proof just let yourself be knocked out by the beauty of the as3 button component over it’s dinosauring sibling)

At 4000 balls, the as2 version runs at times faster than as3!!!??

Any ideas? Is it rendering? The code is pretty much identical… If you are motivated, you can even look at it:
ze zip

Oh yeah, not worth it’s own blog entry, here’s my “quick app tutorial” used in my presentations, showing some basic tasks and how they are done with AS3:

HOTT Jean Claude Dance AXXXion

Serializing and deserializing AMF0 Mediaserver2 calls with AS3

Thursday, July 19th, 2007

I’m currently working on a multiplayer game (well, 2 player), a flex app which uses Flash Media Server2.
I use the Command Pattern in the app for “player moves”. I have a IGameCommand interface and a bunch of Command classes which implement it. Users select/create moves (command instances) which they send to the Media Server using AMF0 . The Media Server then validates both moves, and sends them back to the players, at which point the client side flashes execute the commands.
Here the tricky bit was the serializing / deserializing, as AMF0 only handles generic Objects… I didn’t want to have this massive switch statement to determine the type of command, then serialize it… Miraculously I recalled this blog post by Colin Moock, and salvation was at hand! I love AS3.

It turns out that in flash.utils there are a few VERY useful functions…

first, flash.utils.getQualifiedClassName() returns a string like : “net.sakri.commands::KickAss” (I’m not sure why the double colon, I’ve seen that syntax before in php and so). As an argument, you can pass an instance of an object, or the classname. This is perfect for the serializing, as the serialized object can be given a variable which holds the “qualified” name of the class that it was serialized from.

Below is an example implementation inside a Command classs (function getSerializedAMF0Object():Object is defined in IGameCommand interface):

[as]
public function getSerializedAMF0Object():Object{

var obj:Object=new Object();
obj.qualified_class_name=getQualifiedClassName(this);

//rest of props

return obj;
}
[/as]
This is kosher AMF0. The server then pushes such serialized commands to both players, and here is the code which releaved me from the nasty switch statement:


[as]
public function commandFromServer(c:Object):void{

var ClassReference:Class = getDefinitionByName(c.qualified_class_name) as Class;
var command:IGameMoveCommand=new ClassReference();
//pass the rest of class props from the serialized object,
//all of which adhere to the IGameMoveCommand interface

}
[/as]
The reason this rocks so much, is that I can now create as many commands as I like, without having to touch the send/receive, serialize/deserialize code. This method could also be used for “real” serializing, meaning, you could store your data objects as xml or strings or whatever, and know that painless instantiation awaits the stored objects return :)

The Batman Text Effect

Thursday, July 12th, 2007

This is the final posting about my presentation at multimania (sniff sniff), and I’ve saved the best for last… The idea is nothing new, a text, which either comes together from pieces, or explodes into pieces… I made one at nascom for a Belgian radio station called Donna a few years back… Pigs Farting, right up my alley ;)

Good Morning Donna
seems there is still a version online :)

I wrote a flash based “fart text generator”, where I could create letters by adding and removing bubbles, dragging them around and eventually storing an entire alphabet in xml… this was then referenced by the animation, and fart text was born… took a good 5 days to make the “text generator” if memory serves me…

I came up with an automated way to do this (though I must disclaim that someone has probably done this before, as always). The idea is to grab a snapshot (bitmapdata) of a textfield, using a Matrix transformation to shrink it… When the bitmap data is small enough, a “for loop” can grab all the pixels which are not transparent (using getPixel() ) . These are stored in an array, which in turn can be used to place “the pieces”. With the speed increases in flash player 9 this happens acceptably fast. Works for any font (download the source and change the font if you don’t believe me).

here it is (Make sure you have sound on!):


batman text effect preview
The riveting batman text effect!

Click to see the text explode (and sound thunder), right click to view source (or click here

I have a bunch of ideas to use this for… bleeding text, smoking text, burning text… if any of my infinite fan-club members decides to use this technique, be sure to post here about it ;)