sakri rosenstrom blog

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


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!):

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

So, when your local user group meets up, a bunch of geeks get together and drink wine in posh castles like this:

Right? Didn’t think so Gotta give it to the organizers….

So, try imagining someone that ‘codes optimized bump map rendering for vm 3d engines’…

With an instinctual sense of schadenfreude, one conjures up images of 2 inch thick glasses with bandaid, nervous twitches and other generally creepy character attributes… Yet, as so many times in the past (with flash devs), I was surprised that Ralph Hauwert was not only “totally normal”, but a very nice guy and a great public speaker! (not forgetting inspirational). I’ve been reading lots, seen demos and even tried some tutorials with papervision3d before. I was enthusiastic, but getting a ‘first hand’ walkthrough the project really got me psyched! No wonder my mailbox is daily filled with the papervision mailinglist Can’t wait to get my hands dirty….

It was cool to see him create a Collada file in 3dsMax (oh, and explain wtf collada is in the first place, nothing to do with coconut alcohol), then import it into a flash project and manipulate it… He also spoke about the groups philosophy for creating the best possible api (easy for flash users to grasp), which got a bit thumsup for me. Impressive demos, great info… thanks for coming!

Koen’s presentation went straight for the jugular of image manipulation in as3… It’s tough to make the matrix class sexy speaking material, but Koen was well prepared and I learned a couple of things… First thing I did this morning was to try out the DisplacementMapFilter… I grabbed some old code and put together this magnificent rip off of Koens wavy text effect

displacement filter text effect

again, right click for source, or click here

I used net.sakri.graphics.WaveGraphic to create a (wait for the surprise) a wave graphic, to which I added 60 y blur… It’s the same wave graphic as in the infamous “web2pointOHmyGod Logo Explorer” I then scroll the lil bastard using net.sakri.component.HorizontalBitmapScroller to (again, tough to anticipate this one) scroll a snapshot of the wave graphic… HorizontalBitmapScroller does the “panorama thing”, at first I tried BitmapData.scroll() , but the displacement fun ends real quick like that Then, as Koen had demonstrated (I still can’t believe I never saw it before), I run DisplacementMapFilter on a textfield, and, VOILA!

I just had to add the reflection, but damn… my dual core is going to 60%… resource hog from hell… oh well, no time to optimize (I guess the .swf could be smaller than 800×600), but such is life

anyway… Looking forwards to the next event!

Right, as an attempt to imprint my name into the retinas and craniums of all who made the mistake of attending my multi-mania presentation, I had a “text effect which reacted to sound” covering the moviescreen… (see a piece of it here). My name, accompanied by my very own pirate smileys, bouncing to the wicked sounds of dj Zinc’s “super sharp shooter”.

I later on explained how I used the “split text field” effect (see text effect explorers, split text effect explorer), to react to the wonderful AS3 flash.media.SoundMixer.computeSpectrum() functionality. All the magic happens in the “reactToSound” method (just view source). The code loops one of the returned channels, grabs a readFloat() from the spectrum at an interval defined by the number of letters in my effect, divided by the available bytes (256). I then use this value to “y position” each letter and a few “followers”…

View the lobotomizing und brainwashing text effect!

click here for source goodness, or right click on the .swf then “view source”

The reflection was more or less copied from : Ben Stuckis reflection , I also used a “Easy Button” from the original AS3 samples written by the mighty Senocular, not his greatest contribution to the world of flash , but saved me a few seconds, and, gave me a good reason to give a shoutout to the great man I used audacity open source sound editor (the gimp of sound editors) to create the “loops” (lol). If nothing else, I know I have no future in the world of music

Mastering this powerful filter is something I’ve had on my ‘todo list’ since, oh, last october or so when I read Actionscript3 Cookbook . In chapter 10 : “Filters and Transforms” there is example code for generating “embossing, sharpening and Edge Detect” filters using the ConvolutionFilter, as Borat would say, very naaaiice…

Instead of typing in a gazillion “test matrices” I decided to follow the tradition of “flex [fill the blank] explorers”, so, behold,


The Dazzling ConvolutionFilter explorer
again, right click on the app for source…

I didn’t actually have the “moment of AAAH” that I was hoping for… I gained a wee-bit of insight, but more playing around is certainly required. If any one of you millions of fanatic sakri.net/blog readers (who no doubt will spend days playing with this 31337 application) happen to come up with interesting Matrices (or insight), don’t hesitate to post responses, or, if you are shy, send me an email from the contact form on my homepage…

On another titilating side note, this was the first thing I built with moxie… nope, I didn’t use any of the new features, but I thought I would sound far far cooler…

tah tah

I wasn’t planning on involving my kids (let alone talk about kids) in this blog, particularly after my “political” post from this morning, but this is flash related!!!

It’s my take on wefail style puppetry!!! How many birthday cards have you seen that implement Model View Controller?? The Christmas card is gonna be a Flex3 app this year

Check it out, hope it puts a smile on your face (make sure you got sound on):

HAPPY BIRTHDAY KIDS

oh yeah, and ps. Here’s another one I made back in 2006… DJ KEON Basically, it’s a set of images, and the script chooses 2 at a time, toggles them for a bit, then chooses two other images, and so on… often it really looks like it’s synched to the music

So the Belgians are having their elections on the 10th… They’ve erected billboards all over so candidates can see their important faces on posters! The photo below was snapped down the street from my house:

My friend Stephane picked me up the other day on the way to work, and started telling me about this “hardcore” poster he saw, where they had written text over a womans face… Pretty much everyone I’ve shown this to has pulled the “living ooh” face. What’s the message??! Surely they aren’t covering her face because she left the party, and they couldn’t afford another photoshoot?! Sweet beards though The red one must have some special powers!

