どのような現象が起こったのかというと、Flash CS5 を起動すると、通常表示されるはずのスタートアップスクリーンが表示されないのです。昨年載せました Flash CS3 の起動画面と比較してみてください。さらには、新規ドキュメントを作成または既存の fla ファイルを開き、Command + Return キーでムービーをプレビューしようとしても、ムービーが表示されません。パブリッシュはできるのですが、これでは使い物になりません。

これらは同一の原因によるもので、要は Flash ムービーが CS5 からロードする事ができていないのです（Flash CS5 のスタートアップスクリーンは Flash ムービーで実装されています）。ブラウザ上およびプレーヤー単独では問題ありませんでした。Adobe CS5 Cleaner ツールを使って Adobe 製品をすべて完全アンインストールし、新規管理者アカウントで Flash CS5 のみをインストールしても状況は変わりませんでした。

解決のきっかけとなったのは、ムービープレビューの際に出力パネルに表示されたエラーメッセージでした。そこにはこう書かれていました。「URL ‘file:////Volumes/Macintosh%20HD/Users/[account]/Library/Caches/TemporaryItems/名称未設定%2D1.swf’ を開く処理のエラー」

結論としては、私の Mac に重複したマウントポイントが作成されているのが問題でした（リンク先は全く同一ではありませんが類似した問題に関する Apple のサポートページです）。Macintosh HD 内の /Volumes フォルダを開くと（隠しフォルダなので、Finder のメニューバーから「移動」>「フォルダへ移動」と選んで直接入力してやる必要があります）、本来ならば「Macintosh HD」という名前のエイリアスが存在しなければなりません。しかし私の Mac では「Macintosh HD 1」という名前のエイリアス（リンク先は Macintosh HD）と、「Macintosh HD」という名前の実フォルダがありました。このフォルダの中にはアプリケーションフォルダのみが存在していました。この中に入っているアプリケーションは過去のある時点でインストールされていたもののみで、最近インストールしたものは含まれていませんでした。

つまり、過去に何らかの原因で「Macintosh HD」なるフォルダが Volumes フォルダ内に作成されてしまい、名前が重複するために本来作成されるはずのエイリアスの名前が最後に「1」が付いたものになってしまっていたのです。Flash CS5 は Macintosh HD を参照する際に直接 Macintosh HD を見に行かずに Volumes フォルダのマウントポイントを見に行っていたのですね。本来なら /Volumes/Macintosh HD/Users フォルダを参照しようとするとエイリアスによって /Users フォルダが参照されるのですが、/Volumes フォルダに「Macintosh HD」という名前のフォルダが存在してしまっているためにそのフォルダ内を参照してしまい、さらにその中には Users フォルダも Flash CS5 の関連ファイルもありませんから、ムービーがロードできなかったわけです。

/Volumes フォルダ内のフォルダとエイリアスは移動も名前の変更もできなかったので、これらをゴミ箱に移動してしまい、その後再起動すると、正しいマウントポイント（エイリアス）が自動生成されました。この状態で Flash CS5 を再インストールすると、問題なくスタートアップスクリーンが表示され、ムービーのプレビューもできるようになりました。原因を特定するのに苦労しましたが、なんとか解決する事ができてほっと一安心です。

以前書いたように、これまで持っていた Flash は Windows 版の CS4。Mac では使えませんし、プラットフォームをまたいでのアップグレードも基本的に不可です。しかし、Adobe ストアで購入する場合は条件次第ではクロスプラットフォームでのアップグレードに対応していただけるということで、お願いしました。なにしろ、通常版を新規に購入するのとアップグレード版では３倍以上の価格差がありますからね。その条件というのは以下になります。

1. Adobe ストアでの購入、それも電話での注文に限る（店頭パッケージや Web での購入ではだめ）
2. クロスプラットフォームでのアップグレードは合計で５回まで
3. インストール時に問題が起こる可能性もある（その際はカスタマーサービスのサポートを受けること）

さて、先週製品が到着しインストールをしたのですが、少々不具合があり、現在カスタマーサポートとやり取りをしている最中です。一見ちゃんとインストールできたように見えたのですが。詳細はまた解決した後に書きたいと思います。すでに Adobe 製のアプリをすべて完全削除して Flash だけをクリーンインストールするなど考えられる対処はしてみたのですが、未だに解決に至っていません。Adobe 製以外のアプリケーションとの干渉が原因かもしれませんが、まだ Mac も買ってから日が浅く必要不可欠なアプリしか入れてませんから、それらをアンインストールしないといけないぐらいなら Flash の方を諦めます。

