デザインの学校 ウェブデザイン実戦編 フラッシュ1回目

本日勉強するのはフラッシュとXMLです。
先生はデジハリの講師でもある坂本先生。
全く知識のない私に果たして理解できるのか? 不安です
フラッシュはアニメーションや映像等、XMLはブログ(RSS機能)や天気予報等にダイナミックなコンテンツとして使われています。
2つを両方組み合わせて使えるなんて今日初めて知りました。
そんな生徒で申し訳ありません。イチカワ校長先生!
余談はさておき、授業内容を見てみましょう。
●XMLの基礎知識
■タグについて
XMLってHTMLになんとなく似ていますよね。 HTMLは内容をタグで囲いますが、XMLもタグを使用します。
しかもHTMLのように決まったタグだけでなく自分でタグを作ってもいいのだそうです
日本語でもOKということで逆に何にしようか迷ってしまいそうな・・・。
ただ、実際に本番サーバーにアップするときは日本語ではなく半角英数に変えてくださいね。
このとき「要素」と「属性」の関係が重要になります。
■要素( element )の書き方
<郵便番号>105-0001</郵便番号>
 要素名  内容  要素名
■属性( attribute )の書き方
<graphic filename=” ample1.gif ” />
<要素名 属性名=”属性値” />
これよーく覚えておいてくださいね
■記述のルール
<?xml version=”1.0″ encoding=”ISO-8859-1″?>というXML Schemaといってエンコーディングの宣言文を頭に必ず付けてくださいね。
HTMLでいうドキュタイプ宣言と同じです。これが無いとどんな文書で書かれているのか分かりませんからね。
■フラッシュにXMLをよみこむ基本のソースコード
System.useCodepage = true;
●●●● = new XML();
●●●●.ignoreWhite = true;
●●●●.onLoad = function() {

trace(●●●●);
*ここの部分に読み込みたい部分のソースコードを上部のように記述します。
●●部分は自分で決めた名前を使用します。

};
●●●●.load(“xmlsample.xml”);

赤字以外の部分が汎用的に使えるソースコード。 覚えておきましょー
■記述のルール
大文字と小文字は区別され、2つの単語が続けて並ぶときは firstChild といった記述になります。
では実際にXMLを一部分取り出してみましょう。
【XMLのソースコード】
<?xml version=”1.0″ encoding=”ISO-8859-1″>
<elements>
<apple type=”name1″>サンプル1</apple>
<banana type=”name2″>サンプル2</banana>
<cherry type=”name3″>サンプル3</cherry>
</elements>

【フラッシュのソースコード】
trace(●●●●.firstChild);と記述すれば

が取り出せ、フラッシュの出力画面に上記のように表示されます。
trace(●●●●.firstChild.childNodes);と記述すれば

そのほかにもtrace(●●●●.firstChild..firstChild.attributes.type);

trace(●●●●.firstChild.firstChild.firstChild.nodeValue);

わっかりましたか~
■補足
2行目・3行目を読み込みたい時には読み込みたいソースコードの最後に[1]や[2]を足してあげましょう。
数え方は[0]から始まるのでこの場合2行目は[1]3行目は[2]になります。注意しましょ~
さて、だいぶ長くなってきましたが着いてきていただけているでしょうか?
先生によると今まではほんのさわりに過ぎず、もっといろいろなことができるようなのですが、
私、既にソースコードが頭から漏れてしまいそうです。
●アルバムの制作
さあ、覚えれば自作のアルバム作りにも役に立つソースコードを勉強しましょ~
でも、すんごいソースコード長いし複雑です。
簡単に内容を説明すると8枚の画像にそれぞれ日付とキャプションが入っています。
矢印をクリックすると次の写真に進めたり戻れる便利な機能付き。
【XMLのソースコード】
<?xml version=”1.0″ encoding=”ISO-8859-1″?>
<slideshow>
<photo url=”MDR001.jpg” times=”2003/02/24″>散歩中、お寺で撮影</photo>
<photo url=”MDR004.jpg” times=”2003/09/24″>アーチをくぐる</photo>
<photo url=”MDR011.jpg” times=”2004/05/11″>開放感</photo>
<photo url=”MDR033.jpg” times=”2004/08/15″>サボテン</photo>
<photo url=”MDR034.jpg” times=”2004/09/19″>渓谷から。カメラが横になってます</photo>
<photo url=”MDR040.jpg” times=”2004/10/02″>やぶから架け橋を望む</photo>
<photo url=”MDR041.jpg” times=”2004/11/30″>朝もやの中</photo>
<photo url=”MDR042.jpg” times=”2005/06/24″>つゆのころ</photo>
</slideshow>

【フラッシュのソースコード】
System.useCodepage = true;
var photo_xml = new XML();
photo_xml.ignoreWhite = true;
var url_array = new Array();
var caption_array = new Array();
var date_array = new Array();
var current_nm;
photo_xml.onLoad = function(success) {
trace(“success”+success);
}

だとフラッシュの出力は

trace(“success”+success); の後に決められた回数だけ繰り返す定義を追加。
var photos_array = this.firstChild.childNodes;
for (i=0 ;i<photos_array.length ;i++) {
url_array.push(photos_array[i].attributes.url);
caption_array.push(photos_array[i].attributes.caption);
date_array.push(photos_array[i].attributes.time);
}

この場合は8枚画像があるので7回分繰り返す定義になり、出力時の画像は変わりません。
次にフラッシュの黒一色の出力画面に1枚目の画像を呼び込む以下の定義を記述します。
下記の記述を追加すると・・・
holder_mc.loadMovie(url_array[0]);
caption_txt.text = caption_array[0];
date_txt.text = date_array[0];
current_nm = 0;
};
photo_xml.load(“imagedata.xml”);


写真・日付・キャプションが表示されました!
では次に左側の矢印をクリックすると次の写真が表示されるよう定義します。
next_btn.onRelease = function() {
if(current_nm<url_array.length-1) {
current_nm++;
holder_mc.loadMovie(url_array[current_nm]);
capption_txt.text = caption_array[current_nm];
date_txt.text = date_array[current_nm];
}
}


右のボタンをクリックすれば画像が変わりました! お~
そして最後は右ボタンで画像を戻せるようにします。
previous_btn.onRelease = function() {
if (current_nm>0) {
current_nm–;
holder_mc.loadMovie(url_array[current_nm]);
caption_txt.text = caption_array[current_nm];
date_txt.text = date_array[current_nm];
}


右ボタンをクリックして元に画像が戻れば成功です 
本当はソースコードをもっと詳しく説明したいのですが書ききれません
今日はこれでもざっくりと書いたつもりですが、それでも長ひ・・・・。すいません。
今日の授業は先生ブレーキ踏みっぱなしでゆっくり説明してくれたようですが、
来週はもっと複雑なのにかっ飛ばして進めるそうです。 ついていけるか心配だ~
ではまた来週~

 

WEB(ホームページ)デザイン上級者向き 山梨県デザインスクール ウェブデザインスタジオ山梨

コメント

    • サカモト
    • 2007年 10月 28日

    コメント遅くなりました。
    大変よくまとまってました!
    この分じゃ、明日のは簡単過ぎるかも?
    では、リラックスして、明日もスタディーしましょう。

  1. この記事へのトラックバックはありません。

*

PAGE TOP