携帯で実行しよう(deploy)+携帯の機能を使おう(fscommand2)

Time-stamp: "2010-10-14 Thu 19:14 JST hig"

mobileGraphics.flaを作っているとします.

プレビューしよう

  • タブでmobileGraphics.flaを選択して, Flash→ファイル > パブリッシュプレビュー > Flash で確認できる.

パブリッシュしよう

  • Flash で.flaファイルを開いた状態から, Flash→ファイル > パブリッシュ でパブリッシュすると, 同じフォルダ内に .swf, .htmlの2つのファイルが生成される.
  • ブラウザSafariで ~/sje/mobileGraphics/mobileGraphics.htmlまたは ~/sje/mobileGraphics/mobileGraphics.swfを開くと, ブラウザでローカルに(つまりネットワークからのダウンロードを介さずに)動作を確認できます. ブラウザで開くとは,
    • Finderで~/sje/mobileGraphicsを開いて mobileGraphics.swfをダブルクリック.
    • Safari→ファイル>ファイルを開くでこのファイルを開く.
    • Safari で URLとして file:///Network/machawk.bird.math.ryukoku.ac.jp/home/学籍番号/sje/mobileGraphics.swf を指定する
    などのことです.
  • これらのファイルをWebサーバに置けば, インターネット上のPC/携帯向けに公開できます.

携帯向けに公開しよう

  • ~/public_html/i/mobileGraphics.swf を移動.
  • 一度やればいい設定(Leopardの場合)
    • テキストエディット(メモ帳のようなテキストエディタ)で, テキストエディット>環境設定>新規書類>フォーマットを, 標準テキストにする.
    • テキストエディットで, テキストエディット>環境設定>開く/保存>ファイルを開くとき>HTMLファイルの中のリッチテキストコマンドを無視にチェックする
  • テキストエディットを使って, ~/public_html/i/index.htmlを 以下の内容で作る.

    <html>
      <head>
        <title>my test page</title>
      </head>
      <body>
        <ul>
          <li><a href="mobileGraphics.swf">ひとつめのサンプル</a></li>
        </ul>
      </body>
    </html>
    
  • ここで, ファイル名がindex.html.txtなどとならないように注意. 必要ならテキストエディット→フォーマット>標準テキストにするで標準テキスト(テキストファイル)に変換し, テキストエディット→ファイル>別名で保存で, 標準テキストのエンコーディングとしては, 日本語(Shift JIS)を選ぶ.
  • index.htmlを再編集するだめな方法
    • Finderからダブルクリックする(ふつうはブラウザが起動してしまう)
    • 右クリックからテキストエディットで開くを選択する(ふつうはリッチテキストとして開かれてしまう)
    index.htmlを再編集するよい方法
    • テキストエディットを起動した後, テキストエディット→ファイル>開くで, リッチテキストのコマンドを無視するにチェックをいれて開く
  • ~/public_html/の下は原則として世の中全体から見られます. ただし, ~/public_html/local/の下は実験室のネットワーク内からのみ見られます(したがって携帯からは見られません)

Webブラウザで見よう

数理情報演習の人々から, 他の人の作品を確認してみよう.

携帯で見よう

hig3.netqr code to hig3 > 数理情報演習 > 数理情報演習の人々.

Windows では DoCoMoのi-mode HTML emulator IIを利用することもできます

MovieClipの基準位置

MovieClipオブジェクトって, 1点じゃなくて, ある大きさがありますよね.
  • _rotationプロパティでMovieClipオブジェクトを回転できるって言うけど, オブジェクトのどの位置を中心に回転するの?
  • _x,_yプロパティでMovieClipオブジェクトの位置を変更できるって言うけど, オブジェクトのどの位置を(親MovieClipの座標)_x,_yにあわせるの?
  • _xscale,_yscaleプロパティでMovieClipオブジェクトを拡大縮小できるって言うけど, どの位置を基準として拡大縮小するの?
  • _width,_heightプロパティでMovieClipオブジェクトを拡大縮小できるって言うけど, どの位置を基準として拡大縮小するの?

答えは, MovieClipの基準点(0,0)です.


var base:MovieClip = this.createEmptyMovieClip("base",this.getNextHighestDepth()); // 台紙

//  画面の縦横のピクセル数
var resx:Number=System.capabilities.screenResolutionX;
var resy:Number=System.capabilities.screenResolutionY;

// 格子を描く
var i:Number;
var interval:Number = 100; // 格子の間隔
base.lineStyle(0, 0x0000ff, 100, true, "none", "round", "miter", 1); 
for(i=1;i<=2;i++){
		base.moveTo(i*interval,0);   
		base.lineTo(i*interval,resy-1); 
		base.moveTo(0,i*interval);   
		base.lineTo(resx-1,i*interval); 
}

var rect1:MovieClip =  this.createEmptyMovieClip("rect1",this.getNextHighestDepth()); 
rect1.lineStyle(0, 0x0000ff, 100, true, "none", "round", "miter", 1); 
rect1.beginFill(0xff0000,100); 
rect1.moveTo(100,100);
rect1.lineTo(100,110);
rect1.lineTo(110,110);
rect1.lineTo(110,100);
rect1.lineTo(100,100);
rect1.endFill();

