6 Replies Latest reply on Jul 2, 2007 10:35 AM by guiui

    Initial zoom/fade in effect

    guiui Level 1
      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
        • 1. Re: Initial zoom/fade in effect
          peterent Level 2
          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.
          • 2. Re: Initial zoom/fade in effect
            guiui Level 1
            Thank you for your response. I set it up the way you described but I think the reason it's not working is because it's not performing the transition from 0.01 to 1.0. So all that I see when I run it is the final zoomedState. What do I need to add to the <mx:Zoom /> tag? maybe that's the problem?
            • 3. Re: Initial zoom/fade in effect
              peterent Level 2
              I see that I left off the target in the Zoom effect.

              <mx:Zoom target="{your_component_id_here}" />
              or
              <mx:Zoom targets="{[comp1,comp2,etc]}" />

              Use the first Zoom if you are only using a single component, use the second if you are zooming multiple components. The Zoom effect should be able to figure out if you are going from 0.01 to 1 or the reverse so you shouldn't need those values.

              If you are doing other things in your state change, like adding or removing children or setting other properties, you should change the Zoom to a Sequence and add in the Action tags along with the Zoom so things happen in the correct order.
              • 4. Re: Initial zoom/fade in effect
                guiui Level 1
                I'm not sure what the problem is now...sorry to do it but I'm posting all the code (not that long) just so it's completely clear:

                <?xml version="1.0" encoding="utf-8"?>
                <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute"
                updateComplete="currentState='zoomedState'" >
                <mx:states>
                <mx:State name="zoomedState">
                <mx:SetProperty target="{zoomPanel}" name="scaleX" value="1"/>
                <mx:SetProperty target="{zoomPanel}" name="scaleY" value="1"/>
                </mx:State>
                </mx:states>
                <mx:transitions>
                <mx:Transition fromState="" toState="zoomedState">
                <mx:Zoom target="{zoomPanel}" />
                </mx:Transition>
                </mx:transitions>
                <mx:Panel x="50" y="50" width="250" height="200" layout="absolute" scaleX=".01" scaleY=".01" id="zoomPanel">
                <mx:ControlBar>
                </mx:ControlBar>
                <mx:ControlBar>
                </mx:ControlBar>
                </mx:Panel>
                </mx:Application>
                • 5. Re: Initial zoom/fade in effect
                  peterent Level 2
                  Posting your code was very helpful. I confess that I haven't seen this issue before, but it looks like having the scale set on the Panel is causing the Flex framework to position the Panel in the wrong location. Try this instead:

                  Make your zoomed state empty:
                  <mx:states>
                  <mx:State name="zoomedState">
                  </mx:State>
                  </mx:states>

                  Modify your transition:
                  <mx:transitions>
                  <mx:Transition fromState="" toState="zoomedState">
                  <mx:Parallel>
                  <mx:Fade target="{zoomPanel}" alphaFrom="0" alphaTo="1" />
                  <mx:Zoom target="{zoomPanel}"
                  zoomHeightFrom="0.01" zoomHeightTo="1"
                  zoomWidthFrom="0.01" zoomWidthTo="1"/>
                  </mx:Parallel>
                  </mx:Transition>
                  </mx:transitions>

                  Notice that I added a Fade effect. Without the Fade the panel pops into view at full size and then zooms up; rather disturbing. I'll have to see if there are any known bugs with this. Or a logic explanation.

                  Let me know if this works for you.
                  • 6. Re: Initial zoom/fade in effect
                    guiui Level 1
                    Beautiful...works perfectly now. I like the possibilities using that Parallel tag too. Thanks so much for getting back to me so quickly on all of this