今日の目標 AS3に慣れようクラスを書こうイベントリスナーを理解しようクラスを使おうエラーに慣れよう

Size: px

Start display at page:

Download "今日の目標 AS3に慣れようクラスを書こうイベントリスナーを理解しようクラスを使おうエラーに慣れよう"

ゆりなおなか
6 years ago
Views:

1 長居 AS3 勉強会第一回

2 今日の目標 AS3に慣れようクラスを書こうイベントリスナーを理解しようクラスを使おうエラーに慣れよう

3 今日の目標 AS3 を覚える ( 使う ) 理由とにかく最新技術が使えてカッコイイ! やっとかないと何かヤバいのでは? という不安感理由は様々ですが

4 今日の目標 AS3 にとって大事な考え方は下準備と段取り

5 今日の目標スクリプトが複雑になるスクリプトは簡単でも後日に修正や手直しが発生する納期直前に変更がある

6 今日の目標どれだけ複雑でも流れを理解しやすい修正や変更が容易になる最終的な手直しにも強くなる

7 今日の目標仕事が楽になるという事は細部まで突き詰められるという事

8 今日の目標下準備や段取りは恐ろしく地味だしわからないことはつまらないし面倒でもわからないところで止まるよりわからないところをやる方法でみんなで勉強すれば楽しいんじゃない? ということでやってみましょう

9 AS3 に慣れようそもそも自分にとって AS3 の何が難しいのかを知るわからないところがわからないではダメ

10 AS3 に慣れようとは言っても AS3 は簡単! とよく聞くけどとっかかり始めでは本当にわけが分からない自分の場合

11 AS3 に慣れようステージにムービークリップを作成インスタンス名に my_mc と入力 my_mc をクリックしたら回転し始めるスクリプトを AS3 で書きたいやってみよう

