plamoでタグ「 Progression 」が付けられているもの

Firefox3.6におけるFlashでの不具合

先日Firefoxが3.6にアップグレードされたのですが、過去にフルフラッシュで制作したサイトなどをチェックしてみると、予期せぬブラウザのスクロールバーが出現したり、以前機能していたボタンが機能しなくなったりしていました。 焦

注意点や解決策などを以下にまとめておきます。


■フラッシュエリアをクリック(フォーカス)するとスクロールバーが出現する

【解決策】
フラッシュエリアを囲んでいるHTMLのdiv要素にoutline:none;を指定する

#flasharea:focus {
    outline:none;
}

しかし、僕はこれでなぜかうまくいきませんでした。
そこで swffit.js を使用したら解決しました。
こちらの方が確実かも。

□swffit:http://swffit.millermedeiros.com/
□参考:http://www.mousouchiku.net/blog/2010/01/22-150505.php


■Firefox3.6 ではProgressionコマンドエラーで、ムービーがストップする

例えばDoTweenerコマンドを使用したりして、コマンドエラーが出力パネルで
出ていた場合でも Firefox3.6 以外のブラウザでは無視して動いていたのですが、
3.6ではムービーが止まったりするみたいです。
3.6では、よりちゃんとしたスクリプトを組まないとFlashが止まっちゃうようです。

Flash以外でも、Javascript周りの機能がちょっと微妙だったり、ブラウザ上でテキストのコピペがうまくいかなかったり、となんだか色々とエラーが起きてるような気がします。

おそらくですが、色んな細かいエラーなどにたいして、ブラウザがシビアに反応するようになったのではないかという印象です。ちゃんときれいなスクリプティングをすれば問題ないのではと思うのですが、敷居があがった気がします。

FlashやJavascript使わずに、これからはHTML5を使うんだぞ!というMozillaの密かな警告のイントロダクションだったりして。。なーんて考え過ぎか。

10.02.18.PM12:49

Progression4でページ遷移

まだパブリックベータ版のProgression4ですが、仕事で使ってみることにしました。

ver3ではページ遷移の時に例えば下記のような書き方をしていました。

10.01.22.PM04:34

JET'S PROJECT

jets_img.gif

数々のCMやMusic Videoの美術、空間デザインを手がけているJET'S PROJECTのWebサイトを制作しました。

デザインは、AIMデザインの根岸氏と、JET'S PROJECTの石田さんです。

JET'Sは、数人のスタッフで数え切れないくらいの案件をこなしている会社でして、特にCMなどの映像美術デザインの作品数は膨大です。(全部で230作品ほど掲載しているのですが、これでも100ほど削りました)

今回は、JET'Sサイドと幾度と話し合いながら企画・構成を考えていき、サイトで打ち出したいこと、目指すところ、JET'Sカラーなどを明確にして制作を進めていったので、完成した時の喜びもひとしおでした。

技術的には今回もProgressionを使用し、作品がどんどん追加されることと、なるべく全ページ更新可能にしたいということでしたので、「アクセスマップ」と「お問い合わせ」以外は更新可能にしました。

Informationでは、日付、内容、リンク先を更新するのですが、Progressionのおかげというか、SWF Addressのおかげで、ページ内リンクを外部からも更新可能なので、Flash内へのリンクが貼ることができるのです。いやー、本当に便利です。

Progressionの素晴らしさをさらに付け加えるならば、実は「映像美術デザイン」のトップページは、最初は1ページに230作品ものサムネイルを配置していたのですが、実際動かしてみたところ、読み込みの負担が相当なものでした。
このページはサイトの中でも一番見せたい大事なコンテンツでしたので、急遽サムネイルのページ分けを実装。難しい部分もありましたが、Progressionのおかげで比較的スムーズにページ分けを実装することができました。

とはいえ、技術的にはまだまだ甘ちゃんだなと思うところがたくさん。
もっともっと精進せねば。


そんなこんなでございますが、JET'Sのみなさん長い間ありがとうございました!
そして悪友のアツオくんありがとう 笑

□JET'S PROJECT
http://www.jets-juno.jp/

□AIMデザイン
http://www.aimdesign.jp/

□Progression
http://progression.jp/ja/

09.11.16.AM01:14

JET'S PROJECT

JET'S PROJECT

http://www.jets-juno.jp/

Planning
Direction
Flash (CMS)

