2009/01/14 (Wed) ⑤ メソッドにアクセスする

インスタンスを作ってそのメソッドにアクセスするとします。アクセスしたい時にはインスタンス名とメソッドをピリオドで区切ります。

• インスタンス名.メソッド（引数１,引数2,・・・・）

となります。

---------------------------------------------------------------------------------------------------------------------------------------------
Ex)　秒を表示する
時間を格納したDateコンストラクタを使って「日付時刻を管理するDateクラスのインスタンス」を生成します。そのインスタンスから秒の部分だけを取り出してフィールドに表示します。

例えば「today」という変数にこのインスタンスを代入します。

• var today:Date = new Date();

このDateクラスには沢山のメソッドが含まれています。
例えば

1. getDate()　日をローカル時間で取得
2. getDay()  　曜日をローカル時間で取得
3. getUTCDate()　日を世界標準時で取得

などがあります。

todayの中から日を取得したかったら

• today.getDate();

のように日の部分を取得するメソッドにアクセスすればいいわけです。


この中から、変化のわかりやすいgetSeconds()を使って。ローカル（パソコンにせっていされている）秒を取得するプログラムを作ります。

• function ClockDrive(event:Event){
•     var theTime:Date = new Date();
•     var takeSeconds = theTime.getSeconds();
•     var nowSeconds:String = String(takeSeconds);
•     this.digitalClock.text = nowSeconds;
• }
• this.addEventListener(Event.ENTER_FRAME,ClockDrive);

意味を書いておくと

• 関数を宣言　関数名はClockDrive（引数event:種類はEvent）｛
• 変数名theTimeを宣言、形はDate　=　newで新しく生成された「日付時刻を管理するDateクラスのインスタンス」Date()；
• 変数名takeSecondsを宣言　=　theTimeの秒をgetSeconds()で取得し代入；
• 変数名nowSecondsを宣言　=　takeSecondsの値をString()で文字列に変換して代入；
• インスタンス名digitalClockのテキストというプロパティに　=　nowSecondsを代入；
• 
   
• イベントリスナーで関数ClockDriveを実行

という感じです

2009/01/03 (Sat) ④ オブジェクトの操作

①インスタンスを生成する
インスタンスを生成するにはnew演算子とコンストラクタというのを使います。生成したインスタンスは変数名と＝を使って変数に代入できます。

• 変数名　=　new　コンストラクタ(引数①,引数２・・・・)

コンストラクタの名前はクラス名と同じです。
変数はvarを使って宣言するんでしたね。変数を宣言しインスタンスを代入すると

• var 変数名:形;
• 変数名 = new コンストラクタ();

となります。例えば日付を管理するDateクラスをコンストラクタとして使用しDateクラスのインスタンスを生成し。変数名todayとして扱うとします。

• var today:Date;
• today = new Date();

一行にまとめる事も可能です。

• var today:Date = new Date();

Dateクラスを引数なしで実行した場合その時点の日付時刻を管理するDateクラスのインスタンスが生成されます。


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

このプログラムからも時計を作ることが出来ますね。

まず２つのレイヤーを作り、一つをアクションレイヤーにします。別のレイヤーにはダイナミックテキストを配置します。
アクションレイヤーには以下のように記述します。

• function clockDrive(event:Event){　　//clockD関数を宣言します
• 　var time:Date= new Date();　　　  //変数名timeを宣言し日付情報を取得します。
•     var vtime= String(time);　　　　　//変数名vtimeを宣言しこれに先ほど宣言したtimeのデータ型を変換して代入します。String()は引数の値を文字列に変換するメソッドです。
•     clock.text = vtime;　　　　　　　  //ダイナミックテキスト（インスタンス名clock）のtextというプロパティにvtimeを代入します。
• }
•  
• this.addEventListener(Event.ENTER_FRAME,clockDrive);
  //フレーム進入イベントENTER_FRAMEで関数clockDriveを呼び出しています。

このとき変数timeとvtimeもfunctionの中に入れることによって現在の時間を代入できるようにしています。

