社長のFlash(フラッシュ)学習帳

NowLoadingをActionScript3.0でプログラミング

Wed, 8 Jul 2009 22:33:47 +0900

知らない間に２ヶ月経っていました…。

このブログを読んでくださる方々に深くお詫び申し上げますm(＿＿*)m

今度は少しさぼっていました(^0^;)）

さて、前回のNowLoadingですが、ファイルが軽すぎて～％が表示されませんでしたね。

プレビューで観ると、きちんと表示されます。

ですので、このプログラムは覚えておいて損は無いと断言できます。

ユーザーに対して、不安を抱かせない事、そのユーザーをリピーターにする為にも、勉強しましょう！！

テキストフィールドをダイナミックテキストにする

上記を覚えておきましょう！！

「ダイナミックテキスト」ですから、「なんか動きそうなテキスト」という期待感を持たせます。

まず、テキスト入力用のレイヤーを追加して、テキストフィールドを作成します。

インスタンス名は「nowloading」にしてありますが、この名前は任意です。

そして例のごとく「アクションスクリプト用のレイヤー」を追加し、プログラミングしましょう。

1　addEventListener(Event.ENTER_FRAME, loadCheck);
2　stop();
3　function loadCheck(event:Event):void {
4　 var percent:int = Math.ceil(loaderInfo.bytesLoaded / loaderInfo.bytesTotal * 100);
5　 nowloading.text = percent + "%";
6　 if (percent >= 100) {
7　 removeEventListener(Event.ENTER_FRAME, loadCheck);
8　 gotoAndPlay(2);
9　 }
10　 }

上記１行目で、イベントリスナーだと解りますね。

１行目は「loadCheck」というイベントリスナー関数を呼び出すステートメントですね。

ちなみに「Event.ENTER_FRAME」は、1フレームごとに自動的に発生し続けるイベントです。

今回は深く考えず、セットで覚えておきましょう！

２行目の「stop();」は、１フレーム目で停止させておく為のステートメントです。

２フレーム目以降のファイルが呼び出されるまで、NowLoading画面で～％を表示させておく為です。

そして３行目以降で、イベントリスナー関数の「loadCheck」を定義しましょう。

３行目「function loadCheck(event:Event):void」

event:Eventで、「event引数」の型をを指定しますが、今回は「Event」です。

:voidというのは、この関数は値を戻さないという事らしいですが、後々一緒に勉強しましょう♪

４行目「var percent:int = Math.ceil(loaderInfo.bytesLoaded / loaderInfo.bytesTotal * 100);」

var 変数名:変数の型　＝　値;

これはパターンで覚えておきます。

intに代入される右辺が（※「=」は右辺を左辺に代入）、percentという変数名に代入されることになります。

右辺が長いですが、分析します。

「loaderInfo」はファイルのロード状況を管理するオブジェクト。

「bytesLoaded」はそのままで、「ロードされたバイト数」ですね。

「bytesTotal」は、「ムービーファイル」の総バイト数です。

なので、「ロードされたバイト数／総バイト数×１００」が、「percent」という変数に代入されることになります。（*は掛け算のようです。）

ちなみに「Math.ceil」は小数点以下を切り上げるメソッドとなります。

５行目は簡単ですね。

nowloading.text = percent + "%";

４行目で決まった変数「percent」という変数に文字の％を足したものを、右辺に代入。

インスタンス「nowloading」に、右辺が代入される訳です。

textプロパティは、テキストフィールドに文字・数字を表示する場合に使用します（今回は数字です）。

（「1％」から「99％」まで、ダイナミック・テキストで数字だけが変化しながら、表示されます。）

そして６行目以降です！

