sakri rosenstrom blog

I needed a DropDownList with multiselect capability and wasn't entirely impressed with Googles offerings. Wondering why the DropDownList doesn't support this in the first place (after all, DropDownListBase does extend List which has this feature), I discovered this intriguing comment in the source code:

After a brief attempt at manipulating the original component, I got annoyed and wrote a simple one which full fills my needs.  I know, "No blog post for years and all we get is a lousy flex component?". Such is life. I'm sure the same code has been written a 100 times by others, but I thought I'd share it anyway.

Click for a demo

Right click the demo to view source.

Download MultiSelectDropDownList.mxml

All along I was planning to do something with the circular wander that involved, surprise surprise, text. After seeing Neuroproductions beautiful Alice in Wonderland I snapped into action.

So, click the image below... You can punch in your (or another) Twitter handle, specify the number of "wanders", click GO and watch the twitter profile pic being drawn by the tweets of the profile pics proud owner. The default is 10 wanders, but 40 or 50 run smooth if you're impatient

So how did I get there? Like this. The following images are a random selection of people I follow on Twitter, rendered as I was progressing with the code.

I started off with just squares, which looked kind of nifty:

Here is @inspirit

@makc3d

My homie @theflashbum

I then moved on to text. I started off using regular TextField :

The mighty @wefail

While fun to watch, the text was practically unreadable, so I increased the font size and added a GlowFilter to create a fake stroke:

Here's a full size detail, the text was too big (tough to recognize the image), but damn, the black text with white stroke all piled up like that looks hott!

I had some difficulty with the spacing of the text, so I moved on to the TextEngine instead of TextFields... immediately I ran into some bugs...

My old friend @sjespers

Totally unreadable, but kewl

I then got the text engine code working:

The ever inspiring @quasimondo

The problem with having a white or black stroke, is that in dark (or light) areas, the text is once again totally unreadable.

So I figured I would alternate the stroke color. If red<128 && green<128 && blue<128, I set the stroke to white, otherwise it's black:

Rock on @derschmale

The last adjustment was to set the alpha of the glowfilter to .3 . I was happy enough with that result to call it a day and blog

The guy I keep somehow not catching at conferences @flashaddict

Update:

I added a "save image" feature to the demo. I used the inbuilt JPGEncoder, so it's slow, I know there are faster alternatives, but no time

Click here for the demo:

Update2:

I thought it would be fun to have a gradient in the characters instead of a solid color. Instead of grabbing the pixel which corresponds to the center of the new character, I grab one from the "top center" and "bottom center" of the new character. The result isn't necessarily more "recognizeable", but looks nice. I also added a couple more controls : font size, background color and font. That's right, you can now render your image with Comic Sans! Rejoice!

A designer from work with a colorful profile pic @farfields

I submitted my Irritating Puzzle blog post on reddit yesterday. (link to comments)

Quite confident the submission would just sink into oblivion as usual, I went over to our neighbors for some dinner.

A few hours, and to my surprise 9121 visits later, my blog was replaced with an austere, and rather embarassing 403 forbidden message.

WordPress is quite the resource hog... I'm attempting to install WP Super Cache for the unlikely recurrence. Anyway, the stats I did get during those glorious hours were interesting/funny.

At the time of writing, the submission has 103 up votes 55 down votes. I would have assumed that would add up to maybe, oh, 300 clicks. Infact, every Reddit vote represents nearly 100 clicks.

I record events using the AS3 Google Analytics API, 41,314 of them to be exact.

• The reset button was smacked 30,973 times
• The show solution buttons were clicked 9,211 times
• The average user hung around for 05:06 minutes
• The puzzle was solved 103 times

How about those enticing Google ads to the right? Grab a hold of your chair.... 1 click! I'm RICH!!!!

I included an event which fires on every "move" which is a multiple of 100.

I felt pretty crap about my 700+ solution, but it's good to know I'm not alone. Infact:

• 141 people attempted solutions with more than 800 moves...
• 27 did more than 1500...
• 15 over 2000
• 2 people moved those pieces over 4200 times

And the Grand master of patience / self irritation / epic suffering, moved the pieces over 5500 times!!! . Dang!

The solutions to this game are available with the manual that comes with the game, so it's well possible that some people just followed that. Nevertheless,

• The best solution was 48 moves, second 54 then 114. The first two didn't submit their solutions, so might be coming from one of those guys that scour the web for flash games on which they can use their 1337 Charles skills on.
• 22 people solved it with less than 200
• 5 with between 1000 and 2000

and finally.... that poor son of a bitch who moved pieces over 5000 in one go?

HE SOLVED IT!!!

WITH 5516 MOVES!

Hat's off to you

UPDATE1: As pointed out by a helpful redditor called "ijanos" this game is called "Klotski", wikipedia has an article about it http://en.wikipedia.org/wiki/Klotski

UPDATE2: I've uploaded a new version with the solution from "Henrik".

UPDATE3: I wrote a blog post about stats regarding this game here.

I was over at a friends house for New Years. He had received this "annoying puzzle" as a Christmas gift. I spent 10 minutes fiddling with it, until my wife politely yanked it out of my hands. Before leaving I took a photo of the damned evil thing, thinking I'd quickly make it in flash and solve it on my own time.

The objective is to move the pieces around until the Big Red Square reaches the bottom center. At the bottom side of the box, there is a thin slit. The Big Red Bastard is "thinner" than the others and once in position, it can slide through. Couldn't be simpler eh?

As planned, I quickly shit together a working copy of the puzzle.

I kid you not, solving this hell spawn took me longer than coding the shitty game!!! I saved my solution for posterity, and it contains a most embarassing 759 moves

So, are you as retarded as me? Try it out:

(oh yeah, mind the elite graphic design and sizzling game play, only one piece can move, one step at a time)

If you do manage to solve it, the "moves" are automatically printed out in the text box. In the likely case that you have less moves than me, just select all, copy and paste the solution in the comments below... I'll add the solution into the flash and upload it again...

*enjoy*

This was a fun quickie. I've always wanted to try creating Northern Lights with Actionscript, and here was a good excuse. I've seen the real deal in Finland, and though my demo doesn't act (or look) exactly like aurora borealis, it does use the Circular Wander Class I blogged about last week The code is pretty straight forward, the "trick" being that I take the y value of the "leader" (an instance of CircularWander), and cast that to the Z value of all the following particles. A little Blur, and voila. Then for lack of inspiration, I made it into a sound visualizer.

I used this random Image from Flickr as my source of inspiration:

Here's a screenshot of the demo.

Click image to see demo WARNING: 3megs... there's an embedded sound file...

Here be the source files (without the .mp3, that would be file sharing?!)

I just added the code to the CircularWander.zip from the previous blog entry...

Hope you like it!