- Andrew Kos
- Bill Burlein
- Bryan Williams
- Christian Vozar
- Jeff Brown
- John Kraus
- Joseph Mak
- Mark Daugherty
- Matt Van Bergen
- Melissa Geoffrion
- Michael Kang
- Michael Chan
- Michael Hodgdon
- Mike Motherway
- Molly McDaniel
- Nadia Maciulis
- Pat McLoughlin
- Paul Michelotti
- Puru Hemnani
- Rohit Srinath
- Ryan Lunka
- Tom Kelly
Flipping Nodes with the JavaFX PerspectiveTransform
Tuesday, April 13, 2010
In working on some new features for Music Explorer FX 2.0, one of the issues I’ve had to think about is where to put track information for an artist. The current UI is mostly visual and doesn’t afford a lot of space per artist. For reference, here is how a typical artist is currently represented:
Wouldn’t it be nice if we could just work within the current space constraints and flip that artist over to see the tracks that it has to offer? With JavaFX’s PerspectiveTransform (and the help of a Timeline for some animation) we can do just that. Here’s a screenshot of a node flip in-progress.
Here’s a shot of the track listing on the “back” rotating into view.
And here’s the final state.
This is just a prototype (clearly I don’t listen to Nickelback), but feel free to go ahead and try it for yourself. Once you launch the app, click on the “flip” button to flip the node back and forth.
The code to make this work is an amalgam of Josh Marinacci’s “Photo Flip” demo and the Flip Transition in Lucas Jordan’s “JavaFX Special Effects” book. The main issue to be aware of here is that, as explained in Lucas’ book, we’re not flipping 180 degrees from front to back. If we did that the track listing UI would be reversed.
Rather what is really happening is that halfway through the rotation when the front node is “on edge”, we’re swapping it for the back node (the track listing) and rotating the track listing the “last” 90 degrees of the rotation — as if it had made a complete rotation.
In other words we’re rotating a full 360 degrees, but cutting out the “middle” 180 degrees to make it look like half a rotation. If we didn’t do this, but rather just rotated 180 degrees, the track listing would appear backwards.
Feel free to check out the source code for details.
Incidentally, this is just one of many neat tricks in Lucas’ book, so be sure to pick up a copy. By way of full disclosure and self-aggrandizement, I was the tech reviewer for the the book — but don’t let that stop you from ordering your copy today!
- Invisible requirements within Business requirements
- Building a better Options Predicate
- Extensionless URLs with Adobe Experience Manager
- The Life of a Tester in Adobe CQ World!
- Limitations of the CQ Parsys Model and the Implementation of a Nested Paragraph System
- Using Apache FOP to generate a PDF document based on a form submission data
- Configuring SAML in AEM 5.6
- Why You Should Get the WCM Experts Involved Early