2009/01/03 (Sat) ③ クラス

オブジェクトというのはクラスを元に作られています。そしてクラスから生成されたオブジェクトを「インスタンス」といいます。
このインスタンスには個別のプロパティを持たせることが出来ます。

• 例えば「携帯電話」というクラスがあったとします。このクラスからインスタンス「ケータイA」や「ケータイB」などが生成されたとして、それぞれのプロパティを追加することが出来ます。例えば「電話番号」というプロパティだったり、「メールアドレス」だったりします。

全てのクラスはObjectクラスを継承する

全てのオブジェクトは何らかの形でObjectクラスを祖先とします。
例えば、ボタンのクラスであるSimpleButtonクラスは
Object
↓
EventDispatcher
↓
DisplayObject
↓
InterctiveObject
↓
SimpleButton
という風に継承して段階的に機能が増えていきます。

2009/01/02 (Fri) ② 変数

変数というのは何らかのデータ（値）を格納しそれに名前（変数名）を付けることで変数名を使ってアクセスが出来るようにした入れ物のことです。

変数の宣言方法
①基本
変数を宣言するには「var」というキーワードを使います。

• var 変数名:変数の形式；

という形で宣言をします。

• var trackNumber:int;

コロン「:」のあとの形式というのはその変数の形式のことを示します。数字なのか、文字列なのかということを指し示します。省略が可能ですが数値として扱いたいのに文字列を代入してしまうなどのミスを防ぐためにも必要なものです。
②複数の変数を宣言するとき。

複数のものを宣言するときは半角コンマで区切ります「,」

• var 変数①,変数②,・・・・；

となります。

• var trackNumber:int,album:string;

変数の宣言は以上です。次は変数に値を代入します。

値の代入

変数に値を代入したいときは。「=」を使います。

• 変数名　=　値;
• trackNumber = 3;
• album = "ＨＥＡＶＹ　ＧＡＵＧＥ";

などです。宣言時に初期値を代入する方法
変数を宣言
初期値を代入
という風に書くと

• var 変数名:形;
• 変数名 = 値;

となります。これは1行にする事も可能です。

• var 変数名:形 = 値;
• var album:string = "ＨＥＡＶＹ　ＧＡＵＧＥ",trackNumber:int = 9;

という感じです。

2009/01/02 (Fri) ① オブジェクト指向の考え方

アクションスクリプトはオブジェクト指向型プログラミングです。
アクションスクリプトのプログラミングでは全てのものをオブジェクト（インスタンス）として管理します。例えばURLや座標だったりします。
そして、そのオブジェクトに対して何らかのデータや操作をしていくのです。このとき、オブジェクトが持つデータのことをプロパティ、操作のことをメソッドといいます。

• 例えば、「パソコン」というオブジェクトがあったとします。このオブジェクトのプロパティとしては名前（windowsとか）、大きさなどが上げられます。メソッドとしては計算や音楽を聴くなどが上げられます。

もう一つ、継承という概念があります。
概存のオブジェクトのプロパティとメソッドを引き継ぎ新たなプロパティやメソッドなどを追加するというものです。アクションスクリプトのオブジェクトは全て継承の概念のもとで作られています。

• 例えば「マウス」というクラスがあったとします。このマウスには最初から右クリックと左クリックというメソッドが含まれています。ではインスタンス名「普通のマウス」としてマウスクラスからインスタンスを生成してみるとします。このとき右クリックと左クリックというメソッドは継承されます。新たにインスタンス名「便利なマウス」として生成したインスタンスにはメソッドとして戻るボタンや進むボタンというメソッドが追加できます。

2009/01/02 (Fri) あけましておめでとう！

今年もよろしくお願いします。


まあこんな感じで。

2008/12/30 (Tue) ⑯ プログレスバー

NOW LOADING・・・・・という画面が出てくるとロード中だということが分かりユーザーは安心するでしょう。

この画面を作るにはどのくらいロードしたのかを知り、それを数字やバーなどを使って表現する方法があります。

ローディング画面はフレーム1で表示されるようにする。

