Category Archives: Flash

弊社ではインターンを絶賛大募集しています!

 
154529369581
実践力が身に付く、超実践型インターン!! 
健康管理サービス『カラダノート』運営企業! 
★企画営業、★エンジニア、★デザイナー、★サービス運営担当 
株式会社プラスアール|短期バイト求人なら大学生アルバイト.com

 
Android担当エンジニアのインターンとして採用されれば、筆者である私とペアを組んで仕事することになります。 
その際には、就職活動のときや入社してからも即戦力として役立つ超実用的な9つのスキルを教えることを約束します! 
 
 

・JAVAを教えます

Android端末のアプリは、JAVAというプログラム言語で動作しています。 
JAVAはスマートフォンアプリ以外でも広く使われている言語で、アプリ開発を通じてJAVAを使いこなせるようになれば、幅広い業務に対応できます。 
関連記事) 
Activityにまたがってグローバルに変数などのオブジェクトを共有するには 
AndroidでWebViewアプリを作る[初心者向け] 
 
 

・PHPを教えます

・HTMLを教えます

・MYSQLを教えます

・Linuxを教えます

弊社はソーシャルアプリを多数リリース用しており、1つのサービスで1日の最大利用者数が5万に達したこともあります。 
PHP、HTML、MYSQLなどをマスターすれば、WEBサイトが開発できるようになり、アプリ開発だけでなく、WEBエンジニアとしての道も開けてきます。 
関連記事) 
Amimoto AMI 網元『から』別のサーバーにwordpressを移転するとき1 
AndroidアプリでUNIX timeを取得 
 
 

・FLASHを教えます

FLASHはWEBサイトやフィーチャーフォン(ガラケー)のサイトでよく利用されている技術です。 
ターゲットとする分野によっては今でも重要視され、簡単な動画編集などもできる専門性の高い技術です。 
関連記事) 
FlashLite1.1でアドベンチャーゲームをつくる 第1回 『タイプライター風に1文字ずつ文字を表示しよう シーン構成編』 
 
 

・PowerPointを教えます

企画や営業の際に必須になるのがPowerPointです。大学のレポート作りにも即役立つ、便利なツールです。 
PowerPointの使い方やちょっとしたコツを、実際に使われているドキュメントを通して教えます。 
 
 

・Excelを教えます

「正直言うとエクセルの使い方がよく解らない……」という人も多いと思います。 
実務では非常によく使われていますが、基本的な部分から教えていくので安心してください。 
また、関数やマクロといった、一歩進んだ使い方まで指導します。 
関連記事) 
Excelで書かれた「ふりがな付き文字列」をHTMLのタグに対応した文字列に自動で変換する 
 
 

・ギターを教えます!

実務とは全く関係ありませんが、ご希望とあらばギターを教えます! 
……あ、いらない? 
関連記事) 
『Golden Age vol.1』 開催決定!! 
 
 
 
自分の現状のスキルに全く自信がない、という方でも、まずはお気軽にオフィスに遊びに来てください! 温かくお迎えします! 
お待ちしていますm(_ _)m 

こんにちは、ラーメンは必ず汁一滴残さず食べきる主義の谷口です。おかげでメタボに悩まされる日々!

引き続きFlashLite1.1でADVゲームを作って行こうと思います。今回はクリック処理の実装です。

クリックしたときの動作は、市販のPCのADVゲームとかをよーく見てもらいたいのですが、

・テキストを表示している途中にクリックしたら、全文を一気に表示

・テキストが全文表示された状態でクリックしたら、次の文章へ

という2通りの動作があります。もちろん、ここでもその動作を両方とも実現できるようにしていきます。

前回までの投稿と同じファイルを使っていきますよー。

 

まずはボタンを設置するためのレイヤーを増やしましょう。

ここで注意するのが、buttonレイヤーの順番です。buttonレイヤーは、必ずasレイヤーのすぐ下に追加しましょう。厳密に書くと、全てのオブジェクトの中で一番上の順番に来るようなレイヤーの配置を心がけてください。これが下の方のレイヤーになっちゃうとクリックが無効になってしまうこともあるので、要注意です。

さて、レイヤーを追加したら、3フレーム目と4フレーム目にボタンシンボルを配置します。

シンボルの新規作成から、種類を「ボタン」にして、OKで編集画面へ。

ボタンシンボルの中身は非常にシンプルです。

オブジェクトを設置するのはアップの部分だけでいいです。そして、設置するオブジェクトも、

こんな感じで単色の矩形を書くだけでオッケーです。今回は240×240の矩形を原点0,0に紫色で書きました。

