Rookie'sFlashLaboratory
Homeへもどる
PHASE09 ドロップダウンメニュー
FreeMotion2でのドロップダウンメニューです。

ActionScriptを使うのでかなり複雑に感じられるかもしれませんが、ActionScript自体は
理解していただかなくても、問題ありません。

サンプルをダウンロードしてActionScriptをコピーアンドペーストしてくださってかまいません。

サンプルは、「DropDown1」の上にカーソルを乗せるとメニューが降りてくる、というものです。

構成としましては、
「DropDown1(灰色)」は画像をムービークリップにしただけの物。
「DropDown1(黄色、ドロップダウンメニュー)」はムービークリップにボタンを配置して作ります。


原因不明ですが、文字の形が崩れております・・・。



1
まず、「DropDown1」の画像を配置します。
これを、右クリックメニュー「シンボルに変換」で
「ムービークリップ」に変換します。

画像のままではActionScriptが記述できないためです。

複数のドロップダウンメニューを作る場合、
各シンボルは、全て別レイヤーで作ると無難です。

ちなみに、ボタンに見えますが、ボタンではありませんのでご注意ください。

ここではこれを便宜上、「ボタンA」と呼びます。
でも、くれぐれも、ボタンではありませんよ・・・。


2
次にドロップダウンメニューの作成です。
「挿入」メニューの「新しいシンボル」を選択し「ムービークリップ」で作ります。
ここではこれを便宜上、「メニュー」と呼ばせていただきます。

上から降りてくるボタンを、同じく「挿入」−「新しいシンボル」を選択し
「ボタン」で作ります。
これを3つ作ります。

作ったボタンを、ムービークリップに配置します。
右画像を参考にしてください。

一番上の黄色い「DropDown1」の画像の裏から、
各ボタンが定位置にくるようにします。
これは、モーショントゥーンで動かします。

各ボタンシンボルは別レイヤーで配置した方が無難だと思います。

最後にレイヤーをひとつ追加して、
一番最後のフレームにキーフレームを作ります。
そこに、アクションスクリプトウィザードボタンから、停止を選択します。


3
作成した「メニュー」を配置します。
1で配置したシンボルの上に2で作成したメニューを配置します。

これもすべて、別レイヤーで配置した方が無難でしょう。


4
さらにひとつレイヤーを追加します。
これはActionScript専用レイヤーです。
このレイヤーの1番最初のフレームにある「キーフレーム」を選択します。

「アクションウィザード」に下記のActionScriptを記述します。

if (isLoaded == undefined)
{
    var0 = 0;
    pathThis = targetpath(this);
} // end if
isLoaded = true;
stop ();

ページロード時に変数を入れる入れ物を用意する、という具合にお考えください。


5
次に1で配置した「ボタンA」にActionScriptを記述します。
上に乗っかっている「メニュー」はレイヤーを非表示にすれば見えなくなります。

onClipEvent (load)
{
    _hover = false;
}
onClipEvent (mouseMove)
{
    if (hitTest(_root._xmouse, _root._ymouse, true))
    {
        if (_hover == false)
        {
            _hover = true;
            _root.var0 = 1;
        } // end if
    }
    else if (_hover == true)
    {
        _hover = false;
    } // end else if
}

マウスカーソルが「ボタンA」の上に来た時に変数(var0)に1をセットする。
みたいなことが書かれています。


6
次に2で作成した「メニュー」にActionScriptを記述します。

onClipEvent (load)
{
    _hover = false;
    if (_root.var0 == 1 ? (0) : (1))
    {
        if (_visible == true)
        {
            gotoAndStop(1);
        } // end if
        setProperty("", _visible, false);
    }
    else
    {
        if (_visible == false)
        {
            gotoAndPlay(1);
        } // end if
        setProperty("", _visible, true);
    } // end else if
}
onClipEvent (mouseMove)
{
    if (hitTest(_root._xmouse, _root._ymouse, true))
    {
        if (_hover == false)
        {
            _hover = true;
        } // end if
    }
    else if (_hover == true)
    {
        _hover = false;
        _root.var0 = 0;
    } // end else if
}
onClipEvent (enterFrame)
{
    if (_root.var0 == 1 ? (0) : (1))
    {
        if (_visible == true)
        {
            gotoAndStop(1);
        } // end if
        setProperty("", _visible, false);
    }
    else
    {
        if (_visible == false)
        {
            gotoAndPlay(1);
        } // end if
        setProperty("", _visible, true);
    } // end else if
}

変数(var0)が1の時に表示して、
マウスカーソルがはずれた時に変数を0にして非表示にする、
みたいなことが書かれています。


7
複数のドロップダウンメニューを配置する場合は、5、6のActionScriptの
赤色の数字を、2、3、と変えていってください。

ついでに3つドロップダウンメニューを配置したものも作りました。
もしよろしければ、ご参考にしてください。






今回の解説を読まれて、
「お、こんな複雑なActionScriptが作れるんだ。頭いい〜」
なんて思われた方、スミマセン、大ハズレです。

このドロップダウンメニューは、いったんFlashMaker3で作ったものを
FreeMotion2で読み込み、解析し、余計な部分を削ったりしただけです。
ゴメンナサイ、こんなActionScriptが書けるほどの知識はありません、ワタシ・・・。

ちなみに、FlashMaker3で3つのドロップダウンメニューを配置したフラッシュを作った場合と、
FreeMotion2で同じ物を作った場合、ファイルサイズにずいぶんな違いがあることに気がつきました。
FlashMaker3が18.0KBで、FreeMotion2が3.45KBでした。
なんなんでしょう、この開きは・・・。


 
Copyright (C) 2008 森静四郎, All rights reserved.