ヤッチマイナシコ

今回はダイナミックテキストにアルファ処理をほどこしてやろうと思います。
もちろん埋め込みフォントを利用するわけじゃーないですよ。
これは結構強引（だと思っている）ですし、Flash8以上のプレイヤーでしか使えません。

通常のダイナミックテキストやテキスト入力は
text._alpha = 30;
のようなに記述してもアルファ処理は無効化されます。

どうするのかと言いますと、テキスト自体にフィルタ処理をほどこします。
FLASH８のフィルタと言いますと、ドロップシャドウ、ぼかし、グローなどなどありますね。
それを使うとアルファが効くようになるという感じです。

このような感じになります。


フィルタ処理を掛けることだけなので単純だと思います。
ただ、、、これが正しいやり方かどうかは不明だと言う事・・・。
ここ独学術なので「あ！コレってこんなやり方でもできるんだ。へぇ」ぐらいでお願いします。


とりあえず、フィルタAS

function bFilter(p_tar){

 var p = new flash.filters.BlurFilter();

 var myFilters:Array = new Array(p);

 p.blurX = 0;

 p.blurY = 0;

 p.quality = 0;

 p_tar.filters = myFilters;

}

このような感じです。

bFilter(p_tar);
p_tar の部分にフィルタを掛けるMC名を入れるだけです。
MCの中にテキストがある場合でもMC自体にフィルタを掛けるだけでOKッ！
あとは、onEnterFrame;などでアルファを徐々に上げるなりするだけで完成です！！単純ですねヽ(´д`*)ﾉ


FLASH７とかで見られると何も出ないのが致命的なので、埋め込める量の文字数なら埋め込んだほうが良いかとは思いますけどね、、、まぁ時と場合って感じで(･ω･)
よく使う手法の紹介でした。


上記ASのちょっと単純版

function bFilter(p_tar){

 var p = new flash.filters.BlurFilter();

 p.blurX = 0;

 p.blurY = 0;

 p.quality = 0;

 p_tar.filters = new Array(p);

}

2行しか変わっとらんがなぁぁ(´A`) new Array削っただけ・・・。

ぼい〜ん、、、ってナンだよ！って言いたくなりますね（ﾟДﾟ）
言葉が見つからなかったんです・・・。

物体が移動して跳ね返りながら指定した位置に移動する処理なんです。
ぷるぷるっ！ってなる。

完成図

こーんな感じですよ！！


結構使い道あると思うんですよね。
たとえばー、テキストが一文字ずつ指定した場所によってくるとか。
ぽよぽよしてると目に付きやすそうだし。まぁ使い道は探せばいくらでもでてきそうですね。

さて今回の作り方ですが、まずは適当に丸のMCを作りインスタンス名は適当に。ここでは test_mc となっています。

ASは、先に減速処理を作ったほうがよさそうです。

test_mc.onEnterFrame = function(){

 x1 = (150 - this._x)*0.3;

 y1 = (150 - this._y)*0.3;

 this._x += x1;

 this._y += y1;

}

これが減速処理です。

重要なのはこの部分ですね。
x1 = (150 - this._x)*0.3;

例を使って説明します。
x1 = (移動したい位置 - 今の位置)*移動速度;
このように考えてもらうと良いと思います。

じゃー、現在地が10とします。

x1 = (150 - 10)*0.3;

計算しますと、x1 = 42とでます。
これを今の位置に足しこむと、52となります。
で、onEnterFrame処理なのでループ〜

x1 = (150 - 52)*0.3;
計算しますと、x1 = 29.4とでます。

これの繰り返しによって徐々に 0 へ近づくというわけです。
ここまでが減速処理です。


この減速処理に＋αでぽよ〜〜んって動きをつけます。

var x1 = 0;

var y1 = 0;

var x2 = 1;

var y2 = 1;

test_mc.onEnterFrame = function(){

 x1 = x2 * 0.3;

 y1 = y2 * 0.3;

 x2 = x1 + 150 - this._x;

 y2 = y1 + 150 - this._y;

 this._x += x1;

 this._y += y1;

}

ASはコレでOK!

じゃー例えで説明！！ここからとても長く、読みにくいです・・・。どうもすみません・・・。
※電卓で計算したのでFlashの小数点の区切りと多少違います。誤差がでます。

赤色で、上記に書いたASを表示しています。
緑色で、例を書き込んだASを表示しています。

まずはonEnterFrameの1周目です。
x1 = x2 * 0.3;
最初の時点では x2 は 1 です。よって
x1 = 0.3;

