« クリックでスライド表示するコンテンツ | トップページ | JavaScriptでアコーディオンメニュー »

2007.12.17

auサイトのようなアコーディオンメニュー

Flash モーションライブラリ|Google Tweener

また今月のWeb creatorsからの使えそうなテクニックを…。
今度は、auのオフィシャルサイトで使われているようなFlashを使ったアコーディオンメニューが簡単に作れるモーションライブラリを紹介してみます。
Flashコンテンツ制作者なら、一度は作ってみようと思ったり、クライアントから要望された経験があるのではないでしょうか?でも実は、矛盾のでないようにスクリプトを組むのが思いの外難しかったりします。…僕も凝った仕組みは作れません。
しかし、Google codeの「Tweener」というライブラリを使えば、あら不思議?! 簡単に作れてしまいます。

サンプルはこんな感じです。

↑このFlashデータはこちらからダウンロードできます。

方法です。
「Tweener」のページからtweener_1_26_62_as2.zipをダウンロードして、中に入っている「caurina」というディレクトリごとFLAファイル(swf)と同じ階層におきます。
Flash本体は、各パネルのMCを作り、ステージ上の適当な位置に配置。_rootの1フレーム目に以下のActionScriptを記述します。

/*ライブラリ読込*/
import mx.utils.Delegate;
import caurina.transitions.Tweener;

/*トゥイーンをさせる関数*/
function tw(_x1:Number,_x2:Number,_x3:Number,_mc1:MovieClip,_mc2:MovieClip,_mc3:MovieClip):Void{
    Tweener.addTween (_mc1,{_x:_x1,_y:0,time:1,transition:"easelnOutCubic"});
    Tweener.addTween (_mc2,{_x:_x2,_y:0,time:1,transition:"easelnOutCubic"});
    Tweener.addTween (_mc3,{_x:_x3,_y:0,time:1,transition:"easelnOutCubic"});
}

/*パネルごとの動作*/
// パネル01
panel01_mc.onRollOver = Delegate.create (this,function():Void{
    tw (0,300,320,panel01_mc,panel02_mc,panel03_mc);   
});
// パネル02
panel02_mc.onRollOver = Delegate.create (this,function():Void{
    tw (0,10,320,panel01_mc,panel02_mc,panel03_mc);   
});
// パネル03
panel03_mc.onRollOver = Delegate.create (this,function():Void{
    tw (0,10,30,panel01_mc,panel02_mc,panel03_mc);   
});

上のスクリプトは例ですので、データを参考にカスタマイズして下さい。
ActionScriptに詳しい方なら、タイマーを設置して、時間が来ると自動的に次のパネルを表示するコトもできると思います。

|

« クリックでスライド表示するコンテンツ | トップページ | JavaScriptでアコーディオンメニュー »

コメント

サンプルをダウンロードして、Flaデータを参考にさせていただこうと思っていたのですが
(本とこちらを参考にさせていただいてますが/*トゥイーンをさせる関数*/でスクリプトエラーがでるのです)
Flash MXとMX 2004で試しましたが開けません。
何で開けばよいのでしょう?

投稿: citron | 2008.03.13 13:56

citronさん、コメントありがとうございます。

Flashのサンプルは、Flash 8で作っていますので、以前のバージョンでは開けません。
また、今回のサンプルはFlash Player 8以上でないと、スクリプトエラーを起こすようです。
ですので、MX 2004以前のバージョンでは使えないと思います。。
…お力になれず、申し訳ございません。

投稿: exyz | 2008.03.13 14:49

たびたび失礼いたします。
exyzさんのコメントをいただき、あれからAdobe Flash CS3 Proで上記フラッシュを作成し、うまく動作させることができました。ありがとうございました。
一点お伺いしたいのですが、上記の各パネルにリンクをつける際の手順を教えていただきたく再度コメントいたしました。

透明ボタンで試してみたのですがボタンを動かすことは(当然)できなく、リンクも最上位のパネルのリンクしかリンクさせることはできませんでした。
何か助言いただければと思います。
お忙しいところ申し訳ありませんがよろしくお願い致します。

投稿: citron | 2008.03.26 10:10

citronさん、コメントありがとうございます。

間が空いてしまい申し訳ないです。
実は体調を崩し、3/24から10日程入院していました。
まだまだ本調子でなはないので、しばらくお待ちいただけますか?
申し訳ございません。

投稿: exyz | 2008.04.03 14:12

