Flash+PHPで、履修している科目のマップを作成

質問

お世話になります。
現在、学習コンテンツサイトの学習者ページ（ログイン後）で、
その学習者が履修している科目と、未履修だが履修できる科目に分け、
下から上にレベル別で表示するページを作成しています。
下部にその科目が表示されていて、その科目のレベル１、２、３と
上に四角の箱が積みあがっていくイメージです。

PHPでDBからその学習者の履修内容を引っ張ってきて、HTML＋CSSで
表示しようとしたのですが、科目によって全レベル数（箱の数）が
違うため、表示が難しいのです。（HTMLだと、左から、もしくは上から
表示するのが前提となっているため）

行いたいイメージ
　　□
　　□　□
　　□　□
科目A　　B

ですので、Flashならば座標指定が出来るのでFlashをインターフェイスに作成しようと考えたのですが、どのように作成すれば宜しいでしょうか？
何か良いサンプルなどはありますでしょうか？

そもそも、他に上手いやり方があれば教えていただきたいです。
よろしくお願いします。

回答No.4

DPE · ベストアンサー

Flash での表示でしたら、次のように考えてはいかがでしょう。

まず、マークのシンボルを用意します。
このシンボルは、縦反転を利用して”逆さまに”作ります。
説明の都合上、三角のマークで考えますが、実際に表示する向きが△であれば▽というように、上下を逆さにした絵を描きます。

グラフを表示するための空っぽのムービークリップを作り、この中に attachMovie でマークを必要な数だけ配置していきます。
マーク１つ分の大きさと表のマス目（表計算ソフト式に言うとセル）の幅および高さが予め決まっていれば、位置は for ループで計算できます。

こうしてできたグラフは

　▽　▽　▽　▽
　▽　▽　▽　　
　▽　　　▽
　　　　　▽

と、マークが上から吊り下がっているような状態になっています。
そこで、グラフのムービークリップ全体を縦反転します。
すると、

　　　　　△
　△　　　△
　△　△　△
　△　△　△　△

このように、下から積みあがっている形になります。
スクリプトでの縦反転は、ムービークリップが持っている _yscale プロパティに負の拡大率（等倍の縦反転は -100 ）を入れることで実現できます。

マークを配置した直後の状態での縦反転とは、ムービークリップの上辺を軸にして上に折り返すようなものです。
これだけではマークが上の方に行ってしまいますので、縦反転の後でグラフ全体を移動します。
グラフの左上の座標が決まっている場合は、マークを並べる前にグラフのムービークリップをグラフの左上にあたる位置に配置しておいて、縦反転の後でムービークリップの高さの分だけＹ座標を下にずらすと簡単です。
科目数が異なるなどでグラフの配置位置や大きさが不明であっても、マークを置いた後であればグラフの大きさが確定していますから、幅と高さを考慮しながらどこにでも移動できます。

科目名の表示には、もう１つムービークリップを用意します。
やはり空っぽのムービークリップを作り、この中に、スクリプトで同じく空っぽのテキストフィールドを科目の数だけ作成します。
テキストフィールドに科目名を表示したら、ムービークリップ全体をグラフのムービークリップの下に移動して完成です。

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

作り方の一例です。

マークを、ムービークリップシンボルとして作ります。
絵は先述の通り、実際に表示する向きで描き、最後に縦反転（絵を選択した状態で「修正」メニュー→「変形」→「縦反転」）で逆さにしてください。
このシンボルの基準点は左上にします。
ちなみに、シンボルの１番下のレイヤーに透明な四角形を描き、マークはこの四角形よりも小さく描いて上のレイヤーに配置すると、マークの形に関係なく任意の大きさのシンボルを作ることができます。

マークのシンボルに、リンケージを設定します。
「ライブラリ」パネルでシンボルを選んだ状態で、右クリック（ Mac では control ＋クリック）で出すメニューから「リンケージ...」を選択してください。
「 ActionScript に書き出し：」と「最初のフレームに書き出し」にチェックを入れ、「識別子：」の項目に名前を入力してください。
ここでは仮に” MARK ”と付けたとします。

