スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

--.--.-- | | スポンサー広告

一文字ずつ表示

テキストを一文字ずつ表示するサンプルです。タイプライター表示っていうんでしょうか。





上の欄に文章を入力して「表示」ボタンを押すと、その文章が下の欄に一文字ずつ表示されていきます。インターバル欄に数字を入れると文字を表示する時間間隔が変わります。

また、文章中に{数字}と入れるとその部分でインターバルを長くすることができます。{10}とかをそのまま出したいときは{{10}と書けばよいデス。

今回は、次に表示すべき文字を戻すIntervalStringクラスを作ってみました。

package {
/**
* 指定インターバル毎に文字を取り出せるクラス。
*/
public class IntervalString {
/** 元の文字列 */
private var _src:String;
/** インターバル */
private var _interval:int;
/** カウンタ */
private var _cnt:int = 0;
/** インデックス */
private var _index:uint = 0;
/**
* コンストラクタ。
* @param src 元の文字列
* @param interval 次の文字を取り出すのに必要なnext回数
*/
public function IntervalString(src:String, interval:int = 0) {
_src = src;
_interval = interval;
}
/**
* 次の文字を戻します。規定回数に達するまでは空文字を戻します。
*/
public function next():String {
// インターバル中ならカウンタを加算し、空文字を戻す。
if (_cnt < _interval) {
_cnt++;
return "";
}
// すべての文字を戻し終えていたらnullを戻す。
if (_index >= _src.length) {
return null;
}
// 元の文字列から次に戻す候補を取得する。
var c:String = _src.charAt(_index++);
// rはnに変換
if (c == "r") {
c = "n";
_cnt = 0;
return c;
}
// {が来たらインターバル指定の可能性があるので先読み
if (c == "{") {
var tmpIndex:uint = _index;
var tmpC:String;
var tmpVal:String = "";
// } がくるまで先読み
while ("}" != (tmpC = _src.charAt(tmpIndex++))) {
// {{のときは出力は{
if (tmpC == "{" &&
tmpVal == "") {
_cnt = 0;
_index = tmpIndex;
return tmpC;
}
// 数値でないなら{を戻し先読みはキャンセル。
// 数値なら値を保存し先読み続行。
if ("0123456789".indexOf(tmpC) < 0) {
_cnt = 0;
return c;
} else {
tmpVal += tmpC;
}
}
// {数字}で指定された分だけカウンタを戻す。
_cnt -= Number(tmpVal);
_index = tmpIndex;
return "";
}
// カウンタをリセットして文字を戻す。
_cnt = 0;
return c;
}
}
}
基本的にはコンストラクタで元の文字列を指定して、nextメソッドで一文字ずつ取り出すカッコウです。ただし、インターバルの分だけnextは空文字を戻します。これによって、同じ間隔(ENTER_FRAMEとか)でnextしてやるとインターバルが大きい方が文字表示が遅くなるという寸法デス。nextの中で先読みとかゴチャゴチャやっているのは{数字}パターンの処理デス。

そんでサンプルのフレームアクションの方はこんなカンジです。
// IntervalString変数。最初はundefined
var str:IntervalString;
// 表示ボタンのクリックイベントハンドラ
start_mc.addEventListener(MouseEvent.CLICK,
function(e:Event) {
// 出力をリセット
dest_txt.text = "";
// IntervalStringオブジェクトを生成
str = new IntervalString(src_txt.text, int(interval_txt.text));
});
// フレームアクション
addEventListener(Event.ENTER_FRAME,
function(e:Event) {
// IntervalStringが生成済みのときだけ処理する。
if (str) {
// 次の文字を取得し、出力先に追加
var c:String = str.next();
if (c != null) {
dest_txt.appendText(c);
} else {
// もう追加する文字がないときは変数をnullにして処理しない
str = null;
}
}
});
start_mcは「表示」ボタンです。クリックすると出力欄(dest_txt)をカラにして新たなIntervalStringオブジェクトを生成します。IntervalStringのコンストラクタで指定してるsrc_txtは入力欄、interval_txtはインターバル欄の値デス。

実際に一文字ずつ出力するのはENTER_FRAMEイベントハンドラでやってます。IntervalStringオブジェクトからnextで文字を取り出して、appendTextで出力欄に追加します。

スポンサーサイト

テーマ:Flash - ジャンル:コンピュータ

2007.08.26 | | Comments(0) | Trackback(0) | Flash CS3

スクロールボックス

スクロールバーとかで内容をスクロールさせるサンプルです。フツウはScrollPaneなんかを使うんでしょうか?そういったタグイのモノです。





スクロールバーを操作して、表示内容をスクロールさせることができます。
スクロールバーの両端にあるグレーの四角にマウスをのせると、その方向にスクロールします。

今回のサンプルでは、表示内容のオフセットを指定して一部を表示できるようなSpriteの継承クラスを作って、フレームアクションでソレを使ってスクロールを実現しています。

作成したクラス(ScrollBox.as)のソースコードはこんなカンジです。

package {
import flash.display.*;
import flash.events.*;
/**
* 内容をスクロール可能なボックス。
*/
public class ScrollBox extends Sprite {
/** マスク */
private var _mask:Sprite;
/** スクリーン */
private var _screen:Sprite;
/** ウィンドウの幅 */
private var _windowWidth:Number;
/** ウィンドウの高さ */
private var _windowHeight:Number;
/** x方向のスクロール位置 */
private var _scrollX:Number;
/** y方向のスクロール位置 */
private var _scrollY:Number;
/** x方向の目標位置 */
private var _targetX:Number;
/** y方向の目標位置 */
private var _targetY:Number;
/** スクロール速度係数 */
private var _scrollSpeed:Number;
/**
* コンストラクタ。
* @param w ウィンドウの幅
* @param h ウィンドウの高さ
*/
public function ScrollBox(w:Number = 10, h:Number = 10) {
_scrollX = 0;
_scrollY = 0;
_targetX = 0;
_targetY = 0;
_scrollSpeed = 0.3;
// スクリーンの生成
_screen = new Sprite();
addChild(_screen);
// マスクの生成
_mask = new Sprite();
var g:Graphics = _mask.graphics;
g.beginFill(0xFFFFFF);
g.drawRect(0, 0, w, h);
g.endFill();
_mask.x = 0;
_mask.y = 0;
addChild(_mask);
_screen.mask = _mask;
// フレームイベントハンドラを登録
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
/**
* 指定した座標が左上になるようスクロールします。
* @param x x座標
* @param y y座標
* @param easing イージングするか
*/
public function scrollTo(x:Number,
y:Number,
easing:Boolean = true):void {
if (x < 0) {
x = 0;
} else if (x > _screen.width - _windowWidth) {
x = _screen.width - _windowWidth;
}
if (y < 0) {
y = 0;
} else if (y > _screen.height - _windowHeight) {
y = _screen.height - _windowHeight;
}
_targetX = x;
_targetY = y;
if (!easing) {
_scrollX = x;
_scrollY = y;
_screen.x = -x;
_screen.y = -y;
}
}
/**
* フレームイベントハンドラ。
* @param evt イベントオブジェクト
*/
private function onEnterFrame(evt:Event):void {
var target:Object = evt.target;
// マスクサイズ調整
target._mask.width = target._windowWidth;
target._mask.height = target._windowHeight;
// スクロール処理
var newX:Number = _scrollX;
var newY:Number = _scrollY;
newX += (_targetX - _scrollX) * _scrollSpeed;
newY += (_targetY - _scrollY) * _scrollSpeed;
if (_targetX != newX || _targetY != newY) {
_scrollX = newX;
_scrollY = newY;
_screen.x = -_scrollX;
_screen.y = -_scrollY;
}
}
/**
* スクリーンを戻します。
* @return スクリーン
*/
public function get screen():Sprite {
return _screen;
}
/**
* ウィンドウの幅を設定します。
* @param w ウィンドウの幅
*/
public function set windowWidth(w:Number):void {
_windowWidth = w;
}
/**
* ウィンドウの幅を戻します。
* @return ウィンドウの幅
*/
public function get windowWidth():Number {
return _windowWidth;
}
/**
* ウィンドウの高さを設定します。
* @param h ウィンドウの高さ
*/
public function set windowHeight(h:Number):void {
_windowHeight = h;
}
/**
* ウィンドウの高さを戻します。
* @return ウィンドウの高さ
*/
public function get windowHeight():Number {
return _windowHeight;
}
/**
* スクロール速度係数を設定します。
* @param value スクロール速度係数
*/
public function set scrollSpeed(value:Number):void {
_scrollSpeed = value;
}
/**
* スクロール速度係数を戻します。
* @return スクロール速度係数
*/
public function get scrollSpeed():Number {
return _scrollSpeed;
}
/**
* 現在の水平方向のスクロール位置を戻します。
* @return 水平方向のスクロール位置
*/
public function get scrollX():Number {
return _scrollX;
}
/**
* 現在の垂直方向のスクロール位置を戻します。
* @return 垂直方向のスクロール位置
*/
public function get scrollY():Number {
return _scrollY;
}
}
}
ScrollBoxクラスは、中に_screenというスプライトを持っています。コイツに指定されたサイズでマスクをかけることで表示内容の一部だけが描画されるようにしています。使う側は、screenプロパティにaddChildしてスクロール表示したいモノを設定します。

scrollToメソッドがスクロール処理をするメソッドです。指定した座標が左上にくるように_screenの座標を動かします。
3つめのパラメータは、_screenの移動の際にイージングをするかどうかです。trueにすると、減速しながら指定した位置までスクロールします。

サンプルのフレームアクションはこんなカンジです。
// ボタンスクロール量
var btnValue:Number = 10;
// スクロールボックス生成
var box:ScrollBox = new ScrollBox();
addChild(box);
// スクロールボックスに表示オブジェクトを追加
var image_mc:IMAGE_MC = new IMAGE_MC();
image_mc.x = 0;
image_mc.y = 0;
box.screen.addChild(image_mc);
// スクロールボックスの位置/サイズを調整
box.windowWidth = 300;
box.windowHeight = 200;
box.x = 50;
box.y = 50;
// 縦スクロールバー
var vThumb_mc = verticalscrollbar_mc.verticalthumb_mc;
var vThumbMin = 0;
var vThumbMax = verticalscrollbar_mc.height;
vThumb_mc.addEventListener(MouseEvent.MOUSE_DOWN,
function(e:Event) {
e.target.dragging = true;
e.target.dragOffset = mouseY - e.target.y;
stage.addEventListener(MouseEvent.MOUSE_UP, verticalThumbRelease);
});
function verticalThumbRelease(e:Event) {
if (vThumb_mc.dragging) {
vThumb_mc.dragging = false;
stage.removeEventListener(MouseEvent.MOUSE_UP, verticalThumbRelease);
}
}
// 横スクロールバー
var hThumb_mc = horizontalscrollbar_mc.horizontalthumb_mc;
var hThumbMin = 0;
var hThumbMax = horizontalscrollbar_mc.width;
hThumb_mc.addEventListener(MouseEvent.MOUSE_DOWN,
function(e:Event) {
e.target.dragging = true;
e.target.dragOffset = mouseX - e.target.x;
stage.addEventListener(MouseEvent.MOUSE_UP, horizontalThumbRelease);
});
function horizontalThumbRelease(e:Event) {
if (hThumb_mc.dragging) {
hThumb_mc.dragging = false;
stage.removeEventListener(MouseEvent.MOUSE_UP, horizontalThumbRelease);
}
}
// スクロールボタン
up_mc.addEventListener(MouseEvent.MOUSE_OVER, doButtonMouseOver);
up_mc.addEventListener(MouseEvent.MOUSE_OUT, doButtonMouseOut);
down_mc.addEventListener(MouseEvent.MOUSE_OVER, doButtonMouseOver);
down_mc.addEventListener(MouseEvent.MOUSE_OUT, doButtonMouseOut);
left_mc.addEventListener(MouseEvent.MOUSE_OVER, doButtonMouseOver);
left_mc.addEventListener(MouseEvent.MOUSE_OUT, doButtonMouseOut);
right_mc.addEventListener(MouseEvent.MOUSE_OVER, doButtonMouseOver);
right_mc.addEventListener(MouseEvent.MOUSE_OUT, doButtonMouseOut);
function doButtonMouseOver(e:Event) {
e.target.on = true;
}
function doButtonMouseOut(e:Event) {
e.target.on = false;
}
// フレームアクション
addEventListener(Event.ENTER_FRAME,
function(e:Event) {
if (vThumb_mc.dragging) {
// 縦スクロールバーでのスクロール
vThumb_mc.y = mouseY - vThumb_mc.dragOffset;
if (vThumb_mc.y < vThumbMin) {
vThumb_mc.y = vThumbMin;
} else if (vThumb_mc.y > vThumbMax) {
vThumb_mc.y = vThumbMax;
}
var newY:Number = (box.height - box.windowHeight)
* (vThumb_mc.y - vThumbMin)
/ (vThumbMax - vThumbMin);
box.scrollTo(box.scrollX, newY, false);
} else if (hThumb_mc.dragging ) {
// 横スクロールバーでのスクロール
hThumb_mc.x = mouseX - hThumb_mc.dragOffset;
if (hThumb_mc.x < hThumbMin) {
hThumb_mc.x = hThumbMin;
} else if (hThumb_mc.x > hThumbMax) {
hThumb_mc.x = hThumbMax;
}
var newX:Number = (box.width - box.windowWidth)
* (hThumb_mc.x - hThumbMin)
/ (hThumbMax - hThumbMin);
box.scrollTo(newX, box.scrollY, false);
} else if (up_mc.on) {
box.scrollTo(box.scrollX, box.scrollY - btnValue);
} else if (down_mc.on) {
box.scrollTo(box.scrollX, box.scrollY + btnValue);
} else if (left_mc.on) {
box.scrollTo(box.scrollX - btnValue, box.scrollY);
} else if (right_mc.on) {
box.scrollTo(box.scrollX + btnValue, box.scrollY);
}
// つまみの位置を調整
if (!vThumb_mc.dragging) {
vThumb_mc.y = vThumbMin
+ (vThumbMax - vThumbMin)
* box.scrollY
/ (box.height - box.windowHeight);
}
if (!hThumb_mc.dragging) {
hThumb_mc.x = hThumbMin
+ (hThumbMax - hThumbMin)
* box.scrollX
/ (box.width - box.windowWidth);
}
});
最初にScrollBoxのインスタンスを生成し、表示内容であるimage_mcをscreenにaddChildしています。

スクロールバーは、バーのムービークリップ内につまみ(水色の四角)のムービークリップがあるという構造になっています。
つまみのムービークリップは、MOUSE_DOWNイベントハンドラでdraggingプロパティをtrueにします。このプロパティがtrueになっているとENTER_FRAMEイベントハンドラで、つまみの位置を元にスクロールが実行されるようにしています。また、マウスボタンを離したときにdraggingプロパティをfalseにするためにstageのMOUSE_UPイベントハンドラを登録しています。

スクロールボタン(グレーの四角)のほーは、MOUSE_OVERイベントハンドラとMOUSE_OUTイベントハンドラを登録しています。MOUSE_OVERイベントハンドラでonプロパティをtrue、MOUSE_OUTイベントハンドラでonプロパティをfalseにします。このプロパティによってENTER_FRAMEイベントハンドラ内でスクロール処理を行います。

ENTER_FRAMEイベントハンドラは、縦スクロールバー/横スクロールバー/4つのスクロールボタンの状態によって処理をふりわけています。スクロールバーのつまみを動かしている場合は、マウスカーソルの位置でつまみの位置をスクロール位置を調整します。スクロールボタンにマウスカーソルが乗っている場合は、btnValueの値分だけスクロールをさせます。
スクロールボタンによってスクロールした場合は、スクロールバーつまみの位置も設定します。

テーマ:Flash - ジャンル:コンピュータ

2007.08.19 | | Comments(0) | Trackback(0) | Flash CS3

Flash CS3でラバーバンド

以前エントリしたラバーバンドを描くと同様のものをFlash CS3で作りなおしてみました。





やってること自体は以前のエントリのものと同じデス。ステージをクリックするとラバーバンドがあらわれて、もう一度クリックするとソレが実線になってそこからまたラバーバンドです。

今回は、ラバーバンドを描画する部分をクラスにしてみることにしました。ソースコードはこんなカンジです。

package {
import flash.display.*;
import flash.events.*;
/**
* ラバーバンド描画クラス。
*/
public class RubberBand extends Sprite {
/** 開始x座標 */
private var _startX:Number;
/** 開始y座標 */
private var _startY:Number;
/** 終了x座標 */
private var _endX:Number;
/** 終了y座標 */
private var _endY:Number;
/** 線分の長さ */
private var _dash1:Number;
/** 間隔の長さ */
private var _dash2:Number;
/** 開始オフセット */
private var _offset:Number;
/** 線の太さ */
private var _lineWidth:Number;
/** 線の色 */
private var _lineColor:uint;
/** 線の透過度 */
private var _lineAlpha:Number;
/**
* コンストラクタ
*/
public function RubberBand(startX:Number = 0,
startY:Number = 0,
endX:Number = 0,
endY:Number = 0,
dash1:Number = 3,
dash2:Number = 4,
lineWidth:Number = 1,
lineColor:uint = 0x000000,
lineAlpha:Number = 1.0) {
_startX = startX;
_startY = startY;
_endX = endX;
_endY = endY;
_dash1 = dash1;
_dash2 = dash2;
_lineWidth = lineWidth;
_lineColor = lineColor;
_lineAlpha = lineAlpha;
_offset = 0;
// マウスイベントは受け取らない
mouseEnabled = false;
// フレームイベントハンドラを登録
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
/**
* 開始座標を設定します。
* @param x 開始x座標
* @param y 開始y座標
*/
public function setStart(x:Number, y:Number):void {
_startX = x;
_startY = y;
}
/**
* 開始x座標を戻します。
* @return 開始x座標
*/
public function get startX():Number {
return _startX;
}
/**
* 開始y座標を戻します。
* @return 開始y座標
*/
public function get startY():Number {
return _startY;
}
/**
* 終了座標を設定します。
* @param x 終了x座標
* @param y 終了y座標
*/
public function setEnd(x:Number, y:Number):void {
_endX = x;
_endY = y;
}
/**
* 線の色を設定します。
* @param color 線の色
*/
public function set lineColor(color:uint):void {
_lineColor = color;
}
/**
* 線の色を戻します。
* @return 線の色
*/
public function get lineColor():uint {
return _lineColor;
}
/**
* フレームイベントハンドラ。
* @param evt イベントオブジェクト
*/
public function onEnterFrame(evt:Event):void {
var g:Graphics = this.graphics;
// クリア
g.clear();
// 線スタイルの設定
g.lineStyle(_lineWidth,
_lineColor,
_lineAlpha,
true,
LineScaleMode.NORMAL,
CapsStyle.ROUND,
JointStyle.MITER,
1);
// 破線描画
var l:Number = Math.sqrt((_endX - _startX)
* (_endX - _startX)
+ (_endY - _startY)
* (_endY - _startY));
if (l < 2) {
return;
}
var sin:Number = (_endY - _startY) / l;
var cos:Number = (_endX - _startX) / l;
var d:Number = _offset;
var px:Number = cos * _offset;
var py:Number = sin * _offset;
while (d <= l) {
g.moveTo(px, py);
g.lineTo(px + cos * _dash1, py + sin * _dash1);
px += cos * (_dash1 + _dash2);
py += sin * (_dash1 + _dash2);
d += _dash1 + _dash2;
}
_offset = (_offset + 1) % (_dash1 + _dash2);
x = _startX;
y = _startY;
}
}
}
RubberBandクラスはSpriteを継承したクラスで、newしてaddChildして使うことを想定してマス。コンストラクタでは、開始点/終了点/破線の長さ/間隔の長さ/線の太さ/線の色/線の透過度を指定できます。

Event.ENTER_FRAMEイベントで、破線を描画します。破線を描画するロジックは以前のエントリと同様のものデス。また、開始点がこのオブジェクトのx, y座標になります。

アクセッサやら座標を設定するメソッドはサンプルで使用するもののみ記述してマス。

そんで、フレームアクションの方はこんなカンジです。
// ラバーバンド
var band:RubberBand
= new RubberBand(mouseX,
mouseY,
mouseX,
mouseY,
3,
4,
1,
Math.floor(Math.random() * 0x1000000));
band.addEventListener(Event.ENTER_FRAME,
function(e:Event) {
e.target.setEnd(mouseX, mouseY);
});
addChild(band);
band.visible = false;
// クリックイベント処理
stage.addEventListener(MouseEvent.CLICK,
function() {
// ラバーバンド描画中にクリックしたら線を確定
if (band.visible) {
var line:Sprite = new Sprite();
var g:Graphics = line.graphics;
g.lineStyle(1,
band.lineColor,
1.0,
true,
LineScaleMode.NONE,
CapsStyle.ROUND,
JointStyle.MITER,
1);
g.moveTo(0, 0);
g.lineTo(mouseX - band.startX, mouseY - band.startY);
line.x = band.startX;
line.y = band.startY;
line.mouseEnabled = false;
addChild(line);
} else {
band.visible = true;
}
// ラバーバンド開始点を設定
band.setStart(mouseX, mouseY);
// ラバーバンドの色を設定
band.lineColor = Math.floor(Math.random() * 0x1000000);
});
サンプルではRubberBandクラスのインスタンスは一つだけ作って、ソレを使いまわしています。

クリックイベントで実線を書いて、ラバーバンドの開始点をマウスの位置に再設定というカンジです。

テーマ:Flash - ジャンル:コンピュータ

2007.08.09 | | Comments(0) | Trackback(0) | Flash CS3

円グラフを描画する

イワユル円グラフを表示するサンプルです。





A,B,Cの入力欄に数値を入力して「実行」ボタンを押すと、入力値の比率に応じた円グラフが描画されます。

どうやって描画してるかってーと、

  1. 鋭角が1度の三角形のスプライトをグルッと360度分作る(非表示で)
  2. データの比率にあわせて、作成したスプライトをColorTransformで着色
  3. ENTER_FRAMEイベントでスプライトを表示していく
といったカンジです。今回のサンプルではこのへんの処理をSpriteを継承したクラスにまとめてみました。

で、そのクラス(PieChart.as)のソースコードはこんなカンジです。
package {
import flash.display.*;
import flash.events.*;
import flash.geom.*;
/**
* 円グラフ。
*/
public class PieChart extends Sprite {
/** 半径 */
private var _radius:Number;
/** 円グラフを構成するスプライトの配列 */
private var _sector_array:Array;
/** 描画速度 */
private var _draw_speed:Number;
/** データの配列 */
private var _data_array:Array;
/** 表示インデックスカウンタ */
private var _cnt:int;
/**
* コンストラクタ。
* @param radius 円グラフの半径
* @param drawSpeed 描画速度
*/
public function PieChart(radius:Number = 100,
drawSpeed:uint = 1) {
_radius = radius;
_draw_speed = drawSpeed;
_sector_array = new Array();
// 一周分のスプライトを生成
for (var i:int = 0; i < 360; i++) {
var sec:Sprite = createSector(i);
addChild(sec);
_sector_array.push(sec);
}
_data_array = new Array();
}
/**
* 単位各のスプライトを生成し、戻します。
* @param startAngle 開始角度
* @return 生成したスプライト
*/
private function createSector(startAngle:Number):Sprite {
var sector:Sprite = new Sprite();
var l:Number = _radius / Math.cos(Math.PI / 360);
var startRad:Number = startAngle * Math.PI / 180;
var endRad:Number = (startAngle + 1) * Math.PI / 180;
var g:Graphics = sector.graphics;
g.beginFill(0x000000, 1.0);
g.moveTo(0, 0);
g.lineTo(l * Math.sin(startRad), -l * Math.cos(startRad));
g.lineTo(l * Math.sin(endRad), -l * Math.cos(endRad));
g.endFill();
sector.visible = false;
return sector;
}
/**
* データを追加します。
* @param value 値
* @param color 色
* @param alpha 透過度
*/
public function addData(value:Number,
color:uint,
alpha:Number = 1.0):void {
_data_array.push({value:value, color:color, alpha:alpha});
}
/**
* データをクリアします。
*/
public function clearData():void {
_data_array = new Array();
}
/**
* 描画を開始します。
*/
public function startDraw():void {
var total:Number = 0;
for each (var data:Object in _data_array) {
total += data.value;
}
var accDegree:Number = 0;
for (var i:int = 0, iEnd:int = _data_array.length;
i < iEnd; i++) {
data = _data_array[i];
var degree = Math.ceil(360 * data.value / total);
for (var d:int = 0; d < degree; d++) {
var idx:int = accDegree + d;
if (idx < _sector_array.length) {
var sector:Sprite = _sector_array[idx];
var ct:ColorTransform = new ColorTransform();
ct.alphaMultiplier = 0;
ct.alphaOffset = data.alpha * 255;
ct.color = data.color;
sector.transform.colorTransform = ct;
sector.visible = false;
}
}
accDegree += degree;
}
// onEnterFrameハンドラで表示
_cnt = 0;
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
/**
* フレーム毎の処理です。
* @param evt イベントオブジェクト
*/
private function onEnterFrame(evt:Event):void {
for (var i:int = 0; i < _draw_speed; i++) {
if (_cnt + i < _sector_array.length) {
_sector_array[_cnt + i].visible = true;
}
}
_cnt += _draw_speed;
if (_cnt > _sector_array.length) {
evt.target.removeEventListener(Event.ENTER_FRAME,
evt.target.onEnterFrame);
}
}
}
}
まずコンストラクタですが、一応円グラフの半径と描画スピードを指定できるようにしてます。コンストラクタ内でcreateSectorメソッドを使って360個のスプライトを作成、addChildしています。

createSectorメソッドは、指定した角度を基準に鋭角が1度の三角形のSpriteオブジェクトを生成しています。この時点は色は0x000000で、非表示です。

データの追加はaddDataメソッドで行います。このメソッドでは値/色/透過度を指定できるようになっていて、これらをプロパティに持つオブジェクトを配列に追加します。

円グラフの表示はstartDrawメソッドでやってます。addDataメソッドで追加されたデータの値からソレゾレの比率を出して、それに相当する部分の三角形スプライトの色をtransform.colorTransformプロパティで変更しています。
また、Event.ENTER_FRAMEイベントでonEnterFrameメソッドが呼ばれるようにしています。

onEnterFrameメソッドは、コンストラクタで指定された描画スピード分ずつ三角形スプライトのvisibleをtrueにしていきます。全部表示し終わったら、自身をremoveEventします。

このクラスを使うフラッシュのフレームアクションはこんなカンジです。
// PieChartインスタンス生成
var pieChart = new PieChart(100, 4);
addChild(pieChart);
// 位置
pieChart.x = stage.stageWidth / 2;
pieChart.y = stage.stageHeight / 2;
// ドロップシャドウ
pieChart.filters = [new DropShadowFilter()];
// 実行ボタン押下イベントハンドラ
exec_btn.addEventListener(MouseEvent.MOUSE_UP,
function (e:Event) {
pieChart.clearData();
// データ設定
pieChart.addData(Number(a_txt.text), 0xFF0000, 0.5);
pieChart.addData(Number(b_txt.text), 0x00FF00, 0.5);
pieChart.addData(Number(c_txt.text), 0x0000FF, 0.5);
// 描画開始
pieChart.startDraw();
});
まず半径100、速度4でPieChartのインスタンスを生成してaddChild、位置をステージ中央に配置してます。あと、DropShadowFilterで描画した円グラフに影がつくようにしてます。

exec_btnは右上に配置してある「実行」ボタンです。コレをクリックしたときに、3つのテキスト入力フィールドa_txt, b_txt, c_txtの値をPieChart#addDataしてます。色はソレゾレ赤/緑/青で透過度は0.5デス。

そんで、PieChart#startDrawメソッドを実行してます。これで円グラフが表示されるという寸法デス。

テーマ:Flash - ジャンル:コンピュータ

2007.08.01 | | Comments(6) | Trackback(0) | Flash CS3

«  | HOME |  »

プロフィール

HundredthMonkey

Author:HundredthMonkey
プログラマ。

ブロとも申請フォーム

この人とブロともになる

メールフォーム

名前:
メール:
件名:
本文:

ブログ内検索


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。