Нужна помощь в создании плавного опрокидывания или эффекта 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.