ムービングシャドウ

moving_shadow



マウスを動かすと影も動くよ、というエフェクト
解説は続きから




新規ファイル作成
ステージ設定はサイズを400×300、フレームレートを30に



レイヤー1に400×300の矩形を描き、図のような感じでグラデーションをかける
中央の色は#999999、端は#CCCCCC



レイヤー1をロックし、レイヤー2を作成
新規シンボルから好きなオブジェクトを作成
ここでは矩形を3つ組み合わせたものをそれぞれ塗りなし、線の色#FFFFFF、線の太さ2px、透明度50



シーン1に戻って、ステージに作成したシンボルを配置
インスタンス名をsquareに


新規レイヤーをつくり、ActionScriptを記入
まずは動きをつけずに影の設定

//影の初期設定
var distance:Number = 0;    //影の距離
var angle:Number = 0;    //影の角度
var dropAlpha:Number = 1;    //影の透明度
var blurX:Number = 0;    //影のX方向ぼかし
var blurY:Number = 0;    //影のY方向ぼかし
var drop:DropShadowFilter = new DropShadowFilter(distance, angle, 0, dropAlpha, blurX, blurY);
square.filters = [drop];



ムービープレビューすると、図のようになったかと思います


次に影の動き設定を追加

//影の初期設定
var distance:Number = 0;    //影の距離
var angle:Number = 0;    //影の角度
var dropAlpha:Number = 1;    //影の透明度
var blurX:Number = 0;    //影のX方向ぼかし
var blurY:Number = 0;    //影のY方向ぼかし
var drop:DropShadowFilter = new DropShadowFilter(distance, angle, 0, dropAlpha, blurX, blurY);
square.filters = [drop];

//新規影設定
function moveShadow(event:MouseEvent):void {
    //インスタンスとマウス位置の距離
    var dx:Number = square.x - mouseX;
    var dy:Number = square.y - mouseY;
    //マウス位置による影の角度
    angle = (180 * Math.atan(dy/dx)) / Math.PI;
    if (dx < 0) {
        angle += 180;
    }
    //マウス位置による影の距離
    distance = Math.sqrt(dy*dy + dx*dx)/5;
    //マウス位置による影の透明度
    dropAlpha = 20/distance;
    //マウス位置による影のぼかし
    blurX = Math.abs(dx/20);
    blurY = Math.abs(dy/20);
    //新規影適用
    drop = new DropShadowFilter(distance, angle, 0, dropAlpha, blurX, blurY);
    square.filters = [drop];
}

stage.addEventListener(MouseEvent.MOUSE_MOVE,moveShadow);

ムービープレビューするとマウス位置によって影が動くエフェクトができたかと思います



以上ムービングシャドウの作り方でした