<?xml version="1.0" encoding="utf-8"?> <!-- ======================================================= Custom Easing Maker カスタムイージングのシミュレーション。 トゥイーンを作るときに、Sineな始まりで 終わりをExpoぐらいにしたいことってありませんか？ BetweenAS3を使うとそれっぽいことができます。 一応、汎用メソッドにしてみました。 ======================================================= --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="465" height="465" frameRate="60" applicationComplete="init()"> <mx:Script> <![CDATA[ /** * making custom easing method. * カスタムイージングを作るメソッドです。 * @param obj 動かしたい対象 * @param to 開始点 * @param from 終了点 * @param time トゥイーンの時間(秒) * @param startEasing 開始時のイージング * @param endEasing 終了時のイージング * @param middlePercent イージング切り替えの中間点をどこに指定するかの割合(0～1を指定)。ディフォルトは0.5。 * @return ITween 合成されたトゥイーンインスタンス */ public function customEase(obj:Object, to:Object, from:Object, time:Number, startEasing:IEasing, endEasing:IEasing, middlePercent:Number = 0.5): ITween { var middlePoint:Object = { }; for (var param:String in to) { middlePoint[param] = to[param] * middlePercent + from[param] * (1 - middlePercent); } var tw1:ITween = BetweenAS3.tween(obj, middlePoint, from, time, startEasing); var tw2:ITween = BetweenAS3.tween(obj, to, middlePoint, time, endEasing); var tw3:ITween = BetweenAS3.serial(tw1, tw2); var tw4:ITween = BetweenAS3.scale(tw3, time / tw3.duration); return tw4; } import flash.display.Sprite; import flash.utils.getTimer; import flash.utils.getDefinitionByName; import flash.system.System; import org.libspark.betweenas3.tweens.ITween; import mx.collections.ArrayCollection; import mx.controls.Alert; import org.libspark.betweenas3.easing.*; import org.libspark.betweenas3.BetweenAS3; import org.libspark.betweenas3.core.easing.IEasing; static private const TWEENS:Array = [ "Back", "Bounce", "Circ", "Circular", "Cubic", "Custom", "Elastic", "Expo", "Exponential", "Linear", "Physical", "Quad", "Quadratic", "Quart", "Quartic", "Quint", "Quintic", "Sine" ] static private const EASES:Array = [ "easeInOut", "easeIn", "easeOut", "easeOutIn", ] private var betweenBall:Sprite = new Sprite() private var betweenLine:Sprite = new Sprite() private var betweenGraff:Sprite = new Sprite(); private var middleLine:Sprite = new Sprite(); private var tw:ITween; private function init():void{ Back Bounce Circ Circular Cubic Custom Elastic Expo Exponential Linear Physical Quad Quadratic Quart Quartic Quint Quintic Sine var base:Sprite = new Sprite(); base.graphics.beginFill(0xFFFFFF) base.graphics.drawRect(0, 0, 350, 350); base.graphics.endFill() for(var i:int = 0; i<21; i++){ base.graphics.lineStyle(1, 0xDDDDDD,1) base.graphics.moveTo(0, i/20 * 350) base.graphics.lineTo(350, i/20 * 350) } for(i=0; i<21; i++){ base.graphics.lineStyle(1, 0xDDDDDD,1) base.graphics.moveTo(i/20 * 350, 0) base.graphics.lineTo(i/20 * 350, 350) } graff.addChild(base) betweenBall.graphics.beginFill(0xFF0000); betweenBall.graphics.drawRect(-4,-4,8,8); betweenLine.addChild(new Bitmap(new BitmapData(350,1,false,0xFFFF0000))); graff.addChild(betweenBall); graff.addChild(betweenGraff); graff.addChild(betweenLine); graff.addChild(middleLine); tweenComboStart.dataProvider = new ArrayCollection(TWEENS); tweenComboEnd.dataProvider = new ArrayCollection(TWEENS); easeComboStart.dataProvider = new ArrayCollection(EASES); easeComboEnd.dataProvider = new ArrayCollection(EASES); tweenComboStart.selectedIndex = 18; tweenComboEnd.selectedIndex = 7; easeComboStart.selectedIndex = 1; easeComboEnd.selectedIndex = 2; } private function changeHandler(e:Event = null):void{ var oldTime:Number = getTimer() betweenGraff.graphics.clear(); var cls1:Class = getDefinitionByName("org.libspark.betweenas3.easing." + tweenComboStart.selectedItem as String) as Class; var cls2:Class = getDefinitionByName("org.libspark.betweenas3.easing." + tweenComboEnd.selectedItem as String) as Class; if(tw) if(tw.isPlaying) tw.stop(); tw = customEase( betweenBall, {x:350, y:0 }, {x:0, y:350 }, 5, cls1[easeComboStart.selectedItem], cls2[easeComboEnd.selectedItem], percentSlider.value ); betweenGraff.graphics.lineStyle(1, 0xFF0000,1) betweenGraff.graphics.moveTo(0, 350) tw.onUpdate = function():void{ var time:Number = (getTimer() - oldTime)/1000 / 5 * 350 var value:Number = betweenBall.y; betweenGraff.graphics.lineTo(time, value); betweenLine.y = value; } tw.play(); middleLine.graphics.clear(); middleLine.graphics.lineStyle(1, 0x0000FF, 1); middleLine.graphics.moveTo(0, -percentSlider.value * 350 + 350); middleLine.graphics.lineTo(350, -percentSlider.value * 350 + 350); copySrc = "import jp.clockmaker.utils.*;\n" + "import org.libspark.betweenas3.easing.*;\n" + "BetweenUtil.customEase(obj, {x:300}, {x:0}, 5, " + tweenComboStart.selectedItem + "." + easeComboStart.selectedItem + ", " + tweenComboEnd.selectedItem + "." + easeComboEnd.selectedItem + ", " + Math.round(percentSlider.value * 100) / 100 + ").play();" } private function copy():void{ System.setClipboard(copySrc); Alert.show("Copied Custom Easing Script") } private var copySrc:String = ""; ]]> </mx:Script> <mx:Label text="Start" x="5" y="35" /> <mx:Label text="End" x="5" y="60" /> <mx:Label text="{'Middle Percent : ' + Math.round(percentSlider.value * 100) + '%' }" x="300" y="35" /> <mx:ComboBox id="tweenComboStart" change="changeHandler()" x="45" y="35" rowCount="{TWEENS.length}" /> <mx:ComboBox id="tweenComboEnd" change="changeHandler()" x="45" y="60" rowCount="{TWEENS.length}" /> <mx:ComboBox id="easeComboStart" change="changeHandler()" x="160" y="35" /> <mx:ComboBox id="easeComboEnd" change="changeHandler()" x="160" y="60" /> <mx:HSlider id="percentSlider" change="changeHandler()" x="300" y="60" minimum="0.1" maximum="0.9" value="0.8" toolTip="イージング切り替えの中間点をどこに指定するかの割合" /> <mx:UIComponent id="graff" width="350" height="350" x="5" y="90" /> <mx:Label x="6" y="9" text="Custom Easing with BetweenAS3" fontSize="12" fontWeight="bold"/> <mx:Button x="370" y="90" label="Play" click="changeHandler()"/> <mx:Button x="370" y="120" label="Copy Script" click="copy()"/> </mx:Application>