It took a little over a year, but it’s finally here: Dooodl 1.1.0 1.1.1 is a fact!
What has been done?

• You can now manage the Dooodl’s that were submitted to your blog.
• I even went one better: There’s now an option that enables you to first approve Dooodls before they appear on the site.
• You can choose to get an email everytime a new Dooodl is submitted (with links to approve, disapprove or delete the new Dooodl)
• Your blog, your style: You can make the Flash Gallery and the HTML gallery look exactly the way you want (well, you can choose the colors )
• What’s better than choosing the colors of the gallery? Being able to completely edit the look of the widget so it fits into your theme perfectly!
• Don’t like the Flash gallery? Disable it in the Dooodl settings. Hurray for Flash-haters!
• Previous versions would load all Dooodls at once. That is now history: I added endless scrolling to the HTML version: People with lots of Dooodls will have less trouble showing the HTML version from now on.

I’m really excited about this release because Dooodl has now finally grown up. It’s able to fit in to your theme using the different options.
It finally fits your philosophy too as from now on you can choose to moderate them!

If you haven’t got Dooodl yet, but this release sparks some love for a fun plugin, I’d say: Go get it! It’s free and it will be a good laugh. More than 4200 downloads can’t be wrong!

Oh and by the way: I wanted to take a moment and thank every single one of you guys for downloading and installing the plugin! Seeing that many people use something I created really excites me to make things even better! Thanks for the continuous support and suggestions! You guys rock!

And as always, if you have problems, suggestions, questions: Go crazy in the comments! Drop me a line if you like it! I’d love to see how it looks/works on your site!

Enjoy!

[Update]

A few people commented they didn’t get the widget to show up in the sidebar automatically. That’s because you need to add it to the sidebar yourself. But don’t worry: It’s easy!

• Go to the WP-admin
• Go to the Appearance panel
• Select the Widgets-submenu
• Drag the Dooodl-widget into your sidebar
• Done. Ready. Finito. Party!!!

If you don’t see a sidebar in your widget-manager, it means your theme is not widget ready. In that case you can use the Dooodl PHP template tags, somewhere in your theme (yes I really thought of everything!) where you’d like the widget to show up. Use this code:

<? if (function_exists("Dooodl_widget")) Dooodl_widget(); ?>

There you go! Good luck!

Download this background

• 1920 x 1200 version: Click
• Dual 1920 x 1200: LEFT and RIGHT

The City Kit is absolutely amazing! It’s so powerful and the amount of detail is immense. Pretty unbelievable! If you were wondering wether to get it or not: I can assure you, you won’t regret it if you do
I had a great time setting up the city the way I liked it and then start making photos from any angle that I fancied (there’s more to come ). In the end I spent most of the time in Photoshop making it look less generated and more realistic. I’m quite pleased with the result.

Do you like it? Or do you think it looks like absolute crap? You don’t like the pink tones? Would you like your pet’s name spelled in the clouds? Does it need a blimp (I’m looking at you, Davy )? Let me know what you think about it! I’d love to hear your feedback/suggestions on this.

Have a nice day!

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!

Since I’m such a sucker for ‘beauty in one frame‘ I happen to heart a lot of stuff. That’s where the We <3 it bookmarklet comes in handy. I love that thing! It’s probably my most clicked bookmark in the past few days. However, I noticed quickly that this bookmarklet does not come without any bugs… Only part of the images in a page were ‘heartable‘. And what is even more annoying: when I run into a cool picture in one of my RSS feeds I have to open the URL before I can (try to) submit it using the bookmarklet.

So that workflow kinda didn’t suit me… I figured I could create an OSX dashboard widget that fixes this problem… So I did.

It’s simple: If somewhere you run into an image that is served from the web, you just drag the image (from your webbrowser, your RSS feed, your email client, your IM client, etc) into your dashboard, drop it on the widget… Magic happens… and it’s hearted!

It’s simplicity in a box! I love simple! Simple is good!
Anyway: I thought I might share this with you, guys and girls. Some of you might actually have use for this, too.

Download: Click

Notes:

1. Submitting images using this widget results in entry titles taken from the filenames of the images you drop onto the widget.
2. The source (blogpost, article, Flickr set, etc) of the file will never point to the actual page where the image originally resides. It will point straight to the original image location.

