Home > as3.0 | メモ | 勉強 > flash[AS3.0]のお勉強

flash[AS3.0]のお勉強

約2ヶ月ほったらかし....。
継続はむずかしいです。

今回は自分自身のメモもかねて、初のお勉強な内容。
flashでメニュー的な何かを作ってみます。
とってもつまらん内容ですので、あしからず。

内容はサイトの上部とかに良くある様なflashで

  • 時間経過でサムネイルメニューに対応した写真が切り替わる
  • ロールオーバーで同様に写真が切り替わる。

ってな物を作ってみました。
特に目的が無いのでメニュー自体も写真を貼付けただけの物なんで
デザイン的にアレなんですが、まぁ自身のASの勉強って事で。

どのように実装するのが正しいのかは、よく判らんのですが
とりあえず動いてますんで載っけてみます。
menu

どうやって動かすか

  • Timerクラスを使って一定時間おきに表示を切り替え
  • 切り替え判定用の変数[now]を用意して表示を処理
  • ボタンの名前を利用してロールオーバーの制御
  • 表示はTweenerで制御

ステージの準備

  • 表示のメインとなる写真をインスタンス名img1〜img4の連番でMCに変換してステージに配置
  • 同じくボタンとなる写真をインスタンス名btn1〜btn4の連番でMCに変換してステージに配置

ステージの配置

ドキュメントクラス

PLAIN TEXT
Actionscript:
  1. package{
  2.     import flash.display.MovieClip;
  3.     import flash.display.Sprite;
  4.     import flash.events.Event;
  5.     import flash.events.MouseEvent;
  6.     import flash.events.TimerEvent;
  7.     import flash.utils.Timer;
  8.    
  9.     import caurina.transitions.Tweener;
  10.     import caurina.transitions.properties.FilterShortcuts;
  11.     import caurina.transitions.properties.ColorShortcuts;
  12.  
  13.    
  14.     public class Main extends MovieClip{
  15.         var pAry:Array;
  16.         var tAry:Array;
  17.         var cTime:Timer;
  18.         var now:int; //写真の切り替え判定用の変数
  19.         var sp:Sprite;
  20.        
  21.         public function Main (){
  22.            
  23.             //Tweenerのフィルタ使用の為の初期化
  24.             FilterShortcuts.init();
  25.             ColorShortcuts.init();
  26.             //ステージに配置した写真を操作しやすい様にarrayにいれとく
  27.             pAry = [img1,img2,img3,img4];
  28.             tAry = [btn1,btn2,btn3,btn4];
  29.             //サムネイル横の現在表示バーの作成
  30.             sp = new Sprite();
  31.             sp.graphics.beginFill(0xe814c3);
  32.             sp.graphics.drawRect(0,0,5,90);
  33.             sp.graphics.endFill();
  34.             sp.x = stage.stageWidth-tAry[0].width-sp.width;
  35.             addChild(sp);
  36.            
  37.             //それぞれのボタンのロールオーバーを監視
  38.             for(var i:int=0; i<tAry.length; i++){
  39.                 tAry[i].addEventListener(MouseEvent.ROLL_OVER,rOver);
  40.             }
  41.            
  42.             loop();
  43.         }
  44.        
  45.         function loop():void{
  46.             //タイマー作成。指定時間おきにchangeを実行
  47.             cTime = new Timer(3000);
  48.             cTime.addEventListener(TimerEvent.TIMER,change);
  49.             cTime.start();
  50.             change(new TimerEvent(TimerEvent.TIMER));
  51.         }
  52.        
  53.         function change (e:TimerEvent):void{
  54.             for(var i:int=0;i<pAry.length;i++){
  55.                 if(i == now){
  56.                     fadeIn(pAry[i]);
  57.                     light(tAry[i]);
  58.                 }else{
  59.                     fadeOut(pAry[i]);
  60.                     dark(tAry[i]);
  61.                 }
  62.                 /*判定用の変数と[i]を評価し、それぞれの処理を実行
  63.                 nowは下のif内で自身を++していき写真の数を超える場合「0」に戻る
  64.                 これらが指定時間おきに実行される
  65.                 */     
  66.             }
  67.             barMove();
  68.             if(++now>= pAry.length){
  69.                 now = 0;
  70.             }
  71.         }
  72.            
  73.         public function rOver(e:MouseEvent){
  74.             //ボタンの名前を利用して判定用の変数に代入
  75.             /*ボタン名をbtn1からの連番でつけてしまったので
  76.             数字だけ抜き出して「1」引いてます
  77.             ややこしい。。。*/
  78.             var actBtn:int = e.target.name.substring(3)-1;
  79.             now = actBtn;
  80.             //ロールオーバー時に動いているタイマーを一度ストップ
  81.             cTime.stop();
  82.             //新たにタイマーを動かす
  83.             loop();
  84.         }
  85.        
  86.         /*以下フェードイン等の見た目をTweenerで*/
  87.        
  88.         function fadeIn(o:Object){
  89.             Tweener.addTween(o,{
  90.                                              time:1.5,
  91.                                              alpha:1,
  92.                                              _Blur_blurX:0,
  93.                                              _Blur_blurY:0,
  94.                                              transition:"easeOutCubic"
  95.                                              });
  96.         }
  97.         function fadeOut(o:Object){
  98.             Tweener.addTween(o,{
  99.                                              time:1.2,
  100.                                              alpha:0,
  101.                                              _Blur_blurX:10,
  102.                                              _Blur_blurY:10,
  103.                                              transition:"easeOutCubic"
  104.                                              });
  105.         }
  106.         function barMove(){
  107.             Tweener.addTween(sp,{
  108.                                              time:0.8,
  109.                                              y:90*now,
  110.                                              transition:"easeOutCubic"
  111.                                              });
  112.         }
  113.         function dark(o:Object){
  114.             Tweener.addTween(o,{
  115.                                              time:0.6,
  116.                                              _tintBrightness:-0.8,
  117.                                              transition:"easeOutCubic"
  118.                                              });
  119.         }
  120.        
  121.         function light(o:Object){
  122.             Tweener.addTween(o,{
  123.                                              time:0.6,
  124.                                              _tintBrightness:0,
  125.                                              transition:"easeOutCubic"
  126.                                              });
  127.         }
  128.     }
  129. }