なぜこんなにアバウトでいいのかと言うと、結局このシンボルはアルファを0にして完全に見えないようにするからです。

 

さて、シンボル編集画面からroot階層に戻って、シンボルを設置していきましょう。

最初の画像のように、3フレーム目と4フレーム目にさっきのシンボルを使いまわして設置するのですが、

こんな感じですな。

このときに設定した大きさの領域がボタンになるので、シンボル自体の大きさを拡大縮小して、アルファ値を0にして透明にして見えないように設置します。

(ここでユーザビリティの問題が絡んできます。

ほとんどのフィーチャーフォン機種は数字キーと方向キーと決定キーがついていて、その中から決定キーを押したときにクリック判定が発生してこのボタンインスタンスが反応するわけですが、世の中のフィーチャーフォンの中には、困ったことに画面にタッチすることでクリック判定をとる機種があります。そういった機種でこのADVゲームのFLASHを再生した場合、ボタンインスタンに直接タッチしないとクリック判定がとれないのです。

なので、ここのシンボル設置は、「シンボルの大きさはどうするか」「シンボルの設置座標はどこにするか」という問題をしっかり考慮しないといけません。

例えば、「画面全体のどこでもいいのでタッチしたらクリックしたことにする」という仕様にした場合は、ここで240×240のインスタンスを0,0に貼りつけるべきだし、「メッセージウィンドウにタッチしたらクリックしたことにする」という仕様にした場合は、上記のような設置となるでしょう。

この問題は一概にどうするのが正解とは言えないので、各自のご判断にお任せします。)

 

ほんでー、設置したあとはボタンをクリックした状態でActionScriptを入力していきます。

3フレーム目のボタンインスタンスには、

[cc lang="ActionScript"]

//全文を一気に表示
on (press, keyPress “<Enter>”) {
//テキスト全文表示
tellTarget (“/mc_msg”) {
gotoAndPlay(“wait”);
}

gotoAndStop(“wait”);
}
on (press, keyPress “5″) {
//テキスト全文表示
tellTarget (“/mc_msg”) {
gotoAndPlay(“wait”);
}

gotoAndStop(“wait”);
}

[/cc]

と、入れる。

前回の投稿で、root階層の変数やラベルを参照するのは「/:」って記号を入れましょう、と書きました。

それとは逆に、root階層のActionScriptから、シンボルの中にある変数やラベルを参照する方法もあります。それがtellTarget関数です。tellTarget()でシンボルを指定すると、{}の中で変数やラベルを参照できるようになります。

(こう見ると、root階層のラベルに「wait」があって、mc_msgシンボルの中にも同じ「wait」って名前のラベルがあるのは気持ち悪いですね。一応エラーは出ませんが、気になる人は各自で変更してください。)

上記のソースは、決定キーか5キーを押すとテキストを全文表示するという動作です。

4フレーム目のボタンインスタンスにはこちらのソースを入れます。

[cc lang="ActionScript"]

//スクリプトを進める
on (press, keyPress “<Enter>”) {
gotoAndStop(“set”);
}
//スクリプトを進める
on (press, keyPress “5″) {
gotoAndStop(“set”);
}

[/cc]

こちらは、決定キーか5キーでsetフレームまで戻している処理です。

 

ここまで完成したら、再生してみましょう。Ctrl+Enterです。

再生して、2点確認しましょう。

・テキストを表示している途中にクリックしたら、全文を一気に表示するか

・テキストが全文表示された状態でクリックしたら、次の文章へいくか

この2つがうまく行っていれば、かなりゲームっぽくなると思います。あとは、script_data変数に他の文章を追加したりして遊んでみてください。

 

それでは次回は、立ち絵の表示と切り替えをしていきましょう。

やあ! 町田で一番好きなラーメン屋は「おやじ」の谷口です!
前回の投稿から、かなり期間が空きましたね。サボってましたスイマセン。自分でも前回の内容忘れちゃってました、ははは。

この記事は、前回の記事のファイルをそのまま引き継いで参考になさってください。今回は文字を実際に表示させます。

前回までの作業で、シーンの構成は完成しました。それでは、文字を表示するためのシンボルを作っていきましょう。
この「シンボル」とは、FLASHファイルに文字を表示するための「部品」のようなものだと思ってください。

では、ライブラリウィンドウで右クリックして、新規シンボルを作ります。

シンボルの名前はなんでもご自由にどうぞ。種類は「ムービークリップ」にしましょう。

 

作成したら自動的にシンボルを編集する画面になるので、中身を作っていきます。

最終的に目指すタイムラインはこんな感じです。