x2 = x1 + 150 - this._x;
this._x(移動したいMC) は 10 とします 。
x2 = 0.3 + 150 - 10;
x2 = 140.3;

this._x += x1;
10 += 0.3;
this._x = 10.3；

となるわけです。


そして2周目
x1 = x2 * 0.3;
x1 = 140.3 * 0.3;
x1 = 42.09;

x2 = x1 + 150 - this._x;
x2 = 42.09 + 150 - 10.3;
x2 = 181.79;

this._x += x1;
10.3 += 42.09;
this._x = 52.39;


3周目
x1 = x2 * 0.3;
x1 = 181.79 * 0.3;
x1 = 54.537;

x2 = x1 + 150 - this._x;
x2 = 54.537 + 150 - 52.39;
x2 = 152.147;

this._x += x1;
52.39 += 54.537;
this._x = 106.927;


4周目
x1 = x2 * 0.3;
x1 = 152.147 * 0.3;
x1 = 45.6561;

x2 = x1 + 150 - this._x;
x2 = 45.6561 + 150 - 106.927;
x2 = 88.7561;

this._x += x1;
106.927 += 45.6561;
this._x = 152.5831;

やっと通り過ぎました(；´Д｀)ﾊｧﾊｧ･･･


5周目
x1 = x2 * 0.3;
x1 = 88.7561 * 0.3;
x1 = 26.62683;

x2 = x1 + 150 - this._x;
x2 = 26.62683 + 150 - 152.5831;
x2 = 24.0437;

this._x += x1;
152.5831 += 26.62683;
this._x = 179.20993;

完全に通り過ぎたーー！


6周目
x1 = x2 * 0.3;
x1 = 24.0437 * 0.3;
x1 = 7.21311;

x2 = x1 + 150 - this._x;
x2 = 7.21311+ 150 - 179.20993;
x2 = -21.99682;

this._x += x1;
179.20993 += -21.99682;
this._x = 157.21311;

戻りはじめたーーーーーーーーー！


という感じで指定した位置を一度通り過ぎて戻っていくのです。
とても長くなってしまいました・・・。本当にもうしわけないです・・・。
Flashで同じような表示するのを用意したのですが、、、、やはり小数点の計算で誤差がでました・・・。
一応載せておきます。


通り過ぎ→戻り→通り過ぎ→戻り、、、を繰り返して徐々に指定した位置へ近づいていく処理でしたがどうでしょうか？
何かの役に立てばうれしゅうございます。


最終的に到達地点へ行ってonEnterFrameを削除する処理

var x1 = 0;

var y1 = 0;

var x2 = 1;

var y2 = 1;

test_mc.onEnterFrame = function(){

 x1 = x2 * 0.3;

 y1 = y2 * 0.3;

 x2 = x1 + 150 - this._x;

 y2 = y1 + 150 - this._y;

 this._x += x1;

 this._y += y1;

 if(Math.abs(x1) < 0.1){

  delete this.onEnterFrame;

  this._x = 150;

  this._y = 150;

 }

}

以上です〜。

ファイル(Var8,2004)

続きを表示

PHPとの連携にはコレでしょう！

sendAndLoad();

連携することで夢の幅がひろがりんぐですね！！

条件としてPHPが動く環境でなければならないということですかね。ということはApacheもいるっつーわけです。
Apache入れてPHP入れて・・・・(｀Д´)めんどくせーーーー！

そんな貴方に
ApacheやらPHPやらまとめてインストールできるスグレモノです。

リンク先XAMPP


とりあえず環境がそろったと言う事で本題へ。

まずはFlash側からです。
ソースはこんな感じ。

SV_PATH = "http://localhost/";

var data_lv = new LoadVars();

var res_lv = new LoadVars();

data_lv.test = “テストー”;

data_lv.sendAndLoad(SV_PATH + “test.php”, res_lv, “POST”);

res_lv.onLoad = function(success) {

 if(success){

  trace(this.res);

 }

}

data_lvというオブジェクトに送りたいデータを入れ込んで最後に送信するという感じです。
data_lv.test = “テストー”;
data_lv.tests = “テストー1″;
みたいにすればOKです。

sendAndLoadの部分は
data_lv.sendAndLoad(SV_PATH + “test.php”, res_lv, “POST”);
という感じです。

送るデータ.sendAndLoad(PHPパス, 戻り値, 送信の型);

自分なりの言葉で書いてますので専門的な人が見たら怒られそうですが、こんな感じで俺は理解してます。

