4 Replies Latest reply on Mar 4, 2007 6:55 PM by JohnLeger

    Can someone tell me how to achieve this effect?

    babo_ya Level 3
      I know FlexStore : http://examples.adobe.com/flex2/inproduct/sdk/flexstore/flexstore.html
      has a cool effect when you browse > Product Details. by clicking one product.
      1) Click the Product button.... to see Browse product panel
      2) Click one of cellphone to see Product Detail panel
      Note : Transition that occurs between.....
      Does anyone know how to do this? name of the effect? or Transition? any info i can start looking into?


      Thansk,
        • 1. Re: Can someone tell me how to achieve this effect?
          tspratt
          The flexstore code, maybe?
          Tracy
          • 2. Re: Can someone tell me how to achieve this effect?
            babo_ya Level 3
            yes, the flexstore code.
            • 3. Re: Can someone tell me how to achieve this effect?
              Level 7
              yes, the flexstore code.
              • 4. Re: Can someone tell me how to achieve this effect?
                JohnLeger
                It looks like it's a Move effect according to the source code below. Hope this helps!

                John



                <?xml version="1.0" encoding="utf-8"?>
                <!--
                ////////////////////////////////////////////////////////////////////////////////
                //
                // Copyright (C) 2003-2006 Adobe Macromedia Software LLC and its licensors.
                // All Rights Reserved.
                // The following is Sample Code and is subject to all restrictions on such code
                // as contained in the End User License Agreement accompanying this product.
                // If you have received this file from a source other than Adobe,
                // then your use, modification, or distribution of it requires
                // the prior written permission of Adobe.
                //
                ////////////////////////////////////////////////////////////////////////////////
                -->
                <!-- width and height hard-coded in the root tag to better support the
                Design view in FlexBuilder since we know the width and height from the
                settings in flexstore.mxml -->
                <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml"
                xmlns:productsView="productsView.*"
                width="990" height="550"
                currentState="showFilter">

                <mx:Script>
                <![CDATA[
                import mx.collections.ArrayCollection;
                import samples.flexstore.Product;

                private var _catalog:ArrayCollection;

                [Bindable]
                public function get catalog():ArrayCollection
                {
                return _catalog;
                }

                public function set catalog(c:ArrayCollection):void
                {
                _catalog = c;
                if (filterPanel != null)
                {
                filterPanel.filter.count = c.length;
                }
                }

                public function addToCompare(product:Product):void
                {
                //setting the state before adding the product avoids jumpiness in the transition, not sure why
                currentState = &apos;showFilter&apos;;
                filterPanel.productList.addProduct(product);
                }

                public function addToCart(product:Product):void
                {
                //setting the state before adding the product avoids jumpiness in the transition, not sure why
                currentState = &apos;showCart&apos;;
                cartPanel.productList.addProduct(product);
                }


                ]]>
                </mx:Script>

                <mx:HBox
                styleName="colorPanel"
                dropShadowEnabled="true"
                height="100%" width="100%"
                verticalScrollPolicy="off"
                horizontalGap="0">

                <productsView:Grip id="filterGrip" gripIcon="@Embed(&apos;/assets/icon_magnifier.png&apos;)"
                gripTip="Show filter panel" click="currentState = &apos;showFilter&apos;"/>

                <productsView:ProductFilterPanel id="filterPanel" width="265" height="100%"
                filter="catalogPanel.filter(event.filter, event.live)"
                compare="catalogPanel.compare(filterPanel.productList.getProducts())"
                creationComplete="if (catalog) filterPanel.filter.count = catalog.length"/>

                <mx:Spacer width="100%"/>

                <productsView:ProductCart id="cartPanel" width="265" height="100%"/>

                <productsView:Grip id="cartGrip" gripIcon="@Embed(&apos;/assets/icon_cart_empty.png&apos;)"
                gripTip="Show cart" click="currentState = &apos;showCart&apos;"/>

                </mx:HBox>

                <productsView:ProductCatalogPanel id="catalogPanel" y="4" width="685" height="540"
                catalog="{catalog}"
                compare="addToCompare(event.product)"
                purchase="addToCart(event.product)"
                cartCount="{cartPanel.numProducts}"/>

                <mx:states>
                <mx:State name="showFilter">
                <mx:SetStyle target="{catalogPanel}" name="left" value="285"/>
                </mx:State>
                <mx:State name="showCart">
                <mx:SetStyle target="{catalogPanel}" name="right" value="285"/>
                </mx:State>
                </mx:states>

                <!--
                make sure to use transitions here instead of applying a Move effect
                to the Panel itself which will result in odd behavior
                -->
                <mx:transitions>
                <mx:Transition fromState="*" toState="*">
                <mx:Move target="{catalogPanel}" />
                </mx:Transition>
                </mx:transitions>

                </mx:Canvas>