I just completed some initial investigation for someone wanting to achieve the effect of a “moving” bar for form navigation, as seen in this Flex DevNet article (see Figure 7a): Designing for Flex – Part 6: Guiding with motion.
A quick Google for “Insuricorp” revealed that Adobe seems to maintain this mockup in which the effect is more clearly seen: Insuricorp
You can login with user JohnJacobs, password password and click on the “Report a Claim” tab to see the movement more clearly.
The demo seems a little buggy, typing in the password doesn’t always take, so I had to delete the password and retype, but its a good way to get a more clear idea of the motion. And if you navigate away from the “Report a Claim” tab you may have to logout and log back in.
An Initial Stab at a Solution
I initially achieved this effect to some degree. At the end of this blog post I will offer acknowledgements as to shortcomings in how I did this, ideas for improvement (the subject of a future blog post), and TODO work to attempt to come closer to the actual desired effect.
Here is my implementation of the “Sliding Form Bar” app:
Right-click and select View Source from the context menu to see the source code, images, etc.
Three Images, One Mask, One clickHandler, and Six States (including base state)
My solution was to create three images of identical size in Adobe Illustrator that serve as the 5 “buttons” allowing the user to navigate the form. One image has black text and a white gradient background, one has white text and a burgundy gradient background, and one is just blue. The blue image will serve as the mask and is not seen, so the color does not matter.
The 3 Image controls are in a Canvas, with the “white” image first, then the mask image, and last the “burgundy” image. The mask image will effective cover the “white” image, and moving it to the left or right will reveal part of the ”burgundy” image underneath.
The white” and ”burgundy” images share a common clickHandler method used to determine where the user clicked (over which of the 5 “buttons”). The event object localX and localY properties tell us this. Depending on where the user clicked on the image, the current state is set to one of five states. The only thing the states do is change the x coordinate of the mask image.
Admissions of Laziness, Fatigue, and TODO
My implementation did not fully achieve the effect the person I performed this investigation for was after, but it is a start. I plan to pursue this further (future blog post), but feel free to save me some time and give me the best solution!
I have a slight cold now, it’s after mid-night, so I should get to sleep. Also, I just turned 48 years old and so I just started a “200 in 24″ attempt to achieve a life-long dream of being able to bench press 200 pounds ten times by the time I am fifty, and tomorrow is a workout day.
I have a Flex app “WorkoutMaster” in the works so you’ll be able to monitor my progress over the next 24 months.
But I digress (again)…
You could probably just use 5 images, one for each “button”, and forgo all the localX and localY stuff, just have a separate click handler for each button image selecting the right state. Who knows, you might be able to use an image map. I’ve never done that in Flex and I don’t know if it is possible.
It probably is best to use “Move” effects to get the “easing” motion. I’ll try that next time I look at this. I think I could have eliminated one of the states by referring to the base state instead. I’ll try that.
The hardest part I can think of is achieving the “barber shop” moving diagonal stripe in the Insuricorp example. Any suggestions?
That’s it for now. Thanks, and good night, er… morning.
Take care, and see you in the Adobe Flex Forums,
Greg
Tags: Insuricorp, mask, movement, state