2 Replies Latest reply on Sep 2, 2010 12:54 PM by RKaster

    Animating an external compenent into a state

    RKaster

      Hello! I'm currently working on a pet project of sorts not unlike a gallery. The gallery that I'm building works fine connection wise, but the problem that I'm dealing with is relating to animation.

       

      Quick summary:

      I built an external component, <component:LargerView> with visibility="false" within my main application.

      I want to apply a fade in to the component when the visiblity is set to true.

      Everything I tried didn't work, what are your suggestions?

       

      Detailed Problem bellow:

       

      I have an external component that I built which I included in the main application, but with the visibility set to off. I want this Larger View component to fade in when I turn the visibility to "True" through an event. Sadly, no matter what I try, the component just blinks into existance.

       

      I've tried a few things, such as using the same click event that turns the visibility to true to play the s:fade on my component, but it doesn't work. I tried creating a state specifically for the component, and then using a transition, but thus I only achieved the same result (with an odd side effect that the click event, which change the states, wouldn't work a second time). Lastly, I tried putting states into the external component itself, making the initial component set to have nothing. With creationComplete, I had the program switch from the initial state to state including the titlewindow and picture. As brilliantly complicated and unnecessary as it was, it blinked in anyway, without fade, just to mock me.

       

      Although all of these methods succesfully launched the titlewindow without problems (excluding the oddity of the second method I used), I still had no fade in for the component. I think it may have something to do with the visibility property, or maybe flex is just out to get me.

      I'm sure the solution is elegant, but seeing as how I'm still very new to this, I would appreciate anyone's suggestions.

       

       

       

      Thanks for whatever advice provided.

        • 1. Re: Animating an external compenent into a state
          RKaster Level 1

          I thought posting code might help with understanding, so here's this:

           

          Component in the main application:

           

              <components:LargeView id="LaVi"
                                    visible="false"
                                    x="70" y="25"
                                    showLarge="LaVi_showLargeHandler(event)"
                                    top="100"
                                    left="450"
                                    />

          I want it to fade in after cueing this code:

           

                      protected function LiVi_openerHandler(event:CLargeView):void
                      {
                          LaVi.visible = true;               
                          LaVi.imageInfo = event.imageInfo;
                      }

           

          Here's the LargeView component:

           

          <?xml version="1.0" encoding="utf-8"?>
          <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
                   xmlns:s="library://ns.adobe.com/flex/spark"
                   xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300"
                   >

           

              <fx:Metadata>
                 
                  [Event(name="showLarge", type="flash.events.Event")]
                 
              </fx:Metadata>
             
              <fx:Script>
                 
                  <![CDATA[
                      import mx.collections.ArrayCollection;
                      import mx.events.FlexEvent;
                     
                      [Bindable]
                      public var imageInfo:Object;
                     
                     
                      protected function closer_clickHandler(event:MouseEvent):void
                      {
                          var eventObject:Event = new Event("showLarge");
                          dispatchEvent(eventObject);
                      }
                  ]]>
              </fx:Script>
             
              <fx:Declarations>
                  <!-- Place non-visual elements (e.g., services, value objects) here -->
              </fx:Declarations>
             
              <s:TitleWindow title="{imageInfo.title}"
                             id="theTitle"
                             x="-181" y="-100"
                             backgroundColor="#010101" width="723" height="537" >
                 
                  <mx:Image id="closer" source="{imageInfo.loc}"
                            x="10" y="0"
                            width="701" height="425"
                            horizontalAlign="center"
                            verticalAlign="middle"
                            click="closer_clickHandler(event)"/>   
                 
                  <s:TextArea text="{imageInfo.info}"
                              y="433"
                              height="47"
                              fontSize="12"
                              fontWeight="bold"
          left="43" right="39"/>
                 
              </s:TitleWindow>
          </s:Group>

           

           

           

          --------------------------------------------

           

          I'd really appreciate the help, thank you.

          • 2. Re: Animating an external compenent into a state
            RKaster Level 1

            Wow, I feel like the guy who put the milk in the cabinet and the cereal in the fridge. Figured out the solution, thanks to anyone who read and considered it.