2011年09月27日

ホームページで使えるメニューをつくる

KoolMovesのサポートで、Necromanthusを開くとサンプルが大量にあります。

この中に、ホームページのメニューに使えそうなものがありました。

KOOLMOVESのMISCELLANEOUSに、Communicationというサンプルです。

ここに、SenderとReceiverがありますが、このうち、Senderのほうを書き換えるてメニューにしてみました。

サンプルでは、Senderで、クリックすると、Receiverに文字が反映するのですが、そこを書き換えて、クリックで、リンクに飛ぶようにします。

KoolMovesのDynamicTextは日本語に対応していないようなので、たぶんReceiverは無理と思うのですが、Senderだけ使用して、メニューをつくることができました。

この場合、SenderでもDynamicTextを使用しているのですが、ここにはTextを使用します。

最初に、ムービーのサイズを決定します。

メニューがぎりぎり入るサイズで良いと思いますが、ここに貼り付ける関係上380 x 40としました。

右下のFrame Durationは0tweenにします。

ボタンは、高さがムービーサイズの高さより少し小さい長方形としました。

オプションで、Snap to GridをOnにして、書くと書きやすいです。

後から動いてくるアンダーバーのためにコピーをひとつ作っておきます。
これは、Movie Clipに変更して、myMenuLineとリネームします。

次にボタン用の長方形を選択して、Convert to Movie Clipを実行します。

プロパティで、Framesをクリックします。

ボタンの長方形を選択して、Line widthを0にします。

また、Color/fillでGradient Colorにして、左側の白を灰色として中間に移動します。
右側の色は、48,207,207(水色)としました。

Shape Fillの左下、で90度回転し、OKボタンを押します。

Textでボタンいっぱいに、リンク先を表示する文字を書きます。

文字とボタンを選択して、Score/Timelineでフレームを1個コピーして、フレーム2とし、8 tweenに変更します。

フレーム2をコピーして、フレーム3にして、水色をピンクに変更します。

フレーム3をコピーして、フレーム4にし、0 tweenに変更します。

フレーム4をコピーして、フレーム5、フレーム6とします。

フレーム6を8 tweenとして、フレーム6をコピーし、フレーム7とします。

フレーム7のボタン(長方形)を選択し、ピンクを水色(48,207,207)にします。

フレーム7をコピーして、フレーム8とし、フレーム8を0 tweenとします。

ムービーオーバービューを表示し、フレーム1と4のアクションを
Stop();
として、フレーム8のアクションは、
gotoAndStop(1);
とします。

Main Movieに戻り、ムービークリップにアクションを以下のように設定します。
onClipEvent(rollOver) {
this.gotoAndPlay(2);
_root.myMenuLine.xPosition = this._x;
}
onClipEvent( rollOut) {
this.gotoAndPlay(21);
}

on (release ){
getURL(url ,"_blank");
}


urlの部分に、リンク先のURLを記入します。

myMenuLineのアクションスクリプトは、
onClipEvent (load) {
var xSpeed = 10;
xPosition = _root.home._x;
}

onClipEvent (enterframe) {
this._x = this._x - (( this._x - xPosition ) / xSpeed);
}

とします。

ボタンは必要個数コピーして、名前とurlを変更して使用します。


posted by hirano at 16:23| 埼玉 ☔| Comment(0) | TrackBack(0) | Koolmoves | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。