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.

You can probably do that with states and Resize effect. See FB3 help sys or LiveDocs.

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[i].id ==
Button(event.effectInstance.target).id)
{
resizeInst = resizeInstArray[i].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>