セルの幅や高さ・マークの大きさなどは、予め決めておいてください。
プロフェッショナル版の Flash MX 2004 や Flash 8 には DataGrid という、表のコンポーネントが付いています。
DataGrid コンポーネントは行と列の幅をスクリプトで変更できたり、ドラッグにより列幅を調節できたりと、かなり高機能で柔軟な設計になっています。
しかし、それだけに設計理念も制御用のスクリプトも複雑です。
このような柔軟性を求めると、掲示板では書ききれないほどの複雑なスクリプトになってしまいますから、ここではセルもマークも固定の大きさということで話を進めます。

以上で準備は完了です。
次はスクリプトを設定します。

*************************************

当方は PHP やデータベースには詳しくありませんので、データの取得処理は省略させていただきます。
データの取得について不明な点は、PHP のカテゴリーなどで別のスレッドを立てて質問してみてください。詳しい方から回答がいただけるかと思います。

取得したデータは配列変数に入れて、

　study_data[ 0 ] = { subject : "科目Ａ" , lv : 3 }
　study_data[ 1 ] = { subject : "科目Ｂ" , lv : 2 }
　　　：

といった形で扱えるように加工してください。
今回はさしあたって、スクリプトでデータを作ります。

マークのシンボルは、基準点が左上、絵が逆さに描かれている状態で、リンケージ識別子名を” MARK ”とします。
大きさは 50 × 50 px を想定しています。
このスクリプトはメインのタイムラインのフレームに設定してください。

（↓各行頭に全角のスペースが入っています。コピーする際は、全て半角のスペースかタブに置き換えてください）

　/////////////////////////////////////////////////////
　//初期設定
　/////////////////////////////////////////////////////

　//グラフと科目名表示用の空のシンボルを作る
　this.createEmptyMovieClip( "graph" , 0 );
　this.createEmptyMovieClip( "footer" , 1 );

　//グラフの左上になる位置にムービークリップを移動
　graph._x = 10;
　graph._y = 50;

　//マークとセルの幅・高さを定義
　mark_w = 50;
　mark_h = 50;
　cell_w = 100;
　cell_h = 70;

　//マークをセルの中央に表示するための余白
　margin_w = Math.floor( ( cell_w - mark_w ) / 2 );
　margin_h = Math.floor( ( cell_h - mark_h ) / 2 );

　//履修データ
　study_data = new Array();
　study_data =
　[
　　{ subject : "コンピュータ概論" , lv : 3 } ,
　　{ subject : "初級情報処理" , lv : 2 } ,
　　{ subject : "基礎プログラミング" , lv : 4 } ,
　　{ subject : "自由制作演習" , lv : 1 }
　];

　/////////////////////////////////////////////////////
　//グラフの描画
　/////////////////////////////////////////////////////

　//マークの初期化情報を渡すオブジェクトと、
　//マークの数を数える変数（深度を決める際に使用）
　init_obj = new Object;
　mark_cnt = 0;

　//マークを配置する
　for( i = 0 ; i < study_data.length ; i++ )
　{
　　for( j = 0 ; j < study_data[ i ].lv ; j++ , mark_cnt++ )
　　{
　　　//マークの位置を決める
　　　init_obj._x = cell_w * i + margin_w;
　　　init_obj._y = cell_h * j + margin_h;

　　　//インスタンス名を決める
　　　//命名規則は mark○_△
　　　clip_name = "mark" + i + "_" + j;

　　　//シンボルを挿入
　　　graph.attachMovie( "MARK" , clip_name , mark_cnt , init_obj );
　　}
　}

　//完成したグラフを縦反転して下を基点にしたグラフにする
　graph._yscale = -100;

　//表示位置の調整
　graph._y += graph._height;

　/////////////////////////////////////////////////////
　//科目名の表示
　/////////////////////////////////////////////////////

　//書式を定義
　format = new TextFormat();
　format.align = "center";
　format.font = "_明朝";
　format.size = 12;

