Flash – HTML5 Drag and drop integration

Published
by
wouter
on February 21, 2010
in Actionscript 3.0, Flash and html5
. 5 Comments

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.

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

Published
by
wouter
on December 8, 2009
in Actionscript 3.0, Flash and pixelbender
. 2 Comments

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

Published
by
wouter
on October 25, 2009
in AIR, Actionscript 3.0, CKEditor, Flex and fckeditor
. 15 Comments

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 at http://blog.aboutme.be/wp-content/uploads/ckeditor_flex_air/ckeditor_flex_air.zip

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

When you extract the zip file, you will find an swc file, an assets folder and de demos folder. 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

Published
by
wouter
on August 17, 2009
in AIR, Actionscript 3.0, Flex and fckeditor
. 34 Comments

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.

You can check out a demo at http://labs.aboutme.be/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

When you extract the zip file, you will find an swc file, an assets folder and de demos folder. 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

Published
by
wouter
on May 24, 2009
in Uncategorized
. 0 Comments

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

Published
by
wouter
on January 2, 2009
in cakephp and cakeswxphp
. 8 Comments

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
- …

More info at the bakeme page…

CakeSWXPHP – updated to SWX 2.0 beta 1

Published
by
wouter
on December 23, 2008
in Actionscript 2.0, Actionscript 3.0, amfphp, cakephp, cakeswxphp and swx
. 0 Comments

The first beta of the new version of SWX was released yesterday. This new version brings AS3 and Flash Player 10 support. I decided to update CakeSWXPHP, to support this new version of SWX. You can download a new version, from my CakeSWXPHP page.

Image search service

Published
by
wouter
on November 11, 2008
in amfphp and swx
. 0 Comments

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

Published
by
wouter
on October 5, 2008
in Actionscript 3.0 and Flex
. 2 Comments

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:

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:

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:

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:

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!

Flash On The Beach 2008

Published
by
wouter
on October 3, 2008
in Conferences
. 0 Comments

Awesome.

I got back from the conference yesterday, feeling both inspired and depressed (because it’s over again). We got to see a lot of great sessions, and I think most of us returned with a lot of new ideas, starting with reserving 20 minutes each day to play around :-)

It all started with Rob Chiu’s impressive sequence, which perfectly set the tone for the next 3 days:

The Flash plugin is required to view this object.

These were the sessions I attended after that:

Monday:

  • Richard Galvan – Flash Now and in the Future: Some new, and some old stuff on the Flash platform
  • Marco Casario – Mash-up widgets with Adobe AIR: Showed us how easy it is to incorporate API’s in your AIR apps
  • Branden Hall – Brilliant Ideas that I’ve Blatantly Stolen: Inspired me to (code-)play some more with Flash itself.
  • Geoff Stearns – YouTube Lessons Learned: Interesting to see some background info on one of the most used swfs on the internet. Saw some funny youtube video’s aswell :-P
  • Erik Natzke – Beyond the Knowledge: The Art of Play: One of my last year’s favorites, showed some more background on how some of the drawing was done.
  • James Paterson – Modulating a Lot: This guy creates some CRAZY WEIRD interactive animations. One of this year’s drug addicts.

Tuesday:

  • Mike Downey – The business side of AIR: how to sell your clients on AIR apps
  • Jeremy Thorp – Emergence
  • Grant Skinner – Things Every ActionScript Developer Should Know: Great to see that Grant is telling the same that we are teaching our students
  • Jam Session: Keith, Mario, Joa, Andre and Carlos each did a 10 minute session showing us a selection of the stuff they do
  • Lee Brimelow – Platform Jiu-Jitsu: Saw some cool wrestling video’s, linked to Flash platform idea’s
  • Robert Hodgin – The Best 8 to 12 Hours of my Life: Personally made the book store sell out their Processing books last year :-)

Wednesday:

  • Geoff Lillemon – Stop and Smell the Internet with Geoff Lillemon and Anita Fontaine: Really weird (but cool), Tim Burton style fine art.
  • Andre Michelle – Adobe made some noise! Andre is one of my favorite speakers, the stuff he does with audio in actionscript is crazy.
  • Koen de Weggheleire – Play With Pixels, bitmap manipulation with AS3: co-owner of Happy Banana, funny session about matrices and bitmapdata.
  • Mario Klingemann – Here be Pixels: This guy blows my balls of every year. The way he solves certain problems is just crazy…
  • Jonathan Harris – The Art of Surveillance and Self-Exposure: Stood in front of 800 flashers, saying there hasn’t been made a masterpiece in flash yet…

Thank you John & the FOTB team to throw another great conference, thanks to all the speakers for inspiring me (see you in Miami?) and thanks to my employer for giving me a chance to attend FOTB08!