NEWS

2016.09.02 「Photoshopとpapervision3dでテクスチャ付3Dを作成する(4)」を更新しました。

  • Web creators

ActionScript

メニューボタン (XMLタイプ)

概要

XMLに記述しているメニュー数の分、ボタンを作成します。
クリックすると該当するURLへジャンプします。

サンプル解説

XMLファイルに記述している数のボタンが表示されます。
クリックすると表示されているサイトへジャンプします。

作成法

(1) シンボルの作成
  ・ボタン背景を作成するため、「BU_bg」という名前で以下のデザインでシンボルを作成する。
シンボルの作成
  ・リンク先サイトの表示と背景を組み合わせたシンボル、「BU_base」を作成する。
  ・シンボル「BU_base」を以下のように設置する。
シンボルの編集
  ・ボタン本体をムービークリップ属性で作成する。
ムービークリップ属性で作成
  ・「BU_base」を内のテキストエリアの変数を「MenuText」と設定する。
テキストエリア設定
(2) シンボルをステージに配置
  ・シンボル「BU_base」をステージ外に設置する。
  ・設置したシンボル「BU_base」をインスタンス名「BU_LINK」と設定する。
(3) インスタンス「BU_LINK」を選択し、ActionScriptを設定
 
01
02
03
on (press) {
 getURL(this.link,"_blank");
}
(4) 設置したボタン選択し、ActionScriptを設定
 
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
index_xml = new XML();
index_xml.onLoad = startIndexMenu;
index_xml.load("xml_menu.xml");
index_xml.ignoreWhite = true;
 
function startIndexMenu() {
 rootNode = index_xml.firstChild;
 totalMenu = rootNode.childNodes.length;
 updateMenu(rootNode);
}
 
function updateMenu(newMenuNode) {
 Loopcount = totalMenu-1;
 PAR01 = rootNode.firstChild;
 
 for(i=0; i<=Loopcount; i++){
  duplicateMovieClip(_root.BU_LINK, "BU_LINK"+i, i);
  setProperty("_root.BU_LINK"+i, _x, 90*i);
  setProperty("_root.BU_LINK"+i, _y, 0);
  PAR02 = PAR01;
 
  for(k=0; k<i; k++){
   PAR02 = PAR02.nextSibling;
  }
  PAR03 = PAR02.firstChild;
  _root["BU_LINK"+i].MenuText = PAR03.firstChild.nodeValue;
  ChildPAR03 = PAR03.nextSibling;
  _root["BU_LINK"+i].link = ChildPAR03.firstChild.nodeValue;
 }
}
(5) XMLファイルの作成
 
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?xml version="1.0" encoding="UTF-8"?>
<top>
 <menu>
  <title>Yahoo</title>
  <url>http://www.yahoo.co.jp</url>
 </menu>
 <menu>
  <title>Google</title>
  <url>http://www.google.co.jp</url>
 </menu>
 <menu>
  <title>BIGLOBE</title>
  <url>http://www.biglobe.ne.jp</url>
 </menu>
 <menu>
  <title>infoseek</title>
  <url>http://www.infoseek.co.jp/</url>
 </menu>
 <menu>
  <title>goo</title>
  <url>http://www.goo.ne.jp/</url>
 </menu>
</top>

解説

表示されるメニューボタンは、設置したシンボル「BU_base」をコピーして生成されます。
そのため、(2)で設置する場合、コピー元のシンボルが表示されないようにステージ外に設置しています。
シンボルをコピーするには、ActionScript「duplicateMovieClip」を利用します。

ページ上部へ