このFlash講座1234は,flashソフトを用いてflashアニメをスクリプトで制作し無料で公開したものです
FLASH講座 ーアクションスクリプトの実践的事始めー
活用編
(9) xmlファイルデータ呼び出し型
スライドショー
 画像データ(ファイル名、幅、高さ、説明)を格納したXMLファイルから、それらデータをFLASHに読み込んで、スライドショー(自動再生、コマ送り両用)を再生するscriptのflash講座です。

 xml ファイルをいろいろなWebアプリケーションで活用する動きがあります。 xml ファイルについて、それが何なのか、どのように作成するのか、どのように使うのかなどについては、詳しく解説しているサイトがいくつもあるので、そちらを参照してください。 ここでは、シンプルで標準的なxml ファイルの例と、それを、FLASHにロードする(読み込む)手順について別ページにて解説することにします。

 なお、xml ファイルを使うと、一つの画像について、いくつかの情報をまとめて格納することが出来るので、使いやすいというメリットがあります。 この例では、画像の説明書きや、サイズデータを活用して表示させています。
 なお、ベーシックなスライドショーは、Macromedia Flash サポートセンターの「XMLでJPEGスライドを作成する」にあり、これを参考にしました。
SAMPLE
ステージの準備
●w570、h400、24fpsのステージを設定し、背景色を#ccccccとする。
●画面上部にスライド番号(currentNo)、総スライド数(Slides_num)、説明(slideTitle)を表示するダイナミックテキストボックスを設置する(カッコ内は変数)
●画面中央に幅360、高さ270のスクリーン(インスタンス名:screen)とそれを囲む同サイズのフレーム(インスタンス名:frame)を設置する。フレームは矩形ツールで線幅6の四角形を描きフィルターのベベル効果を付与した。なお、これらのサイズは、画像の大きさに合わせて変わるので、適当でよい。
●画面下側には、スライドショウを制御するボタン類を配置する。
  自動再生制御ボタン:初期は自動再生ONで開始、OFFボタン(auto_off)で停止、ONボタン(auto_on)で開始
   ONボタン: の上に、OFFボタン: をのせて置く(初期)

  手動スライド送りボタン: Next Slide(next_btn)、 Previous Slide(back_btn)
●本swf ファイルを同じフォルダにphotodata.xml を置き、更にimgフォルダ内に画像(写真)ファイルを収納しておく。
スクリプト全角スペースが入っている行は、コピー・ペイストだけではエラーになります)
photos_xml = new XML();
photos_xml.load("photodata.xml");
photos_xml.ignoreWhite = true;
photos_xml.onLoad = SlideShow;

function SlideShow(success) {
 if (success) {
  rootNode = photos_xml.firstChild;
  Slides_num = rootNode.childNodes.length;
  first_Slide = rootNode.firstChild;
  last_Slide = rootNode.lastChild;
  currentSlide = first_Slide;
  currentNo = 1;
  passSlide(first_Slide);
  ID = setInterval(autoExchange, 4000);
 }
}

function passSlide(newSlide) {
 image = newSlide.attributes.image;
 imageWidth = newSlide.attributes.p_width;
 imageHeight = newSlide.attributes.p_height;
 slideTitle = newSlide.firstChild.nodeValue;
 screen._alpha = 0;
 delay = getTimer();
 _root.onEnterFrame = function() {
  if (getTimer()>delay+200) {
   screen._alpha += (100-screen._alpha)/10;
   screen._width = imageWidth;
   screen._height = imageHeight;
   screen._x = 280-imageWidth/2;
   screen._y = 195-imageHeight/2;
  }
 frame._x += (280-imageWidth/2-frame._x)/3;
 frame._y += (195-imageHeight/2-frame._y)/3;
 frame._width += 2+(imageWidth-frame._width)/3;
 frame._height += 2+(imageHeight-frame._height)/3;
 };
 loadMovie(image, screen);
}

function autoExchange(nextSlide) {
 nextSlide = currentSlide.nextSibling;
 if (nextSlide == null) {
  passSlide(first_Slide);
  currentSlide = first_Slide;
  currentNo = 1;
 } else {
  currentNo++;
  passSlide(nextSlide);
  currentSlide = nextSlide;
 }
}

auto_on.onRelease = function() {
 ID = setInterval(autoExchange, 4000);
 mx.behaviors.DepthControl.sendBackward(this);
};

