「Buttonクラス」の版間の差分
提供: LWF Wiki
(→ボタンを作る) |
(→イベントを登録する) |
||
| 20行: | 20行: | ||
==イベントを登録する== | ==イベントを登録する== | ||
| + | ボタンを使用するには、ボタンを押した時や離した時の挙動を登録する必要があります。<br/> | ||
| + | 登録には Button.addEventListener を使用します。<br/> | ||
| + | <br/> | ||
| + | 下記の例では、ボタンを離した時にコンソールに"release"と出力します。<br/> | ||
| + | <Buttonインスタンス>.addEventListener("release", function(){ | ||
| + | console.log("release"); | ||
| + | } | ||
| + | <br/> | ||
| + | addEventListenerの第1引数にはイベントの種類<br/> | ||
| + | 第2引数には実行する関数を入れます<br/> | ||
| + | <br/> | ||
| + | イベントには下記の種類があります<br/> | ||
| + | {| border="1" cellpadding="3" | ||
| + | !イベント名 | ||
| + | !実行タイミング | ||
| + | |- | ||
| + | |press | ||
| + | |ボタンが押された時 | ||
| + | |- | ||
| + | |release | ||
| + | |ボタンが離された時 | ||
| + | |- | ||
| + | |rollOver | ||
| + | |ボタン領域内に入った時<br/>(タッチデバイスの場合、タッチ状態のまま領域に入った場合) | ||
| + | |- | ||
| + | |rollOut | ||
| + | |ボタン領域内から出た時<br/>(タッチデバイスの場合、タッチ状態のまま領域から出た場合) | ||
| + | |} | ||
| + | |||
==イベントを解除する== | ==イベントを解除する== | ||
==タッチした座標を取得する== | ==タッチした座標を取得する== | ||
==ボタンのサイズを取得する== | ==ボタンのサイズを取得する== | ||
2013年9月5日 (木) 00:57時点における版
目次 |
Buttonクラスとは?
クリックやタッチなどの入力を受け取れることのできるクラスです。
LWFでは入力を受け取れるのは、このボタンクラスだけになります。
イベントリスナーを設定して特定の入力タイミングでスクリプトを実行したりすることが可能です。
ムービークリップと違いグラフィックを設定することはできず、ヒット領域のみの存在となります。
ヒット領域の設定にのみ唯一シェイプが使用できますが、回転していない矩形である必要があります
ボタンを作る
まず、適当なサイズの矩形シェイプを作りましょう。
その後、そのシェイプをボタンシンボルに変換します。シンボル名は適当なもの(英数)をつけてください
シンボル変換後、編集モードに入りシェイプが描画されているキーフレームを「アップ」→「ヒット」へ移動してください。
そして、編集モードを抜けると、半透明の水色の矩形ができあがっていると思います。
これがボタンのヒット領域になります。
ボタンにはインスタンス名を設定しておかないと使用できないので適当なインスタンス名を設定しましょう
イベントを登録する
ボタンを使用するには、ボタンを押した時や離した時の挙動を登録する必要があります。
登録には Button.addEventListener を使用します。
下記の例では、ボタンを離した時にコンソールに"release"と出力します。
<Buttonインスタンス>.addEventListener("release", function(){
console.log("release");
}
addEventListenerの第1引数にはイベントの種類
第2引数には実行する関数を入れます
イベントには下記の種類があります
| イベント名 | 実行タイミング |
|---|---|
| press | ボタンが押された時 |
| release | ボタンが離された時 |
| rollOver | ボタン領域内に入った時 (タッチデバイスの場合、タッチ状態のまま領域に入った場合) |
| rollOut | ボタン領域内から出た時 (タッチデバイスの場合、タッチ状態のまま領域から出た場合) |
