2 Replies Latest reply on Nov 4, 2008 3:53 PM by ridgeback1105

    Flex Animation Effects

    ridgeback1105
      Hi,

      I'm newbie in flex. I want to do the same effects in the http://www.slam.com. Go to products, I want the effects when you mouseover on SAILING GEAR, SPORTSWEAR, GOLF, BMW ORACLE Racing. Is there a way to do it in flex? any example code. Please help.
        • 1. Re: Flex Animation Effects
          Gregory Lafrance Level 6
          You can probably do that with states and Resize effect. See FB3 help sys or LiveDocs.
          • 2. Re: Flex Animation Effects
            ridgeback1105 Level 1
            Hi,

            Sorry for that. I'm a newbie. Here's is my sample code. One of my problem is the z-order. In the slam website the whole image will show when you mouse over. Please hep me. Thanks

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml">
            <mx:Script>
            <![CDATA[

            import mx.effects.effectClasses.ResizeInstance;
            import mx.events.EffectEvent;
            import mx.controls.Button;
            import mx.collections.ArrayCollection;

            public var resizeInstArray:ArrayCollection = new ArrayCollection([]);
            public var resizeInst:ResizeInstance;

            public function handleMouse(event:MouseEvent):void
            {
            var instanceFound:Boolean = false;

            for (var i:int=0; i < resizeInstArray.length; i++)
            {
            if(resizeInstArray.getItemAt(i).id == Button(event.target).id)
            {
            resizeInst = resizeInstArray.getItemAt(i).inst;
            instanceFound=true;
            }
            }
            if (instanceFound)
            resizeInst.reverse();
            else
            r2.play([event.currentTarget],event.type==MouseEvent.MOUSE_OUT);

            }

            public function setResizeInstance(event:EffectEvent): void
            {
            var newObject:Object = {inst: ResizeInstance(event.effectInstance), id: Button(event.effectInstance.target).id};
            resizeInstArray.addItem(newObject);
            }

            public function removeInstance(event:EffectEvent): void
            {
            for (var i:int=0; i < resizeInstArray.length; i++)
            {
            if(resizeInstArray .id == Button(event.effectInstance.target).id)
            {
            resizeInst = resizeInstArray
            .inst;
            resizeInst = null;
            resizeInstArray.removeItemAt(i);
            }
            }
            }

            ]]>
            </mx:Script>

            <mx:Resize id="r2" widthTo="60" widthFrom="40" effectStart="setResizeInstance(event);" effectEnd="removeInstance(event)"/>

            <mx:HBox verticalAlign="bottom" horizontalGap="-10">
            <!--<mx:Button id="btn1" width="40" height="40" mouseOver="handleMouse(event)" mouseOut="handleMouse(event)" />
            <mx:Button id="btn2" width="40" height="40" mouseOver="handleMouse(event)" mouseOut="handleMouse(event)" />
            <mx:Button id="btn3" width="40" height="40" mouseOver="handleMouse(event)" mouseOut="handleMouse(event)" />
            <mx:Button id="btn4" width="40" height="40" mouseOver="handleMouse(event)" mouseOut="handleMouse(event)" />-->

            <mx:Image id="btn1" source="golf.gif" width="40" height="40" mouseOver="handleMouse(event)" mouseOut="handleMouse(event)" scaleContent="false"/>
            <mx:Image id="btn2" source="regatto.gif" width="40" height="40" mouseOver="handleMouse(event)" mouseOut="handleMouse(event)" scaleContent="false" />
            <mx:Image id="btn3" source="golf.gif" width="40" height="40" mouseOver="handleMouse(event)" mouseOut="handleMouse(event)" scaleContent="false" />
            <mx:Image id="btn4" source="regatto.gif" width="40" height="40" mouseOver="handleMouse(event)" mouseOut="handleMouse(event)" scaleContent="false" />

            </mx:HBox>


            </mx:Application>