citronさん、回答が遅くなりました。

Flash CS3で制作されたというコトですが、ActionScript3.0でパブリッシュしていませんか?

ActionScript3.0からは、ボタンアクション、ムービークリップアクション、イベントハンドラメソッドが廃止になったようです。
AS3.0でやるなら、addEventListener()メソッドを使ってイベントリスナーを登録するという方法をとらなければいけません。

簡単にやるなら、パブリッシュの設定をAS2.0にすれば、ムービークリップアクションが使えるので、今まで通りの方法でできると思います。

※ウチの環境はまだFlash 8なので確認はできませんが…。

投稿: exyz | 2008.04.07 08:23

exyzさんありがとうございます。
exyzさんに教えていただいた方法をもとにやってみますね^^
それからお体を崩されていたとのこと。そんな中お伺いしてしまい本当に申し訳ありませんでした。
お体ご慈愛くださませ。

投稿: citron | 2008.04.11 15:09

はじめまして。

上記のサンプルFLAファイルをダウンロードして
参考にさせていただきました。

ありがとうございます。

実は、これにリンクを付ける時の手順がわかりませんので教えていただけたら幸いです。

flash8 professionalです。

よろしくお願いします。

投稿: Iceman | 2009.01.16 16:04

Icemanさん、コメントありがとうございます。

前にもcitronさんという方から質問されましたが、Flash8ならAS2.0ですので、それぞれのパネルMCにムービークリップアクションを記述するのが、一番簡単だと思います。

具体的には、該当するムービークリップを選択した状態でアクションパネルを開き、下記のように記述して下さい。
on(release){
getURL('xxx.html',"_top");
}

※この時、リンクするhtmlの階層とターゲット属性に注意して下さい。

投稿: exyz | 2009.01.16 17:40

exyzさんありがとうございます。
教えていただいたことを
試してみたところリンク出来ました。

また、質問があったらコメントさせていただきますので
よろしくお願いします。

投稿: iceman | 2009.01.17 15:52

Icemanさん、コメントありがとうございます。

ムービークリップアクションでhtmlファイルにリンクさせるのは、ActionScriptの初歩の初歩です。
AS2.0以前の参考書には必ず載っているハズです。

ActionScriptは敷居は低いですが、奥は深く果てしないので、何冊か参考書を購入して自分で勉強してみる事が大切ですよ。
そうしないとなかなか身に付かないと思います。頑張って下さい!

投稿: exyz | 2009.01.17 21:21

はじめまして。
上記のサンプルですが、非常に勉強になりました。

一点確認ですが、
---
panel01_mc.onRollOver = Delegate.create (this,function():Void{
tw (0,300,320,panel01_mc,panel02_mc,panel03_mc);
});

panel01_mc.onRollOver = function(){
tw (0,300,320,panel01_mc,panel02_mc,panel03_mc);
}
---
と、変更しても問題なく動作している様ですが、
Delegate.create を使っている理由は特にありますでしょうか?
よろしくお願いいたします。
(Delegate.createの使い方自体がいまいちわからず。。)

投稿: sasaki | 2010.01.11 00:05

sasakiさん、コメントありがとうございます。

Web creators 2008年 1月号を参考に作りましたので、Delegate.createの意味は良く分かっておりません。

…ご希望のお答えができなくて、すいません。

投稿: exyz | 2010.01.11 21:41

はじめまして。
サンプルですが、とても参考になりました!

ひとつ質問なのですが、FLASHからマウスアウトした後を初期状態に戻すことはできますか?

たとえば、上記サンプルの場合「sample02」を表示させた状態でマウスアウトすると、そのまま「sample02」が表示された状態になります。

