7 Replies Latest reply on Mar 22, 2010 6:39 AM by RobX82

    FB4 vgroup/hgroup prevents effects from occurring

    RobX82

      I am using Flash Builder 4 Beta 2 and have run into an issue I can't figure out.  I created a new component that is based on spark.components.Group, Inside that group I define a mx:image and a s:label wrapped in a s:vgroup.  I then have a click handler on the component that will cause the image to bounce up and down when clicked.

       

      Very basic example leaving a lot out like the click hanlder and effect stuff, but easily shows what i am talking about:

      <s:group>

           <s:vgroup>

                <mx:image />

                <s:label />

           </s:vgroup>

      </s:group>

       

      Now if i click on the component after its been added to another page the image does not perform the bounce effect.  However if I just change the tags of the vgroup to be the old mx:vbox, that s:vgroup replaced, then the effect works beautifly. 

       

      For example:

      <s:group>

           <mx:vbox>

                <mx:image />

                <s:label />

           </mx:vbox>

      </s:group>

       

      What I am wondering is if this is a beta 2 bug or if I am doing something improperly. If i just make the entire thing vgroup instead of just group then the effect doesn't work either.

        • 1. Re: FB4 vgroup/hgroup prevents effects from occurring
          Shongrunden Adobe Employee

          Can you please provide a small sample application that demonstrates the issue?

          • 2. Re: FB4 vgroup/hgroup prevents effects from occurring
            RobX82 Level 1

            Here is my component code, if you put this component onto another page and click it the image will not bounce.  If you then just comment out the S:vgroup section and uncomment the mx:vbox section the image will bounce without any issues.

             

             

            <?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/halo" 
                         width="90" height="80"
                         click="button_clickHandler(event)">
                 
                 <fx:Declarations>
                      <s:Bounce id="bounceEase"/>
                      
                      <s:Sequence id="seqBounce"  target="{imgMove}" >
                           <s:Move yBy="-15" duration="400" />
                           <s:Move yBy="15" duration="1000" easer="{bounceEase}"/>
                      </s:Sequence>
                 </fx:Declarations>
                 
                 <fx:Metadata>
                      [Event(name="menuButtonClick", type="Events.MenuButtonClick")]
                 </fx:Metadata>     
                 
                 <fx:Script>
                      <![CDATA[
                           import Events.MenuButtonClick;
                           
                           [Bindable]
                           public var labelText:String="";
                           
                           [Bindable]
                           public var imagePath:String="";
                           
                           public var pageName:String="";               
                           
                           protected function button_clickHandler(event:MouseEvent):void
                           {
                                seqBounce.play();
                                this.dispatchEvent(new MenuButtonClick(MenuButtonClick.MENU_CLICK,false, false,pageName));
                           }
                           
                      ]]>
                 </fx:Script>
            
            <!--     <mx:VBox paddingTop="20" width="100%" height="100%" horizontalAlign="center">
                      <mx:Image  id="imgMove" source="{imagePath}"/>
                      <s:Label id="lblText" text="{labelText}" />               
                 </mx:VBox>-->
            
                 <s:VGroup paddingTop="20" width="100%" height="100%" horizontalAlign="center">
                      <mx:Image id="imgMove" source="{imagePath}"/>     
                      <s:Label id="lblText" text="{labelText}" />               
                 </s:VGroup>
            
            </s:Group>
            

            • 3. Re: FB4 vgroup/hgroup prevents effects from occurring
              David_F57 Level 5

              hi,

               

              By using hgroup or vgroup you have enabled contsraints on any children, naturally if an object has imposed constraints trying to animate the object's postion is going to fail.

               

               

              David.

              • 4. Re: FB4 vgroup/hgroup prevents effects from occurring
                CoreyRLucier Adobe Employee

                I think his question was really around, why VBox and HBox (which also manage linear layout) work just fine.

                 

                -C

                • 5. Re: FB4 vgroup/hgroup prevents effects from occurring
                  RobX82 Level 1

                  If vgroup/hgroup are to replace vbox/hbox, then is this a change to how they behave now compared to the old?  So you would be forced to use the old vbox/hbox in cases like this?

                  • 6. Re: FB4 vgroup/hgroup prevents effects from occurring
                    Shongrunden Adobe Employee

                    Yes this is a change in how layout works between spark and mx.  If you want to move something taking part in a spark layout you can apply changes to the postLayoutTransformOffsets property of an element. The spark effects make this easy using the applyChangesPostLayout="true" property, for example:

                     

                    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                             xmlns:s="library://ns.adobe.com/flex/spark" 
                             click="seqBounce.play();">
                        
                        <fx:Declarations>
                            <s:Bounce id="bounceEase"/>
                            <s:Sequence id="seqBounce"  target="{element1}" >
                                <s:Move yBy="-15" duration="400" applyChangesPostLayout="true" />
                                <s:Move yBy="15" duration="1000" applyChangesPostLayout="true" easer="{bounceEase}" />
                            </s:Sequence>
                        </fx:Declarations>
                    
                        <s:VGroup paddingTop="20" width="100%" height="100%" horizontalAlign="center">
                            <s:Button id="element1" label="element1" />
                            <s:Button id="element2" label="element2" />
                        </s:VGroup>
                        
                    </s:Application>
                    
                    
                    • 7. Re: FB4 vgroup/hgroup prevents effects from occurring
                      RobX82 Level 1

                      Thanks Shongrunden that was what I was missing.