発売日に購入した（こちらは通常版）Photoshop の方は、Flash と違い今のところ問題なさそうです。まだ特に編集作業は行ってませんけど。とにかく起動が速いです。さすが 64bit ネイティブ対応（Flash はどうしても 32bit になりますから、かなり起動が遅いです）。最近肝心の写真撮影の方があまりできてないので、もっと撮影に出かけなくてはなりません。そうでなければ Photshop を買った意味もないですからね。そうこうしているうちに梅雨がやってきちゃいますけど、今年は梅雨ならではの写真にももっとチャレンジしてみたいです。

せっかく Flash CS4 を買って持っているのだから使いたいのですが、持っているのは Windows 版なので、Mac にはインストールできません。同じくライセンスを持っている Flex Builder 3 はクロスプラットフォームで Mac でも使えるので、Flash だけ Windows に切り替えて使うのも嫌なんですよねぇ。

Flash はもったいないけどあきらめて Flex Builder 3 もしくはアップグレードして Flash Builder 4 だけを使い、必要なら新たに発売される Flash Catalyst を買い足すというのも選択肢としてはあります。Win 版 CS4 から Mac 版 CS5 にアップグレードできればその方が安いんですけど。

正直、iPhone を使うようになってから Flash 熱は以前にも増して冷めているのです。iPhone の Safari では Flash 見れませんから。このブログのヘッダーにも Flash を使っていましたが、iPhone を買ってから外しました。もともと Flash そんなに使ってませんでしたけど、手持ちの資産を無駄にしたくはないですが、多額の投資も避けたいところ。

投資と言えば、もう１つ悩みがありました。Photoshop CS5 も欲しいんですよねぇ。レタッチを必要とする頻度は低いですから Elements でも十分なのですが、CS5 のほうが Lightroom との連携も良さそうですし。

CS5 の発売まであと１週間。もう少し悩んでおきます。

Flash Player を 10 にアップグレードし、AIR やら Flex Builder やらアップデートしていったら、やっぱり Flash もアップグレードしたほうがいいような気がしてきたので。

アップグレード版を購入してインストールしたところ、CS3 は削除されずに別アプリケーションとしてインストールされました。これは予想外の展開。仕事でやっているわけでもないので CS4 があれば CS3 は必要なく、すぐに手動でアンインストールしました。

起動スピードとかは特に変わらず。スタートアップスクリーンに表示されるテンプレートが広告１つだけになって、最初はテンプレートが消えてしまったのかとちょっと焦りました。使わないけど。

ワークスペースは大きく変わりました。

各パネルの配置が大幅に変更され、用途別にプリセットされたワークスペースがいくつか準備されています。どのセットも使いやすくなった面と使いにくくなった面があるような気がします。作業内容に応じてワークスペースを切り替えると効率が良いかも。

まだ CS4 にしてから使ってないので、外観以外の変更点はよく分かりませんが、チュートリアルビデオをみると、アニメーションを作成するのがかなり楽になりそうな印象です。3D の描画とボーンツールも使えそうな感じです。あと、デフォルトで AIR に対応していたり、Extension Manager がインストールされているのもありがたいです。

まだ CS4 に対応した書籍とかは出ていないようですし、Web 上の情報もまだ少なそうです。しばらくは CS3 の書籍や情報を自分で CS4 用に解釈しなおして勉強していきます。

その前に、パブリッシュする必要があります。Flash CS3 のファイルメニューからパブリッシュを選ぶと、fla ファイルが保存してあるのと同じフォルダに３つのファイルが作成されます。１つは swf ファイルで、これが Flash の本体です。後の２つは html ファイルと AC_RunActiveContent.js という JavaScript ファイルです。

まずはスタンダードなやり方を試してみます。パブリッシュされた swf ファイルと js ファイルを自分のブログを設置しているサーバーにアップロードします。WordPress なら使用しているテーマのフォルダでいいでしょう。html ファイルはアップロードする必要はありません。テーマでヘッダー部分が記述されているファイル（通常は header.php）をローカルにダウンロードして編集します。html ファイルをテキストエディタで開き、<head> 内で AC_RunActiveContent.jp を読み込んで初期化している部分：

<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="javascript"></script>

をコピーし、head.php の同じく <head> 内にペーストします。さらに、<body> 内の以下の部分：

<script language="javascript">
	if (AC_FL_RunContent == 0) {
		alert("このページでは \"AC_RunActiveContent.js\" が必要です。");
	} else {
		AC_FL_RunContent(

	【省略】

		); //end AC code
	}