　for( i = 0 ; i < study_data.length ; i++ )
　{
　　//テキストフィールドの位置と大きさ、およびインスタンス名を決める
　　text_x = cell_w * i;
　　text_y = 0;
　　text_w = cell_w;
　　text_h = 16;
　　text_name = "subject_name" + i;

　　//空のテキストフィールドを作る
　　footer.createTextField( text_name , i , text_x , text_y , text_w , text_h );

　　//テキストフィールドの書式を変更し、科目名を表示する
　　footer[ text_name ].border = true;
　　footer[ text_name ].text = study_data[ i ].subject;
　　footer[ text_name ].setTextFormat( format );
　}

　//科目名の表示をグラフの下に移動
　footer._x = graph._x;
　footer._y = graph._y;

*************************************

大体の流れは、

　・空のムービークリップを２つ、スクリプトで作成する。
　　（インスタンス名は、グラフ用： graph　科目名表示用： footer ）

　・ graph の中に、マークのシンボル” MARK ”を attachMovie で挿入していく。
　　　　Ｘ方向の位置は履修データの配列変数のインデックス番号（科目の並び順）とセル幅、
　　　　Ｙ方向の位置は履修データから取得した lv 識別子の値（科目のレベル）とセルの高さ
　　とそれぞれのマージンを元に位置を求め、セルの中央に配置する。

　・最後に graph を縦反転して向きを正し、表示位置を調整する。

　・ footer に科目の数だけ空のテキストフィールドを作る。
　　位置と大きさは、科目数とセルの幅から決める。

　・テキストフィールドに科目名を表示し、footer 全体を graph の下に移動する。

です。

マークやセルの大きさ・履修データは仮のものです。実際の作品に合わせて適宜変更してください。
マークの大きさは変数 mark_w と mark_h に、セルの大きさは cell_w と cell_h に入れています。

科目名を表示するテキストフィールドは、マークの位置を分かりやすくするために境界線を有効にしています。
不要でしたら、科目名を表示する処理内の

　footer[ text_name ].border = true;

↑この１行を削除してください。

マークと科目名は個数が多いので、１つ１つをバラバラに配置すると移動などがとても面倒になります。
マークはグラフ用のムービークリップに、科目名は列ヘッダ用のムービークリップ内にまとめておけば、配置する際も親の基準点を原点とする座標になるので考えやすく、全体の表示位置を調整する時も一括して移動できて簡単です。

なお、最終的には graph の基準点は”左下”になります。
graph の _x と _y はムービークリップの左下の座標を表します。位置を決める際にはご注意ください。
上記の例では単純に高さの分だけ移動しただけですが、ステージの大きさから計算して中央に表示するといったことも可能だと思います。

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

・・・とまあ、Flash とはいえ位置を視覚的に確認しながら作る方法ではありません。

グラフのムービークリップは最終的には縦反転していますが、マークを配置する時は普通に、縦方向は上から下に、横方向は左から右に見て位置を計算しています。
位置の求め方がよく分からなくなったら、図に描いて考えてみてください。
計算そのものは数学の難しい式と理論ではなく、単純な算数の問題です。

ムービークリップをスクリプトで移動する方法や基準点のことなどは、解説サイトか入門書をご参考になさってください。
長くなってすみませんでした。

お礼

大変参考になりました！
一度このようにしてチャレンジしてみます。
ありがとうございました。

回答No.3

noname#35109

HTML や CSS ではなく Flash 作成をメインとしている立場の者からの回答です。
しかし，
＃１ の方や ＃２の方の回答の方が十分納得できてしまうのです...。

> Flashならば座標指定が出来るのでFlashをインターフェイスに
> 作成しようと考えたのですが、どのように作成すれば宜しいでしょうか？

うーーん，
何とも言えませんね。

レイアウトの自由度のみを考えると Flash は無茶苦茶簡単ですが…。
実際に作成されて詰まった部分をご質問されないと，
どうにでもできすぎて，答えようがありません。