ムービークリップではなくアクションスクリプトで動かすのでフレームは1フレームのみです。
フレーム1で実行されるように、stop()を記述しておきます。

ロードが終わると同時にgotoAndPlay()が実行されるようにします。


どのぐらいロードされたかを格納する変数の生成

どれぐらいの容量がロードされたのかを変数名loadedとして生成します。
変数を生成するにはvarを使います。

• var loaded:int = Math.round(loaderInfo.bytesLoaded / loaderInfo.bytesTotal * 100);

という風になります。
・左辺
変数名loadedを宣言します。intというのは変数が整数の形(int型)ということを示します。

・右辺
Mathという演算を扱うクラスを用いてカッコ内の引数を計算した値を出しています。
このときはMathで演算を扱うと宣言し、ピリオドで区切りを入れて、round()メソッドにより引数を四捨五入しています。
カッコの中の引数は計算式です。
この時は、ムービークリップ（DisplayObject)というクラスの中にある、オブジェクトが属しているファイルのロード状況を参照するプロパティのloaderInfoクラスで定義された、loaderInfoクラスのプロパティであるbytesTotalやbytesLoadedというプロパティで値を呼び出しています。

loaderInfo.bytesLoaded　はロード済みのバイト数を参照します。
loaderInfo.bytesTotal　は全容量を参照します。

loaderInfo.bytesLoaded / loaderInfo.bytesTotal * 100
つまりこれで読み込んだバイト数のパーセントが分かるわけです。
ちなみにこのときもこのムービークリップを示すthisが省略されています。




テキストフィールドに値を表示する。

テキストフィールドのインスタンスを作っておき、そこにアクションスクリプトで求めた数値や文を表示したいというときは。前にもやった代入というのを使います。前にもやったというかしょっちゅうやっていますね。だから、とても簡単です。難しく考えることはありません。

インスタンスにははじめから沢山のプロパティを持っています。高さ、幅、縮尺などがあります。テキストもそのプロパティの中の一つなのでテキストフィールドにテキストを表示したい場合はテキストフィールドのインスタンスのtextというプロパティ値に表示したいテキストを　=　を使って代入すればいいのです。

今の場合表示したいテキストはどのぐらいのバイト数がロードされているかです。
表示するためのテキストフィールドのインスタンス名をloadedPercentBOXという名前にします。

•  loadedPercentBOX.text = loaded + "%";

今回は何パーセントかを表示するので％も一緒に表示するように定義します。

• loadedPercentBOXのtextというプロパティに変数loadedに％を足した値を代入します。という意味です。

関数を定義する

上記の2つのステートメントでイベントリスナーに呼び出される読み込まれたパーセント数を表示する関数を作ります。

• function loadingPercentText(event:Event):void{
• var loaded:int = Math.round(loaderInfo.bytesLoaded / loaderInfo.bytesTotal*100);
• loadedPercentBOX.text = loaded +"%";
• }

こんな感じです。

関数の名前はloadingPercentTextとしました。少々長いですがすぐに分かるのが一番良いです。

イベントリスナーの登録
次にイベントリスナーを登録します。

今回は今までと違いクリックなどで呼び出すイベントではありません。よって1フレーム分の時間ごとに自動的にイベントを発生してくれるENTER_FRAMEというのを使います。

ENTER_FRAMEはフレームに進入するイベントでフレームレートによって発生する間隔が決定されます。
フレームレートが20fpsならば1秒間に20回イベントリスナーが呼び出されます。
正確にはイベントを制御するEventクラスの中にある定数のなかで「フレームに進入」するイベントのENTER_FRAMEです。
記述するときはピリオドで区切って　Event.ENTER_FRAME　と記述します。

• this.addEventListener(Event.ENTER_FRAME,LoadingPercentText);

となります。イベントの引き金となるのはフレームが変わることなのでインスタンス名はメインタイムラインを示すthisです。省略してもかまいません。



100％になったらイベントを停止し次の場面へ移動するための関数