Enjoy!

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

It was really great to see how Playr popped up on different blogs; Sometimes mentioned as part of a project/experiment, sometimes mentioned in lists of handy AS3 classes. That really made me happy and it inspired me to add even more features, and make it even more useful. But those are to yet to be built

For now I just fixed a few bugs and I added a pretty important feature which wasn’t there yet: the debug property. Set debug to true and Playr will trace any errors that occur without breaking your app, without you having to listen to these errorEvents.

I also changed the shuffle internals (I still wonder what I was thinking when I wrote a ‘setShuffle’ instead of simple getters/setters…) and as far as I know: Nothing seems broken after updating old projects using Playr to the new Playr version (but I’ve been wrong before…).

And the last thing I want to mention: I changed the way Playr handles stream errors. The old version would just skip the track, and try again later. However I think the new implementation is better: The ‘broken’ track just gets removed from the playlist before proceeding to the next track.

So there you go: It’s online, it’s free, it’s open-source, it’s for you to use and save time!
(And it’s created by me, so you’ll probably find bugs sooner or later: Do tell me about them and I’ll look into fixing them )

Happy playing!

Playr Site: Playr.noCreativity.com
Download Playr: Click
Playr Documentation: Playr.noCreativity.com/docs

However…
Ever since I got myself Snow Leopard GrabUp died on me: Whenever I take a screenshot GrabUp won’t upload it to the server anymore… And I’m not alone. Lot’s of users are experiencing this issue.
The people at GrabUp HQ probably don’t give a damn about their customers because they don’t seem to be working on an updated version.

So…
I’ve been looking for a replacement but nothing really compares to the power and yet the simplicity of GrabUp.
So what does a good developer do? Create his own workflow in Automator… I won’t go into the details of this. If you love GrabUp but Snow Leopard broke yours, this is a simple walkthrough to get a (free) GrabUp-like workflow running on your own FTP server

1. If you don’t already have it: Download and install this Upload To FTP automator action.
2. Download this Automator workflow and open it
3. Edit the FTP details in the ‘Upload to FTP’ action
4. Save this workflow using ‘Save as’ and give it a name.
5. Open Finder and navigate to the folder where screenshots are saved to (mine is -/Ronny/Pictures/screenshots/), right click it and select ‘Folder Actions Setup…’
6. The Folder Actions Setup dialog opens. You will be presented a list with possible actions. Choose the action you just saved in step 4. Click ‘Attach’
7. The window should look like this now (notice all the checked boxes).
8. Now take a screenshot, wait for Growl to tell you the upload is done and enjoy your CMD+V.

The only minor (depending on your sense of patience) downside of this is that Snow Leopard needs a few (5-10) seconds on order to get started executing the workflow whereas GrabUp starts immediatly. But having done some research regarding this last note, I have come to the conclusion that this is not intended behaviour. I’m not an Apple Developer of any kind so if you know how to make this delay go away, feel free to help me out here

In the meanwhile: I’ve found a pref-pane called Hazel. This tool does all kinds of stuff regarding files and folders. One of them is monitoring a folder of your choice and executing an Automator script of your choice… Well ain’t that just perfect? The intresting thing is that Hazel reacts a bit faster to changes in folders than OSX itself does (as in ’3 seconds’). If I got their FAQ explanation for the pricing right, using it for this sole purpose is free…

What is the difference between the evaluation, demo and registered mode?

When you first install Hazel, it is in evaluation mode. In this mode all features except rule exporting are available. This mode lasts for 14 days giving you a chance to put Hazel through its paces.

After the evaluation period is up, Hazel switches to demo mode. In this mode, Hazel is limited to monitoring one folder and for that folder, only two rules can be active at any one time. Also, in demo mode, you cannot import or export rules and trash functions are disabled.

You may purchase a full license at any time to fully enable all features.

I have installed Hazel, configured it to be working with the above workflow* and guess what… Demo mode will do

*When asked for the Automator workflow: Navigate to /Users/YourUsername/Library/Workflows/Applications/Folder Actions/. You’ll find the workflow you saved earlier in that folder.

So there you go! A free alternative to GrabUp Pro and the baby’s working on Snow Leopard! What else do you need?

