たまにはFlashの記事でも。

先日、Yahooにのせるバナーの制作をしていたんですが、これのレギュレーションが思っていた以上に厳しくて参った。as3どころか、as2でもあれこれやってると死亡する率高いのね。

Yahooでは、死亡しないバナーのために事前にツールを公開しており、とりあえずはそこでチェックしていくことから始まります。

「Abbey」

これが噂のチェックツール。作ったバナーをここにあげて、チェッキングするわけです。

注意しなければならない点は、

・FlashPlayer ver.6で書き出す。
・当然、テキストやMCにフィルタが使えない。
・as3は使えない。
・それどころか、as2でも一部のscriptが使えない。
・Tweenerとかライブラリは使えない。
・1フレーム30kb以内などの制約があるので、1フレ目は軽めにする。
・要は、1フレだけあって、あとはscriptで動かしてるようなバナーだと死亡するかも。

とか、か。

つーか、いい加減、ver8あたりで作りたいんですけど、後ろを見すぎて未来が見えてないんじゃないの！IE6にいまだに対応しなくちゃいけない点も嫌ですね。早くそういうものから解放されたグローバルなところに行きたいです。

先日、ブログパーツを作っていました。
何となく、ブログパーツってぼくには到底作れないシロモノ、と思ってたんですが、
中身が単なるswfであることに気づいてからは、
外に発注するのもアレなレベルの話なんで、いいや、自分で作っちゃえ、となりました。

以下、ブログパーツ作成覚え書き。

■サイズは基本的には、横160pxが主流っぽい。
■縦は少し長めに、240pxぐらいでやると、ブログパーツっぽく見えます。
■なので、要は、160×240のswfを作ればいいわけです。

■デザインについては、枠をきちんと作ったり、背景色をきちんと決めると、それっぽくなる。
■いまうちで使っている東京メットガールみたいな、他との違いを明確になってる感じ。
■常に動きがあると、やっぱり「おっ」って思うなぁ。
■例えばずっと○がぷかぷか浮かんでるとか、伊勢丹ワンダークリスマスのテレビのノイズとかさ。

■配布するときは、外部javascriptにしてあげると、貼る側がらくちん。コード一行ですむしね。
■もちろん、objectタグとかで配布してもいいよ。flash貼れれば問題なし。
■あと、背景色は指定してあげたほうがいい。transparentなら、それをきっちり指定してあげよう。
■crossdomain.xmlは、サーバー通信やるなら必須。

こんな感じか。
思ったより面白かったよ、ブログパーツ作るの。
きちんとロンチしたら、うちにも貼ります。

Flashの記事です。
なので、分からない人はスルー推奨。

1.Tweener をAS2.0ベースで使ってた。
FilterShortcutやColorShortcutも使ってた。てかColorの_brightnessを多用。

2.よくある、写真が流れてテキストが出てきて最後ロゴが出るっていうスプラッシュ。
いかにもなムービーです。なお、フルスクリーンっていうか、全画面。

3.で、スプラッシュなんで、SKIPボタンを実装してた。
SKIPボタンのノリとしては、単にムービーの終わりのほうにラベル”last”などとつけて、
ボタンを押したらgotoAndPlay(“last”);でそこへ飛ばすというスクリプト。なんてこたあない。
飛んだ先の演出としては、ロゴが出るまでの最後の締めとして、いろいろしてた。
copyrightが下から出てきたりとか、メニューが浮かび上がったりとか、そんなん。
で、最後にスライドショー。写真が何枚か入れ替わるというもの。

4.どっかのタイミングでSKIPボタンを押すと、変になるバグ発生。
ここ大事。状況を以下。
Tweenerの機能だけでなく、スクリプトが一通り死んだっぽくなる。
全画面なので、オブジェクトにthis._x=Stage.width/2とかやって中心に置いてたけど、
それすらも効いていないようになった。とうぜんTweenerも死亡。
ムービークリップアクションも、フレームアクションも両方死亡。
てか、そもそも飛びやしない。

5.状況を精査すると、どうやらTweenerが動いている時のみっぽい。
さらに言うと、Tweenerのスペシャルプロパティ使っている時のみ。
単純に_alpha:0などの基本機能では、起こらない。
なので、以下みたいなスクリプトだと死亡。
Tweener.addTween(target_mc,{_brightness:-2.55,_Blur_blurX:21,time:1});
上記スクリプトが動いている1秒間のあいだにSKIPボタンを押すと死亡する。
むー？

6.SKIPボタンに、removeAllTweensをしてみた。
飛ぶようになった。
gotoAndPlayがきくようになった。でもその先で死亡してる。なんやねん。
あ、でもstop();だけは効いてんのか。そこで停まってんもんね。
演出が行われないどころか、スライドショーもしねえ。真っ暗。

