企画

ASの魅力でAnimateのユーザーを増やそう!!

かつて隆盛を極めたFlashだが、後継のAnimateは残念ながらあまり人気がない。その最大の弱点がFlash Playerが提供されなくなったことで、WEBサイトにswfファイルをアップロードできなくなったことであろう。・・・ということで、ActionScript3.0を利用したアニメーション動画を作成しYOUTUBEに動画投稿してAnimateの利用利用ユーザーを増やそうと思う。

目次

ActionScript3.0 メモ

  • イベント
    Eventクラス 利用条件
    Event.ENTER_FRAME フレームが再生される度に実行
    TimerEvent 一定の時間間隔で実行したい
    MouseEvent マウス操作によって実行
    KeyboardEvent キーボードのキーを押下するか放したときに実行
  • クラスから生成されたオブジェクトをインスタンスと呼ぶ
  • インスタンスを生成する
    変数名= new コンストラクタ(引数1,引数2)
    is演算子
    • データが指定したクラスのインスタンスであるかどうかを調べて、そうであればtrue、そうでなければfalseのブール値を戻す演算子
    • 
          trace(clip is Sprite);
          trace(clip is DisplayObject);
          trace(clip is Object);
          
    • 条件演算子
      条件式 ? 式A : 式B
      条件式が成り立てば「式A」が実行され、そうでなければ「式B」が実行され、結果が戻されます。
    • 
              var score:uint;
              var result:String;
              
              score=80;
              result = (score >= 80) ? "合格" : "不合格";
              trace(result);
      
    • 標準体重を求める関数
      
      var weight:Number;
      weight = stdWeight(163);
      trace("163cmの標準体重:"weight);
      
      function stdWeight(theHeight:Number):Number{
          var theWeight:Number;
          theHeight = theHeight / 100;
          theWeight = theHeight * theHeight * 22;
          //標準体重を戻す
          return theWeight;
      }
      
  • 配列の生成
    
                        var 配列名:Array;
                        配列名 = new Array(要素数);
    

    添え字は1からではなく0から始まります。

  • forEach(callback):void
    配列のそれぞれの要素に対して指定した関数を適用することができる
メソッド名 説明
concat() 配列に要素を追加して新たな配列を生成する
every() falseを変えす要素に達するまで各要素に対してテスト関数を実行する
filter() テスト関数を実行しtrueを返すすべての要素を含む配列を生成する
forEach() 各要素に対して関数を実行する
join() 各要素をつなげた文字列を戻す
map() 各要素に対して関数を実行しその結果を配列として返す
pop() 配列の最後の要素を取り出す
push() 配列の最後の要素を追加する
reverse() 配列の要素を逆順にする
shift() 配列の最初の要素を取り出す
slice() 配列の要素の一部を取り出した新たな配列を生成する
sort() 配列の要素をソートする
toString() 配列の要素をカンマ「,」でつなげた文字列にして戻す
unshift() 配列の最初に要素を追加する
連想配列
連想配列は、その名前が示すようにキーとなる文字列から要素を連想させるような配列を作りたい場合に便利です。
  • for( 変数 in 連想配列){ 処理 }
    連想配列から順にキー(プロパティ )を取り出して変数に格納することができます
    for( 変数 in 配列){ 処理 }
                
    var names:Array = new Array(3);
    names[0] = "あいう えお";
    names[1] = "かきく けこ";
    names[2] = "さしす せそ";
    
    for (var i:String in names)
        var num:int;
        num = int(i) + 1;
        trance(num, names[i]);
    
                
                
    for each( 変数 in 連想配列){ 処理 }
                
    var members:Object = new Object();
    
    menbers["A001"] ="あいう えお";
    menbers["A001"] ="かきく けこ";
    menbers["A001"] ="さしす せそ";
    
    for each(var member:String in menbers){
        trace(member);
    }
                
                