100％読み込んだらロード画面を停止してメインのコンテンツに移動するようにします。
100%になったら上記のイベントリスナーを停止し次のシーンへ行くように if 文を使用して分岐を作ります。

• if (loaded >= 100) {
• romoveEventListener(Event.ENTER_FRAME,loadingPercentText);
• gotoAndPlay(2);
• }

条件でloadedの値が100％になったら。
removeEventListener()で上記のaddEventListener()を削除し。gotoAndPlay()で2フレーム目に移動します。





これらを組み合わせると。

• this.stop();
   
• function loadingPercentText(event:Event):void{
• var loaded:int = Math.round(loaderInfo.bytesLoaded / loaderInfo.bytesTotal*100);
• loadedPercentBOX.text = loaded + "%";
   
• if (loaded =< 100){
• removeEventListener(Event.ENTER_FRAME,loadingPercentText);
• gotoAndPlay(2);
• }
• }
   
• this.addEventListener(Event.ENTER_FRAME,loadingPercentText);

2008/12/30 (Tue) ⑮ クリックでURLへジャンプ

クリックしたら他のサイトに飛ぶ、というのはHTMLではとても簡単ですがアクションスクリプトではイベントリスナーを使います。

アクションスクリプトのようなオブジェクト指向プログラムというのはURLもオブジェクトつまりインスタンスとして扱います。

URLをオブジェクトとして生成し、それを何らかの名前の変数に代入して扱います。
変数というのは関数とは違います

アクションスクリプトでは値（URLなど）を変数として扱うので一度URLを変数として定義します。

変数を生成する

• var 変数名:変数の形 = 値；

という形です。
実際にGoogleのURLだったとして変数名jumpGoogleを生成すると。

• var jumpGoogle:URLRequest = new URLRequest("http://www.google.co.jp/");

となります。
newはインスタンスを生成する演算子です。newのあとにはコンストラクタを指定します。このときのコンストラクタはURLRequest()というメソッドです。
URLRequest()はダブルクォーテーションで囲まれた値（URL）を定義します

コンストラクタはオブジェクトを生成するためのメソッドです。このときはhttp://www.google.co.jp/というURLをURLRequest()メソッドを使ってjumpGoogleという変数に代入しています。

URLへジャンプする関数

• navigateToURL(変数)

この関数がURLへジャンプするための関数です。カッコの中の引数にはURLを変数として渡してあげます。先ほどのjumpGoogleを変数として渡すと。

• navigateToURL(jumpGoogle);

となります。

関数を登録

function演算子で上記のステートメントを関数として登録します。

• function jumpToGoogle(event:MouseEvent){
• var jumpGoogle:URLRequest = new URLRequest("http://www.google.co.jp/");
• navigateToURL(jumpGoogle);
• }

イベントリスナーの登録

イベントリスナーにボタンをクリックすると上記のスクリプトが実行されるプログラムを書きます。

• jumpButton1.addEventListener(MouseEvent.CLICK,jumpToGoogle);

今回はjumpButton1というインスタンスをボタンとして使います。
イベントの種類はマウスイベントのクリックとします。
それによって実行される関数名はjumpToGoogleという関数です。

• //Googleに飛ぶための関数//
• function jumpToGoogle(event:MouseEvent){
• var jumpGoogle:URLRequest = new URLRequest("http://www.google.co.jp/");//Googleに飛ぶためのURLをインスタンスとして生成//
• navigateToURL(jumpGoogle);
• }
• //jumpButton1によるイベントリスナー。jumpToGoogleを呼び出す。//
• jumpButton1.addEventListener(MouseEvent.CLICK,jumpToGoogle);
  
  
   
• //yahooに飛ぶための関数//
• function jumpToYahoo(event:MouseEvent){
• var jumpYahoo:URLRequest = new URLRequest("http://www.yahoo.co.jp/index.html");//Yahooに飛ぶためのURLをインスタンスとして生成//
• navigateToURL(jumpYahoo);
• }
• //jumpButton2によるイベントリスナー。jumpToYahooを呼び出す。//
• jumpButton2.addEventListener(MouseEvent.CLICK,jumpToYahoo);