ようこそゲストさん : 

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

はじめての方へ

【この連載が想定する読者】
この連載は、「Flash入門」というよりは「Flash(再)入門」といったものになっています。想定しているのは、
・今までFlashを使ってきていたけど、基本的にスクリプトは敬遠していた人
・Flashの初心者で、基本操作とムービー(アニメーション)の作り方はおぼえた人
なので、まったくゼロからの初めてのひとは、ほかにいっぱいよい入門書や講座があると思いますので、そちらをあたって、基本的な操作法をおぼえてください。もし「Flashでサイト全体を作ってみたいんだけど、スクリプトを使わないといけないんだよねぇ…。」と気分が沈んできたら、そのときは、こちらの連載が役に立てるかもしれません。なぜなら、連載を始めようとしている今の僕自身が、まさにそういう気分だからです…。詳しくは

「はじめに」
http://echo.ktlt.org/adiary/adiary.cgi/rint/04
をお読み下さい。

【最初から順に記事を読むには】
左側メニューにある「カテゴリ一覧」を上のカテゴリから順番に読むか、「メインメニュー」の「記事一覧」から一覧を表示して、「日付」のタブをクリックすると、投稿された日付順に並べ替えられます。後日加筆の都合で、ちょっと内容が前後してるところが出てくるかもしれません。

CS4のインストール

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

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

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

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

FlashCS4のパブリッシュ機能だけで簡単にフルFlashにできないの?

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

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

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

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

[ 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仕様」ができましたね。

制作用のパソコン環境はご自由に。スクリプト環境はAS3.0で。

うちでは今、Flashを作るときはWindows(XP SP3)を使っています。昔はMacを使っていたのですが、会社で同じようにFlashを使っていた同僚の、Windows上での Flashの操作レスポンスの速さに愕然とし、さっさと乗り換えました。とはいえ、このあたりは何年も昔のことなので、MacにもIntelが搭載されている最近の状況はどうだかわかりません。(ウチにはIntelのiMacがありますが、メインのWindowsPCと比較として3DCGソフトの Blenderを一緒に動作させてみたら互角でした。おそるべし64Bit、といった所でしょうか。)

こんな風に、コンピュータに関する比較環境は、どんどん変わってしまいます。ですから、新しいのか古いのかを選ばないといけない場合は、「どうせこれも5年後には古くなっている」という心持ちで、そのとき最新のものを選んでおくのが基本です。これから書き込んでいくActionScriptについてのポストも、現状(09年)で最新のFlashCS4 + ActionScript3.0の仕様にのっとって進めていきます。

とはいえ、3.0のスクリプトを使ったFlashサイトを作るにはFlashCS4が必要か?というと、別にそういうわけではないと思います。スクリプトを書くだけなら、そもそもメモ帳でできるはずですし。でも、メモ帳で書いたスクリプトと、Flash側で作ったswfとを、どうやって関連づけるのかわかりませんね。古いFlashのままで新しいスクリプトのデバッグができるのかもわかりません。おとなしく新しいFlashを用意しておくことにします。

ということで、次回はCS4へのアップグレードから始めます。