たびたび失礼致します。
http://oshiete1.goo.ne.jp/qa2544902.html
および
http://oshiete1.goo.ne.jp/qa2555710.html
でお世話になりました。おかげさまで、FLASHのほうも完成しました。
さて、この度、上記のスクロールメニューの続きで、新たにどうしても分からない事が出てきてしまい、困っております。
スクロールメニューのボタンなんですが、パネル部分の動きと連動させて、ボタンがキラっと光るような演出(yahoo10周年サイトのFLASHみたいなやつです)をしたいのです。
このような演出はどのようにすればよいのでしょうか?
どうか、ご教授下さいますよう、よろしくお願い申し上げます。
No.1ベストアンサー
- 回答日時:
そのご質問は,
「Yahoo! JAPAN - ありがとう10周年」
http://10thann.yahoo.co.jp/
のご質問だと考えて良いわけですよね。
Yahoo! 10周年 のボタンは,
ムービークリップで作られているのです。
最近多いですよ,ムービークリップで作る自作ボタンというものです。
ボタンをムービークリップで作る方が手間ですが,
ずっとカスタマイズしやすいので,面白いボタンが色々作れます。
スクリプトの説明は簡単なのですが,
構造の作成が出てきますからココでは難しいです。
ですから,
これまた簡単なサンプルの作り方を説明します。
4枚の動くスライドはすでにできてあるという状態で,
ボタンムービークリップの作成からです。
まずボタンの大きさ程度の,塗りの入った長方形を描きます。
■■■■■■■
■□□□□□■
■■■■■■■
そして目印に,真ん中に「1」でも書いて下さい。
■■■■■■■
■□□ 1□□■
■■■■■■■
この文字入り長方形をムービークリップに変換します。
変換したらダブルクリックで,ムービークリップ内の編集に入ります。
ムービークリップ内のタイムラインは,
次のような状態になっていると思います。
レイヤー 筆・・|●|
これを3フレームにします。
レイヤー 筆・・|●//[]|
そして,各フレームをすべてキーフレームにします。
レイヤー 筆・・|●|●|●|
ここまでで,全てのフレームには,すべて同じ長方形が入っていると思いますから,
フレーム2 の長方形の文字を 2,
フレーム3 の長方形の文字を 3 にそれぞれ変えます。
つまり,それぞれのフレームには,
---フレーム1---
■■■■■■■
■□□ 1□□■
■■■■■■■
---フレーム2---
■■■■■■■
■□□ 2□□■
■■■■■■■
---フレーム3---
■■■■■■■
■□□ 3□□■
■■■■■■■
という文字入り長方形が書かれているわけです。
1,2,3 は
今ムービークリップ内はどのフレームを表示しているか
という単なる目印です。
この フレーム3 を他のボタンに移ったときのアニメーションフレームにしたいと思うので,
■■■■■■■
■□□ 3□□■
■■■■■■■
これをさらにムービークリップに変換してください。
変換したら,
そのフレーム3のムービークリップをダブルクリックして,
ムービークリップ内の編集に入ります。
ムービークリップ内のタイムラインは,
次のような状態になっていると思います。
レイヤー 筆・・|●|
これを,だいたい 10フレーム くらいにしてください。
だいたい 10フレーム です。
何フレームでもかまいません。
だいたい 10フレーム にしたら1つレイヤーを追加して,
2レイヤーにし,その新しく作った方の最終フレームをキーフレームにします。
雰囲気,次のような感じです。
レイヤー 筆・・|○ []|○|
レイヤー 筆・・|●/////////////[]|
そして,
最終フレームの空白キーフレームに
----------------------------
this._parent.gotoAndStop(1);
----------------------------
というスクリプトを書いておきます。
要はこのムービークリップが最後のフレームまで再生されたら,
自分の親(_parent)であるムービークリップ,
つまり 「1」「2」「3」 という長方形が3フレームにあるボタンムービークリップのタイムラインを,
フレーム1 に進めるということです。
できたら,ムービークリップ内の編集は終わりで,
メインムービーの編集に戻ります。
ステージ上には,
上のボタンムービークリップができていると思いますから,
例えば,ボタンが4つあった場合,
そのムービークリップを縦にコピペして4つにします。
複数フレーム の ボタン用ムービークリップ を用意して,
そして上から順に,
「buttonMC0」「buttonMC1」「buttonMC2」「buttonMC3」
という感じにインスタンス名を付けます。
次にフレームのスクリプトです。
Yahoo! 10周年 の場合は,
自動で他のボタンにフォーカスが変わるときに,
徐々に暗くなるムービークリップを入れた フレーム ,
つまりボタンムービークリップの フレーム3 に移動するように作られています。
この徐々に暗くなるムービークリップと,
キラッと光るムービークリップを入れたフレームに移動するムービークリップの両方に,
フレーム移動の命令を与えなければならないので,
フラグ(flg)を1つ増やして2つにしなければなりません。
全体的には,前のスクリプトとほとんど変わりませんが,
その他,改良した点には,★印をいれています。
------------------------------------------
//スピードの設定(可変)
var spd = 3/10;
//
// フラグの初期値を設定 ★
var flg0 = 0;
var flg1 = 0;
//
// 各変数の初期値を代入(目標座標を記録)
var slideY0 = slideMC._y;
var slideY1 = slideMC._y-(slideMC._height/4);
var slideY2 = slideMC._y-(2*slideMC._height/4);
var slideY3 = slideMC._y-(3*slideMC._height/4);
//
// 最初だけ buttonMC0 を フレーム2 へ移動 ★
_root.buttonMC0.gotoAndStop(2);
// 1フレーム進む時間ごとに毎回実行
_root.slideMC.onEnterFrame = function() {
// slideMC の y座標を slideY? に近づける
this._y += (_root["slideY"+_root.flg0]-this._y)*_root.spd;
};
//
// ユーザー定義関数 slideMove の定義
function slideMove() {
// flg1 に flg0 の値を保存 ★
_root.flg1 = _root.flg0;
// flg0 の 値が 3 より小さければ
if (_root.flg0<3) {
// flg の値に 1 を加算
_root.flg0++;
} else {
// それ以外の場合は flg を 0 にする。
_root.flg0 = 0;
}
// buttonMC のフレーム移動 ★
_root["buttonMC"+_root.flg0].gotoAndStop(2);
_root["buttonMC"+_root.flg1].gotoAndStop(3);
}
// ユーザー定義関数 slideMove2 の定義 ★
function slideMove2() {
// buttonMC のフレーム移動 ★
_root["buttonMC"+_root.flg0].gotoAndStop(2);
_root["buttonMC"+_root.flg1].gotoAndStop(3);
}
//
//--- ココから以降を変更 ---
// ユーザー定義関数 myfunc の定義
function myfunc() {
// 4000ミリ秒(4秒)ごとに slideMove を実行
myID = setInterval(slideMove, 4000);
}
// ユーザー定義関数 myfunc の実行(初回)
myfunc();
------------------------------------------
そして,
一番上の 「buttonMC0」 には次のように書きます。
------------------------------------------
// このムービークリップが表示されたとき
onClipEvent (load) {
// とりあえずストップ
this.stop();
}
//
// このムービークリップにロールオーバーで
on (rollOver) {
// このムービークリップを フレーム2 に進める
this.gotoAndStop(2);
// setInterval のクリア
clearInterval(_root.myID);
// flg1 に flg0 の値を保存
_root.flg1 = _root.flg0;
// flg0 に 0 (自分の番号) を代入する
_root.flg0 = 0;
// ユーザー定義関数 slideMove2 の実行
_root.slideMove2();
}
//
// このムービークリップからロールアウトで
on (rollOut) {
// ユーザー定義関数 myfunc の実行
_root.myfunc();
}
on (release) {
//←何か動作を書く
}
--------------------------------------------
二番目の 「buttonMC1」 には次のように書きます。
--------------------------------------------
// このムービークリップが表示されたとき
onClipEvent (load) {
// とりあえずストップ
this.stop();
}
//
// このムービークリップにロールオーバーで
on (rollOver) {
// このムービークリップを フレーム2 に進める
this.gotoAndStop(2);
// setInterval のクリア
clearInterval(_root.myID);
// flg1 に flg0 の値を保存
_root.flg1 = _root.flg0;
// flg0 に 1 (自分の番号) を代入する
_root.flg0 = 1;
// ユーザー定義関数 slideMove2 の実行
_root.slideMove2();
}
//
// このムービークリップからロールアウトで
on (rollOut) {
// ユーザー定義関数 myfunc の実行
_root.myfunc();
}
on (release) {
//←何か動作を書く
}
--------------------------------------------
以下同様で,つまり,
// flg0 に 1 (自分の番号) を代入する
_root.flg0 = 1;
ココの部分が,
「buttonMC2」 だと
// flg0 に 2 (自分の番号) を代入する
_root.flg0 = 2;
「buttonMC3」 だと
// flg0 に 3 (自分の番号) を代入する
_root.flg0 = 3;
となるだけで他は同じです。
これで,パブリッシュしてもらうと,
スライドが動き,ボタンの数字が変わるものができます。
4つある「buttonMC○」の
キラっと光るのはフレーム2です。
↓キラっ
レイヤー 筆・・|●|●|●|
現在は 「2」が表示されるだけですが,
この「2」のようなものをフレーム3と同様にムービークリップに変換して,
その中にキラっと光らせるアニメーションを作れば良いだけです。
この辺は Flash のお絵かきやモーショントゥイーンの基礎に当たる部分ですから,
ここでは逐一説明しにくいです。
フレーム2 ムービークリップの中にさらにムービークリップを入れて,
そのムービークリップの「明度」を明るい状態から,中間くらいの明るさにモーショントゥイーンさせるなどです。
最終フレームは,
this.stop();
でしょう。
フレーム3 も同様。
フレーム3 ムービークリップの中にさらにムービークリップを入れて,
そのムービークリップの「明度」を中間くらいの明るさから,暗い明るさにモーショントゥイーンさせるなどです。
以上,わかりにくい点もあったとは思いますが,
まるごとそのまま,Yahoo! 10周年 のそっくりなボタンの作り方です。
もっともそっくり真似をする必要はありませんし,
できれば真似はしない方が良いと思います。
どうするかは,Yahoo! 10周年 にとらわれず,自分なりに研究してみてください。
ムービークリップをボタンとして扱っているサイトは数多いです。
ボタンシンボルのインスタンスでは物足りませんからね。
次のURLは,Yahoo! 10周年 とは全く別のボタンですが,
作り方が書いてありサンプルも置いてくれています。
ムービークリップのボタン化
http://homepage3.nifty.com/ginga-b/MX/btnmc.html
しかし,このURLを鵜呑みにする必要は全くありませんよ。
例えば,
> フレームラベル用のレイヤーを用意し、
> 「アップ」用のフレームには「_up」、
> 「オーバー」用には「_over」、
> 「ダウン」用には「_down」というフレームラベルを付けます。
とか書いてあります。
こうすると便利にボタンのように扱えますが,
この辺は全く無視していてかまいません。
この回答で書いたように,
普通のムービークリップのように扱えば良いのです。
重要なのは,最後の,
> ボタンムービークリップに記述される
> on ( event ) ハンドラ内では、thisキーワードは、
> 親ではなく自分自身を指します。
> 非常に混乱する仕様ですので、記述するときは
> 十分注意してください。
です。これは重要です。
---P.S.--------------------------
以前の質問で,
ボタンのスクリプトを,
on (release) {
_root.flg = 2;
}
などとして,
他もわざわざ _root など,絶対パスで書いたのはそのためです。
ボタンは階層をもちませんから,
on (release) {
flg = 2;
}
でも大丈夫です。
しかし,ひょっとしたら,
「質問者の方は,ボタンをムービークリップで自作しているか,将来的に自作する可能性があるぞ。」
と考えたので,わざと _root.flg = 2; にして,
もしその場合でも変な所で躓かないようにはしていたのです。
ムービークリップでボタンを自作する場合,
階層が1つずれますから,絶対パスで指定するか,
相対パスで指定する場合は,階層に気を付けてください。
アクションパネルの 丸(○) に十字(+)のアイコンの,
「ターゲットパスを挿入」ボタンをクリックして,
目的のダーゲットのパスを探しても良いです。
ここでは説明しにくい構造にあたる部分が多いです。
色々と実践研究してみてください。
回答いただきまして、大変有り難う御座います。
>Yahoo! 10周年 のボタンは,
>ムービークリップで作られているのです。
ムービークリップって色々な部分で使えるんですね。本当に勉強になりました。
ボタンで行き詰まる事を考慮して、何度も回答頂いた事に頭の下がる思いです。
yahoo10周年のような演出なんですが、ボタン部分を一目見て、見る人が「これはボタンだ」と分かるようにしてみたかったのです。
色々見て回るうちに、ちょうどyahoo10周年のFLASHにいきついて、こういった演出なら分かりやすいのでは?と思い作成に挑戦しようと思った次第です。
3度にわたる丁寧な回答を頂きまして、本当に有り難う御座います。
ボタンに関しては、ムービークリップだと色々できて面白いとの事ですので、ぜひ研究実施を重ねていきたいと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript [Java] Edgeでのアドレスバー非表示について 3 2022/04/20 17:51
- Visual Basic(VBA) 【ExcelVBA】動的にボタン、ボタン名を生成できますか? 7 2022/04/08 12:54
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- マルウェア・コンピュータウイルス FlashPlayerの削除とマルウェア感染について 5 2023/02/23 20:52
- その他(コンピューター・テクノロジー) PC利用中に勝手に起動する窓を消し去る方法を教えて下さい。 1 2023/05/08 16:48
- 教えて!goo ベストアンサーの選び方がわかりません。 回答してくれた方がいらっしゃいます。 しかし画像のようにお礼 1 2022/11/26 22:46
- ノートパソコン シャットダウンを止めるには 1 2022/09/11 14:36
- InternetExplorer(IE) Edge でマウスの真ん中のボタン(ミドルボタン)を押すと、スクロールするのを無効にしたい 2 2023/06/11 05:05
- SSL・HTTPS 知恵袋ページの私的な不具合について 7 2023/01/07 18:46
- ブルーレイ・プレーヤー・レコーダー 学習リモコンSONY RM-PLZ430Dについて 4 2023/05/07 11:26
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
スマホでサイトの画像を長押し→...
-
arduino プログラムについて
-
uwscでExcelに自動記入
-
Giam
-
laptop go2からの買い替え、lap...
-
私のコンピューター上のファイ...
-
Flashコンテンツを使ったWebサイト
-
Flashをブロックしないで
-
Adobe Flash Player
-
Windows10重い
-
パソコンのリカバリーについて
-
ロック画面に天気を表示したい
-
Adobe(マクロメディア)のFLAS...
-
adobe flash playerは無料です...
-
自分でチラシを作りたいです!...
-
ヘッダーデザインをするさい形...
-
FLASH MX で作成した、flashやA...
-
この曲のタイトルを教えてください
-
Flash MXで作成したフラッシュ...
-
キャラクター設定について
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
スマホでサイトの画像を長押し→...
-
Form内のselectを連動させるに...
-
arduino プログラムについて
-
フラッシュゲームアーカイブ2
-
ウェブサイトで Flash が事実上...
-
私のコンピューター上のファイ...
-
ダウンロードしたデジブックはa...
-
uwscでExcelに自動記入
-
レジリエンス 変換キーが作動し...
-
potplayerについて質問です
-
flash (.swf) を編集したい
-
chrome flash
-
VBAのコンボボックスの年月表示...
-
Flashplayerの運用について
-
iPhoneです。 Adobeフラッシュ...
-
自分でチラシを作りたいです!...
-
adobe flashのページが一回で表...
-
この曲はなんでしょう?
-
ヘッダーデザインをするさい形...
-
Excel VBAについて。
おすすめ情報