オブジェクトの大きさをXMLかTXTから読込む方法？？？

質問

四角のオブジェクトW:1　H:10のものをW100 H:50に
シェイプトゥイーンで変形させます。

W:1　H:10は常に一定の大きさですが、
W100 H:50の大きさは一日に一度変更したいので、
xmlもしくは、txtからデータWとHの値を読込み、
その大きさが反映できるようにしたいです。

txtに書いた文字をフラッシュ上で表示する方法は解りますが、
よく似た方法で簡単に処理できるのでしょうか？

フラッシュ初心者なので、できるだけ簡単にできる方法を
教えていただきたいです。

よろしくお願いいたします。

回答No.5

noname#35109 · ベストアンサー

＃１～４です。

>> グラフが伸び終わるとグラフの実績値（○○個）が表示される
　　　　↑　矛盾してませんか？　↓
>> 表示される文字もグラフの動きと連動し、動的に見せたい

それと，実際にはどうしたいのか，
そのイメージが私の頭の中では象をうまく結ばないのですが…。

とりあえず，ぜんぜんわからないことは，
文字とグラフの表示位置の関係と，＃２で書いたようにグラフの伸び方です。

ぜんぜんわからないので，
勝手に，
グラフはその左上のコーナーを基準として右や下の方に伸び，
文字は「品名」と「実績」の２つのテキストフィールドに別々に表示され，
その「品名」と「実績」は右や下に伸びるグラフのさらに右に表示され，
グラフの伸びと同期して右に動くと言う場合で回答しますよ。
図にするとこんな感じ↓。

　　　　グラフ
　■■■■■■→ [品名]→
　■■■■■■→ [実績]→
　■■■■■■→
　↓　↓　↓　↓

また，「品名」や「実績」には日本語（つまり２バイト文字）が使われるという前提で回答します。

//////////////////////////////////////////////////////////////////////////

各グラフの右横あたりに，
２つずつのテキストフィールドを作ってください。
計６個です。
そして，上（graphMC1の右横）テキストフィールドから順に，
「syouhin1」「jisseki1」「syouhin2」「jisseki2」「syouhin3」「jisseki3」という，
"インスタンス名" を付けてください（注："変数名" ではありません。）。

そして，「mydate.txt」の例
----------------------
W1=100&H1=50&goods1=筆箱&results1=600万円&
&W2=200&H2=80&goods2=鉛筆&results2=1500万円&
&W3=150&H3=40&goods3=消しゴム&results3=800万円
-----------------------

そして，フレーム1のスクリプトを次のようにします。
------------------------------------------------
// 日本語テキスト (Shift-JIS) を読み込む
System.useCodepage = true;
// 拡大スピードの設定（※可変）
var speed = 1/10;
// 時間差の設定（※可変）
var timelag = 10;
// グラフとテキストの隙間(px)を設定（※可変）
var space = 15;
// 変数 count の初期化
var count = 0;
// _level0(_root) に「mydate.txt」を読み込む
loadVariablesNum("mydate.txt", 0);
// 各テキストフォールドの x座標を初期座標に設置
for (i=1; i<=3; i++) {
_root["syouhin"+i]._x = _root["graphMC"+i]._x+_root["graphMC"+i]._width+space;
_root["jisseki"+i]._x = _root["graphMC"+i]._x+_root["graphMC"+i]._width+space;
}
// １フレーム進む時間ごとに毎回(随時)実行
_root.onEnterFrame = function() {
// 変数 H3 が存在すれば
if (results3 != undefined) {
// 各テキストフィールドに変数の文字を代入
for (i=1; i<=3; i++) {
_root["syouhin"+i].text = _root["goods"+i];
_root["jisseki"+i].text = _root["results"+i];
}
count++;
_root.graphMC1._width += (W1-_root.graphMC1._width)*speed;
_root.graphMC1._height += (H1-_root.graphMC1._height)*speed;
_root.syouhin1._x = _root.graphMC1._x+_root.graphMC1._width+space;
_root.jisseki1._x = _root.graphMC1._x+_root.graphMC1._width+space;
if (count>=timelag) {
_root.graphMC2._width += (W2-_root.graphMC2._width)*speed;
_root.graphMC2._height += (H2-_root.graphMC2._height)*speed;
_root.syouhin2._x = _root.graphMC2._x+_root.graphMC2._width+space;
_root.jisseki2._x = _root.graphMC2._x+_root.graphMC2._width+space;
if (count>=timelag*2) {
_root.graphMC3._width += (W3-_root.graphMC3._width)*speed;
_root.graphMC3._height += (H3-_root.graphMC3._height)*speed;
_root.syouhin3._x = _root.graphMC3._x+_root.graphMC3._width+space;
_root.jisseki3._x = _root.graphMC3._x+_root.graphMC3._width+space;
}
}
}
};
-----------------------------------------------

