Skip navigation

Flash Builder 4 and Flex 4 Labs Archive

RobX82

Currently Being Moderated

FB4 vgroup/hgroup prevents effects from occurring

Mar 15, 2010 2:05 PM

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.

2353 Views 7 Replies Latest reply: RobX82, Mar 22, 2010 6:39 AM

Replies

Currently Being Moderated

1. Shongrunden,

Mar 15, 2010 3:31 PM in reply to RobX82

Report

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

|
Mark as:

Currently Being Moderated

2. RobX82,

Mar 16, 2010 5:30 AM in reply to Shongrunden

Report

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>

|

Mark as:

Currently Being Moderated

3. David_F57,

Mar 16, 2010 5:54 AM in reply to RobX82

Report

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.

|
Mark as:
Currently Being Moderated

4. CoreyRLucier,

Mar 16, 2010 5:59 AM in reply to David_F57

Report

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

-C

|
Mark as:
Currently Being Moderated

5. RobX82,

Mar 16, 2010 7:49 AM in reply to CoreyRLucier

Report

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?

|
Mark as:

Currently Being Moderated

6. Shongrunden,

Mar 19, 2010 10:30 PM in reply to RobX82

Report

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>

|

Mark as:

Currently Being Moderated

7. RobX82,

Mar 22, 2010 6:39 AM in reply to Shongrunden

Report

Thanks Shongrunden that was what I was missing.

|
Mark as:

Forum guidelines

Answers + Points = Status

10 points awarded for Correct Answers
5 points awarded for Helpful Answers
10,000+ points
1,001-10,000 points
501-1,000 points
5-500 points