文字列の操作

  • エスケープシーケンス の利用
    エスケープシーケンス 説明
    \n ラインフィード
    \t タブ
    \b バックスペース
    \r キャリッジリターン
    \f フォームフィード(紙送り)
    \\ 文字「\」
    \' シングルクォーテーション
    \" ダブルコーテーション
    \xnn 2桁の16進数で指定したASCII文字コード
    \unnnn 4桁の16進数ユニコードde 指定した文字コード
    算術演算に便利なMathクラス
    プロパティ 説明 近似値
    E 自然対数の底 2.718
    LN2 2の自然対数値 0.6931
    LN10 10の自然対数値 2.302585
    LG2E 2を底とするeの対数値 1.442695
    LOG10E 10を底とするeの対数値 0.434294
    PI 円周率 3.14159
    SQRT1_2 1/2の平方根 0.7071
    SQRT2 2の平方根 1.4142
    Math.ceil(val):Number
    整数切り上げ
    9.85 → 10
    Math.floor(val):Number
    整数切り捨て
    9.85 → 9
    Math.round(val):Number
    四捨五入
    9.85 → 10
    abs(val):Number
    絶対値
    -9.85 → 9.85
    Math.max(val):Number
    引数の最大値
    4, -5, 6, 9, 0 → 9
    Math.min(val):Number
    引数の最小値
    4, -5, 6, 9, 0 → -5
    Math.pow(val1,val2):Number
    val1の値をval2乗した値
    pow(3, 4):Number 3の4乗

三角関数のメソッド

  • 度数をラジアン値へ変換する
    ラジアン値 = 円周率 * 角度 / 180

ムービーに表示する写真をランダムに変更する

  • random():Number
    乱数(0 以上 1未満)
    
    //4枚の画像
    var numOfImg = 4;
    var num = Math.floor(Math.random() * numOfImg)+1;
    //1から4の画像をランダムに表示
    myPhoto.gotoAndStop(num);
    
    

