一度ボタンを押したらONの状態になってもっかい押すとOFFになるという感じ。
ON/OFF…考えれば「切り替えるだけ！」と、非常に単純な事だけどスクリプトならどうすれば楽か？
じゃー、俺式ON/OFFの御紹介っつーわけですよ。
で、俺式ボタンはシンボル化するときに【ボタン】では作成しません。
かれこれ長いこと【ボタン】は使ってませんなぁ。
何故か!?
不便になる事が出てくる事だけは経験上確かかと思います。
ある日、ﾊｯ!Σ(ﾟДﾟ)ﾅｼｺ! と気が付くはずです。
こんな感じの物が出来上がります。
ではでは、まずは簡単で適当な大きさの四角を描き、【ムービークリップ】でMC化し、シンボル名はお任せ〜。
インスタンス名は【s_btn】と付けてみました。Switchの s ですね。
では【s_btn】MCをダブルクリックし中に入ってください。
1フレーム目の図
2フレーム目を追加し、マウスが乗った絵を描きましょう。
3フレーム目を追加し、マウスがクリックされた絵を描きましょう。
上図では分かりやすく文字も入れています。
さてさてASですがー、新しいレイヤーを追加し、1フレーム目をクリックします。
ASウィンドウを開き(キーボード:F9)を押し、
this.stop();
と記述します。
これを書かないとムービークリップがグリングリン周っちゃいますよ。気をつけましょう。
ASが書き終わったら【シーン1】に戻りましょう。最初の画面ですね。
ここから重要なASです。順を追って説明しましょう。
まずはフレームを追加しフレームをクリック！そしてASウィンドウを開きます。
いきなり作ろうと考えず1つ1つ潰す作戦で！
では、マウスがクリックされたときの処理から。
s_btn.onPress = function(){
this.gotoAndStop(3);
}これを実行しマウスクリックをすると、先ほど作った
【s_btn】MCの3フレーム目に飛ぶはずです。
ここでいう 【this.gotoAndStop(3);】 の 【this】 は 【s_btn】と同じ意味です。
functionで記述した中の 【this】 は
【
s_btn.onPress = funciton】
この赤字で強調された部分のインスタンス名と同じ意味を持ちます。
分からない場合は 【this】 を 【s_btn】 に変えましょう。
この手順で次々に基本ボタン処理を書いていきましょう。
s_btn.onRelease = s_btn.onRollOver = function(){
this.gotoAndStop(2);
}
s_btn.onReleaseOutside = s_btn.onRollOut = function(){
this.gotoAndStop(1);
}【onRelease】と【onRollOver】は同じ処理をするのでまとめています。
【onReleaseOutside 】と【onRollOut 】は同じ処理をするのでまとめています。
まとめると意味が分からなくなる方は分解してもOK!
ボタン系の処理はこの5個で終わりです。
さて実行してみましょう。
「押しっぱなしにならないじゃん。」
ええそうです。だって書いてないんですもん。基本処理を書いただけですから…。
今からっすよ今かラ〜。完成まで後少しです！
さてココから今回のメインである【ON/OFF】機能を搭載なんですよ。
通常なら「それフラグを持たせたら出来んじゃん」と考えるところでしょうか。
フラグっつーのは、適当な変数をスイッチ代わりにするんです。
【sFlg = 0;】 ならスイッチOFFの状態です。
【sFlg = 1;】 ならスイッチONの状態です。
とかいう考え方。
俺式というべきかどうかですが（知ってる人は知ってる技だと思う）、フラグを使わず作る方法がががががが。
まずは【onPress処理】からと考える前に条件を探します。
要するに
フラグと同等の条件が拾えればOKなんですよ。
で！ココで使えそうな条件っつーのが
s_btnのフレーム位置
これ重要なんですよ。
こいつはフレームをチョコチョコ移動して、ON状態なのかOFF状態なのかハッキリしてますよね。
引き出すASは【
MC(target)._currentframe 】と非常に単純。
っつーわけで、【s_btn】のフレーム位置を引き出すには
s_btn._currentframe
コレだけです。
なんとまぁ単純。
でコイツを使って作成しますと。
s_btn.onPress = function(){
if(this._currentframe == 2){
this.gotoAndStop(3);
}else{
this.gotoAndStop(2);
}
}こうなるのです。
よーく考えましょう。
まず、
ボタンをクリックする前にマウスが【乗る】はずです。
そして
乗った場合は【フレーム2】へ移動します。
上のソースを見ますとー
【クリックして、もし現在のフレームが2の場合は、3フレーム目に移動】
「押した！」という3フレーム目に移動しています。
【クリックして、2フレーム目以外のフレームだったら2フレーム目に移動】
「乗った！」の2フレーム目に移動です。
というわけでまとめますと
マウスが乗る = 2フレーム目
ON: マウスクリックの場合で現在2フレーム目なら = 3フレーム目
OFF:マウスクリックの場合で現在2フレーム目以外なら = 2フレーム目
こうなるわけです。
【OFF:マウスクリックの場合で現在2フレーム目以外なら = 2フレーム目】
気が付きにくいところですがー、コレは事実上【OFF】にするわけです。
「ならば1フレーム目にいくのでは？」と思いますが、
マウスが乗っかった状態でボタンが 【Press】 されるので、1フレーム目には行かず、
2フレーム目に移動する 【RollOver】 と同じ処理になるというわけです。
で、さらにonRollOver等のマウス処理を突き詰めたASが下のサンプルになります。
s_btn.onPress = function(){
if(this._currentframe == 2){
this.gotoAndStop(3);
}else{
this.gotoAndStop(2);
}
}
s_btn.onRelease = s_btn.onRollOver = function(){
if(this._currentframe == 1){
this.gotoAndStop(2);
}
}
s_btn.onReleaseOutside = s_btn.onRollOut = function(){
if(this._currentframe == 2){
this.gotoAndStop(1);
}
}
これでON/OFF処理はバッチリっすね！
簡単に書くつもりが長くなってしまいました…。
初心者の方がこれで分かればいいのですがねー。
補足ですが、onReleaseOutside したときに違和感を感じるかと思います。
onReleaseOutside と onRollOut の処理を一括しないで別々にした方が理想的な動きができます。
こんな感じで第16回は終了。つづく。
![Track: Don't Stop ([ELMIO remix]
Artist: i-dep
Album: CAFE aperitivo 4～Ever green～
Genre: Electronica/Dance](http://ecx.images-amazon.com/images/I/31KAKSKcEjL._SL160_.jpg)
