Initial zoom/fade in effect

Question

I am new to Flex but know Flash and am trying to make the
migration. I always make my Flash movies "build" in the classic
flash fashion of parts fading in and zooming in until the entire
interface is displayed. what is the best way to create these same
effects in Flex? This Flex site in Adobe's gallery does basically
what I am talking about:
http://mortgage.fidelitylabs.com/index.shtml

Answer 1

There are couple of ways to do it. The simplest is with
states. If you use Flex Builder design mode, place a Panel on the
stage. Put some controls in it. Remember that for Flex to scale and
alpha text you must embed the fonts. But leave that for later.
Open the Flex Properties panel in Design Mode and switch to
the Category view. Find the scaleX and scaleY values. Set those to
0.01 (not zero, although that may work). You want to start off with
the Panel scaled small.
Now add a new state (also in Design View), and call it
'zoomedState'. In this new state, change the scaleX and scaleY
values to 1.
You'll need a way to trigger the change from the base state
to the zoomedState. Add updateComplete="currentState='zoomedState'
" to your Application tag.
When run the program you'll probably see just the final
zoomedState. To show the effect, you need to use a Transition. Go
back into your file and switch to Source view in Flex Builder. Add
the following after the </mx:state> tag:
<mx:transitions>
<mx:Transition fromState="" toState="zoomedState">
<mx:Zoom />
</mx:Transition>
</mx:transitions>
When you run the app again, the transition should cause the
Panel to zoom from its initial scale of 0.01 to 1. You can add more
parameters to the Zoom effect tag if you want to change some of the
behavior.
Disclaimer: I usually test what I post, but I'm doing this
off the top of my head. You may need to make adjusts here and there
to get this to work, but the basic idea is correct.