タイマーの利用

  • Timer(delay, repeatCount)
    Timerで使用されるイベント
    イベント 説明
    TimerEvent.TIMER 指定された間隔で送出される
    TimerEvent.TIMER_COMPLETE タイマーが終了したときに送出される
    Timerで使用されるプロパティ
    プロパティ 説明
    currentCount 現在までにタイマーイベントが発生した回数
    delay タイマーイベントの間隔
    repeatCount タイマーイベントの繰り返し回数
    running タイマーの状態(true:実行中, false:停止中)
    タイマーの動作を確かめる
    500ミリ秒ごとに10回イベントを送出するTimerオブジェクトを生成し、TimerEvent.TIMERイベントおよびTimerEvent.TIMER?COMPLETEイベントを捕まえてtrace()文で表示しています。
                     
    import flash.utils.Timer;
    
    //Timerオブジェクトを生成
    var myTimer:Timer = new Timer(500, 10);
    
    //イベントリスナーの登録
    myTimer.addEventListener(TimerEvent.TIMER, onTimer);
    myTimer.addEventListener(TimerEvent.TIMER_COMPLATE, onComplete);
    
    function onTimer(event:TimerEvent):void{
        var count:int = myTimer.currentCount;
        var seconds:Number = (myTimer.delay * count) / 1000;
        trance(count + "回数"+ seconds+"秒");
    }
    function onComplate(event:TimerEvent):void{
        trace("タイマー終了");
    }
                     
                    
    デジタル時計
                    
    import flash.utils.Timer;
    
    //Timerオブジェクトを生成
    var myTimer:Timer = new Timer(1000);
    //イベントリスナーの登録
    myTimer.addEventListener(TimerEvent.TIMER, onTimer);
    
    myTimer.start();
    
    //リスナー関数
    function onTimer(event:TimerEvent):void{
        var now:Date = new Date();
        var hour:int = now.getHours();
        var min:int = now.getMinutes();
        var sec:int = now.getSeconds();
        var hourStr:String;
        var minStr:String;
        var secStr:String;
        
        if(hour < 10){
            hourStr = "0" + hour;
        }else{
            hourStr = hour.toString();
        }
        if(min < 10){
             minStr = "0" + min;
        }else{
            minStr = min.toString();
        }
        if(sec < 10){
             secStr = "0" + sec;
        }else{
            secStr = sec.toString();
        }
        
        //時間を表示 (ダイナミックテキストを設置)
        clock.text = hourStr + ":" + minStr + ":" + secStr;
    }
                    
                    
    Calendarクラスを設計する
    • 年と月を決める
    • その月の日数を求める
    • 月の最初の日の曜日を求める
    • 順に日を書き出す
    メソッド 属性 説明
    getCal():String public 指定した月のカレンダーを文字列として戻す
    setYearMont(year:uint,month:uint)void public カレンダーの年と月を設定する
    getYear():uint public カレンダーの年を戻す
    getMonth():uint public カレンダーの月を戻す
    isLeapYear(year):Boolean private 閏年かどうかを調べる
    getFirstDay():uint protected 月の最初の曜日を求める
    getMonthDays():uint protected 月の日数を求める
    閏年
    • 閏年であるためには4で割り切れる必要がある
    • ただし、100で割り切れる年は閏年ではない
    • ただし、400で割り切れる都市は閏年である
    4 で割り切れる && 100 で割り切れない || 400 で割り切れる
    getCal()メソッド
    指定した月のカレンダーを文字列として戻す
    
    public function getCal():String{
        var col:uint = 1; //カラム
        var calStr:String;
        var numOfDays:uint = getMonthDays();
        var dayOfWeek:uint = getFirstDay();
        var dayStr:String;
        
        calStr = "S M Tu W Th F S \n";
        
        //最初の日までカラムをスキップ
        for(var i:uint = 1; i <= dayOfWeek; i++){
            col++;
            calStr +="    ";
        };
        for(var day:uint = 1; i <= dayOfWeek; day++){
            if(day >= 10){
                dayStr = day + " "; //10以上
            }else{
                dayStr = " " + day + " "; //1~9
            }
            if(col == 7){
                calStr += dayStr + "\n";
                col = 1;
            }else{
                calStr += dayStr;
                col++;
            }
        }
        return calStr;
    }
    
    
    setYearMont()メソッド
    カレンダーの年と月を設定する
    
    public function setYearMonth(year:uint, month:uint):void{
        theYear = year;
        theMonth = month;
    }
    
    
    getYear()メソッド
    カレンダーの年を戻す
    
    public function getYear():uint{
        return theYear;
    }
    
    
    getMonth()メソッド
    カレンダーの月を戻す
    
    public function getMonth():uint{
        return theMonth;
    }
    
    
    isLeapYear()メソッド
    閏年かどうかを調べる
                        
    private function isLeapYear(year:uint):Boolean{
        if(((year % 4 === 0) && (year % 100 != 0)) 
        || (year % 400 == 0)){
            return true;
        }else{
            return false;
        }
    }
                        
    getFirstDay()メソッド
    月の最初の曜日を、日曜日は「0」、月曜日を「1」とする整数で戻す
                        
    protected function getFirstDay():uint{
        var tmpDate = new Date(theYear, theMonth-1, 1);
        return tmpDate.getDay();
    }
                        
                        
    getMonthDays()メソッド
    その月の日数を返す
    
    protected function getMonthDays():uint{
        var monthDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
          if(isLeapYear(theYear)){
              monthDays[1] = 29;
          }
          return monthDays[theMonth -1];
    }
    
    
    flaファイルタイムラインに記載
    
    import Calendar;
    
    //テキストボックスの枠を消去
    header.border = false;
    calBox.border = false;
    
    var today:Date = new Date();
    
    //Calendarクラスのインスタンスを生成
    var myCal:Calendar = new Calendar(today.getFullYear(),today.getMonth()+1);
    //年と月を表示
    header.text = myCal.getYear() + "年" + myCal.getMonth() + "月";
    //カレンダーを表示
    calBox.text = myCal.getCal();
    
    

残像を残しながらバウンドするボール

  • ボールの速度に重力と空気摩擦を加える
    • ボールの数:15
    • 重力係数:0.6
    • 摩擦係数:0.99
    • バウンド係数:-0.7
  • ボールと床、壁、天井でバウンドさせる
    • .x *= -1

