yoppa.org

Webアニメーション 2010

ActionScript (2)：MovieClipを操作する

MovieClipシンボルとプロパティ

  • ステージ上に配置したMovieClipシンボル
    • 様々な「性質」を持つ
    • 個々のMovieClipが保持してる性質を、「プロパティ」と呼ぶ
    • MovieClipのプロパティを操作することで、様々な表現が可能となる

MovieClipシンボルのプロパティ

  • MovieClipシンボルは非常に多くのプロパティを持つ
  • 表現の部分に関係する代表的なプロパティを抜粋
    • x : 親 DisplayObjectContainer のローカル座標を基準にした DisplayObject インスタンスの x 座標を示します
    • y : 親 DisplayObjectContainer のローカル座標を基準にした DisplayObject インスタンスの y 座標を示します
    • width：表示オブジェクトの幅を示します（ピクセル単位）
    • height：表示オブジェクトの高さを示します（ピクセル単位）
    • scaleX：基準点から適用されるオブジェクトの水平スケール（パーセンテージ）を示します。
    • scaleY：オブジェクトの基準点から適用されるオブジェクトの垂直スケール（percentage）を示します。
    • rotation：DisplayObject インスタンスの元の位置からの回転角を度単位で示します。
    • alpha：指定されたオブジェクトのアルファ透明度値を示します
    • blendMode : 使用するブレンドモードを指定する BlendMode クラスの値です

MovieClipのプロパティの操作1 – 位置(x, y)

  • 1フレーム目のステージに以下の要素を配置
    • MovieClip：インスタンス名「mc」
    • ボタン：インスタンス名「top」
    • ボタン：インスタンス名「bottom」
    • ボタン：インスタンス名「left」
    • ボタン：インスタンス名「right」
  • 1フレーム目に以下のスクリプトを記述

[code language=”java”]
this.left.addEventListener(MouseEvent.CLICK, leftClickHandler);
this.right.addEventListener(MouseEvent.CLICK, rightClickHandler);
this.top.addEventListener(MouseEvent.CLICK, topClickHandler);
this.bottom.addEventListener(MouseEvent.CLICK, bottomClickHandler);

function leftClickHandler(e:MouseEvent):void
{
this.mc.x -= 5;
}

function rightClickHandler(e:MouseEvent):void
{
this.mc.x += 5;
}

function topClickHandler(e:MouseEvent):void
{
this.mc.y -= 5;
}

function bottomClickHandler(e:MouseEvent):void
{
this.mc.y += 5;
}
[/code]

MovieClipのプロパティの操作2 – 大きさ(scaleX, scaleY)

  • 1フレーム目のステージに以下の要素を配置
    • MovieClip：インスタンス名「mc」
    • ボタン：インスタンス名「zoomInX」
    • ボタン：インスタンス名「zoomOutX」
    • ボタン：インスタンス名「zoomInY」
    • ボタン：インスタンス名「zoomOutY」
  • 1フレーム目に以下のスクリプトを記述

[code language=”java”]
this.zoomInX.addEventListener(MouseEvent.CLICK, zoomInXHandler);
this.zoomOutX.addEventListener(MouseEvent.CLICK, zoomOutXHandler);
this.zoomInY.addEventListener(MouseEvent.CLICK, zoomInYHandler);
this.zoomOutY.addEventListener(MouseEvent.CLICK, zoomOutYHandler);

function zoomInXHandler(e:MouseEvent):void
{
this.mc.scaleX *= 1.1;
}

function zoomOutXHandler(e:MouseEvent):void
{
this.mc.scaleX /= 1.1;
}

function zoomInYHandler(e:MouseEvent):void
{
this.mc.scaleY *= 1.1;
}

function zoomOutYHandler(e:MouseEvent):void
{
this.mc.scaleY /= 1.1;
}
[/code]

