9 Replies Latest reply on Jul 8, 2011 12:15 PM by Shongrunden

    Spark Move Effect does not work on Spark Group

    ScottBoring

      I recently tried implementing the Spark Move effect on a Spark Group and it did not work. On further investigation, I noticed that the Spark Move works on mx components like HBox and VBox; in fact, in the Flex 4 asdoc, the example of the Spark Move effect is on an HBox. However, the mx Move effect does work on Spark Groups.

       

      The Spark Group is something that I have been using heavily lately; I would expect all Spark Effect to work with the Group component.

       

      Is this a bug of the Spark Move effect?

       

      PS: This is one of a continuing list of issues that I am having with Flex; this technology is getting worse with time.

        • 1. Re: Spark Move Effect does not work on Spark Group
          Peter deHaan Level 4

          @ScottBoring,

           

          Can you please file a bug at http://bugs.adobe.com/flex/ and include a simple test case showing the bug and we can take a look.

           

          Thanks,

          Peter

          • 2. Re: Spark Move Effect does not work on Spark Group
            ScottBoring Level 1

            Is there a reason you can't file a bug? I don't work for you guys.

            • 3. Re: Spark Move Effect does not work on Spark Group
              MikisMM Level 2

              Remember that you get this framework for free. Filing a bug is the least you could do and it won't take long.

              • 4. Re: Spark Move Effect does not work on Spark Group
                ScottBoring Level 1

                The framework without the IDE is pretty useless. I have paid alot for IDE licenses.

                • 5. Re: Spark Move Effect does not work on Spark Group
                  Shongrunden Adobe Employee

                  The spark Move effect should work fine on a spark Group.

                   

                  We're happy to file the bug if you would rather, but we need you to provide us a simple code sample that demonstrates the problem you are seeing.

                  • 6. Re: Spark Move Effect does not work on Spark Group
                    ScottBoring Level 1

                    Below is an example.

                     

                    FYI: I did try to log a bug originally, much to my continuing frustration, I had to create yet another Adobe account. I believe I have 3 now on top of the 20+ accounts I have for work and personal reasons. Even after creating an account, I never received an email to gain access to the bug system.

                     

                     

                    <?xml version="1.0" encoding="utf-8"?>

                       xmlns:s="library://ns.adobe.com/flex/spark"

                       xmlns:mx="library://ns.adobe.com/flex/mx"

                       minWidth="955" minHeight="600">

                    <fx:Declarations>

                    <mx:Move id="mxMover" target="" xBy="50"/>

                    <s:Move id="sparkMover" target="" xBy="50"/>

                    </fx:Declarations>

                    <s:HGroup width="100%" horizontalAlign="center">

                    <s:Button label="Move with MX" click="mxMover.play()"/>

                    <s:Button label="Move with Spark" click="sparkMover.play()"/>

                    </s:HGroup>

                    <s:VGroup width="100%" verticalCenter="0">

                    <s:HGroup width="100%">

                    <s:Group id="mxGroup" width="100" height="100">

                    <s:Rect width="100%" height="100%">

                    <s:fill>

                    <s:SolidColor color="#AFAFAF"/>

                    </s:fill>

                    </s:Rect>

                    <s:Label text="MX" verticalCenter="0" horizontalCenter="0"/>

                    </s:Group>

                    </s:HGroup>

                    <s:HGroup width="100%">

                    <s:Group id="sparkGroup" width="100" height="100">

                    <s:Rect width="100%" height="100%">

                    <s:fill>

                    <s:SolidColor color="#AFAFAF"/>

                    </s:fill>

                    </s:Rect>

                    <s:Label text="Spark" verticalCenter="0" horizontalCenter="0"/>

                    </s:Group>

                    </s:HGroup>

                    </s:VGroup>

                    </s:Application

                    • 7. Re: Spark Move Effect does not work on Spark Group
                      Shongrunden Adobe Employee

                      So this is working as expected, but the reason why might not be obvious at first.

                       

                      In this further simplified example, you will see that the mx Move effect appears to work and the spark Move effect appears to not work:

                       

                      <s:Application
                          xmlns:s="library://ns.adobe.com/flex/spark"
                          xmlns:fx="http://ns.adobe.com/mxml/2009"
                          xmlns:mx="library://ns.adobe.com/flex/mx">
                         
                          <fx:Declarations>
                              <mx:Move id="mxMover" target="{sparkGroup}" xBy="50"/>
                              <s:Move id="sparkMover" target="{sparkGroup}" xBy="50"/>
                          </fx:Declarations>
                         
                          <s:HGroup width="100%" horizontalAlign="center">
                              <s:Button label="Move with MX" click="mxMover.play()"/>
                              <s:Button label="Move with Spark" click="sparkMover.play()"/>
                          </s:HGroup>
                         
                          <s:VGroup width="100%" verticalCenter="0">
                              <s:HGroup width="100%">
                                  <s:Group id="sparkGroup" width="100" height="100">
                                      <s:Rect width="100%" height="100%">
                                          <s:fill>
                                              <s:SolidColor color="#AFAFAF"/>
                                          </s:fill>
                                      </s:Rect>
                                      <s:Label text="Spark" verticalCenter="0" horizontalCenter="0"/>
                                  </s:Group>
                              </s:HGroup>
                          </s:VGroup>
                      </s:Application>

                       

                      The fact that "sparkGroup" moves using the mx effect is a bug.  This is likely because mx effects are not designed to work with the new spark layout architecture and we should be using a spark effect instead.

                       

                      Now, the fact that "sparkGroup" doesn't move when applying a spark effect to it is actually the expected behavior in this case.  This is because "sparkGroup" is inside of a HorizontalLayout (HGroup is a Group with a HorizontalLayout).  Setting a position on an element inside of a container with a HorizontalLayout will be ignored since it is the job of the layout to decide where to position it.  HorizontalLayout just lays out elements next to each other ignoring the position information of the element, whereas BasicLayout (Group uses a BasicLayout by default) will actually respect any positioning information that element has (like x/y/top/left/right/bottom).

                       

                      For example, notice in this small example that button1 is at 0,0 rather than 100,100:

                       

                      <s:Application ... >
                          <s:HGroup>
                              <s:Button label="button1" x="100" y="100" />
                          </s:HGroup>
                          <s:Group>
                              <s:Button label="button2" x="150" y="150" />
                          </s:Group>
                      </s:Application>

                       

                      The spark Move effect operates on the x/y properties of the target element and since HorizontalLayout ignores those values that is why "sparkGroup" doesn't appear to move.

                       

                      There are a few ways to get the behavior you are looking for.  The first would be to use Group instead of HGroup if you don't actually need the HGroup.  If you need to use the HGroup then you could wrap the "sparkGroup" with another Group, for example:

                       

                      <s:Application
                          xmlns:s="library://ns.adobe.com/flex/spark"
                          xmlns:fx="http://ns.adobe.com/mxml/2009"
                          xmlns:mx="library://ns.adobe.com/flex/mx">
                         
                          <fx:Declarations>
                              <mx:Move id="mxMover" target="{sparkGroup}" xBy="50"/>
                              <s:Move id="sparkMover" target="{sparkGroup}" xBy="50"/>
                          </fx:Declarations>
                         
                          <s:HGroup width="100%" horizontalAlign="center">
                              <s:Button label="Move with MX" click="mxMover.play()"/>
                              <s:Button label="Move with Spark" click="sparkMover.play()"/>
                          </s:HGroup>
                         
                          <s:VGroup width="100%" verticalCenter="0">
                              <s:HGroup width="100%">
                                  <s:Group id="surroundingGroup">
                                      <s:Group id="sparkGroup" width="100" height="100">
                                          <s:Rect width="100%" height="100%">
                                              <s:fill>
                                                  <s:SolidColor color="#AFAFAF"/>
                                              </s:fill>
                                          </s:Rect>
                                          <s:Label text="Spark" verticalCenter="0" horizontalCenter="0"/>
                                      </s:Group>
                                  </s:Group>
                              </s:HGroup>
                          </s:VGroup>
                      </s:Application>

                       

                      Now that we have wrapped "surroundingGroup" around "sparkGroup", "sparkGroup" is no longer in a HorizontalLayout and the effect will work.

                      1 person found this helpful
                      • 8. Re: Spark Move Effect does not work on Spark Group
                        davorian

                        Can you tell me why the spark move makes the transistion revert to it's initial position before the effect occurs and no this isnt in a layout that's not basic and also applyChangesPostLayout doesn't do the trick either. The hostComponent is a SkinnableComponent.

                         

                        <?xml version="1.0" encoding="utf-8"?>
                        <!--

                         

                            ADOBE SYSTEMS INCORPORATED
                            Copyright 2008 Adobe Systems Incorporated
                            All Rights Reserved.

                         

                            NOTICE: Adobe permits you to use, modify, and distribute this file
                            in accordance with the terms of the license agreement accompanying it.

                         

                        -->
                        <!--- The default skin class for a Spark SkinnableContainer container.

                         

                             @see spark.components.SkinnableContainer

                         

                              @langversion 3.0
                              @playerversion Flash 10
                              @playerversion AIR 1.5
                              @productversion Flex 4
                        -->
                        <s:Skin
                            autoLayout="false"
                            xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
                            xmlns:fx="http://ns.adobe.com/mxml/2009"
                            xmlns:mx="library://ns.adobe.com/flex/mx"
                            xmlns:s="library://ns.adobe.com/flex/spark">
                            <fx:Metadata>[HostComponent("views.components.VenuePanel")]</fx:Metadata>
                            <s:states>
                                <s:State name="initial" />
                                <s:State name="openedVenuePanel" />
                                <s:State name="openedVenuePanelFull" />
                            </s:states>

                         

                            <fx:Declarations>
                                <s:Power
                                    id="powerFunc"
                                    easeInFraction="0.5"
                                    exponent="2" />
                            </fx:Declarations>

                         

                            <fx:Script>
                                <![CDATA[
                                    import mx.events.EffectEvent;
                                    import spark.effects.easing.Power;

                         

                                    protected function button1_clickHandler(event:MouseEvent):void
                                    {
                                        hostComponent.currentState = "initial";
                                        hostComponent.invalidateSkinState();
                                    }

                         

                                    protected function button2_clickHandler(event:MouseEvent):void
                                    {
                                        hostComponent.currentState = "openedVenuePanel";
                                        hostComponent.invalidateSkinState();
                                    }

                         

                                    protected function button3_clickHandler(event:MouseEvent):void
                                    {
                                        hostComponent.currentState = "openedVenuePanelFull";
                                        hostComponent.invalidateSkinState();
                                    }

                         

                                    protected function move1_effectEndHandler(event:EffectEvent):void
                                    {
                                      
                                    }
                                ]]>
                            </fx:Script>
                            <!--- Defines the appearance of the SkinnableContainer class's background. -->
                            <s:Rect
                                id="background"
                                bottom="0"
                                left="0"
                                right="0"
                                top="0">
                                <s:fill>
                                    <!--- @private -->
                                    <s:SolidColor id="bgFill" color="#FFFFFF" />
                                </s:fill>
                            </s:Rect>
                            <!--
                                Note: setting the minimum size to 0 here so that changes to the host component's
                                size will not be thwarted by this skin part's minimum size.   This is a compromise,
                                more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
                            -->
                            <!--- @copy spark.components.SkinnableContainer#contentGroup -->
                            <s:Group
                                id="contentGroup"
                                minHeight="0"
                                minWidth="0">
                                <s:layout>
                                    <s:BasicLayout />
                                </s:layout>
                                <s:Group id="visuals">
                                    <s:layout>
                                        <s:VerticalLayout />
                                    </s:layout>
                                    <s:RichText id="titleText" text="Title Text Text">
                                    </s:RichText>
                                    <s:Button click="button1_clickHandler(event)" label="toInitial">
                                    </s:Button>
                                    <s:Button click="button2_clickHandler(event)" label="toOpenedVenuePanel">
                                    </s:Button>
                                    <s:Button click="button3_clickHandler(event)" label="toOpenedVenuePanelFull">
                                    </s:Button>
                                </s:Group>
                            </s:Group>
                            <s:transitions>

                         

                                <fx:Script>
                                    <![CDATA[
                                        import mx.effects.easing.Exponential;
                                    ]]>
                                </fx:Script>
                                <s:Transition
                                    id="openVenuePanelTransition"
                                    fromState="initial"
                                    toState="openedVenuePanel">
                                    <s:Sequence>
                                        <s:Move
                                            effectEnd="move1_effectEndHandler(event)"
                                            target="{contentGroup}"
                                            yBy="85" />
                                    </s:Sequence>
                                </s:Transition>
                                <s:Transition
                                    id="openVenuePanelFullTransition"
                                    fromState="openedVenuePanel"
                                    toState="openedVenuePanelFull">
                                    <s:Move target="{contentGroup}" yBy="-180" />
                                </s:Transition>
                                <s:Transition
                                    id="closeVenuePanelFullTransition"
                                    fromState="openedVenuePanelFull"
                                    toState="openedVenuePanel">
                                    <s:Move target="{contentGroup}" yBy="180" />
                                </s:Transition>
                                <s:Transition
                                    id="closeVenuePanelTransition"
                                    fromState="openedVenuePanel"
                                    toState="initial">
                                    <s:Sequence>
                                        <s:Move target="{this}" yBy="-85" />
                                    </s:Sequence>
                                </s:Transition>
                            </s:transitions>
                        </s:Skin>

                        • 9. Re: Spark Move Effect does not work on Spark Group
                          Shongrunden Adobe Employee

                          You shouldn't specify yBy on an effect in a Transition, but rather specify different state values for y and let the transition figure it out for itself.  See this thread for an example: http://forums.adobe.com/message/2793282#2793282.  Otherwise you might run into snapping issues when the final effect value differs from the final state value.