Somewhere in Singapore there are now ca. 20 superstrong Neodym magnetic balls either driving around with a taxi or exploring the local sewers. Well, Mr. Tarbell - you should have better left them at home instead of wearing them as a wristband... The problem is that Jared will need those magnets again for his lecture at MAX Korea so here's the question - does anybody know where he could get some replacement Neodym magnets in Seoul? Or does anyone of you who will attend the conference own some that you could borrow him? I'm sure he will reward every helping hand with a unique button or some other surprise.
Undeniably November will become an intense month for me. And as if Singapore and Amsterdam aren't enough my travel itinerary has just been extended by another destination: on November 15th I will be speaking on Macromedia MAX Korea. And even if I don't understand what is written there I must say that I'm very proud to find my name (마리오 클링거만) among this list of amazing people whom I respect and admire.
I think it's only fair that if André goes to Korea I will come to Singapore in 4 weeks.
I've just been invited to hold two presentations on the Macromedia MAX conference 2005 in Singapore on November 10 + 11. In one session I'll talk about programming advanced visual effects, in the other I'll deconstruct a VJ system I'm developing. I'm very excited that I've been given this opportunity and I'm looking forward to this event!
And for those who haven't noticed it yet - I will also be speaking on the Spark Conference in Amsterdam, November 16 - 18. I still remember the FlashForward 2001 in Amsterdam as one of the best conferences I've ever visited. And as Steward McBride who was one of the organizers back then is now responsible for Spark I have no doubts that this conference will become a full success.
Why stop at a rectangle when the same method can be used to draw animated lines in any angle? So here is a Marching Ants Path class - I don't know if it's of any use - maybe for a lasso tool of some upcoming Flash based "Photoshop Junior" RIA?
BTW - the hardest part was to make the bitmaps line up correctly so that the patterns are moving somehow in sync. There is some under-the-hood stuff going on with beginBitmapFill that I haven't yet fully figured out. It seems like the fill bitmaps get aligned to 0/0, but when they are flipped they don't. Or do they?
Whatever, the current version uses a mixture of try-and-error plus in-theory-this-should-work algorithms and funny enough this seems to work well with short, curvy pathes and a little less well with long straight line segments. But you can see that anyway only with the "long" setting in the demo.
Here is a demo for something that I hope may prove useful for some people. I have written a BitmapExporter class which allows to save PNGs or JPEGs out of swf files. There have been some Flash 8 demos already that show this possibility, so the novelty factors of my class are that the images get compressed before they are sent to the server and that Flash remoting is used to transfer the data. On the server side I'm running this with AMFPHP in conjunction GD (which comes usually pre-installed with PHP) to recreate the images.
The demo allows you to doodle some drawings and to save them to your hard drive as a JPEG. Because of its security sandbox Flash cannot access your harddrive directly. It first has to send the image data to the server and then commence a download from there. We are so used to the small filesizes of JPEGs or PNG that it's quite surprising to see what size an uncompressed image really has. The canvas in this demo for example has a dimension of 500x425 pixels. That's 212500 pixel x 4 bytes per pixel = 850000 Bytes or about 830K.
The challenge is to create a compression algorithm in ActionScript which will process the image data with reasonable speed without overexerting Flash. I didn't want to start studying the JPEG or PNG format specifications, so I rolled my own method. It uses an indexed color palette (but without reducing the amount of colors) and a run-length encoded table of the offsets of the colorindices of the consecutive pixels (wow, that sounds complicated). In reality that means that it will compress noisy images not so good as graphics. Therefore I have built in an optional method to reduce the bit-depths of images which does improve the compression ratio for photos and webcam shots.
The image is not necessarily processed in one block - the blocksize can be varied based on package size as well as processing time. Doing this the Flash plugin remains responsive and on top of that it allows for a bit "parallel processing": whilst the server is receiving data and creating the first part of the image (which takes the longest time in the process), the swf file is already compressing the next data block. Now isn't that clever?
Marching ants rectangles are probably not priority #1 in an application, but they are a nice visual clue to the user that she is currently opening a selection rect. So if you are still looking for a nice "pimp up your app" part, look no further:
This an example for a very simple visual widget that you could also build with the Flash Drawing API, where it would proably become a horrible performance hog having to draw hundreds of tiny vectors. Using the new beginBitmapFill method this tool behaves much nicer and has a very small footprint.
The class allows for custom line patterns and colors and you can change the speed and direction of the ants' march.
MORE...Jens Franke's excellent session on the Flashforum Tour about Flash usability issues inspired me to give the old "Flash breaks the back button, there is no deep-linking possible and there is no way to bookmark pages" problem another go. To make it short: I wasted a day only to find out in the end that Kevin Newman already seems to have developed a solution that works. But let's start from the beginning.
As you probably know several people have already tackled parts of the problem with success:
- Robert Penner was the first to invent a working back button solution for Internet Explorer
- Chris Hendershot improved Robert's method so it works also with other browsers and especially on Macs
- Mike Chambers demonstrated a method that also bases on Robert's method which uses LocalConnection and does not rely on JavaScript
All these methods work with a hidden frame, and do not change the visible URL when navigating. The consequence is that while they enable the back button they do not address the bookmarking problem.
There's an article by Kevin Lynch which demonstrates how to track states within Flash applications by updating the visible URL and title tag of the html page and thus allowing to bookmark sub-pages of Flash sites. Unfortunately this method does not allow to use the back button.
In theory the whole affair could be so easy to solve with the help of named anchors. Named anchors are like markers within a HTML page which allow to jump to certain positions on a page without reloading it, in HTML they look like this: <A name="example">. They are perfectly suited for our purpose because a) they get shown in the URL (http://www.blahblah.com/page.html#example) and b) they register in the browsing history which means you can navigate back and forth and bookmark them.
Macromedia even introduced them in Flash MX. The problem with the way they are implemented is that they are static and do not behave correctly. Static means that you will have to compile them into the swf and cannot generate them dynamically with ActionScript - this makes them pretty useless for sites or applications that get their content or structure from external files, but if you can live with that there is a good tutorial on noscope how to use them.
Unfortunately the internal Flash anchors have an annoying side-effect: when you have for example 4 anchors/pages "one", "two", "three" and "four" and navigate directly from "one" to "four", the browser history will register "one-two-three-four" instead of "one-four", so clicking the back button will take you to "three" in this case.
So this is where I started from and failed in the end. The goal was to find a method which allows to enable the back button and bookmarking and all this without using hidden frames or static precompiled anchors. It should also work with Flash 6, so I could not use ExternalInterface. The basic idea is very simple: just generate the named anchors inside the HTML page with javascript whenever they are needed and update the browser's location. Surprisingly this method worked perfectly. Except in Internet Explorer which it crashed. I could nail this crash down to the getURL("javascript:...") method I was using and after replacing the call by an fscommand I was able to make that part work even in Explorer.
What I had to discover was that this was only half of the rent. The other problem was to notify Flash when the user had pressed the back or forward button. And again it turned out that Internet Explorer is a piece of sh*t. It could be so easy - just watch the location.hash in JavaScript (that's the part after the "#" in a url) and tell Flash when it changes. But IE has this unique bug (MS probably calls it a "security enhancement") that even though the URL visibly changes when you navigate back and forth the location.hash property in JavaScript does not.
This is where I started searching Google and I should have done so earlier, because it looks like other people ended up in the same cul-de-sac. But of course you first have to know the problem before you know how to search for it. And whilst searching for a solution for the IE show-stopper I finally stumbled across this:
It looks like Kevin Newman has indeed found a way to make the back & forward buttons work and bookmarking possible in Flash: his FlashSuite is still under development, but at least in all my Windows browsers it really seems to behave as intended. It uses his HistoryKeeper class which might also be interesting for AJAX programmers as they face some of same problems as Flash developers.
The question is now - how compatible is this method? I think Kevin (and everyone who thinks about using it) might be interested in getting some feedback how and if it works in various browser/OS combinations. So if it doesn't work for you - please leave a comment or send him an email which combination you were using.
I hope he will clean up the code a bit - at the moment it looks a bit frightening with all those .js includes. A single JavaScript file to include would be very comfortable. And maybe the option to use the meanwhile well established FlashObject for the swf inclusion part.
[UPDATE] As you can read in the comments Leo Bergman has also developed a system that works in most of the browsers (except for the usual ill-behaving culprits Opera, Netscape and Safari). See the demo here. Download the source files here.
A litte eyecandy to start the week. This tiny flash file creates a realtime kaleidoscope from your webcam image.
Moving the mouse around allows for some additional rotation and scaling effects. It's amazing how easy it is to build this kind of stuff with Flash 8 now. And I'm just starting to discover what kind of weird things are possible with beginBitmapFill().
MORE...I have uploaded the presentation files of my Schöne neue Pixelwelt session in Düsseldorf so you can have another look at the presentation.
As an extra, you can download the source files for the draw() demo [FLA], the displacementMapFilter() demo [FLA] and the hitTest() demo [FLA].
Of course all the texts of the lecture are either in German or in Actionscript, but there's not much text anyway. The presentation swf is neither load optimized nor is there any explanation what you'll have to click or which keys you will have to press in the different screens. In general: use the left/right key to navigate between the pages and click the active big areas to load the demo. Here are some hints:
In the start screen click anywhere to move the logo.
In the Bitmaps() Screen the active Keys are [R] [G] [B] [A] [SPACE] and you can drag inside the bitmap as well as into the zoomed area
In the attachBitmap() demo you can rotate with the [UP] and [DOWN], scale with [+] and [-], blur with [B] and delete with [DEL]
In the draw() demo you can change the brush with [SPACE], scale with [+] and [-], rotate it with [UP] and [DOWN].
In the displacementMap() demo you'll have to press the arrow button in order to get to the next page as I had do disable the keyboard listener in this screen.
As Marc Thiele just tells me there are almost no tickets left for the Flashforum Tour Events in Düsseldorf (Sep 21st) and Zürich (Sep 26th). So if you are still deliberating whether to attend (for just 25 Euro a ticket, that's actually a no-brainer) - you should get your ticket now - because today is the last day of the advance sale.