2014-12-19

2014-12-19

アルゴリズムの構築Add Star

 

 

「いつ」「何をするのか」

 

 
Gadgets powered by Google

 


この場合、「連続的に」「ムービークリップが右に移動する」となります。

※解説は次ページにあります。


イベントハンドラ

イベント

「いつ」を設定する部分になります。


 

 

onClipEvent (イベント) {

 処理1

 処理2

  …

 

 


 

onClipEventハンドラ

 

 

イベント説明
load ムービークリップインスタンスが load(生成)された。
unload ムービークリップインスタンスが unload(削除)された。
enterFrame フレームが更新された。
mouseDown ステージ上で、マウスボタンが押された。
mouseUp ステージ上で、押されていたマウスボタンが離された。
mouseMove ステージ上で、マウスカーソルが動いた。
keyDown ムービークリップの総バイト数を返す。
keyUp ムービークリップの深度(親ムービークリップ座標空間の重なり順)を返す。
data 外部データ(swf、テキスト、jpeg、MP3)がload された(一部はセッションごとに発生)。

 


この場合、「連続的」に処理を実行するので、イベントは「enterFrame」を利用します。


イベントを考える
  1. ムービークリップシンボル「ball」、インスタンス名「ball_mc」をつくります。
  2. 「ball_mc」に、以下のように記述します。

 onClipEvent (enterFrame) {
	trace("enterFrame");
 }

この結果、「出力パネル」に「enterFrame」という文字が繰り返し表示されます。


 

 

  1. 「" ダブルクォート」で囲まれた文字は「文字列」として表示される
  2. 「enterFrame」は、再生ヘッド読むたびに処理を実行する

 

 


処理を考える

処理とは「何をするか」を設定する部分になります。

  • 処理の間隔は「24fps」の場合、1/24秒ごとです。

 

オブジェクト

 

オブジェクトとは「特定の機能を持ったもの」のことです。


 

プロパティ

 

プロパティとは、オブジェクトの特性・属性を表します。

 

プロパティ説明
_x ムービークリップの配置位置(X座標、ピクセル)
_y ムービークリップの配置位置(Y座標、ピクセル)
_rotation ムービークリップの配置角度
_name ムービークリップインスタンス
_xscale ムービークリップのX軸方向の拡大縮小率(パーセント)
_yscale ムービークリップのY軸方向の拡大縮小率(パーセント)
_alpha ムービークリップの透明度(アルファ率)
_visible ムービークリップの表示/非表示
_width ムービークリップの幅(ピクセル)
_height ムービークリップの高さ(ピクセル)
_target ムービークリップのターゲットパス
_url ムービークリップを含むSWFファイルのURL
_currentframe ムービークリップのカレントフレーム(フレーム番号)
_totalframes ムービークリップのトータルフレーム数
_framesloaded ムービークリップのロードされたフレーム数
_droptarget ムービークリップをドロップするターゲットのインスタンス
_xmouse マウスの x 座標
_ymouse マウスの y 座標
_focusrect フォーカス枠の表示/非表示

 


 

ドットシンタックス

 

プロパティには、どのオブジェクトのプロパティかがわかるように「オブジェクト名」も記述します。

文法としては、「オブジェクト.プロパティ」というように「ドット」でつないで記述します。


  ball_mc._x

と書けば、「ball_mcというインスタンスのX座標位置」という意味になります。

また、対象とするオブジェクトがスクリプトを書いたオブジェクト自身のときには「this」でおきかえることが可能です。

通常は、汎用性を高めるために「this」を使います。


 

変数

 

どのようにプロパティを処理したら「右に移動し続ける」ことを実行できるでしょうか。


  onClipEvent (enterFrame) {
	this._x = this._x + 1;
	trace(_x);
  }

「=」を使い代入をします。

  • ActionScriptでは「=」は、右の値を左の変数に代入するという意味。

 

代入演算子

 

 

演算子処理内容
= 代入
+= 加算して代入
-= 減算して代入
*= 乗算して代入
/= 除算して代入
%= 剰余して代入

 


 

座標系

 

  • ステージ左上が原点(x=0, y=0)
  • Y座標は、下に増加する


ムービークリップに、以下のように記述することで「1/24秒に1px右に移動する連続した動き」をつくることができます。


  onClipEvent (enterFrame) {
	this._x += 1;
  }

書き換えると


 /*
 ムービークリップを移動するActionScript
 2014.3.04
 */

  onClipEvent (load) {
	speed = 1; //移動速度
  }

  onClipEvent (enterFrame) {
	this._x += speed;
  }

***練習課題

 

 
Gadgets powered by Google

 

 

はじめに1回設定

 

  • 速度を0にする
  • 加速度を1にする

 

連続的に

 

  • 速度に加速度を足す
  • X座標位置に速度を足す

  onClipEvent (load) {
	//初めは静止しているので速度は0に設定します
	speed = 0;
	
	//加速度を1に設定します
	accel = 1;
  }

  onClipEvent (enterFrame) {
	//速度に加速度を足します
	speed += accel;
	
	//X座標に速度を足します
	this._x += speed;
	
	//speedが徐々に上がるのを確認します
	//trace(speed);
  }

実践:右に移動させる


記述の順序
  1. 「ball_mc」を選択する
  2. アクションパネルを表示
  3. ムービークリップ制御」→「onClipEvent」をダブルクリック

 

f:id:web-actionscript:20120604092354j:image

 


 

  1. 「enterFrame」をダブルクリックで選択する

 

 

f:id:web-actionscript:20120604092824j:image

 


 

  1. 「{」の後で改行して、命令文を記述する
  2. 「ターゲットパスを挿入」をクリックする

 

 

f:id:web-actionscript:20120604093404j:image

 


 

  1. 「相対」を選択する

 

 

f:id:web-actionscript:20120604093749j:image

 


 

  1. 「ドットシンタックス」を利用して「_x」を選択する

 

 

f:id:web-actionscript:20120604094030j:image

 


 

  1. 「1」ずつ移動する命令になるよう記述します

 

 

f:id:web-actionscript:20120604094520j:image

 


 

  1. 「ムービープレビュー」で確認します

 

2014-12-18

2014-12-18

リップル(さざなみ)効果Add Star

 

 

合言葉は、ガチョーン

(1)新規ドキュメント作成

(2)背景色を変更


 

f:id:css_design:20110323130120j:image

 


(3)文字を入力する


 

f:id:css_design:20110323130529j:image

 


(4)「修正」→「分解」


 

f:id:css_design:20110323130640j:image

 

 

f:id:css_design:20110323130853j:image

 


(5)「修正」→「タイムライン」→「レイヤーに分配」


 

f:id:css_design:20110323131130j:image

 

 

f:id:css_design:20110323131309j:image

 


(4)1文字づつ、「分解」→「シンボルに変換」


 

f:id:css_design:20110323131626j:image

 

 

f:id:css_design:20110323131806j:image

 

 

f:id:css_design:20110323132339j:image

 


 

f:id:css_design:20110323131959j:image

 


(5)キーフレームを挿入し、動きの準備をする


 

f:id:css_design:20110323132505j:image

 

 

f:id:css_design:20110323132735j:image

 

 

f:id:css_design:20110323132848j:image

 


(6)1フレームのインスタンスの不透明度「アルファ」を「0%」にする

  • 「アルファ」は適宜設定する

 

f:id:css_design:20110323133209j:image

 

 

f:id:css_design:20110323133935j:image

 

 

f:id:css_design:20110323133403j:image

 


(7)次のキーフレームを「800%に拡大」「アルファ:10%」にする

それを「1文字づつ繰り返す」


 

f:id:css_design:20110323134116j:image

 

 

f:id:css_design:20110323234040j:image

 

 

f:id:css_design:20110323233103j:image

 

 

f:id:css_design:20110323133327j:image

 


(8)動きに併せて、フレームをずらす

(9)図のように、「フレームを挿入」して、静止した文字を表示し続ける


 

f:id:css_design:20110323233503j:image

 


(10)最終フレームで止める


 

f:id:css_design:20110323233640j:image

 

 

 

 

 
Gadgets powered by Google

 

 

 

Flashムービー上をクリックすると、再生されます。

 

2014-12-17

2014-12-17

時間の制御とボタンの作成Add Star

 

 

イラストを描く

 

f:id:web-0127:20140227084144g:image

 


  • Flashにコピー&ペースト
  • シンボルに変換

制御:停止

Flashは「自動再生」が基本です。

ですから、「止める」設定がされていない場合、繰り替えし再生し続けることになります。

「タイムライン」パネル「1」フレームを選択し、「アクション」パネルに記述します。


ActionScript2.0では、


this.stop();

のみで、OKです。

「空白キーフレーム(白丸)」の上に「a」のマークがつきます。

 

f:id:web-css-design:20111008195413j:image

 


「1」フレームに記述してあるということは、再生する瞬間に「1」フレームで停止することを意味します。

途中(1フレーム以外)で「停止」を設定する場合は、


 

f:id:web-css-design:20111008200304j:image

 



ActionScript2.0

現在では市販本もActionScript3.0のみになっていますが、Webの勉強をするのにはActionScript2.0から始めるメリットがあります。


ActionScript2.0の記述する

以下の3種類に記述できます。


ActionScript3.0とActionScript2.0での「イベントハンドラメソッド」では、フレームアクションのみになります。

現時点で、フレームアクションからHTML5に書き出すとイベントが正確に再現できません。(いずれ可能になると思いますが。)


ボタンを作成

  • 挿入メニュー→「新規シンボル作成」

 

f:id:web-css-design:20111008203215j:image

 


 

ボタンシンボルを選択

 

  f:id:web-css-design:20111008203430j:image


 

ボタンシンボルの構造

 

  f:id:web-css-design:20111008203629j:image

  • アップ:マウスが外れている時
  • オーバー:マウスが乗っている時
  • ダウン:マウスが押された瞬間
  • ヒット:マウスの反応をうける面積

 

ボタンシンボルに文字を挿入

 

「静止テキスト」を選択します。

 

f:id:web-0127:20140302153119j:image

 


  • 「_アンダースコア」がついた文字がもっともデータが軽くなります
  • それ以外の文字を選択する場合は、「埋め込み」ボタンを押します
  • オブジェクトの「基点」を中心に合わせるには、「カット&ペースト」を使います

 

f:id:web-0127:20140302152800j:image

 


  • 「キーフレームの挿入」で同じ位置に複製をつくる
  • 文字色を変更する

 

f:id:web-0127:20140302155405j:image

 



同様に「ダウン」にも「キーフレームの挿入」します。


  • 「ヒット」には、文字の上に長方形を描画します

 

f:id:web-0127:20140302155801j:image

 


※「ヒット」のエリアは、CSSでいう「display:block」にあたります。


 

ボタンの複製

 

  • 「スタート」ボタンを複製し「ストップ」「バック」を作成します

 

f:id:web-0127:20140302173455j:image

 


 

f:id:web-0127:20140302180148j:image

 


  • 「ストップ」ボタンであることを確認してから文字を打ち替えます

 

f:id:web-0127:20140302181252j:image

 


 

ボタンの配置

 

  • 「ボタン」レイヤーを作成
  • ステージにボタンを配置
  • 「整列パネル」を使って、バランスを整えます

 

f:id:web-0127:20140302181744j:image

 



onハンドラ

「アクションツールボックス」で支援機能を利用する。


 

f:id:web-css-design:20111008215610j:image

 


  1. ボタンを選択する
  2. 「グローバル関数」→「on」ダブルクリック
  3. 「release」を選択する
  4. 「{」で改行
  5. 「this」を入力
  6. 「. ドット」を入力
  7. 「タイムラインコントロール」→「stop」ダブルクリック

 

f:id:web-css-design:20111008234719j:image

 


この記述により、ボタンが押されると「時間軸が停止」します。



練習課題

  • 以下のようなFlashムービーを作成しなさい

 

http://webizm.jp/felica/flash/amami.html

 


 

手順

 

  1. 新規ドキュメント作成(flaファイルを開く)
  2. 各レイヤーに必要な画像を読み込む(夕日のレイヤーの空白キーフレームに夕日の画像を読み込む)
  3. 読み込んだ画像を選択したまま「修正メニュー→シンボルに変換する(グラフィックシンボル)
  4. 同様に、花のレイヤーの空白キーフレームに花の画像を読み込む
  5. 読み込んだ画像を選択したまま「修正メニュー→シンボルに変換する(グラフィックシンボル)
  6. 赤い文字レイヤーに、赤い文字シンボルをライブラリから配置する
  7. 整列パネルでドキュメントの中央に揃える
  8. 赤い文字レイヤーの「35フレーム」にキーフレームを挿入する
  9. 赤い文字レイヤーの「1~35」までの間にクラシックトゥイーンを挿入する
  10. 赤い文字レイヤーの「1フレーム」のインスタンス(ステージのオブジェクト)を選択し、プロパティパネルの「カラー効果:スタイル」をアルファ0%にする
  11. 夕日の画像を「35フレーム」からスタートするように移動する
  12. 夕日のレイヤーの「70フレーム」にキーフレームを挿入する
  13. 夕日のレイヤーの「35~70」までの間にクラシックトゥイーンを挿入する
  14. 夕日のレイヤーの「35フレーム」のインスタンス(ステージのオブジェクト)を選択し、プロパティパネルの「カラー効果:スタイル」をアルファ0%にする
  15. 赤い文字レイヤーの「70フレーム」にキーフレームを挿入する
  16. 赤い文字レイヤーの「70フレーム」のインスタンス(ステージのオブジェクト)を選択し、プロパティパネルの「カラー効果:明度」を100%にする
  17. 夕日のレイヤーの「80フレーム」にキーフレームを挿入する(70~80フレームまで同じ画像が見え続ける)

2014-12-16

2014-12-16

練習課題AAdd Star

 

 


【A01】

 

 

変数を使った計算式を書き、出力パネルに結果を表示させなさい。

10×(8+12)÷4 の値は?

 

 

 var num1:Number = 10;
 var num2:Number = 8;
 var num3:Number = 12;
 var num4:Number = 4;

 total = num1 * (num2 + num3) / num4;

 trace(total);


【A02】

 

 

「車Aの時速は100km」「車Bの時速は140km」

東京←→大阪の距離は560km

どちらが何時間早く着くか求めなさい?

 

 

var speedA:Number = 100; //Aのスピード
var speedB:Number = 140; //Bのスピード
var distance:Number = 560; //東京→大阪間の距離

	//時間を求める計算式
	timeA = distance / speedA;
	timeB = distance / speedB; 

	ans = timeA - timeB

trace(ans);


【A03】

 

 

「ビールを12杯:1杯500円」「ウーロン茶を4杯:1杯300円」「サラダを2皿:1皿600円」「チキンを2皿:1皿800円」
「ピザを2枚:1枚800円」

これを5人で割り勘にしたときの一人あたりの金額を求めなさい。

 

 

var beer:Number = 500; //ビールの値段
var uron:Number = 300; //ウーロン茶の値段
var salad:Number = 600; //サラダの値段
var chicken:Number = 800; //チキンの値段
var pizza:Number = 800; //ピザの値段

total = (beer * 12) + (uron * 4) + (salad * 2) + (chicken * 2) + (pizza * 2);// 合計を計算

var ninzu:Number = 5;
hitoribun = total / ninzu; //一人当たりの金額

trace("一人当たりの金額は"+hitoribun+"円です。");


【A04】

 

 

自分の氏名を出力パネルに表示しなさい。

 

 

var seiStr:String = "山本";
var naStr:String = "一郎";

shimeiStr=seiStr+naStr;

trace("私の名前は、" + shimeiStr + "です。");


【A05】

 

 

ムービークリップを作成なさい。

ロードした時に、ムービークリップのX座標が左端から300の位置に移動するスクリプトを記述しなさい。

 

 

 onClipEvent (load) {
	var now = 300;
	this._x = now;
 }


【A06】

 

 

ムービークリップをクリックした時に、ムービークリップのX座標が左端から300の位置に移動するスクリプトを記述しなさい。

 

 

 

 
Gadgets powered by Google

 

 onClipEvent (load) {
	var now:Number = 300;
 }

 on (release) {
	this._x = now;
 }


【A07】

 

 

ムービークリップをクリックした時に、ムービークリップがX座標が20移動、大きさが縦横20ずつ大きくなり、20ずつ回転するスクリプトを記述しなさい。

 

 

 

 
Gadgets powered by Google

 

 onClipEvent (load) {
	var rate:Number = 20;
 }

 on (release) {
	this._x += rate;
	this._xscale += rate;
	this._yscale += rate;
	this._rotation += rate;
 }


【A08】

 

 

ムービークリップが表示された時から、15ずつその場で回転するスクリプトを記述しなさい。

 

 

 

 
Gadgets powered by Google

 

 onClipEvent (load) {
	var rate:Number = 15;
 }

 onClipEvent (enterFrame) {
	this._rotation += rate;
 }



【A09】

 

 

ムービークリップが表示された時から、1ずつX座標を移動するスクリプトを記述しなさい。

 

 

 

 
Gadgets powered by Google

 

 onClipEvent (load) {
	var speed:Number = 1;
 }

 onClipEvent (enterFrame) {
	this._x += speed;
 }

2014-12-15

2014-12-15

演算Add Star

 

 

演算(計算)

プログラムの世界では、計算のことを演算と呼びます。

この段階では、「算数」の計算です。

「数学」の計算は「Mathクラス」を使っておこないます。


 var a:Number = 10;
 var b:Number = 5;
 var c:Number = 2;
 var d:Number;

変数 d には、これから計算結果を代入するので、初期値を入れていません。


 var a:Number = 10;
 var b:Number = 5;
 var c:Number = 2;
 var d:Number;

 d = a + b;
 d = a - b;
 d = a * b;
 d = a / b;

計算結果を知りたいときには、


var a:Number = 10;
var b:Number = 5;
var c:Number = 2;
var d:Number;

d = a + b;
trace( d );
d = a - b;
trace( d );
d = a * b;
trace( d );
d = a / b;
trace( d );

で確かめることができます。


計算の省略表記

ある変数の値を1増やす、1減らすというのはプログラミングではよくあることです。


var a:Number = 10;
a = a + 1;

a に1を足して、その値を a にセットし直すという式です。

短縮表記では、以下のように記述します。


var a:Number = 10;
a ++;

1減らすときは


var a:Number = 10;
a --;
  • インクリメント:1増やすごとに
  • デクリメント:1減らすごとに

以下のような場合も、短縮表記で書くことができます。


var a:Number = 10;
a += 2;
a -= 2;
a *= 2;
a /= 2;

 

2014-12-14

2014-12-14

メソッド・プロパティとイベントハンドラ・ムービークリップアクションAdd Star

 

 

メソッドとプロパティ

  • クラスを構成するメンバーは「メソッド」と「プロパティ」

メソッド
  • メソッド」は「動詞」に相当
  • オブジェクトに何かの動作を命令する働きをもったメンバー

 

 

単語の後ろに「( )」がついている

 

 


 

 

gotoAndStop( )

ムービークリップのタイムラインを移動する


duplicateMovieClip( )

ムービークリップを複製して、新しいインスタンスを生成する


loadMovie( )

ムービークリップ内に、別のSWFやJPEGファイルを読み込む

 

 


プロパティ
  • 「プロパティ」は、あるオブジェクトの「状態」を示す
  • オブジェクトを生成した時点で、何らかの値が代入されています
  • ActionScript2.0は「_(アンダースコア)」あり、ActionScript3.0は「_」なし

 

 

単語の後ろに「( )」がついていない

 

 


 

 

_x、_y

オブジェクトのX、Y座標


_xscale、_yscale

オブジェクトのX、Y方向の拡大・縮小率


_alpha

オブジェクトの透明度

 

 


イベントハンドラ

  • イベントハンドラ」は、ムービー再生中に発生するイベントを感知する
  • オブジェクトに命令する動作内容を自由に作ることができる「メソッド」の一種

 

 

onRelease

オブジェクトがクリックされたとき~する


onRollOver

オブジェクトの上にポインタが乗った状態のとき~する


onKeyDown

あるキーが押されたとき~する

 

 



 

ムービークリップイベントハンドラメソッド

 

 

イベント 説明
onLoad onClipEvent ( load ) ハンドラのイベントハンドラメソッド
onUnload onClipEvent ( unLoad ) ハンドラのイベントハンドラメソッド
onEnterFrame onClipEvent ( enterFrame ) ハンドラのイベントハンドラメソッド
onMouseDown onClipEvent ( mouseDown ) ハンドラのイベントハンドラメソッド
onMouseUp onClipEvent ( mouseUp ) ハンドラのイベントハンドラメソッド
onMouseMove onClipEvent ( mouseMove ) ハンドラのイベントハンドラメソッド
onKeyDown onClipEvent ( keyDown ) ハンドラのイベントハンドラメソッド
onKeyUp onClipEvent ( keyUp ) ハンドラのイベントハンドラメソッド版 

 

 

onData onClipEvent ( data ) ハンドラのイベントハンドラメソッド

 


 

ボタンのイベントハンドラメソッド

 

 

onPress on ( press ) ハンドラのイベントハンドラメソッド
onRelease on ( release ) ハンドラのイベントハンドラメソッド
onReleaseOutside on ( releaseOutside ) ハンドラのイベントハンドラメソッド
onRollOut on ( rollOut ) ハンドラのイベントハンドラメソッド
onRollOver on ( rollOver ) ハンドラのイベントハンドラメソッド
onDragOut on ( dragOut ) ハンドラのイベントハンドラメソッド
onDragOver on ( dragOver ) ハンドラのイベントハンドラメソッド
onKillFocus インスタンスがフォーカスを失った。
onSetFocus インスタンスがフォーカスを受け取った。

 



ムービークリップアクション


ムービークリップがロードされたとき、{ }内の処理をする
 onClipEvent (load) { 
   trace(_x);  //「出力」ウインドウに、インスタンスのx座標を表示
   trace(_y);  //「出力」ウインドウに、インスタンスのy座標を表示
   trace(_width);  //「出力」ウインドウに、インスタンスの横幅を表示
   trace(_height);  //「出力」ウインドウに、インスタンスの高さを表示
 }

ムービークリップがあるフレームが読み込まれるたびに、{ }内の処理をする
 onClipEvent (enterFrame) {
   _x=_x+5;  //インスタンスのx座標に、インスタンスのx座標に5を足したものを代入する
   _y=_y+5;  //インスタンスのy座標に、インスタンスのy座標に5を足したものを代入する
 }

または

 onClipEvent (enterFrame) {
   _x+=5;
   _y+=5;
 }

 onClipEvent (enterFrame) {
   _x-=5;  //インスタンスのx座標に、インスタンスのx座標から5を引いたものを代入する
   _y-=5;  //インスタンスのx座標に、インスタンスのy座標から5を引いたものを代入する
   trace(_x);  //「出力」ウインドウに、インスタンスのx座標を表示
   trace(_y);  //「出力」ウインドウに、インスタンスのy座標を表示
 }

 onClipEvent (enterFrame) {
  _width+=5;  //インスタンスの幅に、インスタンスの幅に5を足したものを代入する
  _height+=5;  //インスタンスの高さに、インスタンスの高さに5を足したものを代入する
   trace(_width);  //「出力」ウインドウに、インスタンスの幅を表示
   trace(_height);  //「出力」ウインドウに、インスタンスの高さを表示
 }

 onClipEvent (enterFrame) {
  _rotation+=5;  //インスタンスの回転角度(この場合、最初は0)に、インスタンスの回転角度に5を足したものを代入する(→時計回りに回る)
  _alpha-=5;  //インスタンスの透明度(この場合、最初は100)に、インスタンスの透明度から5を引いたものを代入する(→だんだん透明になる)
 } 	

 

2014-12-13

2014-12-13

変数Add Star

 

 

変数:Variable

  • 「変数」とは、何らかの値を代入して保存しておくもので、必要なときに自由に作ることができます
  • ダイナミックテキストフィールドにテキスト内容を表示するために、情報を保存しておく
  • ユーザーが入力したテキスト内容をサーバーに送信するために保存しておく

 

 

変数に代入する値を、ActionScriptでは「データ」と読んでいます

 

 

【例】

 a = 1;
 b = 2;
 c = a + b;

Scriptは原則として「上から下」へ順に実行されていきます。

この場合は、次のような処理になります。


 a という変数に 1を入れる
 b という変数に 2を入れる
 a の内容に b の内容を足したものを、c という変数に入れる

つまり、c には「3」が入っていることになります。


変数のルール

変数は「var」を使って宣言
 var a = 1;

「a という変数を使うことを宣言し、初期値として1を入れます。」

var は、その変数が最初にScriptに登場するときに1回だけ使います。


変数名のつけ方

 

変数の名前

 

変数の名前は、先頭の1文字は、

  1. 英字
  2. アンダースコア
  3. ドル記号

のいずれかでなければなりません。


以下の語句は、予約語といい「変数名」には、使用できません。

 

 

break, case, continue, default, delete, else, for, function, if, in, instanceof, new, return, switch, this, typeof, var, void, while, with

 

 

これ以外は自由につけることができます。

2つ以上の単語を組み合わせる場合には、2番目以降の単語の頭文字は「大文字」にします。


変数のデータ型

データ型は、変数名に「: コロン」をつけてその後に続けて書きます。

常に使うのは、以下の2つのデータ型です。

  • 数値データ型(Number):数値を入れるための変数
  • ストリングデータ型(String):文字列を入れるための変数

 var c:Number = 3;
 var s:String = "答えは";
 var answer:String = s + c;

 trace( answer );

Scriptの働きを日本語にすると


 c という数値型の変数を宣言して、3という数値を入れる
 s というストリング型の変数を宣言して、「答えは」という文字列を入れる
 answerというストリング型の変数を宣言して、s と c を繋げた結果を入れる

 変数 answer の内容を出力パネルに表示する

 

データ型のコードヒント

 

コロンを入力すると、表示されます。

 

f:id:web-css-design:20111009171848j:image

 


ブールデータ型

「true」か「false」のどちらかの値しか入らないデータ型。


 var nameEntered:Boolean = false;

この例では、ブールデータ型の変数「nameEntered」を宣言しています。

「名前が入力されたかどうか」という情報を保管する変数として利用されます。


  1. 名前が入力されている → true
  2. 名前が入力されていない → false

このように「入力・未入力」「選択・未選択」「使用中・空き」「正解・不正解」のような2つしか選択肢がない情報を保管するときに利用すると便利です。


MovieClip(ムービークリップ)型

 var fruit:MovieClip = apple;
 fruit._alpha = 50;

この結果、インスタンスapple」のアルファー値(不透明度)を50%にします。

このような変数を、「appleへの参照(リファレンス)」といいます。


変数名を間違ったら

 var c:Number = 3;

 trace( answer );

この場合、変数「answer」の宣言すらされていません。

その場合は、以下のように表示されます。


 

f:id:web-css-design:20111009174450j:image

 


値も何もないので「undefined(未定義)」と表示されました。


リテラル

変数に対して数値やストリングなどのスクリプトに直接書いた値を「リテラル」と呼びます。


変数の種類とスコープ(有効範囲)

変数には

  1. タイムライン変数
  2. ローカル変数
  3. グローバル変数

の3種類があります

  • 変数の種類の違いはスコープの違い、すなわち、変数の有効範囲の違いと言えます

タイムライン変数
  • フレームアクションに直接書いた変数は、そのタイムラインの中で有効な変数です
  • タイムライン変数の宣言には「varステートメント」を付けますが、これは省略も可能です

【例】フレームアクション:フレーム1

 var a = 15;
 var b = 32;
 var x = a + b;

 trace("x=" + x);  //出力→ x=47

 

 

フレームアクションは、フレームアクションが設定してあるキーフレームが再生されたときに実行されます。

 

 

  • まだ再生していないキーフレームのフレームアクションに書いてあるタイムライン変数にはアクセスできません。
  • そのキーフレームが1度でも再生されたならば、そこに書いてあるタイムライン変数にアクセスできるようになります。
  • タイムライン変数はインスタンスのプロパティという解釈もできます。
  • メインのタイムラインならば、_rootのプロパティという位置付けです。

ローカル変数
  • 「ローカル変数」は、関数やメソッドを定義するfunctionステートメントのブロック内で宣言し、その中でのみ有効な変数です。
  • functionブロックをいったん離れると変数は破棄され、変数の値は保持されません。たとえるなら、1度退場すると無効になる入場券のようなものです。
  • 「ローカル変数」はvarステートメントで宣言しなければなりません。
  • 関数やメソッドでは引数を受け渡す際にローカル変数が使われます。これをパラメータ変数と呼ぶことがあります。

例で使用している変数a、変数bがパラメータ変数です。

パラメータ変数はvar宣言が不要です。


【例】

 //kakezan関数の定義
 function kakezan(a, b) {
 var v = a * b;
 return v;
 }

グローバル変数
  • グローバル変数は「_grobalオブジェクト」を利用して作る変数で、ムービーを通してどこからでもアクセスできる変数です。

【例】

 var myColor = _global.colors[1]; // "green"
 var usrName = _global.usrpref.name;
 var usrAge = _global.usrpref["age"];

テキストフィールドを使った変数
  • テキストフィールドをダイナミックテキストまたはテキスト入力の設定にすると変数名を入力する項目が追加されます。ここに変数名を入れれば、テキストフィールドを変数のように使うことができます。
  • 変数の値はテキストフィールドに入って表示されます。
  • 値の取り出し方も同じで、テキストフィールドに表示されているデータを変数名で取り出せます。
  • 変数名を宣言する必要はありません。

たとえば、テキストフィールドにtheDataという変数名を付けたならば、次のように参照できます。


【例】

 theData = "これはテキストフィールドのデータです。";
 var msg = theData; //変数msgに入れる

テキストフィールドに値を入れたり取り出すというだけの目的ならば、テキストフィールドのtextプロパティを利用できます。


【例】

 data_txt.text = "これはテキストフィールドのデータです。";
 var msg = data_txt.text; //変数msgに入れる


変数に入るもの

  • 変数の中に入っている「データ」の種類

数値:Number
  • 値を示す数字
  • 得点や数そのもの
 score _num = 120
 shinchou _num = 170
 taiju _num = 60

文字列:String
  • 名前などの文字
  • 学籍番号などの数字
 name _str = "山本 太郎"
 company _str = "Adobe"

日付:Date
  • 誕生日やイベントの日
  • 得点や数そのもの
 birth _date = new Date(1970, 3, 3)
 establish _date = new Date(2009, 5, 16)

データ型のチェック
  • 値のデータ型をチェックするにはtypeof演算子を使います
  • 返される値はデータによって次のようになります

 

 

ストリング → string

ムービークリップ → movieclip

ボタン → object

テキストフィールド → object

数値 → number

ブール値 → boolean

オブジェクト(インスタンス) → object

関数 → function

null → null

未定義 → undefined

 

 


【例】

 trace(typeof "test"); //出力→ string
 trace(typeof 123); //出力→ number
 trace(typeof ([1, 2, 3, 4])); //出力→ object
 usr = {name:"chan", age:21};
 trace(typeof usr.name); //出力→ string
 today = new Date();
 trace(typeof today); //出力→ object

nullとundefinedも同様です。


【例】

 trace(typeof null); // null
 trace(typeof x); // 変数xをいきなり使用したのでundefined