7.試行錯誤してみた。
ラベルlastの動きを、ぜんぶを一つのムービークリップ内に詰めてみた→→ダメ×
ラベルlastの動きを、別のシーンにしてそこへ飛ばしてみた→→ダメ×

8.スペシャルプロパティをきってみた。
そこでだけおかしくなるとするならば、原因はそこだろう。
ってことで、_brightnessとかを単なる_alpha:0とかに変えてみた→→成功○！

9.仕方ないので、泣く泣くそれで納品した。
時間詰まってたし、しょうがないのでそのまんま行った……。
不幸中の幸いだったのは、スペシャルプロパティの項目はあくまでもサブ的な扱いで、
なくても演出的にはさほどの変化はなかった、というところか。
だけど、ディティールのレベルで妥協せざるをえなくなったので、すごい居心地が悪い。

10.今後は
これがAS2.0だから起きたのかどうか、っていうところ。
問題としては、スペシャルプロパティが稼働中は、gotoAndPlayとかで飛ばすな、ってことだけど
それだと表現力が落ちるから困るような、そうでないような。
スクリプトで管理すべきなのは、このての全画面スプラッシュであれば、
座標ぐらいなもんだとは思うので、まあ、スペシャルプロパティを他でいじればいいっちゃいい。
タイムラインでやったっていいわけだし。
再現性が高いのか分からないけど、検索してもヒットしなかったから、
そもそも僕のムービーの作り方がアレなんだろうな、とは思った。
タイムラインでいいじゃん！って言われればその通りなんだけどねぇ。

というわけで、スペシャルプロパティが動いてるときは、gotoAndPlay、Stopなどは注意。
あんまりハマらなそうな罠ではあるけども。

一日引きこもってAction Scriptをいじる日曜日。
READ or READのメインな部分に表示するバナーをFlashで見せたいと思ってて、
それは、なんていうの、ボタンを押すとくるくる回るような仕組みを考えてるんだけど、
まあ、僕Flasherとしてはまだまだ未熟すぎるんで、よく分からないわけです。

アマゾンの広告みたいな感じかなぁ。
矢印ボタン押すと、くるって回って、次のバナーが表示されるっていうやつ。
これがなんかよく分かんないのだ。

イメージ的には、現在表示されてるバナーは何なのか、っていうのを変数で管理して、
んで、その変数ごとにボタン押したときの挙動っていうか、どのムービークリップが動くか、っていうのを
管理すればいいのかな、って思ってて、やってみたら、一日リアルに吹き飛ぶワケわからなさ。
あー。自分の未熟っぷりに笑う。笑えてくる。

で、まあ、現在深夜3時とかなんですけど。
なんとか、形になったというか、一応くるくる回るようにはなったので、はぁ……。
つかれた。

でも、いやぁ、リニュ今月中にがんばる、がこのFlashある程度出来たことで、見えてきたなぁ。がんばるぞー。
んじゃ明日から仕事です。がんばって起きなければ。おやすみなさい。

先日やろうとしたこと。

flashを背景にしいて、上で何やかんややろうと思ってた。

方法論としては、まずflashを作る。
んで、下記を追加する。
<param name=”wmode” value=”transparent” />
<embed wmode=”transparent”>
これでflashの上に要素を置いても、flashがちゃんと下にくるようになった。

というわけで、今度は上におきたいdiv要素を作り、配置する。
置き方は、marginをマイナスにしようが、position:absoluteしようがどっちでもいい。
僕はmarginマイナスにしてみた。positionの挙動が、あまり好きじゃないんです。
absoluteとrelativeを使いこなさなくちゃいけないのが面倒で…。

さて、これで基本的にはオッケーです。
divんなかにすきなの詰めて遊べばいいと思います。

ところがどっこい、僕はそのdiv要素に、背景画像をしこうと思ってた。
これがうまくいかないんですよねー。
cssでbackgroud:url(img.jpg);とかやっても出てこない。
唯一、IE6だけ出てくる。Firefox、Webkit、IE7とかのモダンブラウザは全死亡。さすがIE6は格が違った。

どうしようかしばらく試行錯誤してみたんですが、どうも、これは仕様のよう。
backgroundプロパティで示されるものは、どうやら一番奥にいってしまうみたい。

仕方ないから、僕はflashの中でその背景を表示させることで回避しました。
flashに無駄なデータとレイヤーが出来るんで邪魔なんですが、仕方ない…。

あんまりいないと思いますけど、flashの上にdivを重ねようって時にはご注意を。
divの背景は、flashの上にはのりません。一番下にいきます。