Feel free to report any problems you run into while trying to set this up. Now go and share some screenshots!

PS: To any TinyGrab employee who got here through one of these automated notifiers: I don’t like the aggresive attitude you guys seem to be handling (on getSatisfaction, TUAW, Twitter, anywhere) so don’t even bother commenting here in order to promote your product. I tried it and I didn’t like it anyway. Any comments by one of you will be marked as spam. Long story short: Leamme alone.

But it’s still an independent application hacked into WordPress using basic widget.  That means I can’t just share the code so you can use it too on your website (since you’ll have to set up a database, fill in config files, etc… Boring stuff). So yesterday I decided to compact this into a handy WordPress plugin.
And this is what I did: I give you Dooodl!

[UPDATE] Mark asked me to share the source of the Dooodl Creator App, so I did Feel free to send me links to your own creator. I might add different creators to the plugin, and let you choose in the WP-admin which one you’d like your visitors to use

Plugin page: http://wordpress.org/extend/plugins/dooodl
Direct download: http://downloads.wordpress.org/plugin/dooodl.zip
Dooodl Creator source (Flash Builder Beta): Click

If you install it, feel free to drop me a line. Feel free to post the url to your blog as well. I’d be happy to see who’s using it and what people are drawing

(And yes: If you find any bugs, do post them as comment underneath )

Have fun!

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

HorizontalList and ItemRenderers in Flex

I must’ve done something wrong… I can’t imagine this being so hard.
What I did was: I used a simple HorizontalList component, set the columnWidth to 80, built my own itemrenderer and put them together. The itemrenderer basically loads a JPG and displays it. Seen as my images were larger than 80px I decided to do some maths the resize the image on the fly.
To start with, i went into my itemrenderer, and traced the with of the bitmap, and the width of the itemrenderer itself. Just to make sure those properties are actually ready. First thing to notice: this.width inside the itemrenderer randomly traced 80 and 85.

What the f-… Wait… Eh… No, what?

I didn’t really find out why that is, but if anybody feels like enlightning me: go right ahead. (After that, I noticed that sometimes the first or the last (or both) items in the list weren’t updating at all… I must be misunderstanding some fundamentals of the framework I guess… [Btw: I did NOT manage to fix this in a decent way, so at some point I gave up an threw it away...])

The panel titlebar in Flex

So this is AIR, right? Goodbye system chrome, hello you science-fiction-looking chrome! I created my own (very Flex-looking) chrome and disabled the system chrome. I wanted my app to be able to be moved around on the desktop… You know: Like windows do (not Windows…).
I figured: Hell, the Panel component looks a lot like a basic window. Why not use it as the main window? So what’s the first thing a regular human brain would do? Right, you’ll try to get to the titleBar via the panel instance… But you can’t! I figured I must be misunderstanding the construction of the panel. So there I go, reading about the titleBar on the Panel Class page in the Flex Livedocs. Most of you already know but just let me spell it out for you: It’s protected… So you can’t get to it right away… You have to built your own panel class that extends the original Panel class, and create your own public getter for the titleBar…

Excuse me: WTF? Oh, I think I understa… Oh, no I don’t: Why again?

No seriously: What’s the deal with that? I can see how you don’t want a setter there… But no getter? What good is that supposed to do? Anyway, let’s fix this…

< ?xml version="1.0" encoding="utf-8"?>
<mx :Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300">
</mx><mx :Script>
< ![CDATA[
import mx.core.UIComponent;
 
public function get theTitlebar():UIComponent{
return this.titleBar;
 
}
// There are probably way easier/simpler ways than this...
]]>
</mx>

And now I can use theTitlebar of my DraggablePanel class to actually drag my panel like a real window…

pnlMain.theTitlebar.addEventListener(MouseEvent.MOUSE_DOWN, startTheDrag);
private function startTheDrag(e:MouseEvent):void{
nativeWindow.startMove();
}

That looks pretty straight forward, and actually works like a charm… But why did I have to do this? Why is the titleBar protected??

AS3 JPGEncoder for FP9, FP10 and the one on speedballs