　 if (percent >= 100) {
　 removeEventListener(Event.ENTER_FRAME, loadCheck);
　 gotoAndPlay(2);

「if(percent) >= 100」は、変数percentが100以上（100％以上）になった場合についてです。

「removeEventListener(Event.ENTER_FRAME, loadCheck);」

removeEventListener()メソッド→「addEventListnerの逆」で、イベントリスナーを削除します。

そして「gotoAndPlay(2);」→２フレーム目へ移動

つまり、１００％以上になったら、定義された「loadCheck」イベントリスナー関数を削除して、２フレーム目へ進め。

というステイトメントになっているのです。

２フレーム目に、とっておきのムービーファイルが待っている訳ですね～。

このプログラムは覚えるまで、このままコピーペーストした方が良いかもしれませんね。

インスタンス名だけは、変更して使う事をお忘れなく(^▽^)/

次回は、写真を使った簡単なFlash作品を…予定しています！

お楽しみにぃ(｀▽´*)

NowLoadingからムービーへ移行！

Wed, 13 May 2009 23:51:26 +0900

約一ヶ月の間、更新が出来ませんでしたが、決してサボっていた訳ではございませんm(＿＿*)m

さて、本日は、Flashサイトでよく見る「NowLoading…」の仕掛けを行います！

Flashムービーが重い時に、このNowLoadingが出ると「フリーズじゃなく読み込んでいるのか！」という事が解ります。

訪問者の為にも、自サイトの為にも、結構大切な技ですね～(´▽｀*)

ただ下記のムービーは容量が軽いので、何％ローディングしているかを飛久馬くんが数えるシーンが、一瞬で終わるかもしれません。

すでに歩き始めていたら、一度更新してみてくださいm(＿＿*)m

それでも見えないかもしれませんが…。

次回にプログラムのご説明を行います！

飛久馬くんが、少し歩くようになりました！

Wed, 15 Apr 2009 15:08:44 +0900

今日は一旦、プログラムを休んで、飛久馬くんが歩く姿を見ましょう♪

描画は、AdobeIllustlatorを使用しています。

Flashで描画されても良いと思いますね。

一歩目と二歩めの、二つだけですね。

顔は基本バージョンを利用。

そして、手と足だけ苦労して作りました(^^;)

まだ、ちょっと動きがぎこちないですが…。

これに背景を追加して、その背景を横にスクロールさせることで、本当に歩いているようにして行きます。

それが出来たら、今度は途中で別の動きを入れたりしたいですね。

その辺りの動きを、アクションスクリプトにて行う予定ですので、ご期待下さい！

今日は、２つの絵を交互に入れ替えるだけですので、説明は無しで！

プログラムは使用していません。

どうでしょう…。

やっぱり楽しくなってきますね！

今後、どのような動きになっていくのか…。

勉強・勉強！(｀▽´*)

ボタンを押すとリンク先へジャンプする、ActionScript3.0の説明

Mon, 6 Apr 2009 23:26:40 +0900

前回からやや月日が経ちましたが、決してサボっていた訳でゎありませんm(＿＿*)m

さて、前回作ったActionScript（アクション・スクリプト）3.0のプログラムを確認しましょう！

pagejump1.addEventListener(MouseEvent.CLICK, gotoURL1);

まず、上記ですね♪

pagejump1というのは、「Webデザイン」と書いてあるボタンのインスタンス名です。

インスタンス名は「webdesignbutton」など、本人が解りやすい名前を付けて構いません！

前回の復習ですが、インスタンス名.addEventListener(イベント, リスナー関数);

と全く同じステートメント（命令文）ですね。

インスタンス名「pagejump1」に、MouseEvent.CLICKというイベントを追加して、gotoURL1という関数を指定しています。

あとは「gotoURL1」というリスナー関数を定義するだけですね。

function gotoURL1(event:MouseEvent):void {
var theURL1:URLRequest = new URLRequest("http://web.talk-to.co.jp/");
navigateToURL(theURL1);
}

関数定義には function を使います。

gotoURL1の後の()は引数を挿入します。

上記を説明しますと…。

var theURL1:URLRequest;

varキーワードの登場です。

var 変数名:変数の型;

上記の形で変数を使うことを、宣言しなければなりません。

つまりtheURL1が変数名となり、URLRequestというのが変数の型となる訳ですね。

var theURL1:URLRequest = new URLRequest("http://web.talk-to.co.jp/");

「=」が右辺を左辺に代入する、という意味です。

変数theURL1は、URLRequestという型を持っている。

URLRequestに、右辺を代入する事で、theURL1が決定する訳です。

newが、インスタンスを生成する演算子。

その後ろはコンストラクタという「オブジェクトを生成するためのメソッド」を指定します。

文章で書くと複雑すぎるので、同じようなプログラムを一緒に練習して、覚えて行きましょうね♪

決して、自分が覚えきれない…という事でゎありませんm(＿＿;)m

つまり、URLRequestオブジェクトは（"http://web.talk-to.co.jp/"）で、それを左辺に代入すれば良いだけですね。

theURL1が生成されて、 navigateToURL(theURL1); で、リンク先へジャンプする記述となります。

gotoURL1関数は、引数event:MouseEventによって、生成されたtheURL1へジャンプするというステイトメントを実行する。

となります。

「pagejump2」「pagejump3」についても全く同じプログラム内容ですね。

ちょっと長くなりすぎましたが、次回をお楽しみに＼(*^▽^*)／

ちなみに、下記の本を非常に参考にしています。

初心者の方は、これ一冊でかなり上達します。

おススメの本ですね。

ActionScript（アクション・スクリプト）3.0で、リンク先へジャンプ！

Tue, 10 Mar 2009 02:00:58 +0900

今日は、ちょっとしたFlashクリエイターになった気持ちになれますょ～(´▽｀*)

前回AdobeFlashで制作した、マウスオーバー時とマウスクリック時に形が変わるボタンを使って、リンク先へのジャンプをします！

前回のボタン作成ページはこちらから→クリック

では、リンク先の指定とジャンプを、ActionScript（アクション・スクリプト）3.0で制御します。

pagejump1.addEventListener(MouseEvent.CLICK, gotoURL1);

上記はpagejump1（ボタン作成時に命名）に対して、gotoURL1という関数を呼び出すステイトメントですね。

function gotoURL1(event:MouseEvent):void {
var theURL1:URLRequest = new URLRequest("http://web.talk-to.co.jp/");
navigateToURL(theURL1);
}

そして、gotoURL1にて、その関数を定義します。

navigateToURL(theURL1);

上記が、リンク先へ飛ぶ為のプログラムです。

3つのボタンを作っていますので、それぞれに同じプログラムを書きましょう♪

pagejump1.addEventListener(MouseEvent.CLICK, gotoURL1);
pagejump2.addEventListener(MouseEvent.CLICK, gotoURL2);
pagejump3.addEventListener(MouseEvent.CLICK, gotoURL3);
function gotoURL1(event:MouseEvent):void {
var theURL1:URLRequest = new URLRequest("http://web.talk-to.co.jp/");
navigateToURL(theURL1);
}
function gotoURL2(event:MouseEvent):void {
var theURL2:URLRequest = new URLRequest("http://server.talk-to.co.jp/");
navigateToURL(theURL2);
}
function gotoURL3(event:MouseEvent):void {
var theURL3:URLRequest = new URLRequest("http://talk-to.co.jp/");
navigateToURL(theURL3);
}

さて、これで確認をします！(｀▽´*)ドキドキ…。

どうでしょうか？

楽しめましたか？(^▽^*)

ちょっと、Flashらしくなってきましたね～♪

次回は、このプログラムを徹底解剖致します！

ボタンのマウスオーバー時や、クリック時の色・形の変化！

Tue, 10 Mar 2009 01:49:10 +0900

ちょっと時間が空きましたが、決してサボっていた訳でゎありませんm(＿＿*)m

前回までのActionScript（アクション・スクリプト）3.0を踏まえて（踏まえなくても良いですが…）、今度はサイトへのリンクボタンを作りました。

「マウス・オーバー」と「マウス・オン」をした時の形の変化は、適当に作っています。

形の変化、色の変化は、AdobeFlashで非常に簡単に出来ますので、遊んでみてください。

1.まず雛型ツールで、ボタンを作ります。
　（上に文字を書くときは、上からテキストツールで書きましょう）

2.ボタンを選択して、「シンボルに変化」→「ボタン」

3.名前を解りやすく付けておきましょう。
　（※ここでは、pagejump1とpagejump2とpagejump3としています）

4.ボタンをダブルクリックしましょう！

5.画面が変わり、レイヤーのタイムライン上に、「アップ」「オーバー」「ダウン」「ヒット」という表示が出ます。

6.「アップ」の部分の「フレーム」をコピーしましょう。

7.「オーバー」「ダウン」「ヒット」のフレームに、それぞれ「フレームのペースト」を行いましょう。

8.各フレームでの色や形の変更をします。

9.「オーバー（マウスが乗った）」時の、色の変更や、形の変更をしましょう。
　（ここでは、形状を適当に変化させています）

10.「ダウン（クリック）」時も、同じように変更。

11.「ヒット」は、ここでは無視しましょう。

そして、URLへリンクするのは、ActionScript（アクション・スクリプト）3.0で、制御しましょう♪

ActionScript（アクション・スクリプト）3.0で、制御プログラムはこちらから→クリック

怒り出す「とくま」君のActionScript3.0の説明

Wed, 11 Feb 2009 14:56:25 +0900

さて、社長のFlash学習帳ですが、やや間が開いてしまいましたm(＿＿*)m

しかし、勉強は怠っていません。

では、前回のActionScript（アクションスクリプト）3.0のご説明を致します！

talktokunikari.stop();

startButton.addEventListener(MouseEvent.CLICK, playMovie);

stopButton.addEventListener(MouseEvent.CLICK, stopMovie);

function playMovie(event:MouseEvent):void {
talktokunikari.play();
}

function stopMovie(event:MouseEvent):void {
talktokunikari.stop();
}

まずは、1行目のtalktokunikari.stop();

これは、swfファイルをストップさせておくステイトメントです。

つまり、このFlashには予め「とくま君が怒りだすswfファイル」を配置しているのですね～♪

そのswfファイルを「スタート」「ストップ」させるという、単純な構造のスクリプトになります。

stop()メソッドを利用して、インスタンス名talktokunikariというオブジェクトを一旦停止させておきます。

では、２行目のstartButton.addEventListener(MouseEvent.CLICK, playMovie);

「スタート」と書いてあるボタン画像制作し、「シンボルに変換」→「ボタン」としておきます。

インスタンス名に「startButton」と命名。

ここから、イベントリスナーの登場です。

addEventListener()メソッドを利用して、イベントリスナーをインスタンスに追加します。

インスタンス名.addEventListener(イベント, リスナー関数);

という式を覚えておきましょう！

つまり、インスタンス名startButtonに、MouseEvent.CLICKというイベントを追加して、playMovieという関数を指定しています。

そのインスタンス名に対して、あるイベントが行われると、リスナー関数が呼び出されるというステイトメントですね。

playMovieというリスナー関数は、後で設定します。

３行目のstopButton.addEventListener(MouseEvent.CLICK, stopMovie);も同じです。

（スタートボタンと同じように、ストップボタンを作り、「シンボルに変換」→「ボタン」。
インスタンス名をstopButtonと命名しておく。）

インスタンス名stopButtonに、MouseEvent.CLICKというイベントを追加して、stopMovieという関数を指定しています。

そして４行目
function playMovie(event:MouseEvent):void {
talktokunikari.play();
}

playMovie()関数を、ここで定義します。

ちなみに()内には、引数が入ります。

関数定義には　function　を使いましょう。

playMovie関数は、引数event:MouseEventによって、talktokunikari.play();というステートメントを実行する。

つまり、playMovieは、マウスイベントによって、とくま君が動き出すという意味です。

:voidは「この関数は値を戻さない」という意味になりますが、後々一緒に学習しましょう！

function stopMovie(event:MouseEvent):void {
talktokunikari.stop();
}
も全く同じ意味ですね。

これにより、２行目と３行目でのリスナー関数が定義されました。

startButton.addEventListener(MouseEvent.CLICK, playMovie);

インスタンス名startButtonに、MouseEvent.CLICKというイベントを追加して、playMovieという関数を指定しています。
↓
スタートボタンをクリックすると、playMovieという関数が呼び出される。

同様に、

stopButton.addEventListener(MouseEvent.CLICK, stopMovie);
↓
ストップボタンをクリックすると、stopMovieという関数が呼び出される。

という事になるんですね～。

最初は止まっているswfファイルが、スタートボタンをクリックすると動き出し、ストップボタンをクリックすると止まる。

使えるプログラムですね♪

怒り出す「とーくとぅ君」と、止まる「とーくとぅ君」をActionScript3.0で！

Wed, 28 Jan 2009 14:52:00 +0900

本日は、スタートボタンとストップボタンを使います。

勿論、Flash（フラッシュ）のActionScript(アクションスクリプト)3.0をプログラミングとして利用。

下記のFlashのスタートボタンを押してみると、顔だけが動きます(｀▽´*)

ストップボタンを押すと、止まります(´▽｀*)

これは非常に簡単。

最初に、２枚の絵を交互に動かすswfファイルの動画を作っておいた方が楽でしょう。
（勿論、２枚以上の絵だと、もっと面白いと思いますし、プログラムは同じになります。）

とーくとぅ君の顔のパターンをいくつか作ると、非常に楽しいだろうと思います。

パラパラ漫画の初歩ですね。

そのswfファイルを、スタートとストップさせる事で、簡単に下のFlashが出来上がります！

プログラムは下記です。

動画ファイルとボタンファイルをレイヤー1に、レイヤー2にスクリプトを書いてみましょう。

下記の例では、動画ファイルのインスタンス名をtalktokunikariにしています。

スタートボタンをstartButton、ストップボタンをstopButtonとしています。

名前はそれぞれ任意で付けてください。

talktokunikari.stop();

startButton.addEventListener(MouseEvent.CLICK, playMovie);

stopButton.addEventListener(MouseEvent.CLICK, stopMovie);

function playMovie(event:MouseEvent):void {
talktokunikari.play();
}

function stopMovie(event:MouseEvent):void {
talktokunikari.stop();
}

上記プログラムは、また次回にご説明いたします！＼(^▽^*)／

下のボタンを押して楽しんでくださいね♪

前回のActionScript3.0のプログラム説明！

Sat, 17 Jan 2009 14:50:00 +0900

前回、横に流れる「とーくとぅ」君の時に使用したActionScript(アクションスクリプト)3.0を復習してみましょう！

まずは、シンボル（今回はとーくとぅ君）のＸ座標を指定するプログラムです。

　talkto.x = 200;

これは非常に解りやすいですよね。

シンボル名.x = 200;

ここで大切なのが　「=」　の意味。

普通は「等しい」という意味で使いますが、プログラム言語では基本的に「右辺の値を左辺に代入する」という意味です。

そして　「.」　は、インスタンス名（上記シンボル名）とプロパティ（性質を表すデータ。ここではX座標というデータの意味）を区切る為に使われます。

つまり

　talkto.x = 200;

は、200pxをtalktoのＸ座標に代入する…「とーくとぅ君をＸ座標200pxの位置に置く」という命令文になります。

その一つ一つの命令文を「ステートメント」と呼びますので、覚えておきましょうｖ(^▽^*)

　talkto.scaleX = 2;

も意味は同じです。

scaleXというのが、横幅（X座標の幅）という意味の「プロパティ（性質を表すデータ）」となります。

よって、「2」を左辺に代入すると、

「とーくとぅ君の横幅のデータを２（つまり２倍）にする」というステートメントになります。

　talkto.x = 200;
　talkto.scaleX = 2;

と書いた場合は、「とーくとぅ君をＸ座標200pxの位置に置いて、横幅を２倍にする」ステートメントになります。

次は

　talkto.x = talkto.x + 5;（1フレーム目）
　gotoAndPlay(1);（2フレーム目）

です。

上の説明から、talkto.xは「とーくとぅ君のＸ座標の位置」となります。

「=」がは右辺を左辺に代入する意味です。

よって「とーくとぅ君がＸ座標を+5px動く」という事を「とーくとぅ君のＸ座標の位置」に代入します。

１フレーム目のステートメントが実行される度に、「とーくとぅ君が、Ｘ座標に5px動く」ことになります。

２フレーム目の「gotoAndPlay(1);」の（）内の数字は、フレーム名です。

この「gotoAndPlay(1);」というのは、「1フレーム目に戻って再生しなさい」というコマンドになります。

よって、「とーくとぅ君がいる位置が5px動くステートメント」が繰り返されて、画面から消えるまで横へ動き続ける事になるのです。

そこで

　talkto.x = talkto.x + 5;
　　if (talkto.x > 350) {
　　stop();
　}

太字の「if～」分を使ってみます。

「もしも～が～したら～になる」というプログラムですね。

　if(条件式){
　　　　　　　処理
　}

という形式です。

ここでの条件式は　talkto.x > 350　となっています。

「シンボルが350よりも大きいか」を調べる条件式ということです。

そして350より大きくなった時に、「処理」が行われます。

　stop();

ストップ、つまり「止まれ」という処理です。

「とーくとぅ君の位置がＸ座標に+5pxずつ移動して、350pxの位置より大きくなったら止まる」というプログラムになるんですね～。

stopの後ろの()も、意味は解りませんが…必要なので、覚えておきましょう！

解ったときに、このページに書き加えておきますm(＿＿*)m

でゎまた次回にお会いしましょー＼(*^▽^*)／

とーくとぅ君が横に滑るActionScript3.0－学習初日

Thu, 15 Jan 2009 14:39:00 +0900

学習初日という事で、非常に簡単なActionScript3.0を勉強しました。

ただ横にスライドするだけですが、これだけでもちょっと楽しいですね。

でゎ順番に並べていきます。

上から3番目4番目は動いています！

止まっていたら、アニメーションが終わったということですので、ページを更新してくださいm(＿＿*)m

では、最初から行きましょう！

１．まずは、AdobeFlashを起動。

　　新規ドキュメント→Flashファイル（AS3.0）を選択

２．何か適当な画像を開く

　　「ファイルを開く」→「ファイル名」。

３．ActionScript3.0によって制御可能なシンボルに変換しよう！

　　「ムービークリップ・シンボル」「ボタン・シンボル」「テキスト」がActionScript3.0によって制御可能。

　　よって、それ以外は画像を右クリック「シンボルに変換」

　　「ムービークリップ・シンボル」を選択して、名前を任意（半角英数字で）にする。
　　最初の一文字は数字は不可

　　更に画面左下のプロパティ（プロパティインスペクタ）を出して、同じ名前を書いておく（「入れ替え」ボタンは押す必要なし）。

４．ムービークリップ・インスタンスの座標の設定（対象の画像の位置を決める）

　　プログラムはタイムラインのキーフレーム内に記述します。

　　解りやすいようにレイヤーを追加して、レイヤー名を変えておきましょう（自分は「Action」）。
　　（レイヤー名をダブルクリックで、名前変更可能）

　　「ウィンドウ」メニューから「アクション」を選択すると、「アクション・フレーム」パネルが表示されます。

　　左下の「現在の選択」の箇所が、「Action:フレーム1」となっているか確認。

　　1行目にtalkto.x = 200;（上記で付けた「ムービークリップ・シンボル」名を、talktoと置き換えて下さい）

　　これは「talktoというムービークリップシンボル」のX座標の位置を決定しています。

　　下のフラッシュ（動きません）が、X座標200pxの位置にいる「とーくとぅ君」です。

　　では1行目をtalkto.scaleX = 2;に変更すると…。

　　これは、X座標方向にに長さを2倍という事。

　　下のフラッシュファイルが、横幅２倍の「とーくとぅ君」です。

　　次にとーくとぅ君を右へ動かします。

　　レイヤー1に「フレーム」を、Actionに「キーフレーム」を追加します。
　　2フレーム上で「右クリック」→「フレームを挿入」「キーフレームを挿入」で可能。

　　Actionの1フレーム目にtalkto.x = talkto.x + 5;
　　Actionの2フレーム目にgotoAndPlay(1);→this.gotoAndPlay(1);の略
　　（どちらも1行目に）

　　と書いてみると…。

　　とーくとぅ君が居ない場合は、ブラウザを更新してくださいm(＿＿*)m

　　今度は、途中で止まって貰います。

　　上記プログラムの1フレームを若干変えて

　　talkto.x = talkto.x + 5;
　　if (talkto.x > 350) {
stop();
　　}

　　とすると

　　「X座標の数値が350より大きくなったら、ストップする」というプログラムになります。

　　とーくとぅ君が既に止まっていましたら、ブラウザの更新をお願い致しますm(＿＿*)m

　　　　この簡単なプログラムの説明は、次回に行いますので宜しくお願いします。

　　ちなみに、「制御」→「ムービーのプレビュー」にて、作成中のプレビューが確認できます。

　　エラーがないか、チェックしましょう！