Suzukaでリンクボタンを作る

さっそくSuzukaを使ってフラッシュを作ります。今回はリンクボタンを作ってみます。
リンクボタン完成図
リンクボタン完成図。完成した.csfファイルをダウンロード


1. Suzukaを起動します。Adobe Flashで見慣れたタイムラインやステージといったものはありますが、左上の2つのウィンドウなど大きくインターフェイスは違います。 この左上の2つのウィンドウがSuzukaのキモになる「シンボルリスト」です。Suzukaではシンボルリストにベクター画像、写真、音楽、動画をシンボルとして登録し使用する流れになります。ステージありきのAdobe Flashとは大きく違う点ですね。シンボルというのは、フラッシュ内で使用する画像や写真のことです。

Suzukaを起動した画面


2. 実際にシンボルを追加します。図のようにシンボルリストを右クリックして「アイテムを追加」を選択してあらかじめ作成したボタン画像を登録します。

シンボルリストにアイテムを追加する


今回はサンプルを用意しましたので、こちらを使用してください(サンプルファイルをダウンロード)。画像はJPEGやGIF形式のビットマップ画像でも大丈夫ですし、Adobe IllustratorやParaDrawなどSWF形式に書き出しが行えるソフトがあればベクター画像をそのまま読み込むことができます。

以下の図のように、シンボルリストに4ファイルが登録されたことが確認できたら次に進みましょう。

シンボルリストにアイテムを追加する


3. シンボルリストを右クリックして「アイテムを追加」から「ボタン追加」を選択してください。「ボタンのプロパティ」というウィンドウが開きましたか?これがFlashで言うところのボタンシンボルの編集画面にあたります。

ここではマウス動作にあわせたボタンの動きを設定します。先ほど読み込んだファイルを以下のように設定しOKボタン押してください。

・通常時:up.swf
・押下時:down.swf
・マウスカーソル通過:over.swf
・当たり判定:area.swf

ボタンのプロパティ


4. シンボルリストに追加されたボタンを右クリックして「レイヤーに追加」を選択します。これによりボタンがステージ上に配置されます。

ボタンをレイヤーに追加


5. ステージ上のボタンをクリックして選択してください。ステージ上ではボタンの配置位置や大きさ、角度などを4隅のバウンティングボックスで指定することができます。画面の中央にボタンを移動させましょう。

配置されたボタン


6. ボタンにリンク機能を付けます。ステージ上のボタンを選択し、画面右下の「スクリプト(ボタンアクション)」というウィンドウを見つけてください。

まず「簡易モード」のチェックを入れ、onイベント「release」を選択してください。これでボタンをマウスでクリックして、指をあげたときの動作を指定することができます。最後に「スクリプトを編集」ボタンを押します。

スクリプトを編集する


7. 「スクリプト簡易編集」のウィンドウが開きます。ターゲットパスは今回は未設定で大丈夫です。上から2番目のプルダウンで「URLを取得」を選択すると、その下に「URL」「ターゲット」の二つの項目が表示されます。ここではボタンを押してジャンプさせたいリンク先のURLと、HTMLの「target」属性同様、ブラウザの開き方を選択できます。

ここではURLに「http://allabout.co.jp/」を、ターゲットは「_top」を選択し、「OK」ボタンを押してください。

スクリプト簡易編集


8. 最後にフラッシュを書き出します。上部メニューから「ファイル」を選択し、「SWFファイル生成」を選び保存してください。保存したファイルをFlashプラグインがインストールされているブラウザなどで開き、動作確認します。

SWFファイル生成


次のページではSuzuaの使い勝手などをまとめてみます。