外部ファイルで内容を管理するFlashメニュー
Flashを起動せず更新可｜web creators 2008 7月号
バタバタしておりまして、すっかり更新をサボっております…。
少し古いネタで申し訳ないんですが、今回はweb creators 2008 7月号の「動くサイト、感じるサイトをつくる」という特集に紹介されていた「外部ファイルで内容を管理するスライドメニュー」を作ってみます。
ボタンテキストや読み込み画像を外部ファイルで管理しているので、更新も楽ですし、AS2.0を使用しているので、プログラムが苦手な方でも難しくないハズです。
何はともあれ、サンプルです。
基本的には、web creators 2008 7月号を読んでもらって理解して欲しいんですが、ザックリ説明すると、以下のようになります。
--------------------
１）外部画像読み込み用MC
外部画像を読み込むMCを作り、必要な枚数だけ縦に並べ、上から順に「img0」、「img1」…というようにインスタンス名を付け、全体をまとめてMCとし、「imgGr」とインスタンス名を付ける。
２）スライド処理用AS
スライドの動きは_rootの1フレーム目「slide_as」が管理しています。
現在の画像を「SlideNum」とし、ボタンやタイマーのアクションによってスライドさせます。また、「Speed」の値を調整するコトで、スライドの動き方を変えられます。
３）タイマー設置
タイマーは_rootの1フレーム目「timer_as」が管理しています。
createEmptyMovieClipで空のMC「timer」を作り、一定時間が経つと「Count」をアップさせ、「SlideNum」の数値を変化させます。ただし、このタイマーはフレームを単位としているので、変数「Time」を秒単位に変換できるよう設定します。（※このFlashは30fpsで作られているので、「Time」に30をかけます。）
４）ボタンを作る
適当な大きさのボタンを作り、ダイナミックテキストを配置し、変数を「text」としておきます。MC
にした後、上から順に「bt0」、「bt1」…というようにインスタンス名を付けます。
５）ボタン処理AS
タイマーは_rootの1フレーム目「btn_as」が管理しています。
ロールオーバー時に先程作った「timer」を停止させるのがミソです。それぞれのボタンに対して記述します。
６）読み込み用テキスト
「config.txt」のように、それぞれのボタンに表示させるテキストとMCに読み込ませる画像を記述します。
「config.txt」のFlashへの読み込みは、_rootの1フレーム目「txt_as」の様に記述します。その際、文字化けする場合があるので、対策しておきます。
--------------------
…という具合です。
画像ではなくSWFを読み込ませると、表現の幅も増えますし、使い勝手は良いと思います。
| 固定リンク
コメント
とても丁寧にわかりやすく記述されており、
大変勉強になります。
しかし、上記にある
【↑このFlashデータはこちらからダウンロードできます。】
からDLした【sample.fla】をflash playerで開くと、
【予期しないファイル形式です。】というエラーが表示され、
ファイルを表示することができません。
お手数おかけしますが、よろしくお願い致します。
投稿： 佐藤 | 2009.05.25 20:25
佐藤様、コメントありがとうございます。
sample.flaは、flash playerでは開けません。
Flash CS3以上で開いて下さい。
投稿： exyz | 2009.05.25 21:09
はじめまして。
FLASHで、テキストと画像とリンクの３つを外部ファイルで管理できるサンプル集を探していて、こちらに辿り着いた者です。
こちらのサンプルでは、テキストと画像が外部ファイル管理できるようになっているのですが、リンクが外部ファイルでは管理できないようでしたので、リンクの管理を加えようと、こちらのサンプルの、
config.txt に、
&btn0=http://www.google.co.jp/&
と追記してみたのですがうまくいきません。
方法をもしご存じでしたら教えてください。
お手数ですがよろしくお願いします。
投稿： 前野わこ | 2009.06.18 20:58
前野わこさん、コメントありがとうございます。
config.txt に、
&btn0=http://www.google.co.jp/&としてみても、
Sample01だったものが、http://www.google.co.jp/に変わっただけでしょう。
もちろんリンク先を外部テキストにするコトは可能ですが、正直、もう少しActionScriptを勉強しないと難しいと思います。
今回は、リンク先を直接記述された方が良いのではないでしょうか？
投稿： exyz | 2009.06.18 22:14
はじめまして。
いつも勉強させて頂いております。
サンプルでは画像の枚数は4枚ですが、画像の枚数を追加したい場合についての質問です。
現在、1枚追加するのに
外部画像を読み込むMCをコピーし、img3の下にimg4というインスタンス名をつけて配置しました。
ボタンも加して、btn4というインスタンス名をつけ、
_rootのbtn_asに
btn4.onRollOver = function(){
SlideNum = 4 ;
delete timer.onEnterFrame;
}
btn4.onRollOut = function(){
Count = 4;
timer.onEnterFrame = timeCtr;
}
btn4.onRelease = function(){
getURL("sample04.html");
}
btn4.onEnterFrame = function(){
if(SlideNum == 4){
this.gotoAndStop(6);
}else{
this.gotoAndStop(1);
}
}
を追加し、
config.txtにも
ボタンテキストの一番下に
&btn4=Sample05&
スライド画像の一番下に
&img4=img/05_b.jpg&
を追加しました。
_rootのslide_asも
targetY = [0,-380,-760,-1140,-1520];
に変更しました。（画像の高さが380pxなので。）
書き出しをしても、img4にimg/05_b.jpgが反映されず、黒い画像がスライドして表示されます。
ボタンは正常に動きます。
お手数ですが、宜しくお願い致します。
投稿： あこ | 2009.07.13 12:44
あこさん、コメントありがとうございます。
基本的にご質問はご遠慮させていただいているのですが、具体的に書いて下さっているので、こちらでも同じように記述して検証してみました。
もしかしたら、追加したボタンのラベルが「Sample05」ではなく、「Sample00」になっていませんか？
だとしたら、_rootのtxt_asの８行目あたり、
for(i=0;i<=3;i++){ となっている箇所を、
for(i=0;i<=4;i++){ に直して下さい。
で、正常に動くと思います。
投稿： exyz | 2009.07.13 13:57