Flex effects like Adobe Photoshop express

Question

Hey gang. I was just checking out Adobe's new Phto shop
express. I am a pretty big fan of their splash page when you roll
over the image it does a "bouce zoom effect" Does any one know how
to acheive this look? I have images zooming right now but I am not
sure how to bring the image you our mousing over to the front like
they do. Any thoughts? This is what I have so far. This is the link
for what I would like to do
http://www.photoshop.com/express/landing.html
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="absolute" backgroundGradientAlphas="[1.0, 1.0]"
backgroundGradientColors="[#FFFFFF, #FFFFFF]">
<mx:Script>
<![CDATA[
import flash.events.MouseEvent;
public function doZoom(event:MouseEvent):void {
if (zoomAll.isPlaying) {
zoomAll.reverse();
else {
// If this is a ROLL_OUT event, play the effect backwards.
// If this is a ROLL_OVER event, play the effect forwards.
zoomAll.play([event.target], event.type ==
MouseEvent.ROLL_OUT ? true : false);
]]>
</mx:Script>
<mx:Zoom id="zoomAll" zoomWidthTo="1" zoomHeightTo="1"
zoomWidthFrom=".5" zoomHeightFrom=".5" />
<mx:Canvas x="83" y="63" width="1094" height="574"
borderStyle="solid" borderColor="#000000">
<mx:Image x="0" y="0"
source="Assets/images/addiBirth/addiBorn.jpg"
scaleX=".5"
scaleY=".5"
rollOver="doZoom(event)"
rollOut="doZoom(event)" width="321.35" height="248.55"/>
<mx:Image x="132" y="83"
source="Assets/images/addiBirth/addiBorn2.jpg"
scaleX=".5"
scaleY=".5"
rollOver="doZoom(event)"
rollOut="doZoom(event)" width="321.35" height="248.55"/>
<mx:Image x="0" y="113"
source="Assets/images/addiBirth/addiBorn3.jpg"
scaleX=".5"
scaleY=".5"
rollOver="doZoom(event)"
rollOut="doZoom(event)" width="321.35" height="248.55"/>
<mx:Image x="161" y="0"
source="Assets/images/addiBirth/addiBorn4.jpg"
scaleX=".5"
scaleY=".5"
rollOver="doZoom(event)"
rollOut="doZoom(event)" width="321.35" height="248.55"/>
</mx:Canvas>
</mx:Application>

Answer 1

You will want to do most of this in actionscript rather than
mxml...
Basically you would look take a list of jpgs, in an array
MyImages, then:
for each (var img:String in MyImages) {
var ctrl:Image = new Image;
ctrl.source = img;
ctrl.addEventListener(MouseEvent.ROLL_OVER, doZoomOver);
ctrl.addEventListener(MouseEvent.ROLL_OVER, doZoomOut);
// add the image control to the Application/Canvas/VBox/etc.
this.addChild(ctrl);
Then in your doZoomOver:
// move the child to the end of the child stack so it is
above everything else
this.setChildIndex(event.target, this.getChildren().length -
1);