ついでに，
HTML のように具体的な ActionScript を提示しても，
Flash をされていなければ再現のしようもないと思いますし。

> 行いたいイメージ
> 　　□
> 　　□　□
> 　　□　□
> 科目A　　B
>
> ですので、Flashならば座標指定が出来るので …

うーーーん，どうでしょうか？？？
ActionScript の理解も，Flash での再現もできないという前提で，
専門用語などを使わずに説明しますと....。

Flash で手っ取り早くするには，
Flash では座標指定など使いません。
想定すべき箱は全部配置してしまいます。

箱（ムービークリップ）を１つ作って，
あらかじめ想定出来る場所にコピペで手動で配置し，
その箱のプロパティを，
PHPなどから得た数値や条件によって，
不要な箱は非表示にさせます。

　箱._alpha = 0;
　（↑箱を透明にする）

もしくは，

　　箱._visible = false;
　（↑箱を非表示にする）

簡単にビジュアル的に言うとこういうことです↓。

行いたいイメージ
　　■　　□ ←透明
　　■　　■
　　■　　■
科目A　　B

また，私がこのコミュニティで使う方法です（例↓）。

http://oshiete1.goo.ne.jp/qa2427794.html
　↑教えて!goo　↓OKWave （同じです）
http://okwave.jp/qa2427794.html

質問内容や回答内容はどうでもよくて，
私が ＃３ で回答しているような図のことです。
ここではプロポーショナルフォントがデフォルトなので，
上記のように図示しないとずれてしまします。

しかしこれって，普通に JavaScript や CSS で使われている方法ではないでしょうか？
＃１の方や＃２の方の案以外ですが，上のように思います。

箱を「ある」か「ない」かで表現すると難しくなります。
まず見える箱を「box1.gif」などで用意しておいて，
それと同じ寸法の「box0.gif」という透明なGIFファイルを用意します。

そして，
「box0.gif」なり「box1.gif」を表示させるスペースだけは確保しておいて，
箱が必要な箇所には「box1.gif」（普通の箱），
箱が不要な箇所は「box0.gif」（透明な箱）を表示させれば良いのではないでしょうか。

思うのですが…，
HTML や CSS でこういう考え方ができなければ，Flash でもできないと思います。
結局，質問者さまが書かれている条件では Flash を使っても，
発想に躓いて，同じ結果になるような気がします。

Flash 作成専門側からしたら，
是非とも Flash でインターフェイスを作成して頂きたいとはおもいますが，
どうしても，＃１の方や＃２の方の意見の方がうなずけてしまうのが現状です。

変なことを申し上げましてすみません。

お礼

詳しい説明をありがとうございます。
頑張ってみます。

回答No.2

suzuki-_-

> HTMLだと、左から、もしくは上から
> 表示するのが前提となっているため

難しく考えすぎだと思いますよ
HTML上で、listとして並べるかもしくはNo.1の方の意見のようにtableで個別のセル毎の形として作れば問題ないかと思います
高さが合わないところは空白を入れれば済みますしね

例えば
■css
.lvlist {
margin:0;
padding:0 5px;
float:left;
list-style:none;
text-align:center;
}

■HTML
<ul class="lvlist">
<li>&nbsp;</li>
<li>&nbsp;</li>
<li>&nbsp;</li>
<li>科目</li>
</ul>
<ul class="lvlist">
<li>□</li>
<li>□</li>
<li>□</li>
<li>Ａ</li>
</ul>
<ul class="lvlist">
<li>&nbsp;</li>
<li>□</li>
<li>□</li>
<li>Ｂ</li>
</ul>

とりあえずHTML文法上おかしくなりますが、
Flashでやるとしたら完全に望むようなサンプルはまずないと思うので、
結局基本組から作らなければならなく、もっとややこしくなりますよ。。。

お礼

なるほど、空白を入れるのですね。
やってみます、ありがとうございました。

回答No.1

LACOMS

データの積み上げが、少ないのであればテーブルにPHP変数を
埋め込む形でいかがでしょうか？

お礼

やっと理解できました。
ありがとうございました。