Нужна помощь в создании плавного опрокидывания или эффекта FishEye с использованием Flex/ActionScript 3

Я новичок в Flex/ActionScript, и я пытаюсь создать гладкий и чистый эффект fisheye для моих значков навигации, но мой эффект опрокидывания выглядит довольно прерывистым. Я видел несколько лучших, которые, похоже, начинают воздействовать на предыдущий значок и заканчиваются следующим значком, поэтому я предполагаю, что он затрагивает все 3 одновременно, поэтому он выглядит более гладко, но я не знаю, как это сделать или если что я должен делать? Может ли кто-нибудь предложить лучший способ для меня сделать это?

Здесь код, который я использую для моего текущего эффекта опрокидывания:

public class CanvasDesktopModuleIcon extends Canvas
{

 [Bindable] private var _desktopModuleObj:DesktopModuleBean;
 private var zoomEffectObj:Zoom = new Zoom();
 public var moduleImage:Image = new Image();
 private var _textColor:**** = 0x000000;
 private var myLabel:Text = new Text();


 /**
 * Constructor 
 */
 public function CanvasDesktopModuleIcon( doRollover:Boolean=true):void
 {
 try
 {

 _desktopModuleObj = new DesktopModuleBean();

 this.percentHeight=100;
 this.verticalScrollPolicy = "off";
 this.horizontalScrollPolicy = "off";
 this.setStyle("verticalScrollPolicy","off");
 this.setStyle("horizontalScrollPolicy","off");
 this.setStyle("borderStyle","none");
 this.setStyle("backgroundAlpha",0.0);

 myLabel.percentWidth=100;
 myLabel.maxHeight=15;
 myLabel.truncateToFit = true;

 if(doRollover)
 {
 this.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
 this.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
 }

 }
 catch (error:Error)
 {
 FlexException.errorHandler(error,"CanvasDesktopModuleIcon:CanvasDesktopModuleIcon");
 } 
 }

 /**
 * rollOutHandler
 * function that handles the roll out event
 * 
 * @param Event event the contents of the event
 * @return void
 */
 private function rollOutHandler(event:Event):void
 {
 try
 {

 playZoomEffect(moduleImage,1.0,1.0,moduleImage.scaleY, moduleImage.scaleX);
 }
 catch (error:Error)
 {
 FlexException.errorHandler(error,"CanvasDesktopModuleIcon:rollOutHandler");
 }
 }

 /**
 * playZoom
 * Getter function for the desktopModuleBean value
 * 
 * @param void 
 * @return DesktopModuleBean The desktopModuleBean value.
 */
 private function playZoomEffect( 
 myTarget:Object, 
 myHeight:Number, 
 myWidth:Number, 
 myFromHeight:Number,
 myFromWidth:Number,
 myDuration:Number = 200):void {
 zoomEffectObj.end();
 zoomEffectObj.target = myTarget;
 zoomEffectObj.duration = myDuration;
 zoomEffectObj.zoomHeightTo = myHeight;
 zoomEffectObj.zoomHeightFrom = myFromHeight;
 zoomEffectObj.zoomWidthTo = myWidth;
 zoomEffectObj.zoomWidthFrom = myFromWidth;
 zoomEffectObj.play();
 }



 /**
 * rollOverHandler
 * function that handles the roll over event
 * 
 * @param Event event the contents of the event
 * @return void
 */
 private function rollOverHandler(event:Event):void
 {
 try
 {
 playZoomEffect(moduleImage,1.8,1.8,moduleImage.scaleY, moduleImage.scaleX);

 }
 catch (error:Error)
 {
 FlexException.errorHandler(error,"CanvasDesktopModuleIcon:rollOverHandler");
 }
 }

private function setupCanvas( ):void
 {
 try
 {
 // Setup Image
 if(_desktopModuleObj.Module_Icon == "")
 {
 moduleImage.source = NavigationManager.defaultDashIcon;
 }
 else
 {
 moduleImage.source = NavigationManager[_desktopModuleObj.Module_Icon];
 } 

 moduleImage.height = 50;
 moduleImage.width = 50;
 moduleImage.setStyle("horizontalCenter","0");
 moduleImage.setStyle("bottom","15");
 this.toolTip = _desktopModuleObj.Module_Window_Title;

 // Setup Label
 if( _desktopModuleObj.Module_Display_Title == 1)
 {

 myLabel.text = _desktopModuleObj.Module_Window_Title;
 myLabel.setStyle("color",_textColor);
 myLabel.setStyle("horizontalCenter","0");
 myLabel.setStyle("bottom","0");
 this.addChild(myLabel);
 }
 /*else
 {
 moduleImage.height = 68;
 moduleImage.width = 68;
 moduleImage.setStyle("horizontalCenter","0");
 moduleImage.setStyle("bottom","0");
 }*/
 this.addChild(moduleImage);

 }
 catch (error:Error)
 {
 FlexException.errorHandler(error,"CanvasDesktopModuleIcon:setupCanvas");
 }
 }

 private var _speed:int=3;
 private var _blurX:int=15;
 private var _blurY:int=15;
 private function pulse(event:Event):void
 { //no try catch

 _blurX+=_speed;
 _blurY+=_speed;
 if(_blurX>60)
 {
 _speed*=-1;
 }
 if(_blurX<15)
 {
 _speed*=-1;
 }
 event.currentTarget.filters=[new GlowFilter(0xFF0000,.75,_blurX,_blurY,2,1,false,false)];
 }

 public function glow(val:Boolean=true):void
 { //no try catch
 if(val)
 {
 this.addEventListener(Event.ENTER_FRAME,pulse);
 }
 else
 {
 this.filters=[];
 this.removeEventListener(Event.ENTER_FRAME,pulse);
 }
 }

}

Извините, я не могу показать фактическую страницу с нее на локальной машине. Я ценю любую помощь. Благодарю!

1 ответ

Поэтому я нашел функцию твина, которая значительно улучшила то, что у меня было. Думаю, я буду использовать его, если не появится что-то лучше.

import caurina.transitions.*;

private function rollOutHandler(event:Event):void
 {
 var s = moduleImage;
 Tweener.addTween(s,{scaleX:1, scaleY:1, time:.9,transition:"easeOutQuad"}); 
 }

private function rollOverHandler(event:Event):void
 { 
 var s = moduleImage;
 setChildIndex(s,numChildren-1);
 Tweener.addTween(s,{scaleX:2, scaleY:2, time:.4,transition:"easeOutQuad"}); 
 }

licensed under cc by-sa 3.0 with attribution.