こちらを、同ブログ内にあります下記URLのサンプルのように、マウスアウト後には初期状態のレイアウトに戻すことはできるのかと思いまして(^-^;

http://exyz.cocolog-nifty.com/good_sleep/2007/12/javascript_df4d.html

宜しくお願いします。

投稿: s78 | 2010.06.09 02:51

s78さん、コメントありがとうございます。

ご要望の物とは違うかもしれませんが、下記のページにどなたかが改良された「一定時間が経過した後に、次のパネルに自動的に遷移する」サンプルが載っています。

ご参考にされてみてはいかがでしょうか?

http://oshiete.goo.ne.jp/qa/4766273.html

投稿: exyz | 2010.06.09 15:16

はじめてコメントします。
ムービークリップアクションでhtmlファイルにリンク
ですが、書かれている通り ムービークリップに書きましたが
on(release){
getURL('xxx.html',"_top");
}
飛びません。
アドビフラッシュCS3 では違うのでしょうか?

投稿: apple | 2010.06.26 21:32

appleさん、コメントありがとうございます。

> アドビフラッシュCS3 では違うのでしょうか?

…という事ですが、ActionScript2.0でパブリッシュしているのなら、ムービークリップアクションは使えるハズなんですが。

リンクするhtmlの階層が間違っていませんか?
swfファイル自身ではなく、swfファイル置かれているhtmlから見ての階層になるので、ご注意ください。

投稿: exyz | 2010.06.27 18:16

ご回答まことにありがとうございます。確かに
設定は2.0です。

それに絶対パスを入れました。
on(release){
getURL('http://www.google.co.jp/',"_top");
}
コンパイルエラーで
マウスイベントはボタンインスタンスでのみ使用できます。
と出ます。
ムービークリックのボタン化が必要なのでしょうか?
いまいちそれも分からなくて。
ムービークリップを選択した状態でアクションパネルを開いて
記述と書かれていたので、不思議に思いまして
投稿しました。ご面倒お掛けします。

投稿: apple | 2010.06.28 10:31

appleさん、コメントありがとうございます。

> コンパイルエラーで
> マウスイベントはボタンインスタンスでのみ使用できます。
> と出ます。

そのエラーが出るという事は、フレームアクションとして記述されたのではないでしょうか?

ムービークリップアクションとして記述して下さい。


> ムービークリックのボタン化が必要なのでしょうか?
> いまいちそれも分からなくて。

他の方にご質問を受けた際にも同じような事を書かせていただきましたが、ムービークリップアクションでhtmlファイルにリンクさせるのは、ActionScriptの初歩の初歩です。
AS2.0以前の参考書には必ず載っているハズです。
何冊か参考書を購入し、ご自身で勉強してみる事が大切です。

とりあえず、フレームアクション、ボタンアクション、ムービークリップアクションの違いが分かるくらいに勉強してみて下さい。
そうすれば必ず分かります。

投稿: exyz | 2010.06.28 18:48

exyzさんありがとうございます。
なるほど、自分ではムービークリップのつもりが、フレームに書き込んでいることに気づきました。お手数掛けました。

投稿: apple | 2010.06.29 17:51

はじめまして。やなと申します。
検索をしていてこちらのサイトにおじゃまさせていただきました。
仕事でWEBデザインをしているのですが、FLASHがあまり好きではなかったため今まで避けてきました。
ですが今回デザイン提案をしなければならず、いろいろ考えたらやはりFLASHを使わざるを得ないと判断にいたりました。ほんとに初心者的な質問となってしまいますが、こちらのFLASHアコーディオンなのですが、開いた一枚の画像の中にXMLで任意の数の画像とテキストを入れるような仕組みは取れるのでしょうか?
ひとつのスペースにXMLで任意の数の画像とテキストを入れるということはできると前にどこかで聞いて知っているのですが、アコーディオンの中にさらにアコーディオンみたいな形ができるのかどうかわかりません。
こんなこと聞いてしまって申し訳ございません。。。
アドバイスだけでもいただけたら幸いです。
よろしくお願いいたします。

投稿: やな | 2010.07.14 10:02

やなさん、コメントありがとうございます。

このブログは、手軽で便利だなと思ったWebのテクニック等を自分が忘れないように書いているだけの物ですので、申し訳ございませんが、本来ご質問は受け付けておりません。
まして今回のようなご質問は、当方が答える範疇を超えているのではないかと思います。

申し訳ございませんが、ご自身でお調べいただきたいと思います。


やなさんのプログラムに関する知識がどのくらいか分かりませんが、ActionScriptには、xmlを使わなくとも外部ファイルやテキストを読み込む方法がありますし、もう少しActionScriptの勉強をなさってみてはいかがでしょうか?

また、Javascript+cssでも、かなり凝ったアコーディオンメニューが作れますので、今回はそちらをご検討されても良いかと思います。

一応このブログでも外部ファイルを制御しているFlashコンテンツがありますので、ご参考までに下記に紹介させていただきます。

http://exyz.cocolog-nifty.com/good_sleep/2009/01/flash-40e7.html

http://exyz.cocolog-nifty.com/good_sleep/2008/06/xmlflash_11d6.html

http://exyz.cocolog-nifty.com/good_sleep/2008/03/xml_1f9e.html

投稿: exyz | 2010.07.15 11:00

アコーディオン利用させていただいております。
ありがとうございます。
パネルごとにタイムラインを設けいくつかのムービークリップに動きをつけてみました。それはいいのですが、ムービークリップに
htmlリンクをさせていないのに、アップさせてそれぞれのパネルでクリックが出来てしまい、404エラーが出てしまいます。
どうしてなんでしょうか?

投稿: bon | 2010.09.21 11:21

すみません、自己解決しました。
以前行ったものをコピーしてそれを土台に作っていたので
以前のムービークリップのasに書き込んだリンク先が残っていました。それで新しいサイトにそのURLがないので、エラーが出たというわけです。

投稿: bon | 2010.09.21 21:00

bonさん、コメントありがとうございます。

自己解決されたようで良かったです。

投稿: exyz | 2010.09.21 22:14

はじめまして。アコーディオンメニューを改造しながら利用させて頂いております。
actionscript初心者でして、どうしても解決できず困っていることがあるのですで、大変恐縮ですがご質問させてください。

各パネルを開いたところに、コンテンツを設けるという構造にしているのですが、そのコンテンツ内にスクロール付きの長いコンテンツを入れたいのですが、アコーディオンで開いたパネルの場合も、カーソルが「手」の状態のままなので、スクロールが利かない状態になってしまいます。
そこで、パネルを開いた場合だけ、カーソルを「手」の状態では無いようにしたいのですが、どこをいじっていいかわかりません。。。

お忙しい中恐縮ですが、ご教授いただけませんでしょうか?

投稿: ゆう | 2011.08.17 20:44

ゆうさん、コメントありがとうございます。

まず、理解していただきたいのは、
カーソルが「手」の状態のままなので、スクロールが利かない状態になるという事ではないのです。

各パネルは1つのMC(ムービークリップ)になっているので、その中にスクロールバー付きのコンテンツを入れても操作できません。

このサンプルは、一枚絵をスライドして見せるくらいしか使えないと思うので、ゆうさんが考えておられるような仕組みには対応していないのではないかと思います。

jQueryなどのJavascriptの方が色々とカスタマイズできると思いますので、「jQuery アコーディオン」等で検索をかけてみて、気に入った物を探してみた方が早いかも知れません。

 

…お役に立てず、申し訳ございませんが、ご健闘を祈ります。

投稿: exyz | 2011.08.18 12:59

管理者さま

ご返信ありがとうございました。
なるほど、そういうことなのですねぇ。。。

jQueryなどをつかえるといいのですが、今回は別の理由でFlashを使わないといけないのです。。。

なんとか、パネルの上に擬似的に表示してごまかすような仕組みを考えてみます。

ご親切に返信していただきありがとうございました!
アコーデオンタイプの情報は他にあまり無いので本当に助かってます。

投稿: ゆう | 2011.08.18 18:19

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/35737/17394423

この記事へのトラックバック一覧です: auサイトのようなアコーディオンメニュー:

» auサイトのようなアコーディオンメニュー [Flash 使えるTips&サンプル|webデザイン事務所 エクスワイジー]
Flash モーションライブラリ|Google Tweener また今月のWe... [続きを読む]

受信: 2008.06.10 21:48

» ActionScriptライブラリ|Tweener [Good Sleep]
話題のトゥイーンアニメーションライブラリ|web designing 2008年9月 以前にこのブログでも「auサイトのようなアコーディオンメニュー」と題して、Tweenerを紹介しましたが、9月号の [続きを読む]

受信: 2008.08.24 17:41

» 編集可能なテーブルの作成 [totofund! (PukiWiki/TrackBack 0.4)]
TableKitを使う。 これは本当に便利だ。わざわざ、検索条件を保持して、ソートをさせてとか実装させずに非同期通信でクライアント側で処理することができる。 TableKitの本家 http://www.millstream.com.au/view/code/tablekit/ 参考ブログ http://webtech.seesaa.net/art...... [続きを読む]

受信: 2008.10.02 21:55

» {as2.0} アコーディオンメニューのサンプル [html css, javascript]
案外難しいアコーディオンメニューのサンプル。... [続きを読む]

受信: 2010.01.11 01:31

« クリックでスライド表示するコンテンツ | トップページ | JavaScriptでアコーディオンメニュー »