Yahoo バナーレギュレーション
たまにはFlashの記事でも。
先日、Yahooにのせるバナーの制作をしていたんですが、これのレギュレーションが思っていた以上に厳しくて参った。as3どころか、as2でもあれこれやってると死亡する率高いのね。
Yahooでは、死亡しないバナーのために事前にツールを公開しており、とりあえずはそこでチェックしていくことから始まります。
「Abbey」
これが噂のチェックツール。作ったバナーをここにあげて、チェッキングするわけです。
注意しなければならない点は、
・FlashPlayer ver.6で書き出す。
・当然、テキストやMCにフィルタが使えない。
・as3は使えない。
・それどころか、as2でも一部のscriptが使えない。
・Tweenerとかライブラリは使えない。
・1フレーム30kb以内などの制約があるので、1フレ目は軽めにする。
・要は、1フレだけあって、あとはscriptで動かしてるようなバナーだと死亡するかも。
とか、か。
つーか、いい加減、ver8あたりで作りたいんですけど、後ろを見すぎて未来が見えてないんじゃないの！IE6にいまだに対応しなくちゃいけない点も嫌ですね。早くそういうものから解放されたグローバルなところに行きたいです。
flashの上にdivを置く時の注意
先日やろうとしたこと。
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の上にはのりません。一番下にいきます。
Progressionを学ぶ（4）
すごい初心者なこと。
ProgressionのaddCommandは、ふつうにやると直列処理なのだけど、
たまには同時にコマンドしてよお願いだよぷろぐれっしょん、と思うこともあるので、メモ。
やり方は超簡単。
addCommand( //並列処理 [ new AddChild(なんたら), new AddChild(なんたら2) ], //直列処理 new AddChild（なんたら3) );
ってやるだけ。うわーい。こんだけだー。
他にもこんな方法もあります。
addCommand( //並列処理 new ParallelList(0, new AddChild(なんたら), new AddChild(なんたら2) ), //直列処理 new AddChild（なんたら3) );
パラレルリストをnewする方ですね。
こちらは最初の引数に null とか0を入れないと動かないみたい？
まあ、とりあえずこれで並列処理ができるようになりました。
さて、またがしがし作っていきたいとこです。
Progressionを学ぶ（3）
Progression 勉強メモ。
あいだがだいぶ空きましたが、引き続き。
まじめに勉強するなら、やっぱり、実践しないといけないと思ってて、
そのために一つサイトのデザインを作ってました。
で、デザインはとりあえず出来たので、勉強再開です。
今回やったことは、フルFlashサイトなので、stage100%にするということ。
あ、僕はAS超初心者であるうえに、AS3.0の理解度も超低いです。
グローバル変数を説明することも出来ません。たはー。
ではいきましょう。
まずフルFlashなので、ヘッダーとフッターたちは、常に一番上と下にあってほしいです。
見た人がウィンドウをリサイズしても、自動的に移動するようになっていてほしい。
つまり、リサイズ処理ですね。
これを分からないなりに苦心して考えました。
まずヘッダー。
これは一番上に常にあるも何も、初期値にしときゃ勝手にそこにあるので放置。
何はともあれインスタンスを作成。
var headerBG:HeaderBG = new HeaderBG();
なお、基本的なやり方は、特集：Flashのフレームワーク「Progression3」を始めてみよう！にのっとってます。
名前の付け方というか、なんというか。
んで、フッターですか。
var footerBG:FooterBG = new FooterBG();
で、あとはコマンドでaddChildしてやりゃヘッダーフッターは生まれますね。
ここまではいい。
けど、フッターを一番下に表示させるにはどうしたらいいだろう？
フッターは30pxの高さで作られているので、一番下というのは、つまり、
(ステージの高さ-30px)で常に表示されていればいいということになる。
そうすれば、いつリサイズされても、それは常にウィンドウの高さ-30pxの位置にある。
ということは、こうかな？
protected override function _onLoad():void {
//インスタンスの作成
// 実行したいコマンドを登録します。
addCommand(
new Prop(headerBG, { x:0, y:0} ),
new AddChild(progression.container, headerBG),
new Prop(footerBG, { x:0, y:progression.container.stage.stageHeight-30} ),
new AddChild(progression.container, footerBG),
おお。出来た。
しかし、これではリサイズをすると変わってしまう。
AS2.0的に言うと、onClipEvent(load)で位置を指定したようなもんですね。
ロードされたその時はいいけれど、リサイズ後の処理はまったく考えていない。
なので、AS2.0的なonClipEvent(enterFrame)な処理をしなければいけません。
で、しかしAS3.0をまったく理解してない僕はどうすればいいのかさっぱりだった。
だから、グーグル先生に聞いた！
すばらしい人がいるもんですね。
Progression3はじめてメモ
ここのリサイズ処理を超参考、どころか、まんま、まるパクリしてみました。
するとこうなりました。
protected override function _onLoad():void {
//インスタンスの作成
// 実行したいコマンドを登録します。
addCommand(
new Prop(headerBG, { x:0, y:0} ),
new AddChild(progression.container, headerBG),
new AddChildAt(progression.container, footerBG,10),
function():void {
_onResize();
progression.container.stage.addEventListener(Event.RESIZE, _onResize);
}
);
}
private function _onResize(event:Event=null):void
{
var containerWidth:Number = progression.container.stage.stageWidth;
var containerHeight:Number = progression.container.stage.stageHeight;
footerBG.y = containerHeight - 30;
}
おっ。出来た！
なお、footerBGは上のインスタンス作成のところに入れておくと出来ません。
当たり前ですね。でも、その当たり前に気づかずに1、2時間悩みました。
とりあえず、これでフッターを一番下、常にステージの高さ-30pxの位置に置くことは成功。
ふう。時間かかったな。
次はコンテンツに入ってみたいと思います。
Progressionを学ぶ（2）
引き続きProgressionメモ。
そういうの興味ない人はごめんなさい。
つーかそれなに？プログレッション？説明して！
なんか、webの技術ちっくなことの話です。
とりあえず
Flashのフレームワーク「Progression3」を始めてみよう！
にあるチュートリアルを一通りやってみた結果、
だいたいのことは分かったような感じ。
肝だな、と思ったのは、やっぱり”概念”だなぁ。
オブジェクトを一つムービークリップで作ったあと、
タイムラインな僕はそれをステージに置いたりとかして、
んでそのムービークリップにonClipEvent(load)とか書いてたんだけど
（すいません、思いっきりAS2.0なノリで）
いまやそういうノリじゃないんスね。
シーン＝舞台。
そこで何が起こるかはそれぞれ自由だけども、
舞台の暗転とか、幕引きとかはやっぱりこのシーンでやりたいね。
キャスト＝役者。
そこで何かするのはやはりこの人。いなくちゃはじまらない！
コマンド＝演技指導
でも、役者は放っておいてもそこにただいるだけ。
彼らを動かすには、このコマンドさんの力がいる。
なんて。これは上記リンクの説明をざっくりしたものなんだけど、
この流れを理解してると、やっぱり違うなぁ、という印象。
まずはこの概念を理解することからはじめて、
さて、ようやくこれから本格的にProgressionな勉強を始めたいと思います。
上記リンクの第5回がかなり意味不明で、僕は若干参ってますけどね。
あれ初心者に向いてるの？いきなり置いてけぼりくらった感あるけども。
ま、がんばっていきたいと思います。
READ or READとかそのうちフルFlashのサイトに生まれ変わらせちゃうから！
