FLASHのお勉強 ーアクションスクリプトの実践的事始めー |
|
| (30) xmlファイルデータ呼び出し型スライドショー 2006/9/10 | |
| 画像データ（ファイル名、幅、高さ、説明）を格納したXMLファイルから、それらデータをFLASHに読み込んで、スライドショー（自動再生、コマ送り両用）を再生するscriptのお勉強である。 ｘｍｌ ファイルをいろいろなWebアプリケーションで活用する動きがある。 ｘｍｌ ファイルについて、それが何なのか、どのように作成するのか、どのように使うのかなどについては、詳しく解説しているサイトがいくつもあるので、そちらを参照願うとして、ここでは、シンプルで標準的なｘｍｌ ファイルの例と、それを、FLASHにロードする（読み込む）手順について別ページにて解説することにしたい。 なお、ｘｍｌ ファイルを使うと、一つの画像についてのいくつかの情報をまとめて格納することが出来るので、FLASHでそれらデータを使う場合に使いやすいというメリットがある。 この例では、画像の説明書きや、サイズデータを活用して表示させている。 なお、ベーシックなスライドショーは、Macromedia Flash サポートセンターの「XMLでJPEGスライドを作成する」にあり、これを参考にした。 |
|
| SAMPLE | |
| ステージの準備 | |
| ●w570、h400、24fpsのステージを設定し、背景色を#ccccccとする。 ●画面上部にスライド番号（currentNo）、総スライド数（Slides_num）、説明（slideTitle）を表示するダイナミックテキストボックスを設置する（カッコ内は変数） ●画面中央に幅360、高さ270のスクリーン（インスタンス名：screen）とそれを囲む同サイズのフレーム（インスタンス名：frame）を設置する。フレームは矩形ツールで線幅6の四角形を描きフィルターのベベル効果を付与した。なお、これらのサイズは、画像の大きさに合わせて変わるので、適当でよい。 ●画面下側には、スライドショウを制御するボタン類を配置する。 自動再生制御ボタン：初期は自動再生ONで開始、OFFボタン（auto_off）で停止、ＯＮボタン（auto_on）で開始 ONボタン：  の上に、OFFボタン： をのせて置く（初期）手動スライド送りボタン： Next Slide（next_btn）、 Previous Slide(back_btn) ●本ｓｗｆ ファイルを同じフォルダに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行はｘｍｌファイルデータをphotos_xmlインスタンスに読み込みSlideShowを開始するscript 別ページ（XMLファイルデータをFLASHで活用）を参照のこと 初期設定と最初のスライドの表示、再生開始 関数SlideShow もしロードに成功したら xmlデータのルートノードをrootNodeと置く 子ノードのデータ数をSlidesNoと置く 子ノードの最初のデータをfirst_Slideと置く 〃 最後の 〃 last_Slideと置く 現表示スライド（currentSlide)をfirstSlideとし スライド番号（currentNo）を１とする 引数をfirstSlideとし関数passSlideを実行 関数autoExchageを4秒間隔で実行 スライドの切り替え 関数passSlide 画像データをimageに取り込む 画像の幅 画像の高さ 画像の題 画像表示用インスタンスscreenのα値を０に タイマーをかけ、現在値をdelayに Frameアクション もし、0.2秒が経過したら screenのα値を減速しながら100にする 〃 の幅を画像幅に 〃 の高さを画像高さに 〃 のｘ座標の中心が280になるように 〃 のｙ座標の 〃 frameが画像の周囲にセットされるように 座標、幅、高さを調整 screenに画像を表示する 自動再生 関数autoExchange 現スライドの次のデータをnextSlideと置く もし、nextSlideが空だったら、 firstSlideでpassSlideを再生 currentSlideをfirst_Slideにする スライド番号（currentNo）を１に そうでなければ、 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）を１に そうでなければ、 currentNoに1を足す nextSlideでpassSlideを再生 currentSlideをnextSlideとする 前のスライドへ back_btnがクリックされたら 現スライドの前のデータをpeviousSlideと置く もし、previousSlideが空だったら、 lastSlideでpassSlideを再生 currentSlideをlast_Slideにする スライド番号（currentNo）をSlides_num（７）に そうでなければ、 currentNoから1を引く previousSlideでpassSlideを再生 currentSlideをprevioustSlideとする |
| HOME お勉強総リスト | |