トップへ戻るニュースフォーラムFLASH-ML 過去ログBak@Flaダウンロードよくある質問と答
ログイン
ユーザ名:

パスワード:


パスワード紛失

新規登録
メインメニュー
メイン
   コーダーズルーム【スクリプト系】
     lineToで折れ線グラフ
投稿するにはまず登録を

スレッド表示 | 古いものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
Fla4man
Åê¹ÆNo.20230
投稿日時: 2005-9-13 0:41
職人
居住地: かまくら
投稿: 517
使用環境:
WinMe,Win2000,
Flash4,アズさん,大仏、delphi
Re: lineToで折れ線グラフ
これを機にゼロからの描画とかテキストフィールドとか避けていたものに挑戦したところ
何も拡大とかしなくてもリアルタイムの更新で充分であることが分かりました。
つまり前のレスは余計な心配に基づいたもので
リアルタイムでclearしながら線の長さを伸ばす方法で充分だと言うことです。

とりあえず

http://www.ne.jp/asahi/net/dunk/tq/draw01.swf

こんなものを作りました。

のびるところはマウスで手動です。
マウスをおしてドラッグすると線がのびて離すと確定します
リアルタイム描画部分(赤)は一つの子MCの上で
(0,0)から引っ張っています
確定した部分はrootに書き込んでいます。
書き込みと同時に子MCは消して位置を線の終点に移動しています

グラフの描画などの場合は
setInterval等でマウスの動きに相当する事をすれば良いわけです。

確かに描いたものを隠しておいて左から右にマスクを動かせば目的に近い表示になるし
それでいいと言うのなら構いませんが
やはり描画APIを使うからには「すじ」と言うものがあると思います。

F7以前であれば今回の手法が正しいやり方ですが
Flash8時代は確定部分は線で描かずに
ビットマップにする形が正しいと思います。

その辺含めて後日改善してみようかと思います。(トレースとか)
線を描き終えたあとに新命令のfloodfill(バケツツール)を入れるのが良さそうです
質問が多いので描画記録をローカル保存する形というところでしょうか?

今回はFlash4すらつかわずに0から作ってみました。
ちなみにスタートファイルは
46 57 53 07 20 00 00 00 70 00 0C 80 00 00 96 00
00 1E 01 00 43 02 FF FF CC 01 03 00 40 00 00 00
です。

あと今回は触れませんでしたが
携帯用などでグラフをやる場合極細線のMCを回転縮小してつなぐやり方で
同様のことができます。
つまり描画API登場以前から「線を描く」ことは可能だったわけです。


----------------
通常のハンドル名:×○○× ねた回収モードに突入 現在1/100

ゲスト
Åê¹ÆNo.19987
投稿日時: 2005-9-3 11:36
Re: lineToで折れ線グラフ
たくさんのアドバイス、ありがとうございます!
頂いたアドバイスすべてを、「ほうほう、なるほど!」と理解できない自分の無知さがとても情けなく、もどかしいです・・・
頑張らなければいけませんね。

現状なのですが、たとえば毎月の電気代をグラフにするとします。
・グラフの軸の絵がステージに書いてあって、(X軸が1月?12月、Y軸が電気代(円)です)
・グラフの絵に空(カラ)のMCがおいてあります(グラフの座標をとりやすくするための起点として使います)、
・ステージ上に12ヶ月の電気代を入力できるテキスト入力があり、
・「グラフを描く」というボタンがあります。

1.テキスト入力に12ヶ月分の電気代を入れる
2.「グラフを描く」ボタンを押す
3.電気代のテキスト入力データをもとに、それぞれの月の座標を計算する
4.空のMCに対して、lineToを使って座標から座標に線を引いていく
となっています。
なので、一瞬で12ヶ月分の折れ線グラフが出来上って表示されます。
ですが、作成したい出来上がりの理想のイメージは、1月、2月、3月・・・12月まで、順番にだんだんと線が伸びていく感じです。
なので、森様に頂いたサンプルのように、上記の現状の手順できあがったものに、マスクをかけて徐々に表示をすれば、見た目は私の理想のイメージ像になります。これなら私にもできそうです。
(サンプルまで頂いて本当にありがとうございます!!!)

