Action Script で点
本来は、Action Script から Flash を使い始めるんじゃなくて、
Flash をひととり覚えてから必要な箇所で Action Script を使うんだろう。
そのほうが効率的だし。クリエイターのみなさんもそうなんだろう。
でも、自分しかり、いわゆるプログラマーの方々はやっぱり感覚として
逆になってしまうんではないかな。だから、Flash の参考書ってなかなか
理解しきれないというか...。（自分の頭が硬いというか...。）
今日は、画面に点を打ってみる。
まずは、オンラインヘルプ。最初に検索したのは、ファイル。
どういう単位でスクリプトを作るかわからなかったから。
驚きました。ActionScript ってクラスの概念がある！インタフェースも！
しかもクラスパスまで設定するとこもある。（クラスで検索すると出てきます。）
フォルダもパッケージにマッピングされるらしい。
いやー、ちょっと落ち着きました。とりあえず、Java 知ってる人はなんとかなるかも。
どうやってクラスに対応するファイルを作ればよいかは、ヘルプの
「クラスファイルを作成するには」に発見。（以下ヘルプを要約）
1. ファイル->新規で ActionScript
2. クラスの中身を書いて保存
3. ファイル->新規で Flash ドキュメント
4. タイムラインのフレームにアクションとしてクラスをimportして処理を書く
（Flash ドキュメントを開いたときのレイヤー１って書いてあるレーンで右クリック、アクション）
さて、準備が整ったので、点を描くことを考えてみる。
やはりヘルプで、検索したけど「点」は多すぎてむり。
「線」で検索すると、「線を描画するには」というトピック発見。
いろいろ探したけど、「点」がなさそうなので、「線」を応用することに。
どうやら、こんな感じで描けるらしい。
this.createEmptyMovieClip("line_mc", 10);
line_mc.lineStyle(1, 0x000000, 100);
line_mc.moveTo(0, 0);
line_mc.lineTo(200, 100);
最後の２行で線が引けるみたいだから、ここをちょっと変更すれば点になるかな。
迷ったのは最初の一行。 10 っていうのが何かわからん。
MovieClip ていうやつで、さらに調べてみると、これは深度っていうやつらしい。
現在の設定を取りたい場合は、this.getNextHighestDepth() で取れると書いてあったのでこれを使う。
MovieClip に点を描くメソッドがないから、ちょっと拡張してみようと思う。
まずは、Point クラスの Point.as (looselips.shape という名前のフォルダを作成してその下に作成）
flash.geom.Point クラスってのもあったけど、Flash Lite 2.x ではなさげ。
携帯に出したいのとActionScript のクラスの勉強がてら作成してみた。
// 点を表現するクラス
class looselips.shape.Point {
// プロパティ
private var x:Number;
private var y:Number;
//コンストラクタは一つだけらしい。。。
// function Point() {
// this.x = 0;
// this.y = 0;
//}
function Point(px:Number, py:Number) {
this.x = px;
this.y = py;
}
function equals(point:Point):Boolean {
if (this.x == point.getX() && this.y == point.getY()) {
return true;
} else {
return false;
}
}
function getX():Number {
return this.x;
}
function getY():Number {
return this.y;
}
function moveTo(px:Number, py:Number):Void {
this.x = px;
this.y = py;
}
}
これでとりあえず、座標が表現できる。
このPointクラスを与えることで描画をしてくれる LooseMovieClipクラスはこんな感じ。
(import looselips.shape.Shape は、インタフェースの動きを確認したかったのでついてますが、Point のためには使ってない。）
import looselips.shape.Shape;
import looselips.shape.Point;
// MovieClip を包含するクラス（継承するとどうなるのかわからんかった。）
class looselips.control.LooseMovieClip {
private var mc: MovieClip;
function LooseMovieClip (mcParent: MovieClip) {
// ヘルプのサンプルコードより
this.mc = mcParent.createEmptyMovieClip ("mc", mcParent.getNextHighestDepth());
this.mc.lineStyle(1,0x000000, 100);
}
// 点の色を変える
function setColor (offset: Number) : Void {
this.mc.lineStyle(1,offset, 100);
}
function drawPoint (p: Point): Void {
// 描画する先の範囲チェックはしなくていいのかな？現状はなし。
this.mc.moveTo(p.getX(), p.getY());
// lineTo を使って１ドットX軸をずらして点を描く
this.mc.lineTo(p.getX()+1, p.getY()+1);
}
// Shape が持つPath情報をもとにパスを描画する
// とりあえず、インタフェースを使ってみたかったので
function drawShape (shape: Shape): Void {
// パスの取得。パスは Point の集まり。
var path:Array = shape.getPath();
for (var i:Number = 0; i < path.length; i++) {
// 念のためキャスト
var p: Point = Point(path[i]);
if (i == 0) {
this.mc.moveTo(p.getX(), p.getY());
} else {
this.mc.lineTo(p.getX(), p.getY());
}
}
}
}
念のため、Shape インタフェース。
interface looselips.shape.Shape {
// Array には looselips.shape.Point が入る
function getPath():Array;
}
さて、この３つの as ファイルの置き場所として、作業フォルダの下に
looselips\shape\, looselips\control\フォルダを作成して、
Point.as と Shape.as を shape の下に、LooseMovieClip.as を control の下に置く。
作業フォルダに、dot.fla という名前で空の Flash ドキュメントを作成。
（もちろん、Script は Flash Lite 2.0, デバイスは 一般携帯電話）
メインのタイムフレームで右クリックアクションで、以下のActionScript を記述。
全部で計４つの点を描画。（最後の三つは斜めに１ドットずつ）
import looselips.shape.Shape;
import looselips.shape.Point;
import looselips.control.LooseMovieClip;
var p:Point = new Point(30, 30);
var mc:LooseMovieClip = new LooseMovieClip(this);
mc.setColor(0xff0000);
mc.drawPoint(p);
p.moveTo(50, 50);
mc.drawPoint(p);
p.moveTo(51, 51);
mc.drawPoint(p);
p.moveTo(52, 52);
mc.drawPoint(p);
（そういえば、ステージ（画面）サイズ、勝手に縮小されて携帯には表示されることが判明。）
制御->ムービープレビューはこんな感じでした。（携帯上でもかろうじて赤い点らしきものが...。）
相変わらず、寂しい状況....。
せっかくだから、なんかグラフでも描くやつを作ってみようかな。
次は点でグラフ。
そうか、グラフが描ければ、携帯らしく時間と電波状況とか電池状況を
グラフにできるかな。
わかったこと：
- ほぼ Java と同様な記述ができそう
- ヘルプが結構使えた
- 画面サイズはどうやら勝手に縮小されるらしい
課題：
- 動的に点を描きつづけるようなスクリプトを作成してみる
- 電波、電池の状態をどう取得するのか
- MovieClip を継承した場合どうインスタンスを作る？（プライオリティ低）
Flash をひととり覚えてから必要な箇所で Action Script を使うんだろう。
そのほうが効率的だし。クリエイターのみなさんもそうなんだろう。
でも、自分しかり、いわゆるプログラマーの方々はやっぱり感覚として
逆になってしまうんではないかな。だから、Flash の参考書ってなかなか
理解しきれないというか...。（自分の頭が硬いというか...。）
今日は、画面に点を打ってみる。
まずは、オンラインヘルプ。最初に検索したのは、ファイル。
どういう単位でスクリプトを作るかわからなかったから。
驚きました。ActionScript ってクラスの概念がある！インタフェースも！
しかもクラスパスまで設定するとこもある。（クラスで検索すると出てきます。）
フォルダもパッケージにマッピングされるらしい。
いやー、ちょっと落ち着きました。とりあえず、Java 知ってる人はなんとかなるかも。
どうやってクラスに対応するファイルを作ればよいかは、ヘルプの
「クラスファイルを作成するには」に発見。（以下ヘルプを要約）
1. ファイル->新規で ActionScript
2. クラスの中身を書いて保存
3. ファイル->新規で Flash ドキュメント
4. タイムラインのフレームにアクションとしてクラスをimportして処理を書く
（Flash ドキュメントを開いたときのレイヤー１って書いてあるレーンで右クリック、アクション）
さて、準備が整ったので、点を描くことを考えてみる。
やはりヘルプで、検索したけど「点」は多すぎてむり。
「線」で検索すると、「線を描画するには」というトピック発見。
いろいろ探したけど、「点」がなさそうなので、「線」を応用することに。
どうやら、こんな感じで描けるらしい。
this.createEmptyMovieClip("line_mc", 10);
line_mc.lineStyle(1, 0x000000, 100);
line_mc.moveTo(0, 0);
line_mc.lineTo(200, 100);
最後の２行で線が引けるみたいだから、ここをちょっと変更すれば点になるかな。
迷ったのは最初の一行。 10 っていうのが何かわからん。
MovieClip ていうやつで、さらに調べてみると、これは深度っていうやつらしい。
現在の設定を取りたい場合は、this.getNextHighestDepth() で取れると書いてあったのでこれを使う。
MovieClip に点を描くメソッドがないから、ちょっと拡張してみようと思う。
まずは、Point クラスの Point.as (looselips.shape という名前のフォルダを作成してその下に作成）
flash.geom.Point クラスってのもあったけど、Flash Lite 2.x ではなさげ。
携帯に出したいのとActionScript のクラスの勉強がてら作成してみた。
// 点を表現するクラス
class looselips.shape.Point {
// プロパティ
private var x:Number;
private var y:Number;
//コンストラクタは一つだけらしい。。。
// function Point() {
// this.x = 0;
// this.y = 0;
//}
function Point(px:Number, py:Number) {
this.x = px;
this.y = py;
}
function equals(point:Point):Boolean {
if (this.x == point.getX() && this.y == point.getY()) {
return true;
} else {
return false;
}
}
function getX():Number {
return this.x;
}
function getY():Number {
return this.y;
}
function moveTo(px:Number, py:Number):Void {
this.x = px;
this.y = py;
}
}
これでとりあえず、座標が表現できる。
このPointクラスを与えることで描画をしてくれる LooseMovieClipクラスはこんな感じ。
(import looselips.shape.Shape は、インタフェースの動きを確認したかったのでついてますが、Point のためには使ってない。）
import looselips.shape.Shape;
import looselips.shape.Point;
// MovieClip を包含するクラス（継承するとどうなるのかわからんかった。）
class looselips.control.LooseMovieClip {
private var mc: MovieClip;
function LooseMovieClip (mcParent: MovieClip) {
// ヘルプのサンプルコードより
this.mc = mcParent.createEmptyMovieClip ("mc", mcParent.getNextHighestDepth());
this.mc.lineStyle(1,0x000000, 100);
}
// 点の色を変える
function setColor (offset: Number) : Void {
this.mc.lineStyle(1,offset, 100);
}
function drawPoint (p: Point): Void {
// 描画する先の範囲チェックはしなくていいのかな？現状はなし。
this.mc.moveTo(p.getX(), p.getY());
// lineTo を使って１ドットX軸をずらして点を描く
this.mc.lineTo(p.getX()+1, p.getY()+1);
}
// Shape が持つPath情報をもとにパスを描画する
// とりあえず、インタフェースを使ってみたかったので
function drawShape (shape: Shape): Void {
// パスの取得。パスは Point の集まり。
var path:Array = shape.getPath();
for (var i:Number = 0; i < path.length; i++) {
// 念のためキャスト
var p: Point = Point(path[i]);
if (i == 0) {
this.mc.moveTo(p.getX(), p.getY());
} else {
this.mc.lineTo(p.getX(), p.getY());
}
}
}
}
念のため、Shape インタフェース。
interface looselips.shape.Shape {
// Array には looselips.shape.Point が入る
function getPath():Array;
}
さて、この３つの as ファイルの置き場所として、作業フォルダの下に
looselips\shape\, looselips\control\フォルダを作成して、
Point.as と Shape.as を shape の下に、LooseMovieClip.as を control の下に置く。
作業フォルダに、dot.fla という名前で空の Flash ドキュメントを作成。
（もちろん、Script は Flash Lite 2.0, デバイスは 一般携帯電話）
メインのタイムフレームで右クリックアクションで、以下のActionScript を記述。
全部で計４つの点を描画。（最後の三つは斜めに１ドットずつ）
import looselips.shape.Shape;
import looselips.shape.Point;
import looselips.control.LooseMovieClip;
var p:Point = new Point(30, 30);
var mc:LooseMovieClip = new LooseMovieClip(this);
mc.setColor(0xff0000);
mc.drawPoint(p);
p.moveTo(50, 50);
mc.drawPoint(p);
p.moveTo(51, 51);
mc.drawPoint(p);
p.moveTo(52, 52);
mc.drawPoint(p);
（そういえば、ステージ（画面）サイズ、勝手に縮小されて携帯には表示されることが判明。）
制御->ムービープレビューはこんな感じでした。（携帯上でもかろうじて赤い点らしきものが...。）
相変わらず、寂しい状況....。
せっかくだから、なんかグラフでも描くやつを作ってみようかな。
次は点でグラフ。
そうか、グラフが描ければ、携帯らしく時間と電波状況とか電池状況を
グラフにできるかな。
わかったこと：
- ほぼ Java と同様な記述ができそう
- ヘルプが結構使えた
- 画面サイズはどうやら勝手に縮小されるらしい
課題：
- 動的に点を描きつづけるようなスクリプトを作成してみる
- 電波、電池の状態をどう取得するのか
- MovieClip を継承した場合どうインスタンスを作る？（プライオリティ低）