4つのフレームで構成されており、前回のroot階層と同じように、「それぞれのフレーム」でこのシンボルが動作する「それぞれのシーン」を管理します。

 

まずは、「msg」という名前のレイヤーに、オブジェクトを置いておきます。

テキストツールで、W:196、H:44のテキストボックスを設置してください。座標は0,0の原点に揃えてください。

そして、プロパティを画像の通りに編集しましょう。

気を付けるところとしては、形式は「ダイナミックテキスト」、フォントは「_等幅」、変数名は「msgField_txt」にするということです。

この通りにしないと、端末によってはFlashや文字が意図した通りに表示されない可能性があります。フィーチャーフォンのFlashは制限が多いので、こうして細かく設定せざるを得ないのです。

 

 

それでは次に、一番上の「la」と名前が付けられているレイヤー。これはラベルを設定するレイヤーです。

ラベルは、4フレーム中、1、2、4番目のフレームに付与していく必要があります。

ラベル名はプログラム中に使用するものなので、間違えないようにしてくださいね。

今回は、

1フレーム目:init

2フレーム目:run

4フレーム目:wait

と、それぞれのフレームにラベルを設定しました。

 

最後に、2番目の「as」と名前が付けられているレイヤーです。このレイヤーにActionScriptを入力していきます。

ActionScriptは4フレーム全てに入力していく必要があります。

順番に見ていきましょう。

【1フレーム目】

[cc lang="ActionScript"]

//最初はここで待機
if (/:msg_text eq “”) {
stop();
}
else {
//初期化
i_text = 0;
}

[/cc]

ハイ、ここさらっと書いていますが、そこそこ重要かも。

2行目のは、「/:msg_textっていう変数に何も入っていなければ」っていうif文ですが、このmsg_text変数、皆さん覚えてますか?

この変数は、前回の投稿の「○データのセット」という欄で出てきた変数です。

[cc lang="ActionScript"]

//テキスト格納
msg_text = script_now;

[/cc]

みたいな感じで。

で、問題は、この変数はroot階層で定義された変数で、いま編集しているムービークリップ内階層ではそのままで使用できないのです。