最初、自分でこのようにしたらどうだろうと思ったのは、lineToを細切れにしてタイマーで少しずつ描画していく、だったんですが、ナンセンスかなぁと。(実験まではしてないのですが・・・)
次に、だんだんと線が伸びるトィーンのMCを用意して、角度と線の長さを調整してアタッチするというもの。
でも、これだと、1月から2月までの座標にわたるようにアタッチして、トィーンで2月まで伸びたのを確認してまた2月から3月までアタッチして・・・になってしまうし、それができるかわかりませんでした。

引用:

Fla4manさんは書きました:

メインのMCはデータが決まってから描き始めるという前提です。
子MCに斜辺を描いてスケールで伸ばし、のびきったところでメインに描く
この繰返しであとはいけそうです。
つまり点から点へ点が確定したら線を引く形です。
最終的な線の数はX軸のデータ数のみとなります。


スケールで伸ばすのをスクリプトで描くと、一瞬で伸びてしまうと思うのですが、それを何フレームかにわたって書いて伸ばしていけばいいという意味でいいでしょうか?

また、検索キーワードのご紹介もありがとうございます。
参考にして、googleで探してみたいと思います。
森 巧尚
Åê¹ÆNo.19983
投稿日時: 2005-9-3 1:42
モデレータ
居住地: 宝塚
投稿: 650
使用環境:
.5/CS4/Safari3
XP+2000//IE6
Re: lineToで折れ線グラフ
うーん。どうも誤解があるようですね。
だめとも悪いとも言ってませんよ。それに私もプログラム歴は長いですから、Fla4manさんの言おうとされていることはわかってます。

何を作るにしても、方法は何通りもあります。そのいろいろな方法をこういう場で出し合えるのはいいことだと思いますよ。
どの方法がよくてどの方法がよくないかというのは、一概にはいえません。時と場合と人によりいろいろです。

ただ、客観的にみて感情的な文章はわかりにくいので、もう少し感情を抑えた文章にしてくださいということを言っているのです。
感情に任せて筆を走らせていると暴走しておかしな流れになりがちですし、そもそも読んでいる人が怖くなります。

さて、誤解のあった肝心の本題ですが、lineToを使った折れ線をマスクを使って疑似的に描画すると、このようになりますよ。>megumi99さん

「ここ」

ただ、マスクの移動するスピードは一定なので、折れ線の角度によって描画スピードが変化してしまいます。
PowerPointとかで、あらかじめ用意していた折れ線をワイプで表示しているような感じですね。
これがまずいようでしたら別の方法を試みてください。


----------------
森 巧尚
http://www.ymori.com

Fla4man
Åê¹ÆNo.19981
投稿日時: 2005-9-3 0:25
職人
居住地: かまくら
投稿: 517
使用環境:
WinMe,Win2000,
Flash4,アズさん,大仏、delphi
Re: lineToで折れ線グラフ
今回のはなしは最初の書き込みの人の意図どうりにできる話です。

マスクという発想は誤りです。避けるべきでしょう
それは完成された絵などに対して適用すべきものです。

-----------
描画命令でかき直しっていったら
一旦クリアしてかき直すことだとは思いませんか?
clear();
てそんなに特別で難解なんですか?

LINE命令などで動的にポリゴンを描いているサイトは結構あると思います
別に変わった技術ではなく継続的にはぎれでかくことはないといいたかったのですが

最初から「描画命令は使わないのですが」と触れていると思います。
基本的に私は知りたいこと以外は詳しくないのでレスは避けています

