ようこそゲストさん

文系デザイナーが1から学び直すFlash+ActionScript

2009/08/06(木) CS4のインストール

ということで、無事CS4のアップグレード版が届いたので、インストールしました。Bridgeとかエンコーダー類とか、関連ソフトがいろいろ増えていて、インストールには結構時間がかかります。とりあえず、インストールとアップグレード認証自体は無事完了。「お読みください」を読んでみたら、 minimlのフォントが付属していてびっくり。MacからWindowsに乗り換えるときに使わなくなってたので、懐かしい書体名がいっぱいです。
http://www.miniml.com/

さて、で初めてアプリケーションを立ち上げてみてさらにびっくりしたのは、「タイムラインがない」ということ。あれ〜って感じです。実際には、見えなくなってるタブにあるだけで、廃止になったわけではないようですが、いよいよこの先の道のりの遠さを感じます…。

くじけずになんとか動かしてみると、とりあえず基本的な部分はFlash8から、というか大昔から何も変わってないので、ひと安心。ホットキーも普通につかえます。ユーザーインターフェイスの使い心地は、AfterEffectsとか、ほかのAdobeの映像系のものにそろっていて、使いやすくなっている部分もあります。

さて、では次のポストではとりあえず書き出してみましょう。簡単にフルFlash仕様が作れるようになってるといいんですけど。

名前:  非公開コメント   

  • TB-URL  http://ktlt.org/echo/adiary/adiary.cgi/rint/016/tb/

2009/08/06(木) FlashCS4のパブリッシュ機能だけで簡単にフルFlashにできないの?

(flaと、swfと、htmlをアップします。)
http://echo.ktlt.org/flash-study/1-01/

結論から先に言うと、できないっぽいです。(現状で確認した範囲では。)

とりあえず、ステージ上にステージと同じサイズの長方形のオブジェクト(赤い長方形)を配置して、ムービークリップ化して、パブリッシュ機能で普通に書き出し。Flash8から変わった点は、Flashプレイヤーの検知とかのための長いJavascriptが加わったくらいで、あとは基本的に同じです。 htmlの背景色も、bodyタグに直接書いてあります。ブラウザ側のデフォルトのマージン設定が反映されてしまうので、Flashとブラウザの端の間に隙間ができ、背景色で塗られます。これは、やっぱりhtml側とかCSSで設定しないといけないのでしょうか。

あ〜。もうなんだかこの時点で投げ出したくなってしまいますね。

名前:  非公開コメント   

  • TB-URL  http://ktlt.org/echo/adiary/adiary.cgi/rint/017/tb/

2009/08/06(木) [ SWFObject ] HTMLにFlashを配置するときの、いまどき式の方法

仕方ないので、Flash側のパブリッシュ機能に頼るのはやめて、ごく一般的に使われているHTMLへのFlashの配置方法をおぼえてみます。もともとは、embedタグとか、objectタグとか、そういうのを使っていた記憶がありますが、最近は、javascriptを呼び出して表示させる(&Flashのバージョン検知をする)というのが主流なのだとか。そのときに使うのが、SWFObjectというものだそうです。

[参考] SWFObjectのドキュメントを日本語に翻訳してみたよ
http://www.trick7.com/blog/2006/06/15-135235.php

SWFObjectの中身や仕組みに関する細々とした所には現時点では立ち入らないことにしましょう。なんかファイルをひとつアップして、それをHTML側から読み込んで、指示通りに数行のコードを書いて調整すれば、適当に良い感じにしてくれる、なんだかとっても気の利いた出来合いのプログラム、くらいにとりあえず把握しておきます。

バージョンアップしているので、新しいバージョンでおぼえないといけない様子。

[参考] SWFObject v2.0 ドキュメント日本語訳
http://mtl.recruit.co.jp/blog/2007/10/swfobject_v20.html

これの、いちばん簡単そうな「オプション2」の方法に準拠して書いたものが下記。
http://echo.ktlt.org/flash-study/1-02/
(読み込んでいる1-01.swfは前のポストのswfと同じもの。swfobject.jsと、main.cssは、今後も流用するため、ひとつ上のディレクトリから参照しています。)
HTMLソースを確認してもらえればわかりますが、Flashからパブリッシュしたものとくらべて、思いっきりスッキリしましたね。まったく素の状態のHTMLに、Flashを配置するために書くコードは、ほんのひとケタ行です。でも、ちょっとバグがあるようなので、調整してあります。内容は以下の通り。

[参考] SWFObjectで縦横100%表示するときって??
http://www.ekkun.com/2009/07/31/swfobject-has-problem-about-100percent-height.html

CSS側でHTMLとbodyの要素を100%指定しておかないと、SWFObject側で100%指定しても、Firefoxとかの表示でバグになり、Flashが全く見えなくなるみたいです。(IEでは何となく平気でした。)あと、HTML要素に「overflow: hidden;」というのを入れてあげないと、100%表示なのにスクロールバーが出てきてしまう感じになるようなので、それも付加。

仕上げに、ブラウザ標準のマージンとパディングもCSS側の設定でゼロにしていしてしまいます。これで、最初のFlashが、全画面に、隙間無くピッタリ表示されるようになりました。

ふぅ。なんとか一応、いわゆる「フルFlash仕様」ができましたね。

名前:  非公開コメント   

  • TB-URL  http://ktlt.org/echo/adiary/adiary.cgi/rint/018/tb/