var rect2:MovieClip =  this.createEmptyMovieClip("rect2",this.getNextHighestDepth()); 
rect2.lineStyle(0, 0x0000ff, 100, true, "none", "round", "miter", 1); 
rect2.beginFill(0xff0000,100); 
rect2.moveTo(100,100);
rect2.lineTo(100,110);
rect2.lineTo(110,110);
rect2.lineTo(110,100);
rect2.lineTo(100,100);
rect2.endFill();

// ここまでは rect1,rect2はまったく同じもの

// 以下を1個ずつ有効化して, なぜそう振る舞うか説明できるようになろう
rect2._rotation=30; // 角度, x軸からy軸に向かう向き(その意味では時計回り)
//rect2._xscale=120; // 100が1.0倍
//rect2._width=15; // ピクセル数
//rect2._x=50,rect2._y=50; // この位置に移動




var rect3:MovieClip =  this.createEmptyMovieClip("rect3",this.getNextHighestDepth()); 
rect3.lineStyle(0, 0x0000ff,100, true, "none", "round", "miter", 1); 
rect3.beginFill(0xff0000,50); 
rect3.moveTo(-5,-5);
rect3.lineTo(-5,5);
rect3.lineTo(5,5);
rect3.lineTo(5,-5);
rect3.lineTo(-5,-5);
rect3.endFill();
rect3._x=200;
rect3._y=100;


var rect4:MovieClip =  this.createEmptyMovieClip("rect4",this.getNextHighestDepth()); 
rect4.lineStyle(0, 0x0000ff, 100, true, "none", "round", "miter", 1); 
rect4.beginFill(0xff0000,50); 
rect4.moveTo(-5,-5);
rect4.lineTo(-5,5);
rect4.lineTo(5,5);
rect4.lineTo(5,-5);
rect4.lineTo(-5,-5);
rect4.endFill();
rect4._x=200;
rect4._y=100;
// ここまでは rect3,rect4はまったく同じもの

// 以下を1個ずつ有効化して, なぜそう振る舞うか説明できるようになろう
//rect4._rotation=30; // 角度, x軸からy軸に向かう向き(その意味では時計回り)
//rect4._xscale=200; // 100が1.0倍
//rect4._width=30; // ピクセル数
//rect4._x=50,rect2._y=50; // この位置に移動


	

時計を作ろう

Dateクラスを使って, 日時, 時刻を取得することができます. 使用例はこんな感じです.

var d:Date = Date(); // この行が実行された時刻を保持する Date オブジェクトを作りdに代入
var hi:Number=d.getDate(); // 日を返す
var youbi:Number=d.getDay(); // 曜日
var ji:Number=d.getHours(); // 時を返す
var fun:Number=d.getMinutes(); // 分を返す
完結したプログラム全体のサンプルはこちら.

this.createTextField("tf",this.getNextHighestDepth(),20,180,150,20);
// Flash Liteでは, createEmptyMovieClip と異なり, 返り値はvoid
tf.text = "test";
tf.border = true;

var mc1:MovieClip = this.createEmptyMovieClip("mc1",this.getNextHighestDepth());
mc1.lineStyle(5, 0x0000ff, 100, true, "none", "round", "miter", 1);
mc1.moveTo(0,0);
mc1.lineTo(0,-20);

var mc2:MovieClip = this.createEmptyMovieClip("mc2",this.getNextHighestDepth());
mc2.lineStyle(5, 0xff00ff, 100, true, "none", "round", "miter", 1);
mc2.moveTo(0,0);
mc2.lineTo(0,-50);



fscommand2("SetSoftKeys","SF1","SF2");
var bat:Number;
var d:Date;


onEnterFrame=function(){
	bat=fscommand2("GetBatteryLevel");
	d = new Date();
	tf.text="" + d.getHours() + ":" + d.getMinutes() + " bat=" + bat;

	mc1._rotation=30;
    mc1._x=100;
	mc1._y=100;
	
	mc2._rotation=60;
	mc2._x=100;
	mc2._y=100;

}

課題

ドキュメントを参照し, こうやって得られる時刻の情報を利用して, アナログ時計を作りましょう. 要するに, フレームごとに, 時刻に応じた角度で線を描けって話だよね.

課題

もっとかっこいい時計にしましょう. 世の中の時計って, アラームがついてたり, 飾りの振り子がついてたり, 毎正時になると鳩が鳴いたり楽隊が出てきて演奏したりするよね.

配列の使い方

Javaに似てます. Array が配列型です.

var a:Array = new Array(); 
a[0] = "月"; 
a[1] = "火"; 
a[2] = "水"; 

var b:Array = new Array("月","火","水"); 
var c:Array = new Array(1,2,4,8,16,32);

携帯の機能を使おう

fscommand2は, Flash Lite だけにあるグローバル関数で, PCのプレイヤーにはないが携帯にはある機能を使うためのものです. 例えば,

fscommand2("StartVibrate"); // バイブレーション開始
fscommand2("StopVibrate");  // バイブレーション停止
var bat:Number=fscommand2("GetBatteryLevel"); // バッテリー残量を返す
fscommand2("setSoftKeys", "戻る", "進む"); // ソフトキーラベルを設定
第1引数がコマンド, 第2引数以降がパラメタです. ドキュメントを読んでいろいろ試してみましょう.

このサイトのコンテンツ

QRcode to hig3.net

http://hig3.net