《#4》 ボタンを作ろう（2）

Digicom Magazine読者のみなさんこんにちは、ななきちです。
前回はクリックで色が変わるボタンの作り方を勉強しました。
今回は続編として、そのボタンを使って、実際に他のサイトへのリンクボタンとしての機能をつけてみたいと思います。

目次

• ボタンで外部サイトへリンクする
• Flash Playerのセキュリティ設定
• ActionScriptって？
• ターゲットの設定
• ボタンでメーラーを開く

今日のサンプル

まず最初に、今日の完成図を見てみましょう。先週、作ったキノコボタンを使って制作していきます。
このキノコボタンをクリックすることで、ブラウザの新しいウィンドウを開いて、TBSのトップページへジャンプするボタンを制作します。

完成サンプル：btn03.swf クリックするとTBSのホームページが開きます。ローカル環境からのテストでは、セキュリティ設定が表示されるのでコラム最後の注意を参照してください。

ボタンで外部サイトへリンクする

サンプルファイルをダウンロードしてはじめましょう。前回に続いて操作する人は、前回のサンプルファイル「btn01.fla」を使ってもオッケイです。今回からチャレンジする人は、今回のサンプルファイル内にある「btn01.fla」が同じものです。Flash CS4でファイルを開いておきます。

ステージ中央に配置されているボタンオブジェクトを選択した状態で、［アクション］パネルをオープンします（パネルは、メニューバーから［ウィンドウ→アクション］を選択すると前面に表示されます）。

 

 

［アクション］パネル

［アクション］パネルの右上にある［スクリプトアシスト］をクリックします。

 

 

［アクション］パネルの［スクリプトアシスト］

 

まず、ステージではボタンが選択されているのを確認し（選択が外れていたらクリックで選択してから）、左横の［＋］ボタンをクリックします。ここで開くメニューから［グローバル関数—ブラウザ／ネットワーク—getURL］を選択します。

［アクション］パネルで、メニューを選択

 

下欄にプログラム文が入力されました。

アクションが追加された

 

［URL］にTBSのURL（http://www.tbs.co.jp/）を入れてみましょう。キーボードから半角英数字でURLを入力します。

 

アドレスを入力すると、下欄にもURLが追加されている

 

Flash Playerのセキュリティ設定

ここまでのファイルをパブリッシュしてブラウザ上で確認してみましょう（パブリッシュ方法については第1回の連載をチェックしてください）。今回のFlashムービーはパブリッシュをしないと動きませんので、注意してください。

ここまでの完成した状態のファイルはサンプルファイルの「btn03.fla」、パブリッシュ後のファイルは「btn03.html」と「btn03.swf」です。

早速、ボタンをクリックしてみましょう。するとリンク先ホームページが開かずに、下のような英語の警告ダイアログが表示されると思います。これは、サーバにアップロードしていないFlashムービーではセキュリティ設定が必要なためです。まず［Settings...］ボタンをクリックしましょう。

 

すると、ブラウザが開いて次の画面が表示されます。

 

Flash Player設定マネージャ画面

 

Flashはセキュリティの問題上、ローカル（自分のPC）に置いたファイルからインターネット上のファイル（サイト）にリンクすると警告が出るようになっています。そこでこの「コンテンツ制作者のためのグローバルセキュリティ設定」内の「Adobe Flash Player 設定マネージャ」で、書き出したswfファイルを指定し、安全であることを確認します。

以下、図に従って、［編集］プルダウンメニューの［追加］を選択し、［ファイルを参照］でサンプルファイル「btn01.swf」を指定します。完成ファイルを使用する場合は、「btn03.swf」を指定します。

［編集—追加］をクリック

 

［ファイルを参照］をクリック

 

先ほど開いたファイルを選択し、［Select］ボタンをクリック

 

ファイルが追加されたことを確認し、設定完了

 

以上で設定は完了です。

パブリッシュしたボタンを再度、クリックしてみると、今度は無事TBSのホームページが開きボタンにリンク機能がついたことが確認できたでしょうか？ リンクボタンの作成は、これで完了です。

 