テキストフィールドの座標ですが，
まず，テキストフィールドの基準点は左上です。

「インスタンスの基準点」
http://homepage3.nifty.com/ginga-b/MX/inst_refpoint.html

そして，グラフ，
例えば「graphMC1」の頂点の座標は，
左上を基準点として設定した場合次のようになります。

　↓A　　　　　　　　　　B↓
　 ■■■■■■■■■
　 ■■■■■■■■■
　 ■■■■■■■■■
　↑D　　　　　　　　　　C↑　　　　　　　　　　　

　A（x，y）＝(graphMC1._x ，graphMC1._y)
　B（x，y）＝(graphMC1._x + graphMC1._width ，graphMC1._y)
　C（x，y）＝(graphMC1._x + graphMC1._width ，graphMC1._y + _root.graphMC1._height)
　D（x，y）＝(graphMC1._x ，graphMC1._y + _root.graphMC1._height)

結局，各頂点の座標は，
各MC の基準点か，基準点+MCの幅か，基準点+MCの高さか，
そういう数値になります。
それを基準に，してテキストフィールドの座標も動かせば良いわけです。

上のスクリプトにおいては，
y座標の指定はしていません。
テキストフィールドを最初に作成した場所の y座標のまま，右だけに動きます。

とにかく，
グラフの大きくなり方もどこを基準点とされてか書かれていませんし，
いったいテキストフィールドをどこに配置したいのかもさっぱりわかりません。
上の考え方を使えば，どこに配置する場合でもできると思います。

イメージしたとおりの場所に配置するように，
あとは考えてみてください。

回答No.4

noname#35109

＃１，２，３ です。

すみませんー！

>> ３つの軸を時間差をつけて変形させるようにしたいのですが、
>> どうすればよいのでしょうか？

この "時間差" を見落としていました！
＃３で書いた内容は全部訂正です。
＃３で書いた内容と重複する部分もありますが，
あれはこっちに書いたこと，これはこっちに書いたこととなるのはややこしいので，
＃３は全部削除ということで理解してください（謝）。

/////////////////////////////////////////////////////////////////

>> ３つの軸を時間差をつけて変形させるようにしたいのですが、
>> どうすればよいのでしょうか？
>>
>> テキストファイルを３つ用意し、
>> 教えて頂いたように処理すれば一番簡単にできますか？

３つ用意しても良いですが，１つで十分です。
＃２の内容ができたという前提で回答します。
ムービークリップのインスタンス名の付け方とか，
ムービークリップの基準点の考え方とか，
＃２で回答した内容は省略します。

まず，
外部テキストファイル 「mydate.txt」 ですが，

------------------------------------------
W1=100&H1=50&W2=200&H2=80&W3=150&H3=40
------------------------------------------

もしくは，

----------------------
W1=100&H1=50&
&W2=200&H2=80&
&W3=150&H3=40
-----------------------

という形で準備してください。
PHP などプログラムでデータを作成する場合は，
上の方が簡単ですね。

人間が手打ちで作成する場合，
１グラフ１行となっている下の形の方がわかりやすいですね。
改行を入れる場合は，改行前（行末）にも & を入れてください。