</script>
<noscript>

	【省略】

</noscript>

をコピーし、header.php の Flash を表示させたい場所にペーストします。

編集した header.php をサーバーに上書きアップロードすれば完成・・・というのが解説書とかに書かれていいる通りの手順ですが、これではおそらく表示されないでしょう。js ファイルと swf ファイルのパスが正しくないからです。ファイル名を指定している部分をテーマのフォルダまでのフルパスで記述してやれば動くようになります。書き換える場所は js ファイルについて１か所（<head> 内）、swf ファイルについて４か所あります。WordPress で使うにはこのフルパスというのはテンプレートタグを使って <?php bloginfo('template_url'); ?>{swfファイル名} と表すことができます。なお、Flash CS3 が書き出す html は XHTML 1.0 では Valid ではありませんので、必要に応じて書き換えないといけません。

この方法を使う時は、既存のヘッダー部分は消してしまうか CSS で見えなくしてしまう必要があります。

私は別の方法を使ってこのブログのヘッダーを Flash 化しています。それは SWFObject という JavaScript を使う方法で、これもよく使われています。設置方法はリンク先の documentation ページに（英語で）詳しく解説されていますし、日本語訳へのリンクもあります。

SWFObject 2.0 には２通りの設置方法があり、ひとつは JavSscript がオフでも Flash が表示される、<object> タグを直接書く方法と、javascript でダイナミックに表示する（つまり javascript がオフだと表示されない）方法があります。私は、JavaScript をあえてオフにしている人は少数派であろうと仮定し、後者のダイナミックな方法を用いています。ソースが複雑になるのを避け、既存のヘッダー部分はそのまま残したかったということもあります。既存のヘッダーをそのまま残して SWFObject を用いて Flash を埋め込むには、例えば以下のようなソースにすればよいです（swfobject.js と swf ファイルはテーマフォルダにアップロードされているとします）。

<div id="header">
	<h1>ブログのタイトル</h1>
	<p>ブログの説明</p>
</div>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>swfobject.js"></script>
<script type="text/javascript">//<![CDATA[
	swfobject.embedSWF("<?php bloginfo('template_url'); ?>{swfファイル名}", "header", "{横幅}", "{高さ}", "9.0.0");
//]]></script>

これで javascript がオフならこれまでのヘッダーが、オンなら Flash のヘッダーが表示されるようになります。

４回にわたる Flash によるブログのヘッダーの作成過程の紹介はこれで終わりです。次は何を作るかまだ考え中ですが、公開できるようなものが出来たら、また作成過程も含めて紹介してみたいと思います。

私は絵心がないので、動かすのは幾何学的な図形にしておきます。そんなわけで、流れ星のアニメーションにします。普通に星が動くだけでは面白くないので、ランダムな大きさ・タイミングで星が降るように ActionScript でプログラミングします。

まずは降らせる星を描いていきます。新しいレイヤーを作成し、ブログタイトルのレイヤーとブログの説明のレイヤーの間に配置します。ActionScript を使って描画するので、ここで星を描くのはどのレイヤーでもいいのですが、タイトルより下・説明より上に星を流したいので、分かりやすいようにここにレイヤーを作っておきます。

星を描くには多角形ツールを使います。多角形ツールはツールバーの矩形ツールを長押しして出てくるメニューから選択できます。多角形ツールを選択したら、プロパティペインのオプションボタンをクリックして、ツールの設定ウィンドウでスタイルを（多角形ではなく）星にすることで、星形を描くことができるようになります。塗りのカラーも星らしく黄色系にしておきます。

星形を正しい（？）向きで描くには、Shift キーを押しながらマウスをドラッグすると楽です。普通に描画すると、スクリーンショットのように、線と塗が別々のオブジェクトとして描かれますので、輪郭線を削除しましょう。線の上でダブルクリックすると輪郭線を全選択できますので、その状態で Delete キーを押せば OK です。次に星の上で右クリックして、シンボルに変換します。今回は、ムービークリップに変換します。シンボルに変換したら、ステージ上の星は削除します。

ステージから削除しても、今描いた星は右ペインのライブラリ内にあります。これをステージ上にドラッグして使うこともできます。プログラミング的には、ライブラリ内にある星はクラス（雛型）であり、ステージ上にドラッグすることでインスタンス化できます。この辺はオブジェクト指向プログラミングの考え方ですね。Actionscript からインスタンス化して利用するには、クラスの名前を付ける必要があります。これがリンケージという作業になります。（シンボルに変換した時に付けた名前とは異なります。）

