top


総投稿数 本 
no_

スポンサーサイト

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

禁煙カウンタ:◇アニメーション加え、画面の遷移を整理し直し・・・ 【ブログパーツ】

 2009-01-14
 今回から、カテゴリ「Flex事始め」ではなく
 「そうだ!ブログパーツを創ろう」に移動。

 今日の課題は、
  ・画面遷移がおかしいので、
   ・局面ごとの表示状態の出入りと
   ・画面遷移をオブジェクト単位に見直すこと
  ・アニメーションを用意すること
  ・AmazonAPI への取得廻りの調整
  ・HTMLへの記述方法を再考察

   ・禁煙カウンタの(前回はこちら

ゆっくりと進んでいる・・・
 ◎「やったるで!禁煙カウンタ」それから、どうした

 追記に ▼

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


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


more**************************************************
「やったるで!禁煙カウンタ」それから、どうした
**************************************************
   ・(前回はこちら

 ■今回行うこと
 /*------------------------------------------*/
  □画面遷移の整理
   ・まぁ、これは
    局面ごとに図解でも書いて、
    各オブジェクトの状況を
    ・属性 としてきれいに整理するに尽きる

  □禁煙マークにアニメーションを加える
   ・まずは、FLexのアニメーションの実装手法を学び
    簡単なアニメーションを加える
    ※「まりつきアニメ」かな、やっぱし。

  □現在の金額
   (たばこをやめたおかげの 仮想取得金額)に応じた
   AmazonAPIからの商品情報取得
   ・ここをもう少し試行錯誤してみるか・・・

  □HTMLへの記述方法の変更
   ・先回
    「オンラインカウンタ」を作成したときに利用した
    JavaScriptファイルの読込スタイルに変更しておこう


 それでは、実現の詳細・・・


 ■開発の実際
 /*------------------------------------------*/
  ・アニメーションは奥が深い。
   とても、数時間のちょこちょこで、学べるわけがない。
   今日は、基本のスタイルを利用し
   まずは、少しバージョンを進めることにした。


 【画面遷移の整理】
 ■画面遷移を整理し、それに応じた動きを確認
 
  加えて

 ■禁煙トライ中で、
  ■「設定の変更」がされたとき、設定内容が変われば
   それに応じて、Amazonに再度取得にゆくリスタート機能
  ■各オブジェクトの前後を調整し
   ボタンや、リンクがある画像は、
    ・マススオーバーで「指差し」表示になるように

     ここ、少しはまった。

     単純に、オブジェクトのプロパティで
     ・[useHandCursor] を true にすればいい と
      思ってたのに!

     違うではないか。この他に
      ・[buttonMode] を true にし
      ・[mouseChildren] を false にする必要があるのだ。

(参考頁)
Creating a hand cursor over a component


 【禁煙マークにアニメーション】
 ※FLASHのタイムラインに慣れている私に、どう
  アニメーションをやれというのか(誰もいってないけど)

  答えは
  前に紹介した
  ・Tour de Flex:Flex試用の期限も近づき、背水の陣。有名なサンプルアプリを落としてみる ・・・ 【Flex】
   こちらにある

  □禁煙マークをまりをついているように動かしたい
   (上下しなくてもいいのだが・・・)

   上記に紹介している「Tour de Flex」において
   ・Effects > AnimateProperty で使える動きを発見
Effects > AnimateProperty で使える動きを発見
 手順として
 1:effect のパッケージを組み込み
import mx.effects.*;


 2:effect させる画像に smoothImage という関数をセット
   (動きよくするのかな)
private function smoothImage(ev:Event):void{
//set image smoothing so image looks better when transformed.
var bmp:Bitmap = ev.target.content as Bitmap;
bmp.smoothing = true;
}

 ※これは 例 そのまま

 3:mx:Sequence で動きを設定
<mx:Sequence id="imgAcIconMove" targets="{[imgAcIcon]}">
<mx:children>
<mx:AnimateProperty property="scaleY" fromValue="1" toValue="0.5" duration="500" />
<mx:AnimateProperty property="scaleY" fromValue="0.5" toValue="1" duration="1000" />
</mx:children>
</mx:Sequence>

 ※これは、例とちと違う

  ・例では「画像をクリック」することをトリガとして
   画像の mouseDownEffect に "{animateScaleXUpDown}" が
   設定されていたが、
   他の関数からアクション起したかったので、

   その方法、探した探した。
   なんせはじめてのこと。なかなかわからなかった。

   で、これでいいのかどうかわからなかったが
    ・mx:Sequence id="imgAcIconMove" のように
     idで名前をつけ
imgAcIconMove.play();

     で呼ぶことにした。

    ・その際、この mx:Sequence の対象となるのが
     画像:禁煙マークなのでそれにも名前をつけ
     (imgAcIcon)
     それを、targets="{[imgAcIcon]} で設定している。
     (ここは、配列で指定するらしい)

 4:新しいタイマーイベントを用意し
private var icon_mover:Timer = new Timer(1.5 * 1000);


 5:初期設定時に使えるようにして
icon_mover.addEventListener(TimerEvent.TIMER, goIconMove);


 6:呼ばれる関数で
private function goIconMove( event:Event ):void {
imgAcIconMove.end();
imgAcIconMove.play();
}

  とした。

 7.後は適時
icon_mover.start();

icon_mover.stop();

  で操作だ。

 はて、このやり方で正しいかどうかは、現在では確信持てない。

 なにはともあれ、これで
 アニメーションは動作している。


 【Amazonからの情報取得】
 ※前に報告したことがあるのだが、
  どうも
   [MaximumPrice][MinimumPrice]
  が、うまく効いてくれないのだが、取得のタイミングを
  少々変えた。
   ・500円刻みで、(仮想)取得金額が累積したとき
   ・設定を変更したとき


 【HTMLへの記述方法の変更】
 ※先回
  ・オンラインカウンタ の作成報告で記したように
   表示されるHTMLの中で、
<link href="http://www.metaboy.net/apl/nosmoke/nosmoke.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="http://www.metaboy.net/js/swfobject.js"></script><script type="text/javascript" src="http://www.metaboy.net/apl/nosmoke/nosmoke.js">

   として、読み込まれる javaAcript側ですべて処理
   次のような、javaScript を読み込んでいる

<!--
var outHTML = "<div id=\"preview\" style=\"background-color: #ffffff\">";
outHTML += "<div class=\"roundedcornr_box_745084\">";
outHTML += "<div class=\"roundedcornr_top_745084\"><div></div></div>";
outHTML += "<div class=\"roundedcornr_content_745084\">";
outHTML += "<div id=\"nosmoke\"><a href=\"http://www.metaboy.net/\" target=\"_blank\">創ったmetaboy<br />やったるで禁煙カウンタ(Flex3版)<br />http://www.metaboy.net/</a></div>";
outHTML += "</div>";
outHTML += "<div class=\"roundedcornr_bottom_745084\"><div></div></div>";
outHTML += "</div>";
outHTML += "</div>";
document.write(outHTML);
var so = new SWFObject("http://www.metaboy.net/apl/nosmoke/stopsmoking_flex3.swf", "onlinecnt", "158", "346", "7", "#ffffff");
so.addParam("FlashVars", "");
so.addParam("quality", "high");
so.addParam("play", "true");
so.addParam("loop", "true");
so.addParam("menu", "false");
so.addParam("wmode", "transparent");
so.addParam("scale", "NoBorder");
so.addParam("salign", "TL");
so.write("nosmoke");
//-->



 ●ただ今、私は禁煙中・・・なのだ●
  現在の私のカウンタはこんな感じ
現在の私のカウンタはこんな感じ1現在の私のカウンタはこんな感じ2

 まだまだ、α版から抜けられないのだ・・・

 >>> やったるで!禁煙 カウンタ
commentsコメント
comment_post












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

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

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

 

リンク集

 

最近の記事

 

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

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

 

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