ここで結構はまりそうなのが”PHPパス”だと思います。
ローカルで実験中であれば“http://localhost/呼び出すPHPファイル名”みたいにしないと駄目だということです。相対パスだと駄目だということです。


次、受け取ったときの処理です。

res_lv.onLoad = function(success) {

 if(success){

  trace(this.res);

}

この部分はPHPから送られてきたデータを解析する部分です。
res_lvにPHPからのデータが入ります。

trace(this.res);のres部分は変数名で、PHPからFLASHへデータを返すときに決めておきます。ちょっと説明しにくいですねえ・・・。
PHP側の処理を書いたら判りやすいのかもしれない！


ではPHP側の処理を・・・。
ファイル名はFlashが呼び出すファイル名にします。ここでは”test.php”ですね。

<?php

$test = $_POST['test'];

echo ‘&res=返す値’;

?>

これだけです。

$_POST['test'];この部分がFlashから送られたデータを取得する部分です。
Flashへの返し方ですが、echoもしくはprintを使います。
その際、&変数名=返す値という感じで返します。
複数の場合は、&変数名=返す値&変数名=返す値 という感じで&で繋いでいけばOKです。


ここでピン！ときました？？
&変数名= に &ｒｅｓ=ってしてますよね？

これ、FlashのTrace部分に････。
trace(this.res);

つまりＰＨＰから返ってくる変数名を最初から決めてたって事なんです。
ということは、このresの中には返す値ってのが入っていて、ＦｌａｓｈでパブリッシュすればＴｒａｃｅに返す値ってでるはず！！

どうでしょ？うまくいったでしょうか？

Ｔｒａｃｅが文字化けしているなら文字コードがおかしいのかもしれません。

System.useCodepage = true;

などで回避してください。

自分はこれを最初使ったときは全く意味不明で何に使うんだろうと思ってましたけど今は非常に使えるものだと思ってます。
難易度は少々高めですがやって損はないと思います。


最後にＦｌａｓｈのソースを単純化したものを記述

SV_PATH = "http://localhost/";

var data_lv = new LoadVars();

data_lv.test = “テストー”;

data_lv.sendAndLoad(SV_PATH + “test.php”, data_lv, “POST”);

data_lv.onLoad = function(success) {

 if(success){

  trace(this.res);

 }

}

続きを表示

題名のまんまなのだー(･ω･)ﾉやぁ久々。


こういうのをつくってみましょー！


まずは、円を書きましょう。サイズてけとーで。
そしてMC化しましょー！
MC名は適当！

基準点は左上じゃなく中心を選んでください。

別に中心じゃなくても動きますけどね！

さてさて、スクリプトです。
とりあえずザラッとかきます。

var dx = 100;

var dy = 100;

var rot = 0;

var rotCnt = 5;

var radian = 0;

var radius = 50;



onEnterFrame = function(){

 rot += rotCnt; 

 if(rot > 360){

  rot -= 360;

 }

 radian = rot * Math.PI/180;

 mX = Math.cos(radian) * radius;

 mY = Math.sin(radian) * radius;

 target_mc._x = mX + dx;

 target_mc._y = mY + dy;

}

出来上がりです。


どうみても某サイトさんのパクリですか？と言われそうなスクリプトですね(´A`)･･･。
参考にはさせていただいてますけどね！

「nashiko=パクリ」など呼ばれてそうなどと考えてしまったので、そのサイトさんの説明を見ていただいた方がよさそうな気がします。

Flashゲーム講座さん


どうみても同じですｗ

これ以外に判り易い書き方とかあるのかね･･･。まぁそんなの考えるぐらいなら次の何かを考えたほうが良いわな。


パクリingは嫌なので、どうでもいいおまけを付けてます！

ホントどうでもいい＋αです。

続きを表示

一度ボタンを押したら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回は終了。つづく。

久々の独学術ですが、今回は単純なラインの書き方を紹介します。

滅多に使う事は無いかもしれませんが必要になる事があるもんです。
ラインのみで絵画するのもなかなか楽しいもんですよ。

では、スクリプト！！

01: _root.onMouseDown = function () {

02: 	_root.moveTo(_xmouse, _ymouse);

03: 	onMouseMove = function(){

04: 		_root.lineStyle(1, 0×000000,100);

05: 		

06: 		_root.lineTo(_xmouse, _ymouse);

07: 	}

08: }

09:

10: _root.onMouseUp = function () {

11: 	delete onMouseMove;

12: }

これをマルマルコピペして行番号を消せばラインを書く事が出来ます。

01: _root.onMouseDown = function () {

ここでは画面上でマウスを押した時に処理を発生させるように命令してます。

02: _root.moveTo(_xmouse, _ymouse);

で、クリックした場所をラインを書き始める初期値に設定します。

03: 	onMouseMove = function(){

04: 		_root.lineStyle(1, 0×000000,100);

05: 		

06: 		_root.lineTo(_xmouse, _ymouse);

07: 	}

ここからマウスを動かした場合の処理を走らせます。

04:_root.lineStyle(1, 0x000000,100);

ここでラインのスタイルを決めます。太さとかカラーとかアルファとか。その他も設定できるのでヘルプなどを見てください。

06: _root.lineTo(_xmouse, _ymouse);

ここでラインが書かれます。moveToからの位置から今いるマウスの位置にラインが書かれるわけです。


数値を入力した場合で確認すると分かりやすいです。
moveTo(0,0);
lineTo(100,100);
これだと、始点を0,0、終点を100,100 というわけで、

＼

こんなラインが書かれるわけです。


最後に

10: _root.onMouseUp = function () {

11: 	delete onMouseMove;

12: }

マウスのクリックを離した場合にラインの書く処理を終了します。



色々試してみてください。




というかコレと似たやつがヘルプに載ってるやんっ！！

第14回のFlash講座は何処で使うか予測できないがダブルクリックを紹介します。

Flashでダブルクリックを実現するには getTimer() を使うのが手っ取りばやいのではと思ったので作ってみました。

動きはこのようになります。

ではASの説明〜

01: sTime = 0;

02: nderay = 200;

03: deray_txt.text = nderay;

04: test_btn.onPress = function(){

05: 	fTime = getTimer();

06: 	aTime = fTime - sTime;

07: 	nderay = parseInt(deray_txt.text);

08: 	deray_txt.text = nderay;

09: 	if(aTime < nderay){

10: 		test_txt.text = “DoubleClick”;

11: 		sTime = 0;

12: 	}else{

13: 		test_txt.text = “SingleClick”;

14: 		sTime = fTime;

15: 	}

16: }

まず適当なMCを作りインスタンス名は “test_btn” とします。ついでにテキスト入力ボックスを作り “deray_txt” と入れます。調節しながら確かめるのが楽ですからね。

スクリプトを見た感じ単純なのですが、ここから先の説明文がやたらと読みにくいので理解されるのに時間が掛かるかもしれません。
毎度見難くてすみません(’A`)

では、気を取り直して説明っっ！！

02: で nderay に初期ディレイタイムを入れます。この nderay がダブルクリックの間隔を決める事になります。

05: の fTime = getTimer(); は クリックしたときの時間を取ります。
getTimer() はFlashが表示されてから経過した時間をとります。

06: の aTime = fTime - sTime; は クリックした瞬間の時間から以前クリックした時間を引きます。

09: で if(aTime < nderay){ とし 処理を分岐させます。
aTime が nderay より小さい場合はダブルクリック、違ったらシングルクリック。
結果が else の場合は sTime = fTime とし、以前押された時間を格納する sTime に代入します。


数字を入れて説明しますと、

Flashが表示されてからの時間が5000msでクリックしたとします。
05: fTime = getTimer();
05: fTime = 5000;

06: aTime = fTime - sTime;
06: aTime = 5000 - 0;

このようになり

09: if(aTime < nderay){
09: if(5000 < 200){

aTime が　nderay より小さい場合というif文なので、結果は誤。
よって 12: }else{ に行き

14: sTime = fTime;
14: sTime = 5000;

これで sTime に 5000 が入りました。

そしてもう一度クリックしたとき 5100ms だったとします。早いダブルクリックですね…。

05: fTime = getTimer();
05: fTime = 5100;

06: aTime = fTime - sTime;
06: aTime = 5100 - 5000;

結果 aTime に 100 が入り、

09: if(aTime < nderay){
09: if(100 < 200){

このようになり真の処理が走ると言うことです。この処理が走ったら
11: sTime = 0 としないといけないので書き忘れに注意してください。

では、何かに使ってください。



*—– 続き —–*
簡易版

var sTime = 0;

deray = 200;

test_btn.onPress = function(){

 fTime = getTimer();

 if(fTime - sTime < deray){

  trace(”DC”);

 }else{

  trace(”SC”);

 }

 sTime = getTimer();

}

こんな感じでいかかでしょ。