MovieClipをアニメーションする1：位置を移動(x, y)

  • EnterFrameイベントを使用する
    • フレームが更新するたびに呼び出されるイベント
    • processingで言うところの、draw()関数
  • 1フレーム目のステージに以下の要素を配置
    • MovieClip：インスタンス名「mc」
    • ボタン：インスタンス名「top」
    • ボタン：インスタンス名「bottom」
    • ボタン：インスタンス名「left」
    • ボタン：インスタンス名「right」
  • 1フレーム目に以下のスクリプトを記述

[code language=”java”]
var speedX:Number=0;
var speedY:Number=0;
this.left.addEventListener(MouseEvent.CLICK, leftClickHandler);
this.right.addEventListener(MouseEvent.CLICK, rightClickHandler);
this.top.addEventListener(MouseEvent.CLICK, topClickHandler);
this.bottom.addEventListener(MouseEvent.CLICK, bottomClickHandler);
this.addEventListener(Event.ENTER_FRAME, enterFrameHandler);

function leftClickHandler(e:MouseEvent):void {
speedX-=1;
}

function rightClickHandler(e:MouseEvent):void {
speedX+=1;
}

function topClickHandler(e:MouseEvent):void {
speedY-=1;
}

function bottomClickHandler(e:MouseEvent):void {
speedY+=1;
}

function enterFrameHandler(e:Event):void {
this.mc.x += speedX;
this.mc.y += speedY;
if(this.mc.x < 0 || this.mc.x > stage.stageWidth){
speedX *= -1;
}
if(this.mc.y < 0 || this.mc.y > stage.stageHeight){
speedY *= -1;
}
}
[/code]

MovieClipをアニメーションする2：回転(rotation)

  • 1フレーム目のステージに以下の要素を配置
    • MovieClip：インスタンス名「mc」
    • ボタン：インスタンス名「speedUp」
    • ボタン：インスタンス名「speedDown」
  • 1フレーム目に以下のスクリプトを記述

[code language=”java”]
var speed:Number=0;

this.speedUp.addEventListener(MouseEvent.CLICK, speedUpHandler);
this.speedDown.addEventListener(MouseEvent.CLICK, speedDownHandler);
this.addEventListener(Event.ENTER_FRAME, enterFrameHandler);

function speedUpHandler(e:MouseEvent):void {
speed += 1;
}

function speedDownHandler(e:MouseEvent):void {
speed -= 1;
}

function enterFrameHandler(e:Event):void {
this.mc.rotation += speed;
}
[/code]

MovieClipをアニメーションする3：ダブル回転(rotation)

  • ムービークリップを入れ子状に配置してみる
  • 1フレーム目のステージに以下の要素を配置
    • MovieClip：インスタンス名「mc」
    • MovieClip：インスタンス名「mc」の中にさらにMovieClip「mc2」を貼る
    • ボタン：インスタンス名「speedUp」
    • ボタン：インスタンス名「speedDown」
    • ボタン：インスタンス名「speedUp2」
    • ボタン：インスタンス名「speedDown2」
  • 1フレーム目に以下のスクリプトを記述

[code language=”java”]
this.speedUp.addEventListener(MouseEvent.CLICK, speedUpHandler);
this.speedDown.addEventListener(MouseEvent.CLICK, speedDownHandler);
this.speedUp2.addEventListener(MouseEvent.CLICK, speedUpHandler2);
this.speedDown2.addEventListener(MouseEvent.CLICK, speedDownHandler2);
this.addEventListener(Event.ENTER_FRAME, enterFrameHandler);

function speedUpHandler(e:MouseEvent):void {
speed += 1;
}

function speedDownHandler(e:MouseEvent):void {
speed -= 1;
}

function speedUpHandler2(e:MouseEvent):void {
speed2 += 1;
}

function speedDownHandler2(e:MouseEvent):void {
speed2 -= 1;
}

function enterFrameHandler(e:Event):void {
this.mc.rotation += speed;
this.mc.mc2.rotation += speed2;
}
[/code]