なぜかというと，
改行コードまでが，変数の値として Flash に処理される場合があるからです。
今回の場合は，改行前に & を入れなくても良いのですが，
厳密な変数比較をする場合，改行コードが思わぬアクシデントの原因となることがあるので，
改行前(行末)に & を入れる習慣にしておく方が良いと思います。

次に Flash の方の説明です。

３つの グラフムービークリップ ですが，
それぞれのインスタンス名を「graphMC1」，「graphMC2」，「graphMC3」としておきます。
そして，最初の拡大する前の位置に配置してください。

そしてフレームのスクリプトは次↓のようにすると，
W1，H1，W2，H2，W3，H3　の値によって，
「graphMC1」，「graphMC2」，「graphMC3」 の大きさが 時間差 で変わります。

--------------------------------------------------
// 拡大スピードの設定（※可変）
var speed = 1/5;

// 時間差の設定（※可変）
var timelag = 10;

// 変数 count の初期化
var count = 0;

// _level0(_root) に「mydate.txt」を読み込む
loadVariablesNum("mydate.txt", 0);

// １フレーム進む時間ごとに毎回(随時)実行
_root.onEnterFrame = function() {
// 変数 H3 が存在すれば

if (H3 != undefined) {
count++;
_root.graphMC1._width += (W1-_root.graphMC1._width)*speed;
_root.graphMC1._height += (H1-_root.graphMC1._height)*speed;

if (count>=timelag) {
_root.graphMC2._width += (W2-_root.graphMC2._width)*speed;
_root.graphMC2._height += (H2-_root.graphMC2._height)*speed;

if (count>=timelag*2) {
_root.graphMC3._width += (W3-_root.graphMC3._width)*speed;
_root.graphMC3._height += (H3-_root.graphMC3._height)*speed;
}
}
}
};
--------------------------------------------------

　// 拡大スピードの設定（※可変）
　var speed = 1/5;

　// 時間差の設定（※可変）
　var timelag = 10;

この 1/5 と 10 は変えてください。
時間差をどうしようかと思いましたが，
１フレーム進む時間ごとにカウントをとって，そのカウントの値によって，拡大しだすタイミングを変えることにしました。

　var timelag = 10;

これは，10フレーム進む時間という意味になります。
タイムラグを10フレーム分持たせていることになります。

if 文が入れ子状態になっていますが，
あまりスッキリさせる方法を思いつきませんでした。
この点はご容赦ください。

補足

sassakun様！教えて頂いたとおりに、コピーペーストすると、頭に思い描いていたグラフのフラッシュを作ることができました！本当に感謝いたします。

何度も質問して本当に申し訳なく思うのですが、もう少し教えて下さい！

私が作成したいグラフは、
商品の名前が表示され、グラフが伸び、グラフが伸び終わるとグラフの実績値（○○個）が表示されるというものです。

商品の名前と実績値をダイナミックテキストにし、そこに入る文字をテキストファイルから読み込めるようにしたいのです。

単純に、テキストファイルの文字をダイナミックテキストに反映する方法は解るのですが、表示される文字もグラフの動きと連動し、動的に見せたいのです・・・

教えていただけませんか？
よろしくお願いいいたします。

回答No.3

noname#35109

＃１＆＃２です。

>> ３つの軸を時間差をつけて変形させるようにしたいのですが、
>> どうすればよいのでしょうか？
>>
>> テキストファイルを３つ用意し、
>> 教えて頂いたように処理すれば一番簡単にできますか？

３つ用意しても良いですが，１つで十分ですよ。
＃２の内容ができたという前提で回答します。
ムービークリップのインスタンス名の付け方とか，
ムービークリップの基準点の考え方とか，
＃２で回答した内容は省略します。

/////////////////////////////////////////////////////////////////////

まず，
外部テキストファイル 「mydate.txt」 ですが，

------------------------------------------
W1=100&H1=50&W2=200&H2=80&W3=150&H3=40
------------------------------------------