今回のキモ「changeメソッド」

判定用に用意した変数[now]を設定時間おきに
メイン表示用の写真を収めた配列内で評価。

変数[now]の数値に該当する配列内の写真をfadeIn
それ以外はfadeOutとします。

55行目〜61行目

if(i == now){

  fadeIn(pAry[i]);

  light(tAry[i]);

}else{

  fadeOut(pAry[i]);

  dark(tAry[i]);

}

で写真の表示が済んだら次にメソッドが呼ばれる時の為に
nowの数値を更新しておきます。

68行目〜70行目

if(++now >= pAry.length){

  now = 0;

}

色々と書籍を読んだりしながら牛歩で勉強しとりますが
どういう風に関数を使うみたいな基礎は勉強できても
ロジック的な部分って実際のサンプルソースみたいなのが
無いと難しいなと痛感しとります。
経験を積めば色々と思い浮かぶんでしょうかね？

で、文章にまとめるのムズカシ！
自分で読む分には問題ないんやけど
これ、他人が読んで判るんでしょうかね？
まぁ、いいや。

さて、次はどーしよかな....。

Comments:0

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://www.flat-3.net/blog/2009/06/29-013515/trackback?_wpnonce=51951d7ee6
Listed below are links to weblogs that reference
flash[AS3.0]のお勉強 from flat3.blog

Home > as3.0 | メモ | 勉強 > flash[AS3.0]のお勉強

Calendar
« 6 月 2009 »
M T W T F S S
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30          
最近の投稿
Archive
Category
Tag Cloud
Search
Feeds
Meta

Return to page top