12 AS3 に慣れよう my_mc.addeventlistener(mouseevent.click, onmouseclickhandler); function onmouseclickhandler(event:mouseevent):void{ my_mc.addeventlistener(event.enter_frame, onenterframehandler); function onenterframehandler(event:event):void{ my_mc.rotation ++;

13 AS3 に慣れよう addeventlistener でイベント登録かろうじてわかる Function の引数 event:mouseevent って? event:event ってのもあるしなんかややこしい! AS3 やる気なくすわ ~

14 AS3 に慣れよう実は AS3 の世の中を支配しているのは全てクラスクラスのお約束に慣れることが AS3 に慣れる近道クラスに慣れよう

15 AS3 に慣れようその前に

16 AS3 に慣れよう変数の型についてやってみよう

17 a = 1 ; b = 3; c = a + b; trace(c); AS3 に慣れよう

18 a = マサムーネ ; b = 3; c = a + b; trace(c); AS3 に慣れよう

19 AS3 に慣れようプログラムが複雑になればなるほど変数の中身が曖昧だと大変!!

20 var a:string = 1 ; var b:string = 3; var c:string = a + b; trace(c); AS3 に慣れよう

21 AS3 に慣れよう変数の型についてここで覚える要素は 3 つ

22 AS3 に慣れよう 1. 変数を最初に使う場合 2. 変数の頭に var を付ける 3. 変数のお尻に : を付けて型を指定する

23 AS3 に慣れよう 1. 変数を最初に使う場合っちゅうのが現時点ではイマイチ曖昧ですがそれはクラスを書く時に明確になります

24 AS3 に慣れようとりあえず変数の型についてはさっきの 3 つの条件だけ覚えておけばあとはクラス書けばなんとかなります

25 クラスを書こう

26 クラスを書こうクラスを書くときの基本ルール大きく 3 つ

27 クラスを書こうデスノートのルールよりは簡単だし少ない

28 クラスを書こうとりあえず Fla ファイルと同じディレクトリに.as ファイルを作るファイル名の最初は大文字のアルファベットにしておくこのファイル名が今から作るクラスのクラス名になる

29 クラスを書こう package{.as ファイルの中身はとりあえずで囲む

30 クラスを書こう package の中はとりあえず public class < クラス名 >{ で囲む

31 クラスを書こう package{ public class < クラス名 >{ 最終的に次の形になる

32 クラスを書こう基本ルールはたったこれだけです

33 クラスを書こう次にそれを踏まえて実際に動くクラスを書くためのルールを覚えます

34 クラスを書こう手っ取り早く動くクラスを作るにはドキュメントクラスを書くといいです

35 クラスを書こう Fla ファイルのシーンプロパティのドキュメントクラスにクラス名を入力します

36 クラスを書こう基本ルールその 1 Fla ファイルと同じフォルダにクラスファイルを作るクラスファイル名とクラス名は同じファイル名 ( クラス名 ) の最初は大文字でを思い出してやってみよう

37 クラスを書こう package{ public class Main{ // この中にスクリプトを書いていきます! trace( ほげほげ );

38 クラスを書こうここで動くクラスのルールその 1 ドキュメントクラスは MovieClip クラスか Sprite クラスを継承しよう

39 クラスを書こうちなみに MovieClip クラスか Sprite クラスのどちらを継承するかに関してはどっちでもいいですが慣れないうちは MovieClip クラスを継承しておいた方がいいです ( 理由は口頭で説明 )

40 クラスを書こう継承の仕方は class Main の後に extends MovieClip を付け足すだけ

41 クラスを書こう package{ public class Main extends MovieClip{ // この中にスクリプトを書いていきます! trace( ほげほげ );

42 クラスを書こうここで動くクラスのルールその 2 クラスに必要なクラスはインポートしなければならない

43 クラスを書こうドキュメントクラス Main は MovieClip クラスを継承 MovieClip クラスが必要 package の中に必要なクラスをインポートします

44 クラスを書こうクラスって独立国家みたいなもの自分のクラスに無いものはあらかじめインポート ( 輸入 ) しておく必要があるんですね

45 クラスを書こうどこにどうやって書く ( インポートする ) の?

46 クラスを書こう <body id= package > <div id= class name= Main > </div> </body> クラスの基本形はこれと良く似ています

47 クラスを書こう package の中に書きましょう具体的には import flash.display.movieclip; と書いていきます

48 クラスを書こう package{ import flash.display.movieclip; public class Main extends MovieClip{ // この中にスクリプトを書いていきます! trace( ほげほげ );

49 クラスを書こう <body id= package > <h1 class= import >MovieClip</h1> <div id= class name= Main > </div> </body> 正確にはちょっと違うけど html だとこんなイメージ

50 クラスを書こうここで動くクラスのルールその 3 class と同じ名前の関数 (function) が一番最初に実行されるこの関数をコンストラクタと呼ぶ

51 クラスを書こうどこにどうやって書くの?

52 クラスを書こう書く場所は class に囲まれた中

53 クラスを書こう function Main():void{ 書き方は

54 クラスを書こう package{ import flash.display.movieclip; public class Main extends MovieClip{ function Main():void{ trace( ほげほげ );

55 クラスを書こうもうね完璧

56 クラスを書こうとにかく基本さえ覚えればこれから複雑になってきても対応できるのでがんばって!

57 変数を使おう

58 変数を使おうクラスの中で変数を使うために最初の方に変数の型でやったルール 1. 変数を最初に使う場合の解説に入ります

59 変数を使おうクラスで使う変数のルールクラスの中に直接作った変数はそのクラス内でどこでも自由に使えます関数の中で作った変数はその関数の中だけで使えます

60 変数を使おう package{ import flash.display.movieclip; public class Main extends MovieClip{ var a:string = マサムーネ ; function Main():void{ var b:string = ほげほげ ;

61 変数を使おう package{ import flash.display.movieclip; public class Main extends MovieClip{ var masamune:string = マサムーネ ; var kotoba:string = かっこいい!(^-^)v ; function Main():void{ trace(masamune + kotoba); mouikkai(); function mouikkai():void{ var kotoba:string = かっこわるい (><;) ; trace(masamune + kotoba);

62 変数を使おう慣れてないと実に不思議というかややこしい動きをしているように見えますが慣れてくると変数を調べるときに最初は関数内で var で宣言されていないか調べてなければクラス内で var されてないか調べればいいのでとても合理的に作業が出来るようになります

63 変数を使おうちなみに関数の戻り値に使う型はこんな感じ

64 変数を使おう function Main():void{ tracemasamune(); var modori:string = modosumasamune(); function tracemasamune():void{ trace( マサムーネムネムーネ ); function modosumasamune():string{ var masamune:string = 正宗の双子の弟です ; return masamune;

65 変数を使おう引数を使う場合はこう

66 変数を使おう function Main():void{ tracemasamune( は 33 歳 ); tracemasamune( の好きな忍法帖はくノ一忍法帖 ) function tracemasamune(kotoba:string):void{ trace( マサムーネ + kotoba);

67 変数を使おうクラスで使う変数のルールクラスの中に直接作った変数はそのクラス内でどこでも自由に使えます関数の中で作った変数はその関数の中だけで使えますを覚えておけばスクリプトが複雑になってもやっぱり基本的なルールの組み合わせだけで何とかなるようになります

68 イベントリスナーを理解しよう

69 イベントリスナーなんでもかんでも addeventlistener でイベントを登録!!

70 イベントリスナー my_mc をクリックしたらメッセージを表示するスクリプトを書いてみよう

71 イベントリスナーなにかムービークリップを作ってインスタンス名 my_mc と入力しておきます

72 イベントリスナー package{ import flash.display.movieclip; public class Main extends MovieClip{ function Main():void{ my_mc.addeventlistener("click", onclickhandler); function onclickhandler(event:mouseevent):void{ trace(" あなたクリックしましたね!?");

73 イベントリスナー package{ import flash.display.movieclip; import flash.events.mouseevent; public class Main extends MovieClip{ function Main():void{ my_mc.addeventlistener("click", onclickhandler); function onclickhandler(event:mouseevent):void{ trace(" あなたクリックしましたね!?");

74 イベントリスナー fla ファイルのタイムラインに直接スクリプトを書いたときはインポートしなくてもよかったものがクラスの場合はいろいろインポートしないといけないわけですね

75 イベントリスナー addeventlistener(< イベント >, < 処理 >); (< 何が起こったら?>, < 何をする?>);

76 イベントリスナー < イベント >(< 何が起こったら?>) の部分は例えば click とかでもいいんですが例えば clik とか書き間違えたときエラーも出ないし動かないし困ります

77 イベントリスナーさてここで一旦イベントリスナーから離れて

78 イベントリスナー fla ファイルや Main.as ファイルと同じフォルダに Test.as というクラスファイルを作って下さい ( 今まで覚えたルールをよく思い出して )

79 イベントリスナー package { public class Test { function Test():void {

80 イベントリスナー Test クラスはドキュメントクラスではないので MovieClip の継承は行わなくていいんです継承する必要がないのでインポートも今のところ必要ないです引っかけじゃないんですが慣れてないと意地の悪いパズルみたいですね

81 イベントリスナーふつう変数は ( さっきやったように ) そのクラス内だけで使いますがここで Test クラスで作った変数を Main クラスで使ってみましょう

82 イベントリスナー package { public class Test { var CLICK:String = click ; function Test():void {

83 イベントリスナー変数もいろいろな使い方があってスクリプトが実行されてるときに変数の中身が変わる変数は普通なんですが変数の中身が絶対に変わらない変数という使い方もあります

84 イベントリスナー前者 ( 中身が変わる ) は普通に var で宣言するんですが後者 ( 中身が変わらない ) は定数と言って var のかわりに const で宣言します

85 イベントリスナー package { public class Test { const CLICK:String = click ; function Test():void {

86 イベントリスナーくどいようですがふつう変数 ( や定数 ) はそのクラス内だけで使いますが今回みたいに Main という外部から Test クラスの中の変数 ( や定数 ) を使いたい場合 var( や const) の前に public static を付けます

87 イベントリスナー package { public class Test { public static const CLICK:String = click ; function Test():void {

88 イベントリスナーさてここまで意味の分からない事をさせてすみません Main クラスのイベントリスナーに戻りましょう

89 イベントリスナー package{ import flash.display.movieclip; import flash.events.mouseevent; public class Main extends MovieClip{ function Main():void{ my_mc.addeventlistener(test.click, onclickhandler); function onclickhandler(event:mouseevent):void{ trace(" あなたクリックしましたね!?");

90 イベントリスナーまた新しいルール同じフォルダにあるクラス同士は import しなくても使える! ( ただ何のクラスを使ってるのかあとあとわからなくなるので import してもいいつまりしてもしなくてもいい )

91 イベントリスナーこうしておくと click をスペルミスしてエラーも出ないし動かないなんてことがなくなります

92 イベントリスナーでも毎回 Test クラスみたいなの作るの面倒 Test クラスの中の click そのものがスペルミスしてたら意味ないし

93 イベントリスナー実は今作った Test クラスの public const CLICK:String = click ; ってのわざわざ作らなくてももうあるんです

94 イベントリスナーそれが MouseEvent クラス

95 イベントリスナー package{ import flash.display.movieclip; import flash.events.mouseevent; public class Main extends MovieClip{ function Main():void{ my_mc.addeventlistener(mouseevent.click, onclickhandler); function onclickhandler(event:mouseevent):void{ trace(" あなたクリックしましたね!?");

96 イベントリスナー一番最初に見た my_mc.addeventlistener(mouseevent.click, onmouseclickhandler); function onmouseclickhandler(event:mouseevent):void{ my_mc.addeventlistener(event.enter_frame, onenterframehandler); function onenterframehandler(event:event):void{ my_mc.rotation ++;

97 イベントリスナーこんなふうにいろんな簡単なルールの組み合わせで合理的に作業が出来るようになっているのが AS3 ということになります

98 クラスを使おう

99 クラスを使おう独学できるようになるまであとちょっとクラスの使い方

100 クラスを使おうまた Main.as と同じフォルダに TraceTest というクラスを作ってみましょう (Test クラスをコピペしてクラス名とコンストラクタをかえても OK)

101 クラスを使おう package{ public class TraceTest{ function TraceTest():void{ trace(" ほげほげ ");

102 クラスを使おう Main クラスではこういうふうに使います

103 クラスを使おう package{ import flash.display.movieclip; public class Main extends MovieClip{ function Main():void{ var t:tracetest = new TraceTest();

104 クラスを使おうクラスを使うときの基本ルールは 2 つ new でクラスをインスタンス化するそのインスタンスの型は基本的にクラス名と同じ型になる

105 クラスを使おうちなみにクラスのコンストラクタに引数を渡すこともできます

106 クラスを使おう package{ public class TraceTest{ function TraceTest(moji:String):void{ trace(moji);

107 クラスを使おう package{ import flash.display.movieclip; public class Main extends MovieClip{ function Main():void{ var t1:tracetest = new TraceTest( ほねほね ); var t2:tracetest = new TraceTest( ロック );

108 クラスを使おうクラスってライブラリで言うシンボルみたいなもの使うときは new でインスタンス化するって覚えときましょう

109 まとめ

110 まとめ今回やったことは基本の基本のところでもあるし逆にいきなり難しいところもしていますまたとりあえず動かせるようになるため説明が正確でないところもあります

111 まとめただどんな複雑なスクリプトもひとつひとつは簡単なルールの組み合わせなので先ずは大枠がつかめるようとにかくルールに慣れる事から初めてみましょう

112 まとめ難しい面倒くさい段取りはあとあと楽になるための下準備です是非 AS3 に慣れて仕事のクオリティアップと飲みの時間を増やしましょう

113 まとめおつかれさまでした

Microsoft PowerPoint - prog03.ppt

Microsoft PowerPoint - prog03.ppt プログラミング言語 3 第 03 回 (2007 年 10 月 08 日 ) 1 今日の配布物片面の用紙 1 枚今日の課題が書かれています本日の出欠を兼ねています 2/33 今日やること http://www.tnlab.ice.uec.ac.jp/~s-okubo/class/java06/ にアクセスすると教材があります 2007 年 10 月 08 日分と書いてある部分が本日の教材です

今日の目標 AS3に慣れよう クラスを書こう イベントリスナーを理解しよう クラスを使おう エラーに慣れよう

今日の目標 AS3に慣れようクラスを書こうイベントリスナーを理解しようクラスを使おうエラーに慣れよう