もしくは，

----------------------
W1=100&H1=50&
&W2=200&H2=80&
&W3=150&H3=40
-----------------------

という形で準備してください。
PHP などプログラムでデータを作成する場合は，
上の方が簡単ですね。

人間が手打ちで作成する場合，
１グラフ１行となっている下の形の方がわかりやすいですね。
改行を入れる場合は，改行前（行末）にも & を入れてください。

なぜかというと，
改行コードまでが，変数の値として Flash に処理される場合があるからです。
今回の場合は，改行前に & を入れなくても良いのですが，
厳密な変数比較をする場合，改行コードが思わぬアクシデントの原因となることがあるので，
改行前(行末)に & を入れる習慣にしておく方が良いと思います。

次に Flash の方の説明です。

３つの グラフムービークリップ ですが，
それぞれのインスタンス名を「graphMC1」，「graphMC2」，「graphMC3」としておきます。
そして，最初の拡大する前の位置に配置してください。

そしてフレームのスクリプトは次↓のようにすると，
W1，H1，W2，H2，W3，H3　の値によって，
「graphMC1」，「graphMC2」，「graphMC3」 の大きさが変わります。

---------------------------------------------------
// 拡大スピードの設定（※可変）
var speed = 1/5;

// _level0(_root) に「mydate.txt」を読み込む
loadVariablesNum("mydate.txt", 0);

// １フレーム進む時間ごとに毎回(随時)実行
_root.onEnterFrame = function() {
// 変数 H3 が存在すれば
if (H3 != undefined) {
// W? や H? の値まで拡大
_root.graphMC1._width += (W1-_root.graphMC1._width)*speed;
_root.graphMC1._height += (H1-_root.graphMC1._height)*speed;
_root.graphMC2._width += (W2-_root.graphMC2._width)*speed;
_root.graphMC2._height += (H2-_root.graphMC2._height)*speed;
_root.graphMC3._width += (W3-_root.graphMC3._width)*speed;
_root.graphMC3._height += (H3-_root.graphMC3._height)*speed;
}
};
----------------------------------------------------

>> フラッシュ初心者なので、一番簡単な方法を教えてください。

ということなので，スクリプトを簡単にしました。
意味はわかりやすいと思いますが，
ほとんど同じ事ばかり書いていて無駄が多い部分がありますね（？）。
そう思わなければ上のままで良いと思います。
もし，無駄が多いと思えば，for 文のループと [ ](配列アクセス演算子) を使います。

----------------------------------------------------
// 拡大スピードの設定（※可変）
var speed = 1/5;

// _level0(_root) に「mydate.txt」を読み込む
loadVariablesNum("mydate.txt", 0);

// １フレーム進む時間ごとに毎回(随時)実行
_root.onEnterFrame = function() {
// 変数 H3 が存在すれば
if (H3 != undefined) {

// W? や H? の値まで拡大
for (var i = 1; i<=3; i++) {
_root["graphMC"+i]._width += (_root["W"+i]-_root["graphMC"+i]._width)*speed;
_root["graphMC"+i]._height += (_root["H"+i]-_root["graphMC"+i]._height)*speed;
}

}
};
----------------------------------------------------

テキストファイルの形も，
ActionScript の形も，２つずつ用意しましたがどちらでもかまいません。
相性が良さそうな方をそれぞれ選んでください。

回答No.2

noname#35109

＃１です。

>> フラッシュで簡単な棒グラフを作りました。
>> 軸がだんだん伸びるようなイメージです。

それだと，シェイプトゥイーンなんていらないじゃ～ないですか。
シェイプトゥイーン とはこんなのですよ↓。

「シェイプトゥイーン」
http://www2.netwave.or.jp/~light/shieip_t.html
「シェイプトゥイーン　FLASHRAVE - FLASH 講座 -」
http://flashrave.org/anima/shape/index.html

「こんな動きを数値では表せないぃ～。
どうやったら可能なんだろう？」
って真剣に考えてしまいましたよ。