ライブラリ内の星を右クリックして、メニューからリンケージを選びます。リンケージプロパティというウィンドウが出るので、ActionScript に書き出しをチェックし、クラスの名前を記入します。OK ボタンを押すと警告ウィンドウが出ますが、これも OK を押します。

これで ActionScript でプログラミングする準備が整いました。前回スクリプト用に作ったレイヤーの先頭フレームを選択してアクションウィンドウを開きます。前回書いたスクリプトの続きに、以下のコードを記述します。

01: var star:Star = new Star();
02: addChildAt(star, 1);
03:
04: var vel:Number;
05: var life:Number;
06: addEventListener(Event.ENTER_FRAME, moveStar);
07:
08: initializeStar();
09:
10: function initializeStar():void {
11: 	star.x = Math.random() * 800;
12: 	star.y = -100 - Math.random() * 400;
13: 	star.scaleX = star.scaleY = 0.2 + Math.random() * 0.8;
14: 	vel = 0;
15: 	life = 300 + Math.random() * 700;
16: }
17:
18: function moveStar(e:Event):void {
19: 	if (star.y > life) {
20: 		initializeStar();
21: 	} else {
22: 		star.x -= vel;
23: 		star.y += vel;
24: 		vel += 0.5;
25: 	}
26: }

コードの中身を簡単に解説します。

1行目ではまず Star クラス（リンケージの作業で星につけたクラス名）のオブジェクトをインスタンス化し、2行目でこのインスタンスをステージに子として加えています。表示順は下から２番目、すなわち星を描く際に作ったレイヤーの位置です。この時点では位置を指定していませんので、まだ描画されません。位置を指定する処理は10行目からの initialize 関数に切り出してあり、8行目でこの関数を呼び出すことで描画されます。

今回は一度に一つの星しか降らせないので、インスタンスは一つだけで、大きさと初期位置をリセットすることで次の星にしています。8行目で、フレーム入るたびに move 関数が実行されるようイベントリスナーを設定しています。すなわち、move 関数が星を移動させる処理になります。

initialize 関数では、乱数を用いて星の初期位置・大きさ・寿命を設定しています。move 関数では、星が寿命を過ぎている場合はリセット（initialize 関数を呼び出し）し、そうでない場合は速度の分だけ星の位置を移動させます。速度はフレームに入るたびに増加、すなわち加速度運動をすることになります。

あまりスマートなコードではないかもしれませんが、ほぼ意図したとおりの動作になりました。複数の星（数もランダム）が流れるようにするともっと面白いですが、ブログのヘッダーなので、常時動きがあってうるさく感じるよりも、これくらいの方がいいのかなと思います。

これで Flash は出来上がりました。次回、Flash をブログに貼り付けて最終回とします。

まずはロールオーバー効果を付けてみましょう。最初に、ブログタイトルを選択して右クリックし、シンボルに変換します。適当に名前をつけ、タイプはボタンを選択します。

後で使用することになるので、このシンボルにインスタンス名（blogTitle とします）を付けておきます。

この「シンボルに変換」という概念が最初はよく分からなかったのですが、このテキストを含んだ別の独立した子ムービー（今回の例ではボタンですが）のオブジェクトを配置する感じでしょうか。ブログテキストをダブルクリックするとシンボルの編集モードに入り、そこでは親ムービーと同様に、しかし独立した、新規のレイヤー上にテキスト（ブログタイトル）が配置されています。

次に、マウスを上に持ってきたときに反応するヒットエリアを作成します。

実は、ヒットエリアを作らなくても、ロールオーバー効果は設定できます。また、ステージ上に配置したテキストには、プロパティペインで URL リンクを簡単に設定することができます。しかし、この２つの設定はなぜか両立せず、ロールオーバーが正しく働かなくなってしまいました。そこで、ActionScript を使ってリンクを設定することにして、リンクとロールオーバーに反応させるためにヒットエリアを作成することにしました。この方法のほうがいろいろと応用もききそうな気もします。

今テキストが置かれているレイヤーとは別のレイヤーを作成し、そこに矩形ツールを使って長方形を描きます。位置とサイズは最初は適当に作っておいて、後でプロパティペインで、ブログタイトルのテキストと同じ値に設定します。

タイムライン上で、長方形を描いたレイヤーとアップフレームが交差するボックスを、ヒットフレームまでドラッグして移動します。これで、この長方形はシンボルのヒットエリアとしてのみ働く透明なボタンになります。

では、マウスオーバーの際のテキストの見た目を変更していきます。

ブログタイトルのテキストが配置されたレイヤーを選択して、アップフレーム上を右クリックしてキーフレームを挿入します。