そして質問者が聞くならばともかく
森さんがわからないから
「わかりにくい文章」
というのは違うんじゃないかと思います。

何でわざわざその内容を否定強化するようなレスをするのか
理解に悩みます。

又分からない人は説明しても分かりません。
興味を持って知りたいと思ったときにはかなり細かい情報で応えているつもりです。
そのためGoogle用のキーワードなどを書き込んでいることも多いはずです。

2 X 10
という演算を

2 + 2+ .....
とやっても別に構わないですけれど
それ以外はだめというのは押し付けないで欲しいです。
森さん自体そのやり方だと結構痛いということを体感しているはずです。
そのベターでないプロセスを他の人に伝えることは
同じ失敗を繰り返さないという点で非常に有用な情報だとおもいます。

しかしムービークリップの一部を隠す系のはなしはちょっと今回の目的とは路線をことにするように思います。
それは却下しないと道を間違える人がでると思います。

私自身描画命令の実践経験が少ないしそこに力をそそいでいないので
サンプルを作る技量がないのです。

適切なサンプルを見つけるためのキーワード
「Flash 描画命令 グラフ」
結構あると思います。

あとのびる途中の部分は下を参考にしてください
------
以下は現段階でやれといわれた場合に私が取る方法です。

再描画処理についてどの程度のものかわからないのですが
もしもちらつきが多いようであれば
二つのMCに交互に描画してフリップする形を私ならば取りますが。
点から点への移行部分だけ別MCにするのも手だとおもいます。

メインのMCはデータが決まってから描き始めるという前提です。
子MCに斜辺を描いてスケールで伸ばし、のびきったところでメインに描く
この繰返しであとはいけそうです。
つまり点から点へ点が確定したら線を引く形です。
最終的な線の数はX軸のデータ数のみとなります。

森さんが最初にためした細切れの手法もFlash8の場合
描画後に一枚の画像にすることによって軽くできるので
やはりFlash8には相当メリットを感じます


----------------
通常のハンドル名:×○○× ねた回収モードに突入 現在1/100

森 巧尚
Åê¹ÆNo.19976
投稿日時: 2005-9-2 21:52
モデレータ
居住地: 宝塚
投稿: 650
使用環境:
.5/CS4/Safari3
XP+2000//IE6
Re: lineToで折れ線グラフ
引用:

Fla4manさんは書きました:
普通にかき直しというのはだめなんですか?
<以下略>

ちょっとなんのことを言っているのか伝わってこないですね。
他の人にわかりにくい文章だと思いますよ。

Fla4manさんはいつも他の人が気づかないような技術的に詳しいことを知っていてそれを発言されることが多いのですから、できれば、わかっている人だけがわかるような文章ではなく、わからなくて聞いてきている人にこそわかるような文章で説明していただけるとありがたいです。

引用:
チュートリアル系のサイトでマウスで拡大する四角形とか
星型とか表示するサイトがあります。

これに関しては何を指しているのかがわからないのではっきりとは言えないのですが「少ない線の図形を毎回描き直している」か、「図形が描かれたムービークリップ自体のサイズを変化させること」で実現しているのだと思います。(でも、megumi99さんご自身がすでに言っておられますね)
そのどちらの方法でも早く描画できると思いますよ。

引用:
つまり今回の要望は通常仕様範囲で充分出来る内容だと思います

ということですが、megumi99さんが「目標までの座標を細切れにして、少しずつ線を描くようにすれば」と迷っておられるようだったので、私も以前に同じような経験をしたので、アドバイスさせていただきました。


----------------
森 巧尚
http://www.ymori.com

Fla4man
Åê¹ÆNo.19975
投稿日時: 2005-9-2 20:28
職人
居住地: かまくら
投稿: 517
使用環境:
WinMe,Win2000,
Flash4,アズさん,大仏、delphi
Re: lineToで折れ線グラフ
普通にかき直しというのはだめなんですか?
私自身はムービークリップかF8関数系なので
line命令はちょっといじった程度で
「これだっ」とはいえないのですが

