とにかくFlashを作ってみよう(Windows) | ケータイFlashでプログラミング!(2011年度)

Time-stamp: "2011-10-22 Sat 10:38 JST hig"

実験室案内

  • mac mini. Altを押しながら電源を入れると, Mac/Winが選択できる.
  • UserID: (BIRD\)学籍番号, Password:全学認証とは別だけど539のmacなどと共通
  • 自分のホームフォルダは, すべてのMacやWindowsで共通. Windowsでは W:\. スタートメニュー>コンピュータから. 以下では, ~と略す. ホームフォルダ内のDownloadフォルダは~/Downloadのように.

サンプルを動かしてみよう

以下, 539実験室の Windows 環境, Flash Professional CS5.5を想定しています.
  • ホームフォルダZ:\内にフォルダsje/つまり~/sjeを作る. ここに数理情報演習のファイルを置きましょう.
  • 最初に一度だけすればいい設定
  • スタートメニュー > すべてのプログラム > Adobe > Flash Professional CS5.5を起動.
  • 赤いダイアログ(Wizard)が出ることがあるが, これは使わない.
  • Flashでファイル>新規>一般>Flash Lite4
  • ウィンドウ右側のプロパティというところで,
    • Player Flash Lite 3.1
    • スクリプト ActionScript 2.0
    と変更. 上記の内容を誤って設定した場合には, ファイルを新規で作り直さなくても, ファイル>パブリッシュ設定>Flashから変更が可能.
  • タイムラインのLayer 1のフレーム1を右クリック, アクションを選択してチェックをいれる.
  • 現れるアクションフレームというウィンドウ内に

    
    #include "testgraphics.as"
    

    と記述します. includeの後のスペースは必要です. ここで, include とは, C言語のinclude ディレクティブと同じで, ファイルtestgraphics.asの内容がここに書いてあることにせよ, という意味です. したがって, ここで出てきたファイル名testgraphics.asと, 下で作成・保存するもうひとつのファイルの名前とはあわせておく必要があります.

  • Flash→ファイル>名前をつけて保存で, ~/sje/testgraphics.flaとして保存する. このとき, ファイルの種類として Flash CS4 ドキュメントを選んでおくと, Mac のFlash CS4と共用できる(かも?)
  • Flash でファイル>新規>ActionScript(AS)ファイルを選ぶ.
  • 以下の内容をコピー

    
    var mc:MovieClip = this.createEmptyMovieClip("flag",this.getNextHighestDepth()); // 現時点では呪文
    
    mc.lineStyle(3, 0x0000ff, 100, true, "none", "round", "miter", 1); // 直線の線種を設定
    mc.moveTo(150,1);   // ペン先をあげたままこの点まで移動
    mc.lineTo(150,150);  // ペン先を下ろしてこの点まで直線で移動
    
    mc.lineStyle(5, 0x00ff00, 100, true, "none", "round", "miter", 1);
    mc.moveTo(10,10);
    mc.beginFill(0xff0000,100); // 以下で定義される折れ線・曲線の囲む部分を塗りつぶす
    mc.lineTo(110,10);
    mc.lineTo(110,110);
    mc.lineTo(10,110);
    mc.lineTo(10,10);
    mc.endFill(); // 折れ線・曲線の囲む部分を塗りつぶし終了
    
    // 配列の宣言と定義
    var xlines:Array=new Array(110,210,210,110,110);
    var ylines:Array=new Array(110,110,210,210,110);
    
    mc.lineStyle(5, 0x00ffff, 100, true, "none", "round", "miter", 1);
    mc.moveTo(xlines[0],ylines[0]);
    // for 文
    for(i=1;i<xlines.length;i++){
    	mc.lineTo(xlines[i],ylines[i]);
    }
    
    mc.moveTo(10,50);
    mc.curveTo(10,50+50*Math.tan(Math.PI/8),10+50*Math.cos(Math.PI/4),50+50*Math.sin(Math.PI/4)); // ペン先を下ろして円弧上を移動
    
    fillCircle(mc,110,110,30,0x00ff00,100); // 塗りつぶした円を描け, という下で定義した関数
    
    drawCircle(mc,50,50,30); // 中空の円を描け, という下で定義した関数
    
    this.createTextField("label",this.getNextHighestDepth(),120,120,150,20);
    label.text = "日本語のtest test test";
    label.border = true;
    
    // 関数定義
    function fillCircle(mc:MovieClip,xc:Number,yc:Number,radius:Number,rgb:Number, alpha:Number){
        var diag:Number=Math.cos(Math.PI/4);
        var med:Number=Math.tan(Math.PI/8);
    
        if( radius<=0 ){
    	return;
        }
        mc.moveTo(xc+radius,yc);
        mc.beginFill(rgb,alpha);
    
        mc.curveTo(xc+radius,yc+med*radius,xc+diag*radius,yc+diag*radius);
        mc.curveTo(xc+med*radius,yc+radius,xc,yc+radius);
        mc.curveTo(xc-med*radius,yc+radius,xc-diag*radius,yc+diag*radius);
        mc.curveTo(xc-radius,yc+med*radius,xc-radius,yc);
        mc.curveTo(xc-radius,yc-med*radius,xc-diag*radius,yc-diag*radius);
        mc.curveTo(xc-med*radius,yc-radius,xc,yc-radius);
        mc.curveTo(xc+med*radius,yc-radius,xc+diag*radius,yc-diag*radius);
        mc.curveTo(xc+radius,yc-med*radius,xc+radius,yc);
    
        mc.endFill();
    }    
    
    function drawCircle(mc:MovieClip,xc:Number,yc:Number,radius:Number){
        fillCircle(mc,xc,yc,radius,rgb,0); //non-transparent
    }
    
    
  • 名前をつけて保存で, ~/sje/testgraphics.asとして保存する.
  • testgraphics.asは単なるテキストファイルなので, Emacsやテキストエディットなどのテキストエディタを用いて作成することもできる. ただし, 文字コードはUTF-8である必要がある.
  • ActionScriptファイル .as を保存した後で, Flashファイル .fla のタブを選択して(または, asを選択したままで適切なターゲットのflaをウィンドウ右上のプルダウンメニューで選択して)制御>ムービープレビュー>Device Central で試す. 携帯の種類やキーボードの配置を変えて試すことができる.

このサイトのコンテンツ

QRcode to hig3.net

https://hig3.net