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

Time-stamp: "2011-09-30 Fri 19:09 JST hig"

実験室案内

  • エントランスカード登録
  • Password Reset
  • Login to Mac
    • Safari:Webブラウザ
    • Finder:エクスプローラ
      • ファインダのサイドバー
    • Dock:タスクバー,クイック起動バー
    • Menubar:メニュー
    • アプリケーション: c:\Program Files
    • アプリケーション/ユーティリティ/パフォーマンスメーター:タスクマネージャ
  • 自分のホームフォルダは, すべてのMacやWindowsで共通. Finderのサイドバーにある自分のユーザ名=学籍番号と同じ名前のフォルダがそれ. Full pathでいうと, /Network/Servers/machawk.bird.math.ryukoku.ac.jp/home/ユーザ名だが, 以下では, ~と略す. ホームフォルダ内のDownloadフォルダは~/Downloadのように.
  • Logon to Team539Wiki
  • Login to ReLS

課題0:自分の携帯を知ろう

自分のページに次の情報を書こう.

  • 自分の携帯のキャリア
  • 自分の携帯の機種
  • 自分の携帯のFlashバージョン
  • 今後6か月以内の機種変更の予想

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

以下, 539実験室の Mac 環境(Snow Leopard/Lion), Flash Professional CS4を想定しています.
  • ホームフォルダ~内にフォルダsje/つまり~/sjeを作る. ここに数理情報演習のファイルを置きましょう.
  • アプリケーション > Adobe Flash CS4 > Adobe Flash CS4を起動.
    • 起動したときに, 現在の言語設定ではだめ, といわれることがある. りんご>システム環境設定 >言語環境でいったんEnglishをいちばん上にドラッグしてログアウト, 再度ログインしてりんご>Preferences > Language&Textで日本語をいちばん上にドラッグ, ログアウト, ログインで直ることがある. マシンごとではなくユーザごとのfix.
  • Flash→ファイル>新規>Flashファイル(モバイル) を選ぶ(これは, Flashをアクティブウィンドウにして, メニューバーに現れるFlashの右隣のファイルメニューを開いて…という意味です). Adobe Device Centralが自動的に起動する.
  • 1回目だけやればいい作業: Device Central → Device Central > 環境設定 > 一般 > 起動時、オンラインライブラリに自動的に接続するのチェックをはずす.
  • Adobe Device Central で
    • Flash Lite 3.1
    • ActionScript 2.0
    • スタンドアローンプレーヤー
    • 現在のプロジェクトに追加 チェックしない
    • フルスクリーンに設定 チェックしない
    • サンプルデバイスセットから Flash Lite 3.1 16 240x320 を選択
    • 携帯の画像を選択して作成をクリック
    上記の内容を誤って設定した場合には, ファイルを新規で作り直さなくても, Flash→ファイル>パブリッシュ設定>Flashから変更が可能.
  • タイムラインのLayer 1のフレーム1を右クリック, アクションを選択してチェックをいれる.
  • 現れるアクションフレームというウィンドウ内に

    
    #include "testgraphics.as"
    

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

  • Flash→ファイル>名前をつけて保存で, ~/sje/testgraphics.flaとして保存する.
  • 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 のタブを選択してFlash→制御>ムービープレビュー で試す.

基本的な構文とメソッドの意味を知ろう

次の意味を調べよう:

  • 名詞: line, curve, circle, text, box, border, radius
  • 動詞: move, draw, fill, create

以下口頭で説明

  • 変数宣言は var 変数名:型; C言語では 型:変数名;だった.
  • lineStyle
  • moveTo
  • lineTo
  • beginFill,endFill
  • createTextField
  • 関数定義
  • if-else

Flash 2.0 API Reference2

今後解かれるかもしれない呪文

  • createEmptyMovieClip
  • curveTo
  • this
Reference

課題1:国旗を作ろう

  • 画面の中に小さく, どこかの国の国旗を表示しよう.
  • 完成したプログラム.asをフォーラムに投稿しよう(フォーマットとしてMoodleオートフォーマットでなくプレインテキストフォーマットを選ぶ. そうしないと, 不等号 ><がHTMLのタグとして解釈されたり, 改行が失われたりする. インデントはなくくなっちゃうみたい). また, スクリーンショットを投稿に添付しよう.
    • Mac では, Command + Shift + 4 の同時押しの後, ドラッグした部分をデスクトップにpngとして保存できる. これを添付する. 加工が必要なら, これをプレビュー.app で開いて, トリムしたり, 名前をつけて保存の際に他の形式に変換したりできる.
    • プレビュー.app 自身にもスクリーンショットを撮る機能がついている.

このサイトのコンテンツ

QRcode to hig3.net

https://hig3.net