Flash ActionScript入門ノート http://oshige.com/flash/note/ 大重美幸 ActionScript 2.0 オブジェクト指向をがんばろう! ja 2006-08-29T13:09:20+09:00 4doll ML http://oshige.com/flash/note/archives/2006/08/4doll_ml.html ぼくの知人や著書の読者を参加対象にしているメーリングリストです。
もうずいぶん長いことやってますが、先週にサーバーを移転したので心機一転、ここいらで「Flash ActionScript入門ノート」を訪問された方にも参加していただきたいと思います。話題はActionScriptに限定していませんが、その周辺情報になると思います。このサイトのサポートもMLでやっていきたいと思います。

参加と退会はこちらから→4doll ML
お気軽にどうぞ。

]]>
お知らせ oshige 2006-08-29T13:09:20+09:00
擬似的な回転 http://oshige.com/flash/note/archives/2006/08/post_86.html 六角形のムービークリップをアタッチし、その中にjpegファイルを読み込んでいます。インスタンスが横回転しているように見せるにはスケールを-100〜100のように変化させる方法がありますが、そうするとイメージが反転してしまいます。イメージを反転させたくない場合には、_widthプロパティを0〜100で変化させます。MovieClip.setMask()でマスクをかける場合、写真を読み込み終わってから設定しないとうまくいきません。

hexagon.jpg

]]>
今日のTips oshige 2006-08-29T01:19:31+09:00
ベルばら http://oshige.com/flash/note/archives/2006/08/post_85.html マウスで乙女チックに描いちゃってください。
ムービークリップを貼っているのではなく、BitmapDataクラスを使ってイメージを描いています。サイズの変形などはMatrixクラスを使っています。

flowerstamp.jpg

]]>
今日のTips oshige 2006-08-14T19:13:41+09:00
ドラッグして振り回す http://oshige.com/flash/note/archives/2006/07/post_84.html 「クリックした位置を中心に回転する」を応用した「ドラッグして振り回す」のflaファイルをアップしました。どうぞ研究してみてください。

flaファイルはココからダウンロードできます。→ダウンロード

サンプル:
clickPt2.jpg


]]>
今日のTips oshige 2006-07-27T16:15:20+09:00
リングフォーメーションの習作 http://oshige.com/flash/note/archives/2006/07/post_83.html お待たせしました。リングフォーメーションの習作のダウンロードファイルです。和楽器サイトではこの習作を土台にしています。
説明など用意できないんですが、これを研究してみてください。

flaファイルとASファイルはココからダウンロードできます。→ダウンロード

リングフォーメーションの習作
test-ring1.jpg

]]>
今日のTips oshige 2006-07-16T23:20:59+09:00
ActionScript3搭載Flash9パブリックアルファ http://oshige.com/flash/note/archives/2006/06/actionscript3fl.html Flash9のパブリックアルファ(英語版)をもう試しましたか?
Flash9ではActionScript3が搭載されています。ActionScript2でさえよくわからんのにーと困惑している人もいるでしょうけど、駅伝の繰り上げスタートと考えればラッキーかもというのは言い過ぎですかね。

パブリックアルファとサンプルは次のサイトからダウンロードできますが、Flash Professional 8がインストールされていないとインストールできないので注意してください。
Flash Professional 9 ActionScript 3.0 Preview

あくまでもアルファ版なのでまだバギーだってことをお忘れなく。
このサイトでもAS3についてもできるだけ紹介しますね。

]]>
ActionScript3 oshige 2006-06-30T19:15:18+09:00
バトン http://oshige.com/flash/note/archives/2006/06/post_82.html バトンを回してみました。

サンプル:
baton.jpg

