[Progression]Progression コンポーネントスタイルでボタンをアニメーション させる方法

先日のエントリーで作品自体は公開したのですが作り方については書いてなかったのでメモ。

今回はボタンのアニメーションの作り方についてのエントリー。
→サンプル

1. 新規シンボルでボタンを作成


2. 「color」レイヤーにボタン画像を描画


3. 「コンポーネント」レイヤーに「RollOverButton」コンポーネントを設置


4. 「label」レイヤーを作成。1フレーム、10フレーム、20フレーム目にキーフレームを挿入してそれぞれに必要なラベル名を記入


5. 下の画像のような形でモーショントゥイーンを作成する。


6. 1フレーム目はアルファ60％

これで完成となります。



大事なのは「label」レイヤーに書いた各ラベル名の意味
【up】・・・ムービークリップからロールアウトした際に表示するフレームラベル、またはフレーム番号を設定します。
【over】・・・ムービークリップをロールオーバーした際に表示するフレームラベル、またはフレーム番号を設定します。
【current】・・・ボタンに設定された移動先が Progression のカレントシーンであった場合に表示するフレームラベル、またはフレーム番号を設定します。

他には、
【down】・・・ムービークリップをクリックした際に表示するフレームラベル、またはフレーム番号を設定します。

上記は公式サイトより引用させていただきました。

※上記内容には一部間違った解釈で書いている内容があります（ラベルの所）。
近日中に修正いたします。ご迷惑をおかけしまして申し訳ありません。
m(_ _)m　（09.12.09）

※修正しました。ご指摘いただいた@mathatelle 氏に感謝します！ （09.12.13）

そろそろクラススタイルの勉強したいと思います。

立ちふさがるActionScript...orz
俺は負けんぞー！

shirokurok制作秘話 ブログパーツ編

さて、先日は時計のFlashの作り方を書きましたが、今度はそれをブログパーツとして公開する方法を。

1.ブログパーツ表示用JavaScriptを用意する。
内容は以下となります。（ファイル名はclock.jsとしました。）

var gsTickerSwf_AN = "swfファイルまでの絶対パス";

var gsTickerId_AN = "Ticker_AN";

MakeTicker_AN();

function MakeTicker_AN(){
var sTickerUrl = gsTickerSwf_AN;

var sHtml = "";
sHtml += '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="横のサイズ" height="縦のサイズ" id="' + gsTickerId_AN + '" align="middle">';
sHtml += '<param name="allowScriptAccess" value="always" />';
sHtml += '<param name="movie" value="' + sTickerUrl + '" />';
sHtml += '<param name="quality" value="high" />';
sHtml += '<param name="bgcolor" value="#ffffff" />';
sHtml += '<param name="wmode" value="transparent" />';
sHtml += '<embed wmode="transparent" src="' + sTickerUrl + '" quality="high" bgcolor="#ffffff" width="横のサイズ" height="縦のサイズ" name="' + gsTickerId_AN + '" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />';
sHtml += '</object>';

document.write(sHtml);
}

それをサーバーの任意の場所にアップします。

2.貼り付け用のJavaScriptを用意する。
先ほどアップしたJavaScriptファイルへの絶対パスを記述したタグを用意します。
内容はコチラ。

<script language=”JavaScript” type=”text/javascript” src=”http://shirokuro331.net/flash/blogparts/clock.js” ></script>

やる前は結構敷居の高いものかと思ってましたけど、やってることはFlashを実行させるJavaScriptをページ内のJavaScriptタグで実行させて表示させてるって感じですね。

これきっかけ発展したものを作っていきたいです。

参考にさせていただいたのはコチラのサイト。感謝！　＞＜
→フローティングブログパーツの作り方、こっそり教えます（前編）

wordpressのjQuery lightboxプラグインがいい感じ♪

というわけで画像をクリックしたときにlightbox風に拡大表示されるプラグインをいれちゃいました。

下の画像をクリックすると拡大表示されます。



使い方はwowrdpressの管理画面からインストールして<a>タグに[rel="lightbox"]属性を追加で記述するだけ。
[title="任意テキスト"]入れるとそのテキストも表示されます。

公式のサイトはコチラなのかな？
→Wordpress jQuery Lightbox Plugin

ちなみに画像は先日会社の人と行った韓国旅行の1シーン。
はい、無許可ですがなにか？w

shirokurok制作秘話 Flash時計製作編

さて、このブログの右のほうにある時計ブログパーツ「shirokurok」。
その制作秘話を公開しましょう。

