- Home
- Vosegus Labs
- AS3 のアニメーションを試してみる
AS3 のアニメーションを試してみる
- 作成日 :
- 更新日 :
AS3 を試してみると関係のありそうな広告
ActionScript 3.0 アニメーション
アニメーション表現や3D表現をスクリプトで制御したいと思っている人は絶対に読んでおくべき1冊だと思います。この本は、『完全なソースコードはサンプルライブラリで』的な、技術本によくあるコードの断片のみの抜粋掲載ではなく、紙面だけで完結するActionScript3ソースが掲載されていて、本の分厚さと値段を補っても余りある程の知識と経験を身につけさせてくれました。
定価 ¥ 7,350
加速するアニメーション
SWF
ActionScript
//ベクターの描画
var sp:Sprite = new Sprite();
var grp:Graphics = sp.graphics;
grp.lineStyle(0,00000000,1);
grp.beginFill(00000000,15);
grp.drawCircle(16,16,16);
grp.endFill();
sp.name = "obj";
addChild(sp);
//移動の処理
var n:int = 0;
var obhName = getChildByName("obj");
var flg:Boolean = true;
obhName.addEventListener(Event.ENTER_FRAME,function(){
if(flg == true){
move(obhName,n);
n+=1;
}
if(obhName.x >= 500 && flg == true){
flg = false;
n = 0;
}
if(obhName.x <= 0 && flg == false){
flg = true;
n = 0;
}
if(flg == false){
move(obhName,n);
n-=1;
}
});
//移動の関数
function move(obj,der):void{
obj.x += der;
}
Tween クラスを使ってみる
ActionScript 3.0 コンポーネントリファレンスガイド Tween
SWF
ActionScript
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;
//ベクターの描画
var posY = 0;
var rNum:int = 4;
for(var i:int=0;i<rNum;i++){
var sp:Sprite = new Sprite();
var grp:Graphics = sp.graphics;
var color = Math.random() * 0xFFFFFF;
grp.lineStyle(0,color,1);
grp.beginFill(color,15);
grp.drawCircle(10,10,10);
grp.endFill();
sp.name = "obj"+i;
addChild(sp);
sp.x = 50;
sp.y = posY;
posY += 26;
}
var obhName:Array = new Array();
for(var j:int=0;j<rNum;j++){
obhName[j] = getChildByName("obj"+j);
}
//Event set
//Tween(ターゲット,プロパティ,イージング関数,パラメータの開始値、プロパティの終了値,モーションの継続時間,秒を使用するかどうかを指定するフラグ);
var tween0:Tween = new Tween(obhName[0], "x", Elastic.easeOut, 20, 200, 6, true);
//処理が完了したら逆の動きをする
tween0.addEventListener(TweenEvent.MOTION_FINISH,function(){tween0.yoyo();});
var tween1:Tween = new Tween(obhName[1], "alpha", Elastic.easeOut, 1, 0.3, 10, true);
tween1.addEventListener(TweenEvent.MOTION_FINISH,function(){tween1.yoyo();});
var tween2:Tween = new Tween(obhName[2], "rotation", Elastic.easeOut, 1, 90, 2, true);
tween2.addEventListener(TweenEvent.MOTION_FINISH,function(){tween2.yoyo();});
var tween3:Tween = new Tween(obhName[3], "width", Elastic.easeOut, 20, 90, 6, true);
tween3.addEventListener(TweenEvent.MOTION_FINISH,function(){tween3.yoyo();});
マスクを使ってアニメーション
SWF
写真 : Norbert Kniat - Photographer
ActionScript
var url:String=url;
var imageUrl:URLRequest=new URLRequest(url);
var img:Loader = new Loader();
img.load(imageUrl);
img.name="img";
addChild(img);
var sp:Sprite = new Sprite();
sp.graphics.beginFill(0xFFFFFF);
sp.graphics.drawCircle(50,100,60);
sp.name = "sp";
addChild(sp);
img.mask=sp;
trace(sp);
var tween:Tween = new Tween(sp, "x", Elastic.easeOut, 80, 160, 6, true);
tween.addEventListener(TweenEvent.MOTION_FINISH,function(){tween.yoyo();});
Tweensy を使ってみる
- tweensy - Project Hosting on Google Code
- 参考サイト : Tweensy Original 公式ドキュメント
- 参考サイト : kanariia.com blog
SWF
ActionScript
package {
import flash.display.Sprite;
import flash.display.Graphics;
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Point;
import com.flashdynamix.motion.*;
import com.flashdynamix.utils.*;
import com.flashdynamix.motion.guides.Bezier2D;
import fl.motion.easing.*;
public class Learning19 extends Sprite {
public var str:Sprite;
public var obj:Sprite;
public var objGraph:Graphics;
//*******************
//Learning19 Function
//*******************
public function Learning19() {
stage.addEventListener(MouseEvent.MOUSE_DOWN, go);
}
public function go(e:Event){
obj = new Sprite();
objGraph=obj.graphics;
objGraph.lineStyle(0,0x666666,1);
objGraph.beginFill(0x666666,1);
objGraph.drawRect(0,0,60,60);
addChild(obj);
var tween:TweensyGroup = new TweensyGroup(false, true);
tween.to(obj, {x:500,y:10,alpha:0.5}, 6, Bounce.easeOut,0.5);//対象,プロパティ,Tween にかかる時間,Tweenの動き,Tween の始まるまでの時間
tween.onComplete = function(){
tween.dispose(); tween = null;//TweensyGroupを処分
}
var sp:Sprite = new Sprite();
var grp:Graphics = sp.graphics;
grp.lineStyle(0,0xFF0000,1);
grp.beginFill(0xFF0000,15);
grp.drawCircle(16,16,16);
grp.endFill();
sp.name = "obj";
addChild(sp);
var tween1:TweensyGroup = new TweensyGroup();
var bezier = new Bezier2D(sp, true, false, false);
bezier.push(new Point(0, 0)); bezier.push(new Point(200, 200));//開始位置から終了位置までをpush
bezier.push(new Point(300, 100)); bezier.push(new Point(0, 0));
tween1.to(bezier, {position:1}, 5, Sine.easeOut);
}
}
}
Water ripples を使ってみる
- Water ripples revisited (AS3-only version) | Der Schmale - David Lenaerts's blog
- 写真 : naturalimages Vol.128 CAMPUS LIFE 2
SWF
ActionScript
package{
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Sprite;
import flash.events.Event;
import flash.utils.Timer;
import flash.events.TimerEvent;
import be.nascom.flash.graphics.Rippler;
public class Learning18 extends Sprite{
var rippler:Rippler;
var canvas:Sprite;
var bmpdata:BitmapData;
var bmp:Bitmap;
var pointx:Number;
var pointy:Number;
var fadeStartTime:Number = 300;
var flg:Number = 0;
public function Learning18(){
canvas = new Sprite();
bmpdata = new Water(0,0);
bmp = new Bitmap(bmpdata);
addChild(canvas);
canvas.addChild(bmp);
var timer:Timer=new Timer(4000,0);
rippler = new Rippler(bmp, 30, 6);
rippler.drawRipple(250, 150, 20, 1);
timer.addEventListener(TimerEvent.TIMER, function(){
var positionX = Math.random()*400;
var positionY = Math.random()*300;
rippler.drawRipple(positionX, positionY, 30, 1);
});
timer.start();
}
}
}