Wouter Verweirder

My Personal Blog

Flash – HTML5 Drag and Drop Integration

After seeing Mario Klingemann’s HTML5 drag and drop demo, I wanted to write a library around it and make it a little more cross-browser.

Register the necessary event listeners to the class and react to events such as dragging a file / element over your swf, dropping data or dropping a file on the swf.

1
FlashDragDrop.addEventListener(FlashDragDropEvent.DROP_DATA, dropDataHandler);

You don’t need to add any extra javascript to your flash embed, the javascript necessary to add the drag and drop support is injected automatically.

You can detect the drag and drop events in the latest versions of Firefox, Safari and IE. Accessing the content of the dropped files only works in the latest version of Firefox (try dropping an image).

You can check out a demo or download the source files.

Webcam Difference Keying

Some of my students are working on a project where they need a photo-booth-like keying application (take snapshot with somebody out of the picture, then step back in the picture and the background disappears). I’ve been experimenting with pixelbender the last week, and created some classes that do just that.

Difference keying

Check out the example, and play around with the parameters. Please note that it works best with a background without too much detail or similarities with the person in front. Also make sure there’s enough lighting.

You can download the source files and play around with them.

CKEditor Running in Flex and AIR

CKEditor is the new version of FCKEditor. Following up on my FCKEditor post, I’ve got CKEditor up and running in both flex and air now.

screenshot

Download the library + demo’s on github.

Again, some release notes (same as FCKEditor actually :–)):

If you want to use CKEditor in your own Flex or AIR projects, add the swc to your library path, and the assets folder to your src folder (just like the demo projects).

When you use the component in a Flex project, you need to ensure you set the wmode property to ‘opaque’. Also, if you run it on your local filesystem with Internet Explorer, you won’t see the component. It works fine if you run it on a webserver.

Using FCKEditor in Flex and AIR

UPDATE: you should take a look at my CKEditor implementation, as CKEditor is the successor to FCKEditor.

One of the most wanted features in Adobe Flex / AIR is a better Rich Text Editor. There are some great ones available for javascript, so why can’t we have an editor with the same featureset? Well, it is actually possible to incorporate existing javascript editors in your Flex / AIR applications.

Flex FCKEditor

You can download my library + demo’s at http://blog.aboutme.be/wp-content/uploads/flex_fckeditor/flex_fck_editor_0.1.zip

Sources of my CKEditor bridge are available on Github.

If you want to use FCKEditor in your own Flex or AIR projects, add the swc to your library path, and the assets folder to your src folder (just like the demo projects).

When you use the component in a Flex project, you need to ensure you set the wmode property to ‘opaque’. Also, if you run it on your local filesystem with Internet Explorer, you won’t see the component. It works fine if you run it on a webserver.

Currently it’s possible to get / set the htmlText, and change the toolbar set. I hope you enjoy this component, if you find any bugs or have feature request, feel free to post them in the comments.

iPhone Public Transportation Lookup

Some of you may know, I don’t own a car. So I take the public transportation a lot. I need to check the hours of trains, busses and metro’s very often, but their aren’t any mobile optimized travel-search services (that I know of) here in Belgium.

So I decided to write my own service, which enables you to lookup train, tram, metro and bus connections with your iPhone. Right know, it knows how to get from one bus station to another, I’ll implement other search options in the near future.

You can check it out at http://labs.aboutme.be/itravel (with your iphone :–))

BakeMe – Customized Cakephp Bake Templates & Application Skeleton

I just uploaded a first version of my cakephp scripts.

Bakeme is a cakephp application skeleton with customized bake scripts, which enables you to create advanced, data-driven websites.

Some of the features are:

  • Pasword protected backend, based on users in the database
  • Customized form helpers to add fckeditor input fields, server side file browser fields, datepickers for date(time) fields, autocompletion functionality instead of comboboxes (if you set autocomplete to true using the extendedForm helper).
  • SoftDeletable behavior, so database records aren’t deleted instantly, but flagged as deleted
  • More advanced code generation, to generate nicer looking backends, based on your models
  • Option to bake all controllers instantly (using cake bake controller all (admin))
  • Option to bake all views instantly (using cake bake view all)
  • View code generation, to ajax sort records of models which have a field “order”.
  • Integration of cakeswxphp, which enables remoting on your website through swx, amf or json

You can find an updated version of BakeMe in my Admin Plugin on Github

Image Search Service

I had to search for (stock) images today, to include in a presentation. I found myself tabbing through different search engines all the time, so I decided to write an amf/swx service which has methods to search SXC, MorgueFile, Google Image search and Flickr. This way, I can write a flash frontend, which makes my life a little easier.

You can see a simple image browser at: http://labs.aboutme.be/image_search/.

And of course, the server side code is available for download aswell.. You can find the service itself in swx/services/ImageService.php. For Flickr, you will need to have an API key, and enter your API key in the ImageService PHP file.

Resizing Scrollbars in Flex

I had to create bigger scrollbars, for a flex project which had to run on touchscreens. Their isn’t a real style or property which enables you to do this, but thanks to programmatic skinning, it is quite easy.

First of all, create a class which extends mx.skins.halo.ScrollTrackSkin. In this class, you override the measuredWidth() and updateDisplayList() functions:

1
2
3
4
5
6
7
8
9
override public function get measuredWidth():Number
{
    return 50;
}

override protected function updateDisplayList(w:Number, h:Number):void
{
    super.updateDisplayList(50, h);
}

After that, create a class which extends mx.skins.halo.ScrollThumbSkin. In this class, you have to provide the same methods:

1
2
3
4
5
6
7
8
9
override public function get measuredWidth():Number
{
    return 50;
}

override protected function updateDisplayList(w:Number, h:Number):void
{
    super.updateDisplayList(50, h);
}

The last class you have to create, is for the scrollbar arrows. This class extends mx.skins.halo.ScrollArrowSkin. Again, you have to override some methods: measuredWidth, measuredHeight and updateDisplayList:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
override public function get measuredWidth():Number
{
    return 50;
}

override public function get measuredHeight():Number
{
    return 50;
}

override protected function updateDisplayList(w:Number, h:Number):void
{
    super.updateDisplayList(50, 50);
}

The final step, is to link these classes in your css file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
ScrollBar
{
    trackSkin: ClassReference("com.mydomain.BigScrollTrackSkin");
    downArrowDisabledSkin: ClassReference("com.mydomain.BigScrollArrowSkin");
    downArrowDownSkin: ClassReference("com.mydomain.BigScrollArrowSkin");
    downArrowOverSkin: ClassReference("com.mydomain.BigScrollArrowSkin");
    downArrowUpSkin: ClassReference("com.mydomain.BigScrollArrowSkin");
    thumbDownSkin: ClassReference("com.mydomain.BigScrollThumbSkin");
    thumbOverSkin: ClassReference("com.mydomain.BigScrollThumbSkin");
    thumbUpSkin: ClassReference("com.mydomain.BigScrollThumbSkin");
    upArrowDisabledSkin: ClassReference("com.mydomain.BigScrollArrowSkin");
    upArrowDownSkin: ClassReference("com.mydomain.BigScrollArrowSkin");
    upArrowOverSkin: ClassReference("com.mydomain.BigScrollArrowSkin");
    upArrowUpSkin: ClassReference("com.mydomain.BigScrollArrowSkin");
}

Programmatic skinning allows you to do even more, you can completely control the layout, and drawing of the components through code.

Good luck!