
| プレゼンテーションをFLASHで、ということで、棒グラフの作成について勉強してから、はや4年近くになる。 私自身がプレゼンテーションをする機会が皆無に近い状態になっていることもあり、余り取り組む気力が起きなかったのであるが、やはり折れ線グラフぐらいは追加しなければという思いはずっと持ち続けていた。 そこで今回、ふとその気になったので、折れ線グラフ作成のお勉強をすることにしたい。 FLASHで作るのであるから、動きのあるものに、ということで、線がデータを追って伸びるタイプのものにした。 目盛りが自動的に表示できるようにしたいとか、いろいろ機能的に付け加えたいと思ったが、それは、Excel にまかせることにして、Flashならではの手作りの余地をいっぱい残した、シンプルなものである。 例に示したサンプルは、データ数も少なく、表示の迫力に欠けるが、データ数が多いケースの場合は、線の動きをもっと速めた方がよいかもしれない。 線の色、太さも調節可能である。 |
|
| ステージの準備: (このSAMPLEの場合) ●400*350、背景色:青、12fpsのステージを準備 ●縦軸、横軸の線を引き、目盛りを入れる (ここでは縦:0-100%、横10-3月) ●グラフを描く数だけのボタンを配置する (ここでは、yes_btn、no_btnの二つ) ●必要に応じて、題目やコメントを配置する |
|
| スクリプト(as2.0) (ROOT、FRAME1) | |
var yesx = [42, 81, 112, 241, 286]; |
系列1のx値を配列で定義(1月当り50pxで日付を計算) y値(%値そのまま) 系列2のx値を配列で定義 y値 x軸方向表示幅を調節するための係数 y軸方向表示幅を調節するための係数 グラフ左上の座標(原点) ボタンのリリースを可能にする指標 各データの表示座標の計算 y軸方向は、ステージの上方から下方にプラスになるので 100%から差し引いている 「支持するボタン」がリリースされたら もし、clickableがtrueなら 線が引かれている間はボタン操作を不能にする 空のmcを作成 createLineChart関数へ 引数は順に、mc、データ、線の太さ、色 線のプロパティ 最初の点に移動 出発座標を最初の点に 線の動きのスピード係数(px/frame) 毎フレームの動き 現在座標から、座標(x、y)に線を引く 各データ座標間で m:勾配(y = mx) x座標を毎フレーム d だけ大きく y座標は、mxだけ 最終ポイントに達したら、onEnterFrameを削除 clickableをtrueに(ボタン操作を可に) |
| HOME お勉強総リスト | |