シェイプトゥイーン させたものを SWF にパブリッシュして，
その SWF を「ファイル」→「読み込み」で Flash に読み込ませてみればわかりますが，
シェイプトゥイーン はパブリッシュする段階で，すでにあの奇妙な動きは決定しているので，
基本的に動的にシェイプトゥイーンを変えることはできないのです。

「ムービークリップの中でシェイプトゥイーンさせて，
そのムービークリップごとサイズを変えようか？」
とか
「色んな大きさにシェイプトゥイーンで変形するSWFをたくさん作っておいて，
そのSWFを動的に loadMovie しようか？」
とか，かなり考えてしまいました（笑）。

簡単な棒グラフがだんだん伸びるようなイメージだと，
シェイプトゥイーンではなく，
どっちかというとモーショントゥイーンで行けます。
実際はモーショントゥイーンではなく，
ActionScript で大きくすることになりますけど。

--------------------------------------

>> グラフの値は日々更新したいのですが、

ということは，日めくりカレンダーのように日々更新なのですね。

　2006/08/25　W=100　H=50
　2006/08/26　W=450　H=100
　2006/08/27　W=280　H=80
　　　…　　　　　　…　　　　…

というような膨大なデータがあらかじめあるわけではなく，

　2006年08月25日なら，
　「mydate.txt」 の内容が，「W=100　H=500」になっていて，
　2006年08月26日なら，
　「mydate.txt」 の内容が，「W=450　H=100」になっていて，
　　　　…　　…　　…

という感じで日替わり更新なのですねという意味です。

それなら，
外部に，例えば 「mydate.txt」 というファイルを用意して，
そのファイルの内容を，
----------------------
W=100&H=50
----------------------
というデータにしましょう。
これが簡単です。

=== さて本題 =============================

>> W:1　H:10は常に一定の大きさですが、

それでは，その 幅が 1px で，高さが 10px のその長方形をまずステージ上に描いてください。
その長方形を選択して右クリック→「シンボルに変換」から，
ムービークリップに変換してください。
このとき，基準点の位置に気をつけてください。

ムービークリップを ActionScript で変形させる場合，
その拡大や縮小の基準座標はムービークリップの基準点になります。
「インスタンスの基準点」
http://homepage3.nifty.com/ginga-b/MX/inst_refpoint.html

なんとなくですが，
右や下に伸びるグラフではないかと思います。
その場合，
ムービークリップに変換するときの，基準点のは左上になります↓。

/////////////////////////////////////////////
名前(N)：[ 任意の名前　　　　　　　　　]
タイプ(T)： ◎ ムービークリップ　基準点（R）：■□□
　　　　　　 ○ ボタン　　　　　　　　　　　　　　 □□□
　　　　　　 ○ グラフィック　　　　　　　　　　　 □□□
/////////////////////////////////////////////
（右や上に伸ばしたいのでしたら，基準点のは左下になります。）

ムービークリップが用意できましたら，
そのムービークリップを選択して，下のプロパティインスペクタでインスタンス名を付けてください。
この説明では 「graphMC」 というインスタンス名しておきます。

それと，＃１の補足要求で，Flash のバージョンを聞き忘れていましたが，
勝手に Flash MX 以降のバージョン（Flash MX，Flash MX 2004，Flash 8）をお持ちだということにして，回答を続けます。
別に Flash 5 でも，Flash 4 でも書かれている内容のことはできるのですが，
その場合は，しくみやスクリプトが変わります。

外部テキストは，上にも書いたとおり，
SWF と同じフォルダに「mydate.txt」というファイルで，
----------------------
W=100&H=50
----------------------
という内容のデータを用意したとしておきます。

そして，
アクションスクリプト専用レイヤーを用意して，
そのフレームに，

-----------------------------------
// 拡大スピードの設定（※可変）
var speed = 1/5;

// _level0(_root) に「mydate.txt」を読み込む
loadVariablesNum("mydate.txt", 0);

