Cascades and auto animation

While I am trying to work on the next release for my Meetup app, I decided to take a little diversion to make a simple game app. Well, simple game app has taken a little bit longer than expected, but while working on the code, I learned a little unexpected feature about Cascades. When you want to place an item in a Container, you can let the Container handle the placement, or you can set the X and Y coordinates for the control (which is a subclass of a VisualNode). The values to set are the TranslationX and TranslationY, which doesn’t sound like something for setting coordinates, but more to do with language. If you set these values and do nothing more with the control, then nothing in particular will happen. However, if you set the values in a way to place the control outside of the visible area and then later set the values to be in the visible area, then you will see an animation happen.

In this video, the buttons move to the end point (on or off the screen) when triggered. I used my video camera pointing at my computer monitor. So the quality is not the best.

[hana-flv-player video=’http://deanlogic.com/dreaming/videos/LogicLights_UnintendedAnimation.flv’ width=”640″
height=”360″ description=”Multiple image button translation” player=”5″
autoplay=”false”
loop=”false”
autorewind=”true” /]

In this video, I move a Container and everything in it to a spot in order to hide the gaming board. Because I used a Java based web screen capture, not all the frames are captured, so it is hard to see the animation. But, in real time, the Container slides up to cover and down to uncover the play area.

[hana-flv-player video=’http://deanlogic.com/dreaming/videos/LogicLights-CompletedGame.flv’ width=”640″
height=”360″ description=”Container Translation” player=”5″
autoplay=”false”
loop=”false”
autorewind=”true” /]

The quality of the demonstration goes back to the annoyance that Adobe Captivate is not part of Adobe Creative Cloud. I was thinking about putting How To videos with my apps using Captivate. I will probably have to figure out how I can do it using Edge Animate.