Flashでブログのヘッダーを作る (2)

前回はブログのタイトルと説明をテキストとして配置するところまでをやりました。今回は、ブログのタイトルにリンクとロールオーバー効果を設定して、ブログのヘッダーとしての機能を完成させたいと思います。

シンボルに変換
シンボルに変換

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

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

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

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

ヒットエリアを作成
ヒットエリアを作成

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

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

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

マウスオーバー時のテキスト色を変更
マウスオーバー時のテキスト色を変更

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

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

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

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

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

ActionScriptでリンクを張る
ActionScriptでリンクを張る

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

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

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

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

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

Flashでブログのヘッダーを作る (1)

このブログのヘッダー部分をFlashで作ってみました。備忘録も兼ねて、その過程を数回に分けて紹介してみようと思います。

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

ドキュメントのプロパティを設定
ドキュメントのプロパティを設定

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

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

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

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

ステージ上にテキストを配置
ステージ上にテキストを配置

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

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

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

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

ドロップシャドウ効果をつける
ドロップシャドウ効果をつける

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

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

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

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

撮り初め

池の上を泳ぐ鳥さんたち
池の上を泳ぐ鳥さんたち
梅の花も咲き始めました
梅の花も咲き始めました

週末に、某公園まで出かけて、買ったばかりのEOS Kiss X2でいろいろと撮ってきました。

一眼レフは全くの初心者なので、まずは「かんたん撮影ゾーン」での撮影です。そのうちマニュアル設定での撮影にも挑戦していきたいと思います。

モードの切り替えを忘れて、風景モードで接写したり、ズームモードで遠景を撮ったり、まだまだコンパクトデジカメの感覚が抜けきってません。でも、シャッターを切ったときの音と振動が心地よく、癖になりそうです。1〜2か月に一度はこの公園に来て、四季折々の自然を撮りまくりたいですね。

デジタル一眼レフ購入

念願のデジタル一眼レフカメラを、ついに購入してしまいました。

コンパクトカメラもそんなに使いこなしていなかったのに、一眼を果たしてどれだけ使うのかという疑問はありますが(特に妻はかなり懐疑的)、買ってしまえばきっと使うだろうと思うんですけどね。

子供も今が一番かわいい時。いい写真をいっぱい撮って残しておいてあげたいと思います。春に向かってこれから季節もいいですし、花や風景の写真も撮っていきたいです。コンパクトカメラでは難しい、背景がきれいにぼけた写真を撮りたかったというのも、一眼を買った理由の一つです。

EOS Kiss X2 Wズームキットのかわいらしい箱
EOS Kiss X2 Wズームキットのかわいらしい箱

買ったのはCanonのEOS Kiss X2。エントリーモデルです。ダブルズームキットをヨドバシで79,800円。10%のポイントがつくことを考えると、結構お得だったのではないかと思います。店員さんによると、まだ発表はないものの、3〜4か月すれば新しいKissシリーズモデル(DIGIC IV搭載、もしかすると動画対応かも)が発売されるのではとのことでしたが。もちろん、新モデルはこんな値段で買えるわけはないので、それを待つよりも、春までにそれなりに使えるようになっておくほうが得策と考えました。

比較検討したのは、PENTAXのK-m。小柄なサイズと初心者向けの機能、ユニークなデジタルフィルタが魅力でしたが、Kiss X2が格安になっていた(ヨドバシではこの2機種の値段差はわずか5,000円)こと、ファインダーの明るさと液晶の大きさ、大阪のサービスセンターのサポート規模などから、Canonの方を選択しました。ネットで買えばK-mはもっと安く買えるのですが、ネットでこの手のものを買うのはアフターサービスの面で不安があるので。

初めてのデジタル一眼レフ、セットアップ中
初めてのデジタル一眼レフ、セットアップ中

なにしろ初めての一眼レフなので、勉強しないといけない事がたくさんあると思いますが、まずは気軽にいろいろ撮ってみたいと思います。

節分ということで

オニくん
オニくん

オニくん by afainu。

お昼ご飯は恵方巻き。東北東を向いて、一気に食べました。

夜には、家族でささやかな豆まき。

鬼の面をつけた私に妻が豆を投げ付けて、子供に真似させようとしたんだけど、「落ちちゃった」って言って豆を拾って食べ始めちゃいました。。。さらにはまだ投げてない豆も食べ始め、止まらないし。取り上げると泣くし。

豆食べ
豆食べ

節分より食い気でした。

体調が悪くてもうまいもんは食べる

妻と子供がひいていた風邪を見事にうつされてしまいました。金曜日から咳と喉の痛み、それに加えて昨日は発熱。

そんな状態なのに、昨日は子供を親にあずけて、妻と2人でランチ。以前から予約して楽しみにしていたので、何が何でも行ったろうと、食い意地のはった夫婦。行ったのは、心斎橋のホテル日航大阪の鉄板焼「銀杏」。ランチのコースをいただきました。とても美味しかったです。やっぱいい肉は違うねぇ。

今日は熱も下がり、喉の痛みもひいてきたのですが、鼻水がタラタラ。なので1日中家でタラタラ。

Flashで何しよう

仕事で使うわけでもない(プログラマーでもデザイナーでもない)のに、勢いで大金を投じて買ってしまったFlash CS3とFlex Builder 3。いったい何に使おうというのでしょうか。自分でも分かりません(爆)。

Flash CS3の起動画面
Flash CS3の起動画面

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

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

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

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

始動します

新しいブログを始めようと思ったきっかけは、昨年の秋からFlash (Flex/AIR/ActionScript)を勉強し始めたから。せっかくだから作ったものはどこかで公開したいし、作る過程も記録していったらどうかと思ったのです。レンタルブログは制作物の公開・配布には向いていないと感じたので、レンタルサーバーにWordPressをインストールして使うことにしました。そこから自作のテーマを作り始め、今頃やっとなんとか形になったので、スタートです。

その間、Flashの勉強は中断。また1から勉強し直しです。本末転倒。しかもFlash CS3を買ったばっかりなのにCS4が出ちゃったし。AIRのバージョンも上がってるし。

Flashだけではなく、WordPressや写真、音楽など他の興味があることについても書いていこうと思っています。子供のことや普段の生活のことについても少し書くかもしれません。そちらの方が多くなってきたら、またしても本末転倒ですが。

では、afainu.actionをよろしくお願いします。

Enjoy Photo & More!