I don’t dare to link to them, but you can see these serious dudes actually smiling on their website… Surprisingly the woman doesn’t have her own poster

As promised, here’s the first set of “samples” and source code from my multi-mania presentation… I started the session with an introduction (or reminder, or sleeping pill, depending on your level of Flexpertese (har har)) on the distinguished topic of “Inbuilt Text effects in Flex”. It does come with a fine selection, so the point is, get to know them well, before you put on your cowboy hat and try to recreate one thanks to not knowing what’s available.

This one covers the basics, be sure to test out the different easing functions and be CERTAIN to dazzle yourself with the sheer awesomeness of the IRIS!!!!11

The Incredible Flex Text Effects Explorer

Swish, eat your heart out… thanks to the TextField.getCharBoundaries(), The “Split Text Effects Explorer” (for the lack of a better marketing term), recreates a bunch of very common text effects, only, the amount of code required is drastically reduced from the day of old, and, the text retains it’s spacing integrity!

The Uncanny Flex Split Text Effects Explorer

Finally, my take on the ever so popular Web2.0 Logo Creator by Alex P. This one actually features some of the other topics of my session, namely, using BitmapData, Bitmaps, the Drawing API and BlendModes for “photoshoppy” text effects… More on those some other day. The reflection was pretty much stolen from : Ben Stucki . It still irks me that I didn’t have the time to add that spinning yellow “beta” star thingy-ma-bob…

The Thunderstriking Web 2.OMG WTF ROTFLOL LOGO Explorer

Either right click the projects for source, or go here. The code is crap, I know, (read the disclaimer in the source), not a fountain of sustainable project building material, but with a keen eye you’ll find the key routines etc.

enjoy!

I gave a session at multimania last friday (25th may 07) on the fine topic of “Exploring Text Effects in AS3 and Flex2″ (with the marketing name of “Dazzling Text Effects”). There was much rejoicement. My friend Pieter was kind enough to stay awake and take a picture!

As you can see, I pretty much rented an empty cinema to pose as a speaker!

Also worthy of note, I forgot my clipper at my inlaws a few centuries ago when I last cut my hair, so, I actually resemble my pirate smiley in the photo… YAARRRRRRR etc.

Apparently I wasn’t all bad, here’s what the guys at thesedays had to say about it

I promised I would swiftly provide source code to the files I presented… erm… I will, one at a time, at my own pace, I’ll actually have something to blog about… Like I said, I hacked most of it together only a few nights before the show, so, naturally I would be too embarassed to share such dribble…

Thanks again to Serge, Koen and the other organizers for smoking enough crack to invite me

Back in December I saw Tink speak at Flash On the Beach… He showed an application of his where the screens were lined up horizontally, and smoothly “slid” from one to another when navigating. For shits and giggles I decided to reproduce it in a cms project that I’m currently working on.

As I was tinkering (har har) I remembered a project I worked on for PlayStation Portable… I came in late to the project, Serge Jespers had written a menu that mimics the PSP one… I remember that being a few hundred lines of code… It occurred to me that with Flex I could write the same thing with far less…

well, here it is:

PSP Style Menu with Flex

I know I know, it’s not EXACTLY the same, but the concept is there (this is a test, not a paid project ) The First two yellow items don’t actually contain “sub menus”, the red ones do, so be sure to click up and down (or use the arrow keys)…

Rather than creating a “Playstation Menu Component” I modeified a Slider component from an older project. The “HorizontalSlider” and “VerticalSlider” extend a baseclass called “Abstract slider” (see the source, psp_menu_clasees.components package).

The Abstract Slider is a “Template Component”, meaning the class allows users to either add “menu items” by placing Tags in mxml, or, through actionscript by using the addSlideItem() method. Search the documentation for “Template Component” for futher details.
The Subclasses (or concrete implementations) are very simple… each places a Box component and direction specific “sliding” instructions.

…sooo, to conclude, the actual code for the menu is around a 100 lines or so… It could have been made with less, but for the sake of cleanliness and functinality it’s what it is…

Right Click “View Source” or click here to see the code…

After a long run of AS3 goodness, I was outsourced to do some dinosaur development at these-days… An AS2 project, which unfortunately got cancelled after just 4 days :(.

It wasn’t a total waste of time though… Coming back from ActionScript3 to 2 brought along a number of “better” programming practices

The best example that popped up is event handling… Sure, event bubbling etc. is out of the question, but some basics can be imitated with relatively nice results.

In AS3, you extend mx.events.EventDispatcher (or implement flash.events.IEventDispatcher) to (surprise surprise) dispatch events… The “old way” of achieving this in AS2 was to “shove in” some clunky EventDispatching code… So, simply shove that clunkiness into a class:


[as]
import mx.events.EventDispatcher;
class AS2EventDispatcher{

}
[/as]

then, (instead of typing that in each of your wanna-be dispatching classes), just like AS3, you extend it:

[as]
import AS2EventDispatcher;

private function dispatchSomethingSweet():Void{
dispatchEvent(new Event("something_sweet"));
}
}
[/as]

as the discerning reader would have noticed (kl3ver boy), new Event(”some_event”) is not standard AS2… so, this event class must also be created, in order to be extended:

[as]
class events.Event{

public function clone():Event{
return new Event(_type,_target);
}
}[/as]
why one might want to clone() events in as2 is beyond my willingness to think about the subject though…

anyhow, good times, good times…