// １フレーム進む時間ごとに毎回(随時)実行
_root.onEnterFrame = function() {
// 変数 H が存在すれば
if (H != undefined) {
// W や H の値まで拡大
_root.graphMC._width += (W-_root.graphMC._width)*speed;
_root.graphMC._height += (H-_root.graphMC._height)*speed;
}
};
-----------------------------------

と書き（コピペし），パブリッシュもしくはムービープレビューすれば，
その W や H の値に応じて拡大するムービークリップ入りの SWF ができます。

var speed = 1/5;

は，１以下の数を記入して，スピードの調節をしてください。

loadVariablesNum("mydate.txt", 0);

は，Load Vars クラスのメソッドを使っても良かったのですが，
単フレームの場合，
onEnterFrame でどっちにしてもif判定が必要になるので，
かんたんな，loadVariables メソッドの方を選びました。

Flash 5 や Flash 4 の場合は，また補足してください。
そのバージョンに応じてまた回答しなおします。
場合によっては説明を一から変えなければならないので，
ここでは省略させていただきます。

一応上の方法やスクリプトは，
Flash MX 以降で可能な方法です。
また Flash Player 6，7，8 用に SWF をパブリッシュして動作確認はしています。

補足

sassakun様、いろいろ考えて頂きありがとうございます！
私の意味不明な日本語を理解して頂き、親切にお答頂き・・・本当に感謝いたします！

もう一つ質問なんですが、棒グラフは一本ではなく、A商品・B商品・C商品というふうに複数あります。

３つの軸を時間差をつけて変形させるようにしたいのですが、どうすればよいのでしょうか？

テキストファイルを３つ用意し、教えて頂いたように処理すれば一番簡単にできますか？

フラッシュ初心者なので、一番簡単な方法を教えてください。

よろしくお願いいたします。

PS.フラッシュのバージョンはFlash MX 2004です。

回答No.1

noname#35109

XML とか TXT とか，
値を読み込む以前の問題なのですが。

　W:1　H:10のものを
　W100 H:50に シェイプトゥイーンで変形

これを数値で変更するというのはどういう方法を取るのでしょうか？

一休さんの「屏風の中の虎退治」ではありませんが，

　一休さんでは，
　「屏風絵の虎が夜な夜な屏風を抜け出して暴れるので退治して欲しい」
　　　回答　↓↓↓
　「では捕まえますから虎を屏風絵から出して下さい」

　このご質問では，
　「読み込んだ値によってシェイプトゥイーンを変えたい」
　　　回答　↓↓↓
　「読み込んだ値によって変えますますから値でシェイプトゥイーンを変えてください」

私は値によってシェイプトゥイーンを変えるような方法を知りませんし，
何かそういう質問者さまの得策があるのでしたら，
それを提示してください。
その方法によって回答は変わります。

-------------------------------

また，
値を変えるルールはどうなっているのでしょうか？

例えば日（見るとき）によってランダムな大きさに変える，
もしくは，
「日曜なら１の大きさに変える」「月曜なら５の大きさに変える」
のように，曜日や日によって周期がある場合であれば，
わざわざ外部にデータを用意する必要もないと思います。

そうでない場合でも，
値を変えるルールによって用意するデータの形やその読み込ませ方も変わります。

以上２点を補足してください。

参考URL：

http://ja.wikipedia.org/wiki/%E4%B8%80%E4%BC%91%E3%81%95%E3%82%93#.E5.B1.8F.E9.A2.A8.E3.81.AE.E8.99.8E.E9.80.80.E6.B2.BB

補足

フラッシュで簡単な棒グラフを作りました。
軸がだんだん伸びるようなイメージです。

１日目は値が２０まで伸びる。
２日目は値が４８まで伸びる・・・

曜日や日によって変更する大きさは決まっていません。

グラフの値は日々更新したいのですが、毎回フラッシュを編集するのは面倒なので、WとHの大きさをテキストやXMLから読み込めるようにできれば楽チンなのになぁ・・・と重い質問しました。