なので、「if (msg_text eq “”) {」と普通に書いたら変数を参照してくれません。

root階層の変数を参照するためには、変数名の前に「/:」という記号をつけなくてはいけません。

この知識は、ここに限らず他の場所でもガンガン出てくるので注意してください。

じゃあ、次。

【2フレーム目】

[cc lang="ActionScript"]

//テキストの文字を進める
i_text++;

//表示
msgField_txt = mbsubstring(/:msg_text, 1, i_text);

[/cc]

2フレーム目では文字のセットを行っています。

このフレームに入る度にi_textという変数が1ずつインクリメントされます。(初期化は1フレーム目で0にしています)

mbsubstring関数は、変数の一部を切り取る機能があります。

/:msg_textに格納された文字列を、i_textで指定した文字数分だけ切り取り、msgField_txtにセットしています。

msgField_txtは、ちょっと上の方に出てきましたね。msgレイヤーに設置したテキストボックスです。

このテキストボックスに、切り抜いた文字を表示させているわけです。

【3フレーム目】

[cc lang="ActionScript"]

if (i_text >= /:msg_len) {
//全ての文字を表示していたらループ抜ける
gotoAndStop(“wait”);
}
else {
//ループ
gotoAndPlay(“run”);
}
[/cc]

ここでは、文章を全て表示しおわったかどうかを判定しています。

文章が全て表示しおわっていれば4フレーム目へ、そうでなければ2フレーム目に戻る、というif文です。

ようは、文字をタイプライター風に表示する処理は、この2フレーム目と3フレーム目を行ったり来たりして実現しているのです。

【4フレーム目】

[cc lang="ActionScript"]

//全文表示
msgField_txt = mbsubstring(/:msg_text, 1, /:msg_len);
gotoAndStop(“/:wait”);
stop();
[/cc]

4フレーム目に来ている、ということは、全文表示しおわっているので、クリック待ちの状態にしなければなりません。なので、改めて文章を全部セットして、stop();しています。

そして2行目、gotoAndStopでフレーム移動していますね。そしてその移動先指定が、「/:wait」。そうです、上述した/:記号は、フレームラベルにも適応できるのです。root階層の、ラベル名waitのフレームに移動してstopするよ、という意味です。

 

さて、以上でシンボルの編集が終わりました。

最後に、そのシンボルをroot階層に貼りつけるだけです。

こんな風に……

新規レイヤーに貼りつけます。貼りつける座標は、適当でもいいんですが、せっかくなのでADVゲームを意識して、画面の下の方に設置しましょう。

ここらへんですかね。フィーチャーフォンでプレイすることを想定しているので、画面が240×240だとしたら、X:22、Y:190、W:196、H:44くらいがちょうどいいです。

そして、もう1つ忘れてはいけない作業があります。貼りつけた後、そのムービークリップのプロパティ欄のインスタンス名に「mc_msg」と入力してください。

 

よっしゃ! それじゃあ再生してみましょう。

Ctrl+Enterでプレビューを確認してみてください。前回の投稿分からうまく行っていれば、「こんにちは」とタイプライター風に表示されるはずです。

script_data変数の「こんにちは」の部分を他の文章に入れ替えてみると、その文章が表示されるはずです。

これで、ADVゲームの最も基本となる機能は完成しました!

次回は、クリックごとに文章が次々入れ替わるようにしましょう。

今回から数回に分けて、FlashLite1.1ADVゲームを作成する方法を解説します。
もし「こんなやり方もあるよ!」とか「こうやった方が効率いいよ!」などの情報がございましたら、どしどしコメントいただければと存じます。

さて、初回の記事は、タイプライター風に1文字ずつ文字を表示させる方法についてです。ADVゲームには欠かせない演出です。

ADVゲームは主に4つのシーンに分けられると思います。
①初期化
②データのセット
③テキスト表示中
④クリック待ち
の4つです。さっそく、ステージに4つ分フレームを挿入して、それぞれのフレームにラベルをつけましょう。

1フレーム目から順番に、「init」「set」「run」「wait」というラベルをつけました。
さて、ここからActionScriptをガシガシ打ち込んでいきますよ。

○初期化

例えば、
「こんにちは」
「僕の名前は『竜』だ。江戸城の診療所で医師をしている。」
「よろしく頼む。」
という3つのテキストをゲーム中に表示したいとします。
さらに、この3つの文章が
script_data = “こんにちは,僕の名前は『竜』だ。江戸城の診療所で医師をしている。,よろしく頼む。”;
という感じでscript_dataという変数に「,」区切りで格納されていると仮定してください。

これを順番に表示するためには、「,」の位置を判別して配列風にテキストを変数でもたないといけません。
FlashLite1.1には配列のArray()クラスが存在しないので、asレイヤーの1フレーム目に下記のように記述してそれを実現します。

[cc lang="ActionScript"]
//文章
script_data = “こんにちは,僕の名前は『竜』だ。江戸城の診療所で医師をしている。,よろしく頼む。”;

//分解
script_data = script_data add “,”;
script_data_length = length(script_data);
nowCnt = 0;
for (i = 1; i <= script_data_length; i++) {
nowTxt = substring(script_data, i, 1);
if (nowTxt eq “,”) {
cntNum++;
eval(“script_” add cntNum) = substring(script_data, (nowCnt+1), (i-1-nowCnt));
nowCnt = i;
}
}

//添え字管理
now_script_num = 0;
[/cc]

この「now_script_num」については後ほど出てくるので今は置いておいてください。
こう記述するとどうなるかというと、trace(script_1)とかで確かめればわかるんですけど、script_1、script_2、script_3という変数にそれぞれ”こんにちは”、”僕の名前は『竜』だ。江戸城の診療所で医師をしている。”、”よろしく頼む。”という文字列が格納されます。

 

○データのセット

それでは、初期化が終わったのでasレイヤーの2フレーム目の処理を書いていきましょう。
ここでは実際に画面に表示するためのデータをセットしています。
[cc lang="ActionScript"]
//スクリプトを進める
now_script_num++;
script_now = eval(“script_” add now_script_num);

//テキスト格納
msg_text = script_now;

//文字列の長さ
msg_len = mblength(msg_text);
//表示
tellTarget (“/mc_msg”) {
gotoAndPlay(“init”);
}

//シナリオ表示中へ
gotoAndStop(“run”);
[/cc]
このように、表示するテキスト、文字列の長さをセットしてrunフレームに進んでいるわけです。
さて、「mc_msg」というシンボルはまだ登場していませんが、これもいったん置いておきましょう。後で作ります。
先に3フレーム目、4フレーム目のasを入力します。

 

○テキスト表示中

3フレーム目と4フレーム目は簡単。特にasで処理するものはないので、単純にstopしているだけです。

[cc lang="ActionScript"]

//テキスト表示
stop();

[/cc]

○クリック待ち

[cc lang="ActionScript"]

//テキスト表示終わってボタン押し待ち中
stop();

[/cc]

 

さて、これでシーンの構成は終わりました。
次回は実際にメッセージを表示させましょう。