13 Replies Latest reply on May 3, 2008 2:37 AM by Freestyle MD

    Transitions

    SiHoop Level 1
      I'm using transitions to fade-in components when I move between states. I've noticed that the transitions work on everything except for the labels on my component buttons. The button labels do not transition in-- they appear before the rest of the button fades in. My questions are:
      1. Is there a way to get the labels to obey the transition
      2. How can I execute a function that will use a tween class such as Tweener to control the transition instead of using Fex Transitions?
        • 1. Re: Transitions
          Gregory Lafrance Level 6
          I think you need to use embedded fonts for effects on text.
          • 2. Re: Transitions
            SiHoop Level 1
            The font is embedded in a Flex Button component-- is it possible to embed fonts for a Flex component?
            • 3. Re: Transitions
              Gregory Lafrance Level 6
              You can embed the font as part of a style type selector, that was it will be applied to all components for the type selector. One thing, Button labels use a bold font, so make sure you embed the bold version of the font for effects on Buttons:

              <?xml version="1.0"?>
              <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml">
              <mx:Style>
              Button {
              fontFamily:myBoldComicFont;
              }
              </mx:Style>
              <mx:Script>
              [Embed(source='comicbd.ttf',
              fontWeight='bold',
              fontName='myBoldComicFont',
              mimeType='application/x-font',
              flashType='true'
              )]
              private var font2:Class;
              </mx:Script>
              <mx:Button
              label="ComicPro-Bold Font"
              rotation="15"
              fontSize="40"
              />
              </mx:Application>
              • 4. Re: Transitions
                SiHoop Level 1
                I've checked that fonts are embedded, but the problem does not go away. The text on the Button component loads before the rest of the component when I use a Fade transition.
                • 5. Re: Transitions
                  Gregory Lafrance Level 6
                  Is the bold font embedded? Effects will not work on Buttons if the bold font is not embedded.
                  • 6. Re: Transitions
                    SiHoop Level 1
                    The bold is embedded-- I have my transitions set to 700 ms for the effect and I can tell that the text is not displayed at quite the same rate. It becomes very clear it I set the transition to 3000 ms. In this case the text pops out immediately, then the rest of the button slowly fades in.
                    • 7. Re: Transitions
                      slaingod Level 1
                      I have seen some counterintuitive behavior as well from the hide and show effects. Basically, a lot of times what happens is you tell it to do a fade in, and what you get is:
                      The component shows for a split second, then disappears, then fades in, for instance. Or appears, then disappears, and WipesLeft.

                      So for instance sometimes I find I need to preset the transition value, before calling the transition, like setting the alpha to 0, or moving the component off screen beforehand.

                      Maybe this is your issue, or maybe I've just never dug deep enough into it to figure out why it worked that way for me.
                      • 8. Re: Transitions
                        SiHoop Level 1
                        Here's an example to illustrate the fade problem. It doesn't have an embedded font as that is difficult for people to reproduce, but it works the same with or without the embedded font. Noice how the text appears immediately. Is this a Flex bug?

                        <?xml version="1.0"?>
                        <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" verticalAlign="middle" >
                        <mx:states>
                        <mx:State name="Register">
                        <mx:AddChild relativeTo="{controlbar1}" position="lastChild">
                        <mx:Button label="Login" id="loginButton"/>
                        </mx:AddChild>
                        </mx:State>
                        </mx:states>
                        <mx:transitions>
                        <mx:Transition fromState="" toState="Register">
                        <mx:Fade alphaFrom="0" alphaTo="1" duration="3000" targets="{[loginButton]}"/>
                        </mx:Transition>
                        </mx:transitions>
                        <mx:Panel id="loginPanel" width="250">
                        <mx:ControlBar id="controlbar1">
                        <mx:Button label="Register" id="registerLink" click="currentState='Register'"/>
                        </mx:ControlBar>
                        </mx:Panel>
                        </mx:Application>
                        • 9. Transitions
                          iJames Level 1
                          I have tested this code. And it works as described. Label shows up, then the button fades in.

                          What would it [the code] look like with the fonts embedded?

                          Has this been solved?

                          James
                          • 10. Re: Transitions
                            SiHoop Level 1
                            No, it has not been solved. The same problem occurs when the font has been embedded.
                            • 11. Re: Transitions
                              Freestyle MD
                              I've been banging my head against a wall for almost 2 weeks trying to get fades to work when adding and removing pieces from a page.

                              One attempt(using addedEffect and removedEffect) had the new element appearing(no Fade), then the old one fading out, then the new one jumped up the page to replace it!

                              I don't think it is particularly connected to the font problem, although I can't be sure because I am using embedded fonts.
                              For now, I'm giving up on states and using a viewstack instead ...
                              • 12. Re: Transitions
                                Ansury Level 3
                                quote:

                                Originally posted by: slaingod
                                I have seen some counterintuitive behavior as well from the hide and show effects. Basically, a lot of times what happens is you tell it to do a fade in, and what you get is:
                                The component shows for a split second, then disappears, then fades in, for instance. Or appears, then disappears, and WipesLeft.


                                I've never seen such problems (yet). If your logic/events are at all sophisticated, it sounds to me like you may have some kind of annoying bug causing havoc for you.
                                • 13. Re: Transitions
                                  Freestyle MD Level 1
                                  Don't know whether this might help, but I've just discovered that you can dictate the order in which things take place in a Transition, by using SetPropertyAction, and a load of others such as Add... or RemoveChildAction.