1 Reply Latest reply on Mar 27, 2008 3:24 PM by slaingod

    Flex effects like Adobe Photoshop express

    nrutter Level 1
      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>
        • 1. Re: Flex effects like Adobe Photoshop express
          slaingod Level 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);