class Kaiten extends MovieClip {
	var speed:Number;
	var rd:Number = 0;
	//
	//回転開始
	function startRotaSin(s:Number) {
		speed = (typeof s == "number") ? s : 30;
		this.onEnterFrame = rotaSinStep;
	}
	//
	//逆回転あり
	function rotaSinStep() {
		rd += 3;
		//-1〜1
		var a:Number = Math.sin(rd*Math.PI/180);
		this._rotation += speed*a;
	}
	//
	//回転停止
	function stopRotaSin() {
		delete this.onEnterFrame;
	}
}
]]>
今日のTips oshige 2006-06-26T16:06:33+09:00
クリックした位置を中心に回転する(回答) http://oshige.com/flash/note/archives/2006/05/post_81.html 先日の「クリックした位置を中心に回転する」はどうやるかを種明かししましょう。写真をクリックするとクリックした点を中心に写真が回転します。そのままドラッグすることもできるというサンプルです。

サンプル:
clickPt1.jpg


ムービークリップのインスタンスを回転させるには、インスタンスの_rotationプロパティを連続的に変更します。_rotationプロパティの単位は度数なので、

this._rotation += 5;

とすれば5度ずつ回転します。このとき、回転の中心はムービークリップの座標の中心点です。ムービークリップには変形の中心点と座標の中心点がありますが、変形の中心点はあくまでもオーサリング時の[自由変形ツール]での変形の中心であって、スクリプトでは座標の中心点が回転や拡大などの中心点になるので誤解しないようにしましょう。

さてここからが種明かしです。(最後にflaファイルのダウンロードのリンクがあります)

]]>
今日のTips oshige 2006-05-22T09:39:59+09:00
クリックした位置を中心に回転する http://oshige.com/flash/note/archives/2006/05/post_80.html ムービークリップを回転させるには_rotationプロパティの値を少しずつ加算(減算)すればいいですよね。では、次のサンプルのようにクリックした位置を中心点にして回転させるにはどうすればいいでしょう??
ぼくもけっこう試行錯誤したんですが、答えは意外にも簡単でした! さあ、考えてみてください。

サンプル:
clickPt1.jpg

で、これをさらに発展させたのが次のサンプルです。今度はドラッグしてぐるぐる回せます。こっちはちょっと難しいですね。

サンプル:
clickPt2.jpg

]]>
今日のTips oshige 2006-05-19T00:31:29+09:00
障害物と方向転換 http://oshige.com/flash/note/archives/2006/05/post_79.html ちょっと変わったサンプルを作ってみました。障害物となるインスタンスの中に入ると進む向きを変更します。動きをよく観察してみてください。

衝突チェックはMovieClip.hitTest()で行います。
var hit:Boolean = hit_mc.hitTest(_x, _y, true);

移動から衝突チェックまでのスクリプト(抜粋)は次のようになります。vx、vyがベクトルの成分です。高校数学を思い出してね。

//移動      
_x += vx;
_y += vy;
//向き
_rotation = d;
//
//衝突チェック
var hit:Boolean = hit_mc.hitTest(_x, _y, true);
if (hit) {
//10度曲がる
d += 10;
vx = speed*Math.cos(d*Math.PI/180);
vy = speed*Math.sin(d*Math.PI/180);
}

サンプル:
slippy.jpg

]]>
今日のTips oshige 2006-05-14T11:57:50+09:00
ホッピングするボール http://oshige.com/flash/note/archives/2006/05/post_76.html ボールをクリックすると落下して地面で跳ね返ります。ボールの位置はドラッグできて、どこからでも落とすことができます。傾斜にぶつかったら斜めに跳ね返らないのかよ〜っていうのは、スクリプトを単純化するために省略です。
いったいどうやっているのか考えてみてください? 斜めに跳ね返らせる方法もね。
地面を突き抜けないようにするくふうもポイント。

サンプル:
hopping.jpg