ステージ上のブログタイトルを選択し、プロパティペインでテキストの塗りのカラーを変更します。

ここまでで、ブログタイトルにマウスカーソルを乗せるとテキストの色が変わるようになりました。

では、ブログタイトルのテキストにリンクを設定しましょう。先に述べたように、ActionScript を使用して記述していきます。

ステージ上をダブルクリックまたはシーン１と書かれたリンクをクリックして、シンボルの編集を抜けて親ムービーの編集に戻り、スクリプト用に新しいレイヤーを作成します。

このレイヤーの先頭フレームを選択して、F9 を押して（またはウィンドウメニューから）アクションウィンドウを開きます。ここにコードを記述していきます。（スクリーンショットでは、アクションウィンドウはプロパティペインに格納しています。）

最初に設定したシンボルのインスタンス名がここで必要になります。ActionScript 自体の説明は面倒なので（！）、スクリプトの内容を以下に載せるだけにしますが、流れとしては、（１）インスタンスにイベントリスナーを設定し、マウスクリックに反応させる、（２）クリックされたときの処理を記述した関数を宣言する、ということになります。

blogTitle.addEventListener(MouseEvent.CLICK, gotoHome);
function gotoHome(e:MouseEvent):void {
	navigateToURL(new URLRequest('http://act.affai.com/'), '_self');
}

長くなりましたが、今回はここまで。せっかくの Flash なので、次回はちょっとしたアニメーションを加えてみます。

使用したのは Flash CS3。まず、ドキュメントを新規作成します。私は CS3 以前の Flash は触ったことがなく、ActionScript 2.0 も知りません。なので、ActionScript も 3.0 を使います。

ドキュメントを新規作成したら、ステージ上を右クリック、または画面下の方のプロパティペインのサイズのボタンを押して、ドキュメントのプロパティウィンドウを開きます。ここでステージのサイズ、背景色、フレームレートを設定します。

サイズと背景色は CSS で指定しているものに合わせます。このブログは最小値指定付きの可変幅なので、Flash の横幅は min-width の値（より少し小さめ）にしました。

つぎにブログのタイトルと説明をステージ上に配置します。

下準備として、これからブログのタイトルを置く現在のレイヤーの名前を分かりやすく Blog Title とでも変更しておきます。

左のツールパレットからテキストツールを選択して、ステージ上にブログのタイトルを記入します。

記入し終わったら、このテキストを選択した状態で、プロパティペインでフォント、フォントサイズ、テキストの塗りのカラーを設定します。テキストの種類は静止テキストのままです。本当はダイナミックテキストにして HTML (PHP) からブログのタイトルを渡したいところですが、フォントの自由度を考えて、静止テキストにして直接記入することにしました。

最後にテキストボックスのサイズと位置を指定して、ブログタイトルの配置は終了です。

同様にしてブログの説明も配置しますが、後のことを考えて、タイトルと同じレイヤーではなく新規レイヤー（Blog Description）を作成して、その上に配置します。子のレイヤーはタイトルのレイヤーよりも下にしておきます。

ユニークなフォントを指定するだけでもファンシー（？）になりますが、もう少し装飾を付けてみましょう。

ブログタイトルを選択した状態で、プロパティの横のフィルタタブをクリックし、「＋」ボタンを押してドロップシャドウを追加します。これだけでタイトルのテキストにいい具合に影が付きました。

適宜、Ctrl + Enter でムービーをプレビューしたり、セーブしたりしておきましょう。

次回は、ブログタイトルにロールオーバー効果とトップページへのリンクを設定して、ブログヘッダーらしい機能を追加します。

そもそも、なにかのプログラミングをそれなりに出来るようになりたかったのです。これまでいろいろな言語を少しずつかじってきたけど、どれも中途半端で、すぐに忘れてしまっています。１つぐらいはきちんと勉強して、なにかちゃんとしたものを自分で作りたい。そこで目を付けたのが、ActionScript 3。AIR でマルチプラットフォームなデスクトップアプリも作れるし、もちろんウェブプログラミングもできるというのが魅力でした。

Flex SDK を使えば無料でできるんですが、GUI のほうが作りやすいし、形から入る人としては、やっぱりソフトを買わねばと。本も何冊か買いました。

年末に出た CS4 にアップグレードしたいところだけど、初心者としてはまだ情報が少ないのが不安。まだ CS3 も全然使ってないし、少しは使えるようになってから買おうかしらん。

とりあえずは、このブログのヘッダー用のバナーでも作ってみましょうかね。