ActionScriptって？

実は、「ボタンをクリックするとTBSのホームページへジャンプする」といった、［アクション］パネルで作った命令文がActionScript（アクションスクリプト）なのです。
ActionScriptとは、ボタンなどの外部リンクやFlashムービーのコントロールなどができる、Flashのために開発されたプログラム言語です。
ActionScriptを覚えることで、インタラクティブなFlashムービなどの制作が可能になり、Flash制作の幅が広がります。
プログラムということで、若干取っ付きにくく感じる方もいるかと思いますが、ステップを踏んでゆっくりと覚えていきたいと思います。

 

今日のアクション

「getURL」

今回入力したアクションは以下のとおりです。

on (release) {
getURL("ここにURLを入力");
}

on(release)というのは、「ボタンをクリックしたら」という意味だと思っていてください。そのあとに、括弧（{ }）がありますね。この{ }の間に入っている命令を、ボタンをクリックしたら実行してください、というルールになっています。

今回は、「getURL」という命令を入れました。この命令は他のページ（サイト）へのリンクやメールソフトを起動させること等ができる命令です。

まさに「URLをゲットしなさい！」と思ってもらってOKです。

 

ターゲットの設定

さて、今回はキノコボタンをクリックすることで、キノコボタンが表示されているブラウザのウィンドウは残しつつ、TBSのホームページは新規ウィンドウを立ち上げて表示するという命令を書きたいと思っていますので、このままですと同じウィンドウ内でリンクされてしまい、キノコボタンのウィンドウが消えてしまいます。
これをクリアするには、再び［アクション］パネルに戻り、スクリプトペイン（命令が書いてある画面）のgetURLを選択します。

 

ウィンドウからプルダウンで、_blankを選択します。

［アクション］パネルの画面で_blankを選択

getURLの中に「_blank」が入りました。

［アクション］パネルの画面

Flashファイルをパブリッシュし直して、再度、ボタンをクリックしてリンクがどうなるかを確認して確認してみましょう。今度は、キノコボタンをクリックすると新規に別のウィンドウが開いて、TBSのホームページが表示されるはずです。

ブラウザ上の表示

 

この"_blank"はターゲット指定といって、たとえば今回のように新しいウィンドウにページを表示させたりできる機能です。ターゲット指定はHTMLの知識なので、ここでは詳しい説明は行いませんが、getURLで指定できるターゲットは以下になっています。

_self：フレーム指定をしている場合、swfが読み込まれているページに、リンク先の内容が表示される。
_top：フレーム指定をしている場合、ブラウザに表示されているページすべてに、リンク先の内容が表示される。
_parent：フレーム指定をしている場合、swfが読み込まれているページの親フレームに、リンク先の内容が表示される。

また、フレーム作成時に指定した任意のフレーム名へのリンク表示指定も可能です。

二回にわたってボタン機能を勉強してきましたが、とにかく習うより慣れろです。
いろいろとボタンを作って実践してみて下さい。

さて次回からは、ムービーをコントロールできるFlashテレビを作ってみたいと思います。
ではまた次回！

 

にわとり助手による応用編

「getURL」はホームページ以外にもURLを使ったものを開くことができるので、ここではメールソフトのオープンする方法をおまけに紹介しましょう。

今度は同じgetURLを使用して、メールソフトを自動でオープンし、かつ送信アドレスが書かれた新規メール制作ウィンドウを開くといった動作を行えるボタンを作ります。
この命令もgetURLの内容をちょっと書き換えるだけです。

完成サンプル：btn04.swf

ボタンを選択した状態で［アクション］パネルを開き、先ほどの［URL］欄にメールアドレスを入力します。

［URL］欄にメールアドレスを入力

これでパブリッシュし、ブラウザ上でボタンをクリックすると、メールソフトが起動し、メールアドレス（ここでは仮のdigidgi@concon66.comというアドレス）が送信先に入った新規ウィンドウが開くことができます。