テキストエフェクト

  • 等速でオブジェクトを移動させる
    
    package {
     import flash.display.MovieClip;
     import flash.display.Sprite;
     import flash.events.Event;
    
     public class MoveStr extends Sprite {
      public function MoveStr() {
       A_mc.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
       } // MoveStr
      //毎フレーム実行する
       private function enterFrameHandler(evt: Event): void {
          var mc: MovieClip = evt.target as MovieClip;
          //終点の設定
          var goalX: Number = 1000;
            moveStr(mc, goalX);
       } //enterFrameHandler
    
      //ムービークリップの位置設定
      private function moveStr(targetmc: MovieClip, goalX: Number): void {
       if (Math.abs(goalX - targetmc.x) < 10) {
         targetmc.x = goalX;
         targetmc.removeEventListener(Event.ENTER_FRAME, enterFrameHandler);
       } else {
         //x座標を設定する
         targetmc.x += 10;
       }
      }//function moveStr
     }//class MoveStr
    }//pockage
    
    
  • イージングでオブジェクトを移動させる
    
    package {
     import flash.display.MovieClip;
     import flash.display.Sprite;
     import flash.events.Event;
    
      public class EaseStr extends Sprite {
        public function EaseStr() {
          A_mc.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
        } // MoveStr
        //毎フレーム実行する
        private function enterFrameHandler(evt: Event): void
        {
        var mc: MovieClip = evt.target as MovieClip;
        //終点の設定
        var goalX: Number = 1000;
        easeStr(mc, goalX);
        } //enterFrameHandler
    
        //ムービークリップの位置設定
        private function easeStr(targetmc: MovieClip, goalX: Number): void {
          if (Math.abs(goalX - targetmc.x) < 0.5) {
            targetmc.x = goalX;
    
            targetmc.removeEventListener(Event.ENTER_FRAME, enterFrameHandler);
          } else {
            var easing:Number = 0.15;
            //イージングでx座標を設定する
            targetmc.x += (goalX -targetmc.x)*easing;
          }
        }//function moveStr
      }//class MoveStr
    }//pockage
    
    
  • 複数のオブジェクトを移動させる
    
    package {
        import flash.display.MovieClip;
        import flash.display.Sprite;
        import flash.events.Event;
    
        public class EaseStr extends Sprite {
    
            public function EaseStr() {
            //ムービークリップを格納する配列を作成
            var mcList:Array = new Array();
            
            mcList.push(A_mc);
            mcList.push(C1_mc);
            mcList.push(T1_mc);
            mcList.push(I1_mc);
            mcList.push(O_mc);
            mcList.push(N_mc);
            mcList.push(S_mc);
            mcList.push(C2_mc);
            mcList.push(R_mc);
            mcList.push(I2_mc);
            mcList.push(P_mc);
            mcList.push(T2_mc);
    			
            for(var i:int = 0; i < mcList.length; i++){
                var mc:MovieClip = mcList[ i ];
            
                //初期座標を保存
                mc.x0 = mc.x;
                //x座標を設定
                mc.x = 100;
    
                mc.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
            }
        } // EaseStr
        //毎フレーム実行する
        private function enterFrameHandler(evt: Event): void
        {
            var mc: MovieClip = evt.target as MovieClip;
            //終点の設定
            var goalX: Number = mc.x0;
            easeStr(mc, goalX);
        } //enterFrameHandler
    
            //ムービークリップの位置設定
        private function easeStr(targetmc: MovieClip, goalX: Number): void {
            if (Math.abs(goalX - targetmc.x) < 0.5) {
                targetmc.x = goalX;
            targetmc.removeEventListener(Event.ENTER_FRAME, enterFrameHandler);
            } else {
                var easing:Number = 0.15;
                //イージングでx座標を設定する
                targetmc.x += (goalX -targetmc.x)*easing;
            }
            }//function easeStr
        }//class MoveStr
    }//pockage
    
    

タイムライン

  • タイムラインのコントロール用関数
    関数 機能
    play():void タイムライン内で再生ヘッド前へ進める
    stop():void 再生中のSWFファイルを停止する
    gotoAndPlay():void シーン内に指定されたフレームに再生ヘッドを送り、そのフレームから再生する
    gotoAndStop():void シーン内に指定されたフレームに再生ヘッドを送り、そのフレームから停止する
    nextFrame():void 次のフレームに再生ヘッドを送り停止する
    prevFrame():void 直前のフレームに再生ヘッドを送り停止する
    nextScene():void 次のシーンのフレーム「1」に再生ヘッドを送り、停止する
    prevScene():void 直前のシーンのフレーム「1」に再生ヘッドを送り、停止する

プロフィール

プロフィール
ぬえさぶろう
名前 ぬえさぶろう
仕事 PCの部品管理・取扱説明書作成
好物 納豆・カレー
技能
  • PhotoShop
  • Illustrator
  • Animate
  • AfterEffects
  • Premire

役立ちテクニック

toTop