Microsoft Surface has a cool simulation that allows you to drag your fingers across the table to create a water simulation. That got me to thinking about doing it in Flash. Thanks to David Lenaerts’ excellent Ripple class, it took me about 10 minutes to create the example below.
As you can see the performance is very nice. The code that I used to create this is below. Again, all of the cool stuff comes from David’s code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | import be.nascom.flash.graphics.Rippler; import flash.events.TouchEvent; import flash.ui.Multitouch; import flash.ui.MultitouchInputMode; Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT; stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; var t:Bitmap; var r:Rippler; t = new Bitmap(new bmap()); addChild(t); r = new Rippler(t, 60, 6); stage.addEventListener(TouchEvent.TOUCH_MOVE, handleMouseMove); function handleMouseMove(e:TouchEvent):void { r.drawRipple(e.stageX, e.stageY, 20, 1); } |
Nice! I’ve seen this class before, but this is the perfect use for it.
2 minutes later and I have a version of it of you running on the Google Nexus One. Needs to be optimized, but it’s still fun to ripple your head.
Love to see a demo of this running on android.
Here’s it running on a Google Nexus One with 2.2 :
http://flashmobile.scottjanousek.com/2010/06/04/lee-brimelow-ripple-head-test-google-nexus-one-running-air-app-flash-10-1/
I didn’t make any mods or optimizations, so besides tweaking the graphic it’s the same.
That music made me think you could also combine the effect with a multi-touch theremin.
awesomely simple yet awesomely wow..
great stuff
Maybe I’m just dumb but I didn’t find the download link from the google code page :S.
I running same demo on Moto Droid with 2.1 is very slow.
like to see more tutorials on mobile platforms optimized, thanks
Multi-touch theremin?! Now there’s an idea!
Great video Lee. I can’t wait to get playing with multi-touch coding.
Hey Lee, I’m glad you found the class useful (and thanks for the credit). It’s an honour to see it used here
What multitouch screen is used in the video?
Thanks!
easy and nice
thanks lee
The line
t = new Bitmap(new bmap());
does not work on my flash, I did something wrong?
Waw nice Demo lee
Hahaha “Milky Hauwert”
…poor milky…
Hi Lee,
Will that monitor you’re using work on a mac with flash 10.1?
@ klaus
the new bmap() likely points to an image that is in his library exported for actionscript and called bmap
@MeetAndrew no OS X does not support multi-touch displays.
@Anothony yes you are correct sir
Nice, it works now. Thanks!
very good it.
I did the port to Mototrola Droid and it worked perfectly.
Hello Klaus.
To solve this problem select Properties from the image export for action script and class colocque (bmap).
i’ve been using this rippler class for a while now….it’s wonderful
good Demo, like to get my hands on an Android and see this in real life.
Hi Lee, funny that you used that class I played around with it for the AMO touch table game that I did some time ago,
http://www.youtube.com/almogdesign#p/u/2/RNJd4KxVmWY
Its a great example of a really wold project using Flash for touch tables at half the cost of Microsoft surface.
http://www.almogdesign.net/portfolio/amo-interactive-touch-table-game/
This is a pretty cool example. Water effects are very attractive with multi touches. I hope to see more examples on flash multi-touch.
Do you actually touch the screen?Will it work with any computer?
Thanks Lee, nice example! Very cool idea of using rippler for muti-touch device apps. And thanks to David too
cool effect. I don’t have a touch screen monitor so I applied it to some web cam tracking. Check it out http://simon-townsend.com/as3/motion-tracking-ripples/
Newbie question, but where i can get those ui.Multitouch and ui.MultitouchInputMode libraries to make it work ?