クリックするとランダムに移動するBOX
先日ある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; }
特に必要ないのですが、読み込む度に変化があった方がいいかなと思い、いれました。
サンプル
- Web-Parkのホーム >
- Flash >
- クリックするとランダムに移動するBOX
Warning: count(): Parameter must be an array or an object that implements Countable in /home/markcrest/web-park.org/public_html/wordpress/wp-includes/class-wp-comment-query.php on line 405
COMMENT PLEASE!!
トラックバック
- 「クリックするとランダムに移動するBOX」のトラックバックURL
Warning: Use of undefined constant display - assumed 'display' (this will throw an Error in a future version of PHP) in /home/markcrest/web-park.org/public_html/wordpress/wp-content/themes/default/single.php on line 105
https://web-park.org/flash/click.html/trackback