top


総投稿数 本 
no_

スポンサーサイト

 --------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
カテゴリ :スポンサー広告 トラックバック(-) コメント(-)
no_543

Flex:◇禁煙カウンタ移植:残り半分を切ったFlex3試用版。やれるところまでゆくぞ(1/2) ・・・ 【Flex:7日目】

 2008-12-14
 昨日・今日と少し時間がとれ、久しぶりに
 Flex3の試用版をさわった。
 (後1ヶ月、残り30日を切ったのだ・・・)
   ・(前回はこちら

 さて、何をやったか。
 チュートリアルの一つ目で大きな流れは理解した。
 しかし、細かいところ完全にやるのは、とても時間が足りない。
 そこで、

  ・(前にFLASHMXで作成途中の)
   禁煙カウンタFlex3に移植してみることにした。

 その作業を行う過程で、
 ・新しい事柄が出てくれば そこで、理解。
 ・実践で憶えてしまおう、というわけだ。

さぁ、その顛末は? (最後に 驚きのカミングアウト もあるよ!)

 ◎やったるで!禁煙カウンタ Flex3(試用)版:(1/2)
 ※長いので2回に分けた。

 追記に ▼

※この連載は、はじめて「Flex」に取り組んだmetaboyが、
 60日間体験版を利用して、ゆっくりと学んでゆく、詳細な記録です。
                      (昨日・本日の作業時間:6.0時間
【Flex:7日目】


FC2ブログランキングにほんブログ村 IT技術ブログ Webサイト構築へブログ王ランキング人気ブログランキング人気ホームページランキングへ


more**************************************************
やったるで!禁煙カウンタ Flex3(試用)版:(1/2)
**************************************************

======================================================
 私は(ひっそりと生きている)ヘビースモーカーだ。
 何歳から覚えたのかは、恥かしいので言えないが
 この10年は、最低の 1mg のタバコに切り替えてはいる。
 しかし、減らない。今も(古めかしい)くわえタバコの
 スタイルでこの原稿を書いている・・・

 娘がいる。やめよ、という。娘には弱い。
 身体も考える。何度も挑戦する。失敗が続く。

 そこで、やったるで禁煙カウンタ
 自分の癖は自作で直す。できるかそんなことが・・・
======================================================

 以前に途中(わずかα段階)まで進んだ、禁煙カウンタは、
長い間親しんできた、(これも古いが)FlasxMX 版だ。
できることは限られている。今更・・・とも思う。
 そして、Flex3 に出会った。(まだ、試用版だ)

 で、今回、移植してしまうことにした。その中で、
きっと、実践的に得られる知識もあるだろう・・・と。

相変わらず、前置き(中置、か?)が長い・・・
本題に入る。

 ■基本デザインの移植
 /*------------------------------------------*/
 ・まったく同じものにする気はなかったが
  それでも基本的なレイアウトを実現する。


 ◇これが、FlashMX版(以下、MX版)のレイアウトだ。
FlashMX版(以下、MX版)のレイアウト
 ・FLASHでの制作場面ですなぁ。「タイムライン」の下に
  「ステージ」があり、そこでレイアウトする

 【手順】

 ■MX と Flex3 を同時に立ち上げ(左と右に)
  ■ステージサイズを同じに
  ■各オブジェクトを作成し
   ・サイズ(幅・高さ)と位置(X/Y)に同じ数値を入れてゆく
   ・フォントを同じものに、サイズに
   ・色廻りも同じに

   [ ここで待ったー ]
   □Flex3の場合、デフォルトで選べるフォントに限りがある
Flex3の場合、デフォルトで選べるフォントに限りがある
    ・本当は増やせる方法あるのだろうが、気の短い私は
     試しに、MX版の設定のものをカット&ペーストしたらそれで
     問題なかった。

  ■だいたいできたところ
Flex3:だいたいできたところ
   まだ、フォントの調整や細かいところを終えていない
   ・この段階での「ソース表示」は
Flex3:だいたいできたところ「ソース表示」
    こんな感じだ。

  ■背景を透明にしたい
    (HTMLの方で、背景画像利用しているのだ)

   [ ここで待ったー ]
   □Flex3で、背景を透明にする方法
    いろいろ探したが、こちらに明確な回答を発見。
    ありがとうございました。
    ・背景を透明にしたいんです
     ( by フォーラム - Flex User Group )

    要は、
     ・<mx:Application> タグで、
backgroundAlpha="0.0"

      と指定し
     ・HTMLのソースの方で
      wmode を transparentにするわけだ。私のソースでは
var so = new SWFObject("FLASHファイル名", "my_ssp", "158", "280", "7");
so.addParam("wmode", "transparent");

    レイアウト画面で見るとこうなる
Flex3:背景を透明にする


 ■ソースの構造化
 /*------------------------------------------*/
 ・ソースをできるだけ外部ファイル化し、
  手馴れたエディタでも編集できるように準備

 この辺は、かつて行っていた
  ・VB や Access の開発の方法を想い出して楽しかったな。
   できるだけ外部ファイルにすることで、
   (できるだけゆくゆく楽をしようという私の思惑が
    実現し易くなるのだ)

 【手順】

 ■ソース部分の<mx:Application> タグに続き
  次のように入力
<mx:Script>
<![CDATA[
include "Script.as";
]]>
</mx:Script>

 ※今後は、MXML部分をこの Script.asのテキストファイルを編集するのだ。

 ■Script.as の内容
  ここも、できるだけここに直接書くのではなく
  次のようにした。
import mx.controls.*;
import mx.events.*;
import mx.rpc.events.*;
import mx.collections.ArrayCollection;
import mx.controls.Image;
import mx.controls.Alert;

include "InitVars.as";
include "Functions.as";
include "Dates.as";

 ※import の部分はここにまとめることにより
  全体の見通しをよくする

   [ ここで待ったー ]
   □ mx.controls.Alert を入れている訳
    JavaScript で開発を行う際、簡易デバッグとして
    よく「Alert」を利用する。ここはという箇所で、変数値の動きを
    確認するわけだ。同じ方法ができるはず、と思ったらやっぱりできた。

    この import を行っておけば、変数値をチェックしたい時
Alert.show(hensu);

    で、値を調べられる。しかし、数値の場合は、
Alert.show(String(hensu_int));

    などのように、文字列型変換しておく必要はある。

 ここで、さらに全体のソースを

  ・InitVars.as
   初期変数指定や、定数として利用する変数の設定
  ・Functions.as
   基本的な関数をすべてここに集める
  ・Dates.as
   今回は時間にからむ処理が多いので、
   それらはここにまとめる


 ■初期変数設定ソース
 /*------------------------------------------*/

 ■InitVars.as の内容
  ここも、できるだけここに直接書くのではなく
  次のようにした。
// *********************************************************
// 定数変数
// *********************************************************
public var millisecondsPerMinute:int = 1000 * 60;
public var millisecondsPerHour:int = 1000 * 60 * 60;
public var millisecondsPerDay:int = 1000 * 60 * 60 * 24;

// タイマー
private var ticker:Timer = new Timer(10);
[Bindable]
public var startUTC:int = 0;
[Bindable]
public var nowUTC:int = 0;
public var val_hon:int;
public var val_yen:int;

 ■まず、時間を計測するための数値
  定数変数(私はそう呼んでいるが)として設定。
  ※ほぼ変更ないが、定数としては? というもの
 ・次に
  ■タイマーの設定
   ※かなり短いタイミングでの発生だ。

   [ ここで待ったー ]
   □ご存知 MX版の場合は、「タイムライン」という管理があるため
    いつもチェックするレベルのものは、
    onEnterFrame を利用して次のように記述する。
this.onEnterFrame = goCountDown;

    ※goCountDown は実行する関数

    ・Flex3 はタイムラインはないので(本当はあるかもしれないが)
     まずはそれを「タイマー」利用して実現

  ■[Bindable] は、前にチュートリアルで少し学んだが
   要は監視したい値ということだが、今回は特に
   必要なかったかもしれない。とりあえず
    ・カウンタスタートの時間を記録する
      startUTC
    ・毎回チェックする時間を記録する
      nowUTC に指定しておく。
   ※ここで、変数制限し初期化。

   [ ここで待ったー ]
   □Flex3 の場合、宣言する際に
    必ず「型指定」が必要で、最初はとまどったが
    慣れれば安心感につながること実感

var startUTC = 0;

    ※MX版では、これでよかったのが
var startUTC:int = 0;

     こうしなくてはならない。

    ※ちなみに、ここで「型」もいろいろ調べたが
     float や long longint などはないのですね。
     小数点要するものには、 Number型を使うのだな。
     (この辺はかなり怪しい。いづれきちんと学ぶ必要有)

  ■val_yen と val_hon は
   最初に設定する
    ・何円のタバコを(val_yen)
    ・1日何本吸っていたか(val_hon)
     の記録変数だ。


 ■関数ソース
 /*------------------------------------------*/

 ■Functions.as の内容 その1
  まず、アプリケーションが立ち上がって最初に行う部分の
  記述だ。

  ・これは、メインソースの <mx:Application> タグに
   次のように設定すればいいことがわかった。
creationComplete="initApp()"

  ■initApp という関数を最初に
   行うことにする。

  ■アプリケーションの初期化

// *********************************************************
// 初期化
// *********************************************************
private function initApp():void {

// Cookieチェック
var log:SharedObject = SharedObject.getLocal("save_smoking");
var obj:Object = log.data;
val_hon = obj.val_hon;
val_yen = obj.val_yen;

// 継続中
if(obj.sdates > 0){ startUTC = obj.sdates;
// すぐに描画開始
goAc_start(1);

// 最初
}else{ startUTC = 0;
lady_2.visible = false;
lady_3.visible = false;
lady_1.visible = true;
onOff_sets(false);
mv_ed.visible = false;
mv_edst.visible = false;
mv_edfix.visible = false;
mv_st.visible = true;
Mes.visible = false;
}
}


   ■関数にも型指定が必要だが、返りのないものは、
    ・void を指定して、関数が値を返さないように指定
    ・void 型は特殊な型で、値は undefined のみ
     ということを理解。

   ■SharedObject は、クッキーではないが、利用者の
    ローカルに保存されたりその値を読んだりできることから
    クッキー的な利用が可能

    ・本アプリでは
     ・スタート時点の タイム値
      (UTC に変換したものを利用)
     ・設定の
      ・何円 のタバコを
      ・1日何本
     という記録を行う。

   ■最初にクッキー(?)の値を調べ
    ・何円 何本 を取得記録
    ・スタート時間の記録があれば
      >> すぐにカウンタスタート

     なければ
      >> 画面オブジェクト関係の
         表示・非表示を設定しておく

   [ ここで待ったー ]
   □今回。オブジェクトの変更について

    ・MX版では、タイムラインを利用し
     異なるフレームごとに違うオブジェクトを配置
     フレームを移動することで変化させていたのに対し

    ・オブジェクトの 表示プロパティを替えることにより
     実現
    ・画像やボタンなど、同じ位置に複数のオブジェクトを
     配置した

    ※この方法ではなく
     ひとつのオブジェクトで、
     ・表示スタイル や
     ・表示文字列
     ・トリガ関数 などを変化させることで実現も可能だろうが
     今回は制作パフォーマンスを考えこのようにした。

     結局「メインソース」は
     次のようになっている。
<mx:Image x="107.0" y="18.5" width="36" height="36" source="@Embed(source='./img/nosmoke_action01.gif')">
</mx:Image>
<mx:Label x="3.0" y="3.3" text="禁煙やりますか?" id="lbl_title" fontFamily="A-OTF 新ゴ Pro R" fontSize="12" fontWeight="normal" width="147.9" height="22.8"/>
<mx:Text x="3.3" y="29.0" text="" id="display_text_day" width="42.7" height="20.9" fontSize="12" fontFamily="Arial Black" textAlign="right"/>
<mx:Text x="46.8" y="29.2" text="" id="lbl_day" width="104.2" height="20.8" fontFamily="A-OTF 新ゴ Pro R" fontSize="12"/>
<mx:Text x="4.1" y="120" text="" id="Mes" width="144.7" height="36" fontFamily="MS ゴシック" fontSize="12"/>
<mx:Button x="26.1" y="96.8" label="最初の設定" id="mv_set" width="121.9" height="20.0" click="goAc_init(1)" fontFamily="Arial" fontSize="10"/>
<mx:Button x="26.1" y="96.8" label="これで決定" id="mv_setfix" width="121.9" height="20.0" click="goAc_init(9)" fontFamily="Arial" fontSize="10"/>
<mx:Button x="26.1" y="73.5" label="始めるぞぉ!" id="mv_st" width="121.9" height="20.0" click="goAc_start(1)" fontFamily="Arial" fontSize="10"/>
<mx:Button x="26.1" y="73.5" label="ギブアップ?" id="mv_ed" width="121.9" height="20.0" click="goAc_start(5)" fontFamily="Arial" fontSize="10"/>
<mx:Button x="26.1" y="73.5" label="No!" id="mv_edst" width="42.9" height="20.0" click="goAc_start(7)" fontFamily="Arial" fontSize="10"/>
<mx:Button x="70.1" y="73.5" label="ギブアップ!" id="mv_edfix" width="77.9" height="20.0" click="goAc_start(9)" fontFamily="Arial" fontSize="10"/>
<mx:Text x="3.1" y="54.5" text="" id="display_text" width="144.6" height="22.6" fontFamily="Arial Black" fontSize="12"/>
<mx:Image x="22.2" y="159.9" id="lady_3" width="105.5" height="104.1" source="@Embed(source='./img/tomatoma3.jpg')">
</mx:Image>
<mx:Image x="22.2" y="159.9" id="lady_2" width="105.5" height="104.1" source="@Embed(source='./img/tomatoma2.jpg')">
</mx:Image>
<mx:Image x="24.2" y="162.9" id="lady_1" width="105.5" height="104.1" source="@Embed(source='./img/tomatoma1.jpg')" alpha="1.0">
</mx:Image>
<mx:Label x="7" y="120" text="今まで" id="lbl_imamade" fontFamily="A-OTF 新ゴ Pro M" fontSize="8"/>
<mx:TextInput x="39" y="118" width="28" height="18" fontFamily="Arial" fontSize="9" textAlign="right" id="set_yen" maxChars="3" editable="true"/>
<mx:Label x="70" y="120" text="円 のタバコを、" id="lbl_tabakowo" fontFamily="A-OTF 新ゴ Pro M" fontSize="8" width="64"/>
<mx:Label x="72" y="138" text="本 づつ吸ってた。" id="lbl_sutteta" fontFamily="A-OTF 新ゴ Pro M" fontSize="8" width="72"/>
<mx:Label x="15" y="139" text="1日" id="lbl_ichinichi" fontFamily="A-OTF 新ゴ Pro M" fontSize="8"/>
<mx:TextInput x="39" y="137" width="28" height="19" fontFamily="Arial" fontSize="9" textAlign="right" id="set_hon" maxChars="3"/>


 ・同じ位置に異なるオブジェクトが並び
  それぞれに違う「表示文字列」「トリガ関数」が設定されている
  のがおわかりだろう。

   [ ここで待ったー ]
   □なお、画像の読込において、
    下記のような方法をとれば
    ・実行時にではなく、コンパイル時に読み込まれることも理解
source="@Embed(source='./img/tomatoma1.jpg')"


・・・よし、1回目は、ここまでにしておこう。
   この後、続けて 2回目の投稿を行います。

 ご興味ある方は、今しばらくお待ちくださいませ。
commentsコメント
comment_post












管理者にだけ表示を許可する
commentトラックバック
トラックバックURL:
http://metaboy.blog23.fc2.com/tb.php/543-98696152
ようこそ
Add to Google 創るmetaboy:RSSフィード
My Yahoo!に追加
最新記事のRSS | 問い合わせ

仕事検索、アルバイト検索、依頼仕事の検索ポータル - 仕事検索.COM - www.jobkensaku.com ツクルン

創るmetaboy - WEB創る、サイト創る、何創る - 創ったmetaboy

 

リンク集

 

最近の記事

 

ブロとも申請フォーム
Sponserd by

さくらのレンタルサーバ さくらのレンタルサーバ
大容量・高機能レンタルサーバー heteml 大容量・高機能レンタルサーバー heteml
XREA (ValueDomain)
お名前.com お名前.com
名づけてねっと名づけてねっと
ムームードメインムームードメイン

 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。