クリックするとランダムに移動するBOX

Flash

2009.02.24

先日あるFlashセミナーに参加しました。かなり勉強になりました!
忘れる前に習ったことを、ここで披露したいと思います。

Tweener

ダウンロード

このセミナーで初めてActionScriptのライブラリの存在を知りました。
今回読み込むのは、AS2/AS3の制御ライブラリ「Tweener」です。
「Tweener」についての詳しいことは別のサイト調べてください。。。力不足ですいません。

読み込み

先程のリンク先から「Tweener」をダウンロードして下さい。
それからFlashに読み込ませます。
編集 >> 環境設定 >> [ ActionScript > ActionScript設定3.0 ]
ここからダウンロードしたフォルダを指定すればOKです。

ActionScript3.0

まずはじめに

「F9」を押してActionScriptのソース記入ウィンドウを開きます。
1行目に

import caurina.transitions.Tweener; //Tweenerを呼び出す

を記述します。これで読み込んだ「Tweener」を呼び出します。

グラフィックの作成

次にグラフィックを作成します。普通に編集画面上で四角を描くだけでもいいが、ここはActionScriptで記載します。

var test = new Sprite(); //変数testにグラフィックを表示
test.graphics.beginFill(ransu(1) * 0xFF0000); // 色を指定 ransu()*で色をランダムに表示
test.graphics.drawRect(ransu(100),50,100,100); //サイズ・位置を指定 ransu()でx軸の位置をランダムに表示
addChild(test); //変数testを画面に表示させる

色や位置はランダムに表示するように指定しています。
指定方法は最後のソースを参考

クリック後の動き

このソースを記述すると、やっと動きを与えることができます。

test.addEventListener(MouseEvent.CLICK,onClick); //変数testをクリックした時の指定

function onClick(event:MouseEvent) {
	Tweener.addTween(event.target, {
		time: ransu(10),    //アニメーション時間を2秒に設定  
		x: ransu(200)   //x座標を300まで移動  
	});  
}  

すごく単純な動きですが、一から記述してそれが動くと少し感動ものです。

数値をランダムに表示

function ransu(a):Number { //ransu()が付いている数値をランダムにする
	var hensu = Math.random()*a;
	return hensu;
}

特に必要ないのですが、読み込む度に変化があった方がいいかなと思い、いれました。

サンプル

  1. Web-Parkのホーム > 
  2. Flash > 
  3. クリックするとランダムに移動するBOX
オススメ本(既読)
読んでみたい本(未読)

COMMENT PLEASE!!

トラックバック

「クリックするとランダムに移動するBOX」のトラックバックURL
http://web-park.org/flash/click.html/trackback
about me

Manabu Kushimoto

Welcome to WEB-PARK.ORG!!
This domain was made since 2008 February.

Gender
Male
Birth year
1982
From
Osaka,Japan
  • はてな?ブックマーク
  • delicious
  • facebook