flaファイルはココからダウンロードできます。→ダウンロード

]]>
今日のTips oshige 2006-05-13T18:16:50+09:00
雪が降るアニメーション http://oshige.com/flash/note/archives/2006/05/post_77.html ピンク本「Flash ActionScriptスーパーサンプル集」の「07-1 雪が降るアニメーション」もFlash 8用に書き換えてみました。ただ、見た目はほとんど同じですが、手法はまったく別のやり方になっています。
雪のインスタンスを[start]ボタンでアタッチし、アタッチした複数のインスタンスを配列で管理する方法に書き換えてあります。カスタムクラスは使っていませんが、ムービークリップのインスタンスをアタッチ・消去する、配列で管理するというサンプルになっています。


サンプル:
snow8.jpg

flaファイルはココからダウンロードできます。→ダウンロード

]]>
今日のTips oshige 2006-05-10T11:38:41+09:00
ロールオーバーで再生と逆再生 http://oshige.com/flash/note/archives/2006/05/post_78.html この絵を見て「ん?」って思った人もいるでしょうね。ピンク色の表紙「FLASH ActionScriptスーパーサンプル集」の「03-1ロールオーバーで再生と逆再生」のサンプルです。
このサンプルを動作を同じままでスクリプトを書き換えてみました。サンプルは2個あって、1つはムービークリップシンボルにフレームアクションを書き込んだスタイル。もう1つはMovieClipクラスを拡張したPistonクラスをリンケージするスタイルです。

サンプル:
piston.jpg

スクリプトリストとflaファイルのダウンロードのリンクは「続き・・・」にあります↓

]]>
今日のTips oshige 2006-05-08T14:40:14+09:00
リングフォーメーションの意味 http://oshige.com/flash/note/archives/2006/04/post_75.html 「日本の伝統音楽『楽器編』」は「インターフェースを懲りすぎ!」という声もありますが、実際ぼくも作りながらにコレでいいのか?と思ってましたが、できあがってみるとなかなか考えられていると思えてきました。

wagakki_ring.jpg
箏(こと)の楽器データ

「楽器図鑑」ではリング状にアイテムが並ぶデザインが使ってあります。リング状になっていることから、
1.ぐるっと回ることがわかる。
2.データの要素の種類と量を一度に俯瞰(ふかん)できる。
3.要素にダイレクトにアクセスできる。
4.マウス操作だけでデータを選べる。

リング状に並んだアイテムは、詳しく観たいアイテムを選ぶインターフェースである以前に、選ばれた楽器の属性データでもあるという点にも着目してください。それが2番の意味です。
これに比較し「演奏図鑑」というコンテンツはアイテムが直線的に並んでいます。リニア状であることから、アイテムの並びには順番があり、1個ずつ順に見てくださいということを示しています。
通常、これぐらい大量のデータをもったデーターベースをブラウジングするには、それなりのコンピュータリテラシーが必要ですが、「楽器図鑑」ではとりあえず興味の向くままに触っているだけで多くのデータに触れることができるかと思います。全体的にボードゲームの感覚(自分の持ちカードをひろげる感じ)で作ってあり、アニメーションのコンセプトは昔のゲームのゼビウスなんですよ。

リングフォーメーションの習作
test-ring1.jpg

リニアフォーメーションの習作
linear.jpg

]]>
今日のTips oshige 2006-04-10T11:26:06+09:00
日本の伝統音楽「楽器編」 http://oshige.com/flash/note/archives/2006/04/post_74.html 和楽器の画像、映像データーベースのサイトをFlashで作りました。画像や映像(flv)などはすべてXMLファイルで管理し、データに応じてレイアウトをダイナミックに生成するというweb2.0的な作りになっています。

日本芸術文化振興会のデジタルライブラリーの中の「舞台芸術教材1」のメニューにある「日本の伝統音楽『楽器編』」というコンテンツです。

wagakki_top.jpg
日本の伝統音楽『楽器編』のトップメニュー

wagakki_ring.jpg
箏(こと)の楽器データ

]]>
お知らせ oshige 2006-04-02T02:14:46+09:00