auto_off.onRelease = function() {
 clearInterval(ID);
 mx.behaviors.DepthControl.sendBackward(this);
};

next_btn.onRelease = function() {
 nextSlide = currentSlide.nextSibling;
 if (nextSlide == null) {
  passSlide(first_Slide);
  currentSlide = first_Slide;
  currentNo = 1;
 } else {
  currentNo++;
  passSlide(nextSlide);
  currentSlide = nextSlide;
 }
};

back_btn.onRelease = function() {
 previousSlide = currentSlide.previousSibling;
 if (previousSlide == null) {
  passSlide(last_Slide);
  currentSlide = last_Slide;
  currentNo = Slides_num;
 } else {
  currentNo--;
  passSlide(previousSlide);
  currentSlide = previousSlide;

 }
};
以下4行はxmlファイルデータをphotos_xmlインスタンスに読み込みSlideShowを開始するscript
別ページ(XMLファイルデータをFLASHで活用)を参照のこと
初期設定と最初のスライドの表示、再生開始
関数SlideShow
もしロードに成功したら
xmlデータのルートノードをrootNodeと置く
子ノードのデータ数をSlidesNoと置く
子ノードの最初のデータをfirst_Slideと置く
  〃   最後の  〃  last_Slideと置く
現表示スライド(currentSlide)をfirstSlideとし
スライド番号(currentNo)を1とする
引数をfirstSlideとし関数passSlideを実行
関数autoExchageを4秒間隔で実行


スライドの切り替え
関数passSlide
画像データをimageに取り込む
画像の幅
画像の高さ
画像の題
画像表示用インスタンスscreenのα値を0に
タイマーをかけ、現在値をdelayに
Frameアクション
もし、0.2秒が経過したら
screenのα値を減速しながら100にする
  〃   の幅を画像幅に
  〃   の高さを画像高さに
  〃   のx座標の中心が280になるように
  〃   のy座標の  〃

frameが画像の周囲にセットされるように
座標、幅、高さを調整



screenに画像を表示する

自動再生
関数autoExchange
現スライドの次のデータをnextSlideと置く
もし、nextSlideが空だったら、
firstSlideでpassSlideを再生
currentSlideをfirst_Slideにする
スライド番号(currentNo)を1に
そうでなければ、
currentNoに1を足す
nextSlideでpassSlideを再生
currentSlideをnextSlideとする


自動再生ON
auto_onボタンがクリックされたら
autoExchangeを4秒間隔で再生
このボタンを下層に

自動再生OFF
auto_offボタンがクリックされたら
IDをクリヤーする(自動再生を止める)
このボタンを下層に

次のスライドへ
next_btnがクリックされたら
現スライドの次のデータをnextSlideと置く
もし、nextSlideが空だったら、
firstSlideでpassSlideを再生
currentSlideをfirst_Slideにする
スライド番号(currentNo)を1に
そうでなければ、
currentNoに1を足す
nextSlideでpassSlideを再生
currentSlideをnextSlideとする


前のスライドへ
back_btnがクリックされたら
現スライドの前のデータをpeviousSlideと置く
もし、previousSlideが空だったら、
lastSlideでpassSlideを再生
currentSlideをlast_Slideにする
スライド番号(currentNo)をSlides_num(7)に
そうでなければ、
currentNoから1を引く
previousSlideでpassSlideを再生
currentSlideをprevioustSlideとする
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
このサイトで使用しましたflashソフトはflash mx 2004年版(Flash Japan)- flash8 及び FlashCS3-2007年版です。 flash講座(フラッシュ講座)は、Yoshioka氏(通称、ひげ親父)による制作です。 コツコツと作られたflash素材(flashアニメ、スクリプト)はユーザーの方により保存変更され動画flash(動画フラッシュ)や携帯flash(待受flash)として利用されて来ました。 
氏は、flashスクリプトについての学習を、パソコン塾講師活躍中に始められ、独立した今も続けておられます。  macromedia flashソフトは新しくadobe flash時代に入りましたので、これを機会にflash学習サイトを「flash講座1234」としてリニューアルいたしました。 引き続きご愛顧承りますよう、よろしくお願いいたします。                                                                            (by Hiraoka)
HOME  Flash講座総リスト   アクションスクリプトの実践的事始め-活用編(10)