とは言っても秘話なんてなく、ただの備忘録ですw

1. テキストツールで適当な大きさのテキストエリアを作成
   （テキストの種類はダイナミックテキスト）


2. プロパティで変数のところに任意の名前を入力（nowTimeとする）


3. 「action」レイヤーを作成。以下を記述。
   
   nowDate = new Date();　// デートオブジェクトの作成（必ず必要）
   nowHour = nowDate.getHours();　// 現在の時
   nowMinutes = nowDate.getMinutes();　// 現在の分
   nowSeconds = nowDate.getSeconds();　// 現在の秒
   
   nowTime = nowHour + ":" + nowMinutes + ":" +nowSeconds;　// 先に設定しておいた変数に値を入力


4. 上記の手順まででは今現在の時間が一度表示されて終りなのでタイムラインで1フレーム追加する。
   （要は1フレーム目の処理を繰り返し実行させている）


5. 5.完成。意外と簡単ｗ

簡単な流れはこんな感じ。

次はブログパーツとしての公開方法をまとめようっと。

ブログパーツ作りました。

このブログの右→にも表示されていますが、時計のブログパーツ作りました。
自分のFlash勉強用です。その名も「shirokurok」!!

今はβ版ということで単純に時間を表示するだけですが、ここから発展させていきたいと思ったのでブログポストします。
なにか人に利用してもらえるような面白アイデアのブログパーツを作っていきたいです。

ちなみに、もし「shirokurok」を自分のブログに貼りつけていただける方がいらっしゃいましたら以下のコードをコピペしてください。

<script language="JavaScript" type="text/javascript" src="http://shirokuro331.net/flash/blogparts/clock.js" ></script>

よろしくおねがいしますーす。

画像にメッシュ効果を加えるチュートリアル

いろんなサイトで紹介されてますね。
使えそうだなーと思うの自分用のメモ。

■元ネタのサイトはコチラ
Create An Airforce Inspired Mesh Pattern Overlay

上記サイトの内容をわかりやすく日本語でまとめていただいてるサイトはコチラ
→Design Develop

勉強になります。

Flashでアニメーションなポップアップウィンドウ

画面内のボタン（今回はしたの丸3つ）をクリックすると、うにょんとアニメーションでポップアップウィンドウが出てくるＦｌａｓｈの作り方メモです。action script2.0で作ってます。

→デモはこちら

とりあえずはひとつの動きを作るために以下をメモ。

1.ボタン用ムービークリップ（mc_red）の作成

2.ポップアップウィンドウ用のムービークリップ（mc_window）の作成
レイヤーは下図のとおり。（クリックで拡大表示）



 a.「window」レイヤーに矩形の描画
  1フレーム　w20*h20 x0 y0
  15フレーム　w220*h220 x-100 y-90
  20フレーム　w200*h200 x-90 y-80
  各フレーム間でシェイプトゥイーンを作成する。

 b.「close」レイヤーにcloseと書く

 c.ボタンの作成。新規シンボルでボタンを作る（名前は任意）

 d.「btn」レイヤーに4でつくったボタンを配置する

 e.ボタンに「btn_close」というインスタンス名をつける（プロパティ）

 f.「label」レイヤーの30フレーム目にキーフレームを挿入。「close」というラベル名をつける

 g.「action」レイヤーの25フレーム名に下記のaction scriptを記述

  stop();
   btn_close.onPress = function(){
   gotoAndPlay("close")
  };

 h.30フレームからウィンドウが閉じるようなアニメーションを作る（2を参考に）

 i.最終フレームの「action」レイヤーにキーフレームを挿入。action scriptを記述
  stop();

3.「シーン1」に戻ってボタンのシンボル作成（btn_red）

4.「mc」レイヤーを作ってmc_redを任意の位置に配置

5.「btn」レイヤーを作ってmc_redの上にbtn_redを配置。インスタンス名を「btn_red」とする

6.「window」レイヤーを作って11フレーム目にmc_windowを配置

7.「label」レイヤーを作って10フレーム目に「red」というラベル名をつける

8.「action」レイヤーを作って1フレームに以下のaction scriptを記述
stop();
btn_red.onPress = function(){
gotoAndPlay("red")
};

9.11フレーム名にキーフレームを挿入して以下のaction scriptを記述
stop();
btn_red.onPress = function(){
gotoAndPlay("red")
};

ＴＬは下図のような形


今まで得た知識の応用でなんとかできた感がある。
そういうのって成長したっぽくてうれしいw

記事内、なにかおかしなところがありましたらご指摘いただけたら幸いです。