So at one point I actually got to building the thing I actually wanted to build: A Photobooth-clone that takes a picture and saves it to the harddrive. Drawing the bitmap went fine, saving the encoded JPG to disk went perfectly smooth as well. The AIR API is really fun to work with. Pretty straight foward… But I will get back to that in just a minute…

The problem at hand right now was the Bitmap encoding: I draw a bitmap (480 x 360) and I want to write it to disk. So I include the AS3corelib in my project and continue my quest. When testrunning I notice the application freezes while the bitmapdata is encoded. And not just for a moment. Noooo… For a full second (or longer)! I can hear you thinking: ‘A second…? So?’. Well if you want to shoot a picture every second this application will just completely freeze. And let’s just face the fact: it’s just plain annoying the have an application the freezes every few seconds for that amount of time.

So I started playing with quality settings, and bitmap sizes. All to no avail. The encoder is just too slow. Peter suggested taking a look at the Vector implementation found here. That went way faster already: Up to 4 times faster. But still: 0.3 seconds is pretty slow… So I read through the comments and run into the magic word: ‘Alchemy‘. I haven’t been playing with Alchemy myself (mainly because I don’t know C), but I knew Alchemy would be the key to he solution of this problem. So I downloaded this SWC (direct link), implemented this version of the encoder, ran the script and…
….I went ‘WHAT THE FUUUUCK?’ (You can see what that looks like below)

This video was made using the pictures Alchemy created. Alchemy was encoding these bitmaps in .05 seconds per frame! (I swear, I went on for at least 15 minutes WTF-ing over and over again…). So: From 1.2 seconds to 0.05 seconds… That’s about 24 times faster. Ain’t that amazing?

The coolest thing? I didn’t even have to compile the C code myself as I was given the .swc file. (Believe me I gave C compiling a try, but me and Terminal… It’s just not gonna happen…)

File.nativePath and File.url in AIR

The one thing I love about AIR? The combination of creating crossplatform applications using the tools I’m familiar with from online development. The keyword here is crossplatform. Creating AIR apps is supposed to be a straight forward process. You shouldn’t worry about platform specific issues. AIR is handling the heavy lifting for you. The only thing you need to do is create the app using the crossplatform API. Or so you would think.

One of the first things I noticed was the fact that the file.nativePath property isn’t all that crossplatform. And nobody can’t really explain why. Even Lee Brimelow didn’t manage to explain that in his tutorial…

I mean: How can the native path not be cross platform? It’s native to it’s own platform! (I really went WTF when learning that).

Apparently you can do anything using the file.url property. To me file.nativePath isn’t intended to be used when trying to access a file, but more intended to show the end-user where on the filesystem the file resides using a platform native notation.

Examples

• Windows XP: c:\Documents and Settings\noCreativity\My Documents\myFile.jpg
• Windows Vista: c:\Users\noCreativity\My Documents\myFile.jpg
• OSX: /Users/noCreativity/Documents/myFile.jpg

instead of

• file:///c:/Documents%20and%Settings/noCreativity/My%20Documents/myFile.jpg
• file:///Users/noCreativity/Documents/myFile.jpg

I am no Adobe AIR expert so please, feel free to correct me. Because this really itches me. How can a crossplatform API have a property which is not crossplatform-compatible (and don’t get me started on the whole OSX Dock/menubar vs Windows Start Menu/taskbar thing… But somehow, that’s different…)

Finally… The end…

Yes, I had a hard time doing all this but I learned a lot! My conclusions?

I like Flex and how it enables you to rapidly create data driven applications, but I’m pretty sure I’d really have to look into the inner workings of the framework before trying to build something, using the framework… And basically that ‘really looking into it’ ruins the mood for me… Definitely when experimenting.

Alchemy is amazing! I can’t wait to get a good C development environment up on my iMac and start playing with C and lean how I can get the best from both worlds. If you have got any decent suggestions on how to do that [without Terminal] feel free to tell me
Oh and by the way: If you’re experimenting with Alchemy and you’re open-sourcing code or libraries, I encourage you to add a .swc file with the compiled C code. Thanks in advance!

I love the AIR API. Although that nativePath thing will keep haunting me until somebody can give me a straight answer, ’cause I feel like a complete idiot right now.

Oh, and if you care: Feel free to check out the application!

Download: Click!