チュートリアル系のサイトでマウスで拡大する四角形とか
星型とか表示するサイトがあります。

つまり一本の線ならば起点と終点の1本だけで
決して重い処理ではないはずです。

あと3D風にのびる棒グラフみたいなデモをMDNかなんかの
チャートリアルサイトで見たことがあります。

つまり今回の要望は通常仕様範囲で充分出来る内容だと思います

但し今後はFlash8のビットマップ描画でやる方が本流になると思います


----------------
通常のハンドル名:×○○× ねた回収モードに突入 現在1/100

ゲスト
Åê¹ÆNo.19974
投稿日時: 2005-9-2 20:23
Re: lineToで折れ線グラフ
アドバイスありがとうございます。

確かに、細切れにする単位によって、負荷が大きくなるなとは思っていました。

lineToで全てを書いておいて、マスクで徐々に表示、を検討してみたいと思います。

どうもありがとうございました。
森 巧尚
Åê¹ÆNo.19972
投稿日時: 2005-9-2 18:54
モデレータ
居住地: 宝塚
投稿: 650
使用環境:
.5/CS4/Safari3
XP+2000//IE6
Re: lineToで折れ線グラフ
引用:

megumi99さんは書きました:
ムービークリップを使わずに、スクリプトでlineToで線を少しずつ書いていくというのを考えたいと思っていました。
目標までの座標を細切れにして、少しずつ線を描くようにすれば、と思ったのですが、ゆっくりとその線を書いていこうと思うといい案が浮かばず・・・

lineToは負荷が大きくて、描画する数に影響を受けるので、たくさん(数百本ぐらい)線を描画するとスピードが遅くなりがちです。ゆっくりと線をつぎ足しながら描画していく手法だと結果的に重くなりがちなので、検証しながらしたほうがいいですね。

別の方法としては、あらかじめ折れ線は全部描いて置いてから、マスクを使って徐々に表示させていくという方法も考えられますね。疑似的ではありますけど。


----------------
森 巧尚
http://www.ymori.com

ゲスト
Åê¹ÆNo.19968
投稿日時: 2005-9-2 14:49
Re: lineToで折れ線グラフ
いつもアドバイスありがとうございます。

ムービークリップを使わずに、スクリプトでlineToで線を少しずつ書いていくというのを考えたいと思っていました。
目標までの座標を細切れにして、少しずつ線を描くようにすれば、と思ったのですが、ゆっくりとその線を書いていこうと思うといい案が浮かばず・・・

よく考えて見ると、1ピクセルの黒い点をMCで作り、それを伸ばしたり、lineToだけでなくほかの方法もありそうですね。

紹介していただいたリンクなどを参考にしてみます。
野中文雄
Åê¹ÆNo.19963
投稿日時: 2005-9-2 13:28
ちょんまげら
居住地: 東京
投稿: 4531
使用環境:
CS5.5 .6.8 Vista Home Premium (SP1)
Re: lineToで折れ線グラフ
スクリプトを使わず、またモーショントゥイーンも利用せずに、「じわじわと伸びていく」線のアニメーションは、おつくりになれますか?

参考:「曲線がウニョウニョのびてゆくアニメーションを作りたいのですが

おわかりになったら、それをスクリプトでシミュレーションすればよいだけです。

参考:「文字を書く
lineToについて
引用:
megumi99さんは書きました:
このたび、折れ線グラフを作成したいのですが、lineToを使用すると、一気に線が引けてしまいます。
目標の座標まで、じわじわと伸びていくようにlineToを使用して書きたいのですが、いいアイディアが浮かびません。


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

(1) 2 »
スレッド表示 | 古いものから 前のトピック | 次のトピック | トップ

投稿するにはまず登録を
 
Copyright (C) 2003 FLASH-japan. All rights reserved.
Powered by Xoops