読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

アルゴリズムの構築

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

  • (例)上下左右の端にぶつかったら反転する
イベント

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

メソッドとプロパティ
  • クラスを構成するメンバーは「メソッド」と「プロパティ」
メソッド
  • 「メソッド」は「動詞」に相当
  • オブジェクトに何かの動作を命令する働きをもったメンバー



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



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 インスタンスがフォーカスを受け取った。

イベントを考える
  • 以下のように記述します
var msg:String = 'enterFrame';

this.onEnterFrame = function() {
	trace( msg );
}


この結果、「出力パネル」に「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」を使います。


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

var moveX:Number = 1;

this.onEnterFrame = function() {
	kuma_mc._x += moveX;
}


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

  • ActionScriptでは「=」は、右の値を左の変数に代入するという意味
  • 「+=」は、右の値に初期値を加算した値を左の変数に代入するという意味


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


座標系

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


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

var moveX:Number = 1;

this.onEnterFrame = function() {
	kuma_mc._x += moveX;
}


書き換えると

/*
ムービークリップを右に移動させるActionScript
2015.10.21
*/

var moveX:Number = 1; //移動速度

this.onEnterFrame = function() {
	kuma_mc._x += moveX;
}


***練習課題

  • 以下の処理を記述しなさい


はじめに1回設定

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

連続的に

  • 速度に加速度を足す
  • X座標位置に速度を足す
//初めは静止しているので速度は0に設定します
var moveX:Number = 0;
//加速度を1に設定します
var accel:Number = 1;

this.onEnterFrame = function() {
  //速度に加速度を足します
  moveX += accel;
  //X座標に速度を足します
  kuma_mc._x += moveX;
}


※加速度がついて移動をするので、ムビークリップは左端に配置します。