Pl, D, Fl : Mikio Yamade [plamo]
De : Atsuo Negishi [Aim Design], Yuichi Ishida [Jet's Project]

09.11.16.AM12:44

Progression ProccessEvent

シーン移動する時に発行してくれる「ProccessEvent」というProgressionのカスタムイベントがあります。
ナビゲーションのモーションを変化させる時などに非常に役に立ちます。
ProccessEventには以下のようなものがあります。

//シーン移動のアクション全てで発行
progression.addEventListener(ProcessEvent.PROCESS_EVENT, onEvent);

//次のシーンが始まる瞬間に発行(現在のシーンから離脱した直後)
progression.addEventListener(ProcessEvent.PROCESS_SCENE, onEvent);

//シーン移動開始時に発行(現在のシーンの離脱開始時)
progression.addEventListener(ProcessEvent.PROCESS_START, onEvent);

//次のシーンのloadイベント実行時
progression.addEventListener(ProcessEvent.PROCESS_INTERRUPT, onEvent);

//次のシーンでエラーが出た時に発行
progression.addEventListener(ProcessEvent.PROCESS_ERROR, onEvent);

//シーン移動が全て完了した時に発行(次のシーンのaddCommand終了時)
progression.addEventListener(ProcessEvent.PROCESS_COMPLETE, onEvent);

motuLogさんの記事を参考にしました。
http://plug.heteml.jp/motulog/2009/03/progression3152-processevent.html

09.10.16.PM11:36

サウンドラグーン

soundlagoon1.jpg

先日発売されたサウンドラグーン(Sound Lagoon)という、クレイジーケンバンドなども参加するコンピレーションアルバムの特設サイトといいますか、企画ページのフラッシュとサウンドを担当しました。
アートディレクション軍司匡寛、写真は大和田良氏です。

このページは olio photo というWeb上でフォトアルバムのデザインなどをカスタマイズできるサービスによるコラボ企画で、大和田さんの写真を使ったフォトアルバム閲覧などができます。

フラッシュ部分は時間帯によって、1時間おきにメインの写真が入れ替わります。
右上の時計は表示中の写真を指し示しているのですが、この時計自体がナビゲーションになっていて全ての写真が閲覧できます。

フルスクリーン表示も可能なので、ぜひ写真を堪能してください。

olio photo × sound lagoon1:
http://www.olio-photo3.jp/cont/gallery/soundlagoon/

日本デザインセンター:
http://www.ndc.co.jp/

大和田良オフィシャルサイト:
http://www.ryoohwada.com/

09.08.07.PM06:08

Progression Listenコマンド

Progressionのシリアルリスト内で、ロードコンプリート後に次のアクションを起こすスマートなやり方がないかと探していたのですが、Listenコマンドがかなり便利です。

例えばキャストスプライトクラス内で、スプライト自身がディスプレイリスト追加時に、 任意の外部画像を読み込んだ後で、ロードオブジェクトをフェードインしたい場合はこう記述します。

09.07.15.AM12:24

JAGDA CALENDAR SALONE 2010

jagda_calendar_salon_2010.jpg

軍司匡寛アートディレクションによる JAGDA CALENDAR SALONE 2010 のFlashをplamoで手がけました。

今回は初めてProgressionというフレームワークを使っています。
Progressionとは、特にフルフラッシュサイトを作る際に便利なフレームワークで、このライブラリを使用することにより、難しいページ遷移などのタスクマネジメントを非常に管理された形で制作を進めることができ、設計の混乱を大幅に軽減できます。

Flashデベロッパーの間では以前から注目されているライブラリで、Amanaサイトなど、すでに制作事例も多いのですが、今年の秋にProgression本が出版されるようで、これを機にさらに使用者が増えるのではないかと思います。

「ページ遷移の構築」という面で非常に役に立ったProgressionですが、Flashが苦手とするログ管理もちゃんとできていることに驚きました。
これはSWFAdressというライブラリがProgression内に統合されているからですが、これによって何が出来るかというと、今回のカレンダーサイトで言えば、まず作品やページごとにページタイトルとURLが変化し、例えば自分の作品のURLを知り合いに送ることができます。
さらにはGoogle Analyticsなどのログ解析にもちゃんと連動し、タイトルやURLごとのアクセスログなどを見ることができます。
たいした設定もしていないのに、こんな事ができてしまったことには本当に驚きました。

今回のカレンダーサイトはProgression公式サイトの制作事例にも紹介されています。

JAGDA CALENDAR SALONE 2010 :
http://www.jagda.org/contents/calendarsalone2010/

Progression :
http://progression.jp/ja/

Progression制作事例 :
http://progression.jp/ja/showcase/#jagda

他にも下記サイトでJAGDA CALENDARサイトが紹介されてました。
誰かが登録してくれたようです。感謝感謝でございます。

Straight Line :
http://bm.straightline.jp/

Web Design Clip :
http://webdesignclip.com/

SS Style :
http://bm.s5-style.com/index.php/page/8

09.06.08.PM03:56

JAGDA CALENDAR SALON 2010

JAGDA CALENDAR SALONE 2010

http://www.jagda.org/contents/calendarsalone2010/

Flash + Progression + XML

AD : Tadahiro Gunji [Nippon Design Center]
Fla : Mikio Yamade [plamo]

09.04.23.PM04:42

plamoを購読する