FLASHプチ講座ブログ

FLASHのプチ講座ブログ。ActionScript3.0勉強中。


テーマ:
今回はCOOLなローディングのサイトを紹介!と思ったんですが、
どうもあんまり見つからず、ちょっとしかありません...
見つけたらまた追加します。

いいのがあったら教えてください!!

-------------------------------------------------
ローディングのかわいいサイト
-------------------------------------------------
http://www.aozoragraphix.net/

はじめにロードするとき左上にでてきます。
FLASHでブログをつくろうとしているサイトで、デザインもカワイイ。


http://www.cocacola.co.jp/index3.html


コカコーラのサイト
World Coca-Cola tokyo ページに移動したときに表示される
ローディングがコカコーラのビンの中にコカコーラが満たされていく
というアニメーションになっていておもしろいです。

-------------------------------------------------
ローディングのかわったサイト
-------------------------------------------------
http://www.karlaweb.tk/

フラッシュのマークのあるほうにenterしてください。
ローディングパーセントが動いてる。
ちょっとコワめだけどかわってておもしろいです。



これはぜんぜん関係ありませんが、FLASHで作られた
カーレースゲーム。ここまでできるとすごい!!!!

http://80.237.207.52/funcup/index_fmx.php?fileLanguage=eng


というわけで。ローディング編終わりです。
次は多分、外部ファイル読み込みにする予定です。


**************************************************
↓私の講座サイトです。デザインリニュしました。
興味のある人はぜひ見に来てください♪
フラッシュ講座
AD
いいね!した人  |  コメント(0)  |  リブログ(0)

テーマ:
今回はローディングアニメーションを他のファイルにも
すぐ設置できるように、ひとつのムービークリップにまとめる方法を紹介します。

1.これまでに作った
  
  ○伸びるバーのムービークリップ
  ○前回つくったテキストボックス

  が、メインタイムラインにあると思うので、両方を選択して、

  シンボルに変換:ムービークリップを選択、名前をloading

として、ひとつのムービークリップにしてしまいます。

2.新しくできたムービークリップloadingをダブルクリックすると、
  伸びるバーとテキストボックスが、同じレイヤーに入ってしまっている
  と思うので、レイヤーを一つ増やして、別々に分けておいてください。

3.もうひとつスクリプト用に新しいレイヤーをつくり、
  ムービークリップloading内のフレームを2まで伸ばしてください。
  スクリプト用の2フレーム目に


bytesLoaded = _root.getBytesLoaded();
total = _root.getBytesTotal();
parsent = bytesLoaded/total*100;

if (bytesLoaded <= total) {
   _root.loading.num = Math.floor(parsent);
   _root.loading.loadingBar._width = parsent*1.5;
} else {
   _root.gotoAndPlay(2);
}

を書いてください。今までの説明からスクリプトの内容はわかると思います。
ちょっと違うのは、if以下のパートで、

読み込まれたサイズの数字が全サイズの数字より小さいときは
ローディングバーを伸ばして、数値を表示、

読み込まれたサイズの数字が全サイズの数字より大きいとき、
(つまり読み込み終了したとき)は
メインタイムラインの2フレーム目(ムービーや画像が入っているフレーム)
を再生開始。


というところです。

これで、ムービークリップloadingがひとまとまりになったので、

新規にファイルをつくるときに、
ムービークリップloadingを新規ファイルの1フレーム目にセットして、
2フレーム目から作り始めるだけで、
ローディングアニメーションが設置できます。

言葉だけだとなかなか説明が難しいので
サンプルファイルを作りました。

サンプルファイルを参照しつつ、このブログを読むと
いっそうわかりやすいと思います。

サンプルファイルDLページアドレス

http://isvalid.jp/flashSamples/index.html


次回はいろいろなローディングを紹介したいと思います。



▲ローディング06 - ローディング06 - テキストボックスに数字で%表示 へ戻る



**************************************************
↓私の講座サイトです。興味のある人はぜひ見に来てください♪
フラッシュ講座
AD
いいね!した人  |  コメント(4)  |  リブログ(0)

テーマ:
近日公開(多分今日)と言いつつ、
多分4日ほど経ってしまいました...

うれしいコメントもいただいたので調子にのって更新します。


今日はテキストフィールドに、
ファイルが読み込まれた数字を%であらわしたものを
表示してみましょう。


-------------------------------------------------------
前回つくったバーが伸びるムービークリップが入ったファイルをあけて、
メインタイムラインでレイヤーを一つ増やし、
その増やしたレイヤーを選択。
その1フレーム目にテキストボックスを下の要領でつくってください。


<テキストボックスの設定>

1.ツールバーに文字を書くテキストツールがありますよね。
  ( A って書いてあります)
  それで100と書いてみてください。



2.その100をクリックすると、プロパティパネルの左の
  プルダウンメニューにに
  
   ”静止テキスト”

  と書いてあると思います。
  
  静止テキストはあらじかじめ入力されている文字を
  表示するためのものなので、ここでは”変数”として使えるように
  
  ”ダイナミックテキスト”

  に変更します。



3.すると真ん中右あたりに

  変数:

  というのが現れると思うのでそこに変数の名前をいれてやります。
  (現れない場合は、プロパティパネルの右下の角に▼あるのでそれをクリックしてみてください)

  ではこのテキストボックスに名前をつけてやるために、

  変数:の隣ボックスに num  と入力してください。

4.テキストボックスにはじめに入力した 100 は消して、
  右下に出てる □ を右に引っ張るとボックスが大きくなるので
  100が入っていたくらいの大きさに戻しておいてください。
  

  これでテキストボックスの設定はできました。

  この num という名前のテキストボックスに値をいれてやると、
  入れた値がボックスに表示されるわけです。


<テキストボックスに値を入れる>

4.これで見えてきましたか?
  あとは、前回つくった、

  伸びるバーが入ったムービークリップの中で
  読み込んだ数字をあらわしていた変数 percent を、
  テキストボックス num にいれてやればよいわけです。


  
  伸びるバーが入ったムービークリップに書いたコードは

  onClipEvent(enterFrame){
   bytesTotal = _root.getBytesTotal();
   bytesLoaded = _root.getBytesLoaded();
   parcent = bytesLoaded / bytesTotal * 100;
   this._width = parcent;
  }


  でしたよね。
 
  この中で数字の%表示を表している変数は

  parcent = bytesLoaded / bytesTotal * 100;

の parcent でしたね。

  なのでこれをさっき作った num と名前をつけた
  テキストボックスに代入してやります。

  ということで

  parcent = bytesLoaded / bytesTotal * 100;
  の下に
  num = parcent;

と書きたいところなんですが、これでは動きません。
  なぜかというと、これでは 変数num がどこにあるかわからないのです。

  構成は、
 
                     メインタイムライン(_root)
                              | 
             |-----------------------------------| 
    伸びるバーが入った                       今回つくった 
    ムービークリップ                     テキストボックス num
 


 となっているので、
  伸びるバーが入ったムービークリップから見ると、
  テキストボックスnum は 

 ◎メインタイムラインの中のテキストボックスnumです

  と的確に教えてやらないとどこにあるのかわからないんです。

   これは _root.num と書きます。

   というわけで、

  parcent = bytesLoaded / bytesTotal * 100;
  num = parcent;

  じゃなくて

  parcent = bytesLoaded / bytesTotal * 100;
  _root.num = parcent;


  さらにこのparcent は小数点がついているので、
  Math.floorで切り捨てて、

  _root.num = Math.floor(parcent);

これでばっちりです!

  最終的に、
  

  onClipEvent(enterFrame){

   bytesTotal = _root.getBytesTotal();
   bytesLoaded = _root.getBytesLoaded();
   parcent = bytesLoaded / bytesTotal * 100;

   _root.num = Math.floor(parcent);
   
      this._width = parcent;

  }


となります。

5.では 前回同様

   ムービープレビュー
   表示→ストリーミングを表示

  で見てみてください。

  バーが伸びつつ数字が増加していきます!


あとはLoading... とか、テキストボックスの横に%とか付け足すと、

 ■■■■
 loadng... 34%

みたいな格好になりますよ!

これで一応できたんですが、せっかく作ったので他のファイルにも使いまわしできるように、
ちょっと構成をかえてみましょう!





▲ローディング05 - _widthでバーを伸ばす に戻る


▼ローディング07 - ローディングアニメーションを使いまわす方法 に進む



---------------------------------------------------
↓今お気に入りの愛用デジカメです。


CASIO EXILIM ZOOM EX-Z55BN デジタルカメラ

ポイントは、充電できて、バッテリーがすごーーく長持ちするところ。
1ヶ月前に買って、写真やらムービーやらとりまくってるんですが、
まだ充電切れません。旅行に最適!きれいにとれますよ。


**************************************************
↓私の講座サイトです。興味のある人はぜひ見に来てください♪
フラッシュ講座
AD
いいね!した人  |  コメント(0)  |  リブログ(0)

テーマ:
フラッシュでローディングアニメーションを作る。

タイトル一覧

---------------------------------------------------
ローディング01 - getBytesTotal()

フラッシュの全サイズを取得できるメソッド
getBytesTotal() の使い方

---------------------------------------------------
ローディング02 - getBytesLoaded()

フラッシュのロードされたサイズを取得できるメソッド
getBytesLoaded() の使い方

---------------------------------------------------
ローディング03 - パーセント表示

getBytesTotal() と getBytesLoaded() をつかって
 ロードされたサイズを%表示させる方法

---------------------------------------------------
ローディング04 - プロパティ_width

 ムービークリップの横幅をあやつれるプロパテイ
_width の使い方

---------------------------------------------------
ローディング05 - _widthでバーを伸ばす

 _widthを使って、%にあわせてバーを伸ばしてみる!

---------------------------------------------------
ローディング06 - テキストボックスに数字で%表示

 テキストボックスにローディングパーセンテージを
 表示させる方法

---------------------------------------------------
ローディング07 - ローディングアニメーションを使いまわす方法

 上の講座でローディングの作り方はわかったとおもうので、
 ここでは違うファイルでも使えるようにちょこっと変えてみます。


---------------------------------------------------
ローディング08 - COOLなローディングサイト

 かっこいい!かわいい!ローディングを使っている
 サイトを紹介!


**************************************************
↓私の講座サイトです。興味のある人はぜひ見に来てください♪
フラッシュ講座
いいね!した人  |  コメント(4)  |  リブログ(0)

テーマ:
フラッシュでローディングバーアニメーションをつくろう!
も、もうすぐ完成です!

前前回、下のスクリプトで

bytesTotal = _root.getBytesTotal();
bytesLoaded = _root.getBytesLoaded();
parcent = bytesLoaded / bytesTotal * 100;
Math.floor(percent);

フラッシュがどれだけダウンロードされたかを
パーセント表示することができましたよね。

今回は、↑のスクリプトにちょこっと加えて、
ロードされたパーセンテージにあわせて
ローディングバーが伸びていく、というパートをつくりましょう。

---------------------------------------------------

前回説明したムービークリップのプロパティ _width を使って、
ロードされたパーセンテージにあわせて、バーの横の長さをスクリプトで伸ばして行く方法をやってみます。



1.メインタイムライン、1フレーム目に、
 横5px、縦10pxくらいの四角を描いて、ムービークリップにします。



2.(1)のムービークリップをダブルクリック、さっき描いた四角を選択して、
  プロパティのX: Y: のところをX:0 Y:0 にしてください。
  (四角を0,0に合わせておかないとバーが変な風に伸びます。)



3.メインタイムラインにもどって、(1)のムービークリップをクリック、
  プロパティのところで(1)のムービークリップにloadingBarと名前をつけてやります。



4.アクションパネルで、
  (”▼アクション-ムービークリップ”となっているか確認)
  ムービークリップに下のようなスクリプトを書きます。

onClipEvent(enterFrame){

  bytesTotal = _root.getBytesTotal();
  bytesLoaded = _root.getBytesLoaded();
  parcent = bytesLoaded / bytesTotal * 100;

  this._width = parcent;
}




5.最後に2フレームに画像かなにかちょっとサイズのあるものをいれてやり、
  2フレーム目を選択して、フレームアクションに

  stop();

  と記述。
  (これでムービープレビューしたときにムービーが2フレーム目でストップします。)



6.ムービープレビューしてください。すると、2フレーム目にいれた画像かなにかが
  表示されていると思います。ここで前回同様、表示→ストリーミングを表示
  選択すると...



7.バーが右にすーと伸びて、その後に、
  2フレーム目に入れた画像か何かが表示されるはずです。

----------------------------------------------------------

ロードされたパーセンテージにあわせてローディングバーが伸びていく!!
ができました!
でもこれではさびしいので、次回仕上げをやりましょう。


▲ローディング04 - プロパティ_widthの説明 へ戻る
▼ローディング06 - テキストボックスに数字で%表示 へ進む


Flash MX 2004 ウェブデザイン・ガイド
著者: 伊佐 恵子
ActionScriptがわからない!プログラミングってなに?!
という人にもわかりやすいようにすごく丁寧に説明しています。
サイトの中での具体的なフラッシュの活用方法も載っていますよ!


**************************************************
↓私の講座サイトです。興味のある人はぜひ見に来てください♪
フラッシュ講座
いいね!した人  |  コメント(2)  |  リブログ(0)

テーマ:
前回はフラッシュがどれだけダウンロードされたかを
パーセント表示することができましたよね。

では、バーをどうやって伸ばすのか?
バーの伸ばし方はいくつか方法があるとおもうんですが、
今回は

ムービークリップのプロパティ_width 

を使って、ムービークリップの横の長さを
アクションスクリプトで伸ばして行く方法をやってみます。

ムービークリップのプロパティ_widthとは??

<まず、プロパティとは..>
ちょっと本質とはずれますが、わかりやすく言うと、
フラッシュに書いた絵とか、ムービークリップとかが持つ値のことを
言います。

例えば四角を描くと、その四角は縦の長さ、横の長さ、位置..
などの値をもっていますよね。
この、縦の長さ、横の長さ、位置をプロパティと呼びます。

<で、_widthとは>
ムービークリップの横幅をあらわすプロパティなのです。

---------------------------------------------------
では_widthをつかってみましょう。

1.適当に四角などを描いてみて、ムービークリップにしてください。

2.(1)のムービークリップをクリック、
  プロパティのところで(1)のムービークリップにbarと
名前をつけてやります。

3.ムービークリップが入っているレイヤーを
50フレーム目までのばしてください

4.スクリプト用にレイヤーをつくって、
  それぞれのフレームに、下のスクリプトを書いてみてください。
  
1フレーム目
bar._width=100;
trace(bar._width);


15フレーム目
bar._width=30;
trace(bar._width);


35フレーム目
bar._width=200;
trace(bar._width);


4.ムービープレビューしてみてください。
  
出力に

  100
  300
  200
  100
  300
  200
  100

出力に現れる数字と一緒に、
適当に描いた四角のムービークリップの横幅が
小さくなって大きくなって..
と変化してますよね。
  
これは上のスクリプトで、

1フレーム目にきたらbar._width=100;
でムービークリップbarの横幅100px、
  
10フレーム目にきたらbar._width=30;
でムービークリップbarの横幅30px..

と指定してやってるからです。

というわけで、_widthがムービークリップの横幅を
あらわすプロパティということがわかりましたよね。
(ちなみに_heightは縦幅です。)

では次回は_widthを使って、ローディングバーを伸ばしてみましょう!!


ローディング03-パーセント表示 に戻る
ローディング05-_widthでバーを伸ばす に進む

**************************************************
↓私の講座サイトです。興味のある人はぜひ見に来てください♪
フラッシュ講座
いいね!した人  |  コメント(0)  |  リブログ(0)

テーマ:
基本情報処理技術者試験ってしってますか?

SEの仕事をするための基本的なこと、が試験内容ということです。
次の試験日が10月なんですが、受けてみようかなと。

また進行状況書きます。

--------------------------------------------------

FLASHでローディングアニメーションをつくる、ですが、
今日はやっとローディングされたファイルサイズを%表示!

しつこいようですが、復習。
ローディングされたファイルサイズを%表示するには

ロードされた% = ロードされたファイルサイズ/全ファイルサイズ * 100

が計算できればOKですよね。

ロードされたファイルサイズ
getBytesLoaded
ローディングアニメーションをつくろう01参照

全ファイルサイズ
getBytesTotal
ローディングアニメーションをつくろう02参照

で取得できますよね。

ということは
ロードされた% = getBytesLoaded / getBytesTotal
です。

では早速フラッシュで試してみよう!
-------------------------------------------
1.前回同様、メインタイムライン(フラッシュでファイルを開けたときに出ているタイムライン)の2フレーム目に

bytesTotal = _root.getBytesTotal();

bytesLoaded = _root.getBytesLoaded();

percent = bytesLoaded / bytesTotal * 100;

trace(Math.floor(percent)+"%");

gotoAndPlay(1);


2.次に、3フレーム目に画像でも
絵(ある程度サイズの重いもの)でもいいので何か入れてください。

3.ムービープレビューした後に、
タスクバーの”表示”から”ストリーミングの表示”を選択
-------------------------------------------
すると、出力に
100%
100%
100% ←”ストリーミングの表示”を選択前
3%  ←”ストリーミングの表示”を選択後
4%
6%
9%
12%
14%
という風にロードされたファイルサイズを%表示することができました!

次回は、この数字とアニメーションを組み合わせて、
ローディングバーを作ってみましょう!!


ローディング02 - getBytesLoaded() へ戻る
ローディング04 - プロパティ_width へ進む

**************************************************
↓私の講座サイトです。興味のある人はぜひ見に来てください♪
フラッシュ講座
いいね!した人  |  コメント(0)  |  リブログ(0)

テーマ:
FLASHでローディングアニメーションをつくろう02-getBytesLoaded

ローディングされたファイルサイズを%表示するには
ロードされた% = ロードされたファイルサイズ/全ファイルサイズ * 100
が計算できればOKですよね。

というわけで前回は
getBytesTotal
フラッシュの全ファイルサイズを取得する方法を紹介しました。

今回は
getBytesLoaded
ローディングされたファイルサイズを取得する方法を紹介します。

では、やってみましょう。
前回同様、メインタイムライン(フラッシュでファイルを開けたときに出ているタイムライン)の2フレーム目に

loadedbytes =_root.getBytesLoaded();
trace(loadedbytes);
gotoAndPlay(1);


と書いてみてください。

次に、3フレーム目に画像でも絵(ある程度サイズの重いもの)でも
いいので何か入れてください。

で、ムービープレビューすると、

”出力”のところに
142805
142805
142805
みたいに数字がでてきますよね。

ムービープレビューだとあっという間に全ファイルサイズが読み込まれてしまうので、これではほんとにロードされた分だけ読まれているのかわかりません。
なのでムービープレビューした後に、タスクバーの”表示”から”ストリーミングの表示”を選択してみてください。出力に下のような結果が表示されると思います。

出力の結果-------------------------
ムービープレビュー直後
142805  ←全ファイルサイズが表示
142805  ←全ファイルサイズが表示
142805  ←全ファイルサイズが表示
ストリーミングの表示を選択後
131   ←ロードされたファイルサイズが表示(ファイル読み込み中)
551   ←ロードされたファイルサイズが表示(ファイル読み込み中)
788   ←ロードされたファイルサイズが表示(ファイル読み込み中)
1210
1648
2098
2545
.....
142805  ←全ファイルサイズが表示(ファイル読み込み終了)
142805  ←全ファイルサイズが表示(ファイル読み込み終了)

という結果になるはずです。

どうですか?getBytesLoadedでロードされたファイルサイズが取得できるというのがなんとなくわかりました??

では次回はgetBytesLoadedとgetBytesTotalをつかって
ロードされたファイルを%で表してみましょうね!!



ローディング01 - getBytesTotal() へ戻る
ローディング03 - パーセント表示 へ進む


---------------------------------------------------------------
パソコンゲームってやったことありますか??

HALF LIFE2 日本語版
すごいです。

何がすごいって、物体の動きが現実のものと同じように動くように計算されているので、例えばコンクリートの壁とかも壊せるんですが、ピックみたいなので壁をたたくと、コンクリートの破片の飛び具合、穴の開き方が現実でやったのとほんとに同じようにみえるんです。プレイしているとリアルすぎて、ちょっと酔うくらい。



HALF LIFE2 日本語版

カウンターストライクデルタフォース
好きな人にはたまらないと思います!!<br clear="all">

**************************************************
↓私の講座サイトです。興味のある人はぜひ見に来てください♪
フラッシュ講座
いいね!した人  |  コメント(0)  |  リブログ(0)

テーマ:


攻殻機動隊 STAND ALONE COMPLEX 08


見たことありますか?めちゃくちゃすごい、面白い、かっこいいです。

本、映画、ゲーム、漫画など、なんでも2回目はないんですが、
攻殻機動隊は2回みてもおもしろい!

ただ、話の内容がややこしいといえばややこしく、
コンピューター系苦手な人には難しいかも。

笑い男エピソードにははまります。
タチコマもかわいいー。
ぜひぜひ一度ご覧ください。
DVD高いけど、それだけの価値はありますよ。

ちなみにこれは08なのではじめから見るには01を購入してくださいね

-------------------------------------------------
では今日の講座。
FLASHでローディングアニメーションをつくろう01-getBytesTotal

ローディングていうのばよくあるあれです。

now loading...

これがFLASHでは簡単にできちゃいます。
仕組みは、簡単に言うと

ロードされた% = ロードされたファイルサイズ/全ファイルサイズ * 100

です。よね?
つまりflashの

○全ファイルサイズ
○ロードされ終えたファイルサイズ

がわかればよいわけです。

で、今日は全ファイルサイズを教えてくれる

getBytesTotal

をつかってみましょ。

メインタイムライン(フラッシュでファイルを開けたときに出ているタイムライン)の1フレーム目に

total = _root.getBytesTotal();
trace(total);


と書いてみてください。
で、ムービープレビューすると、

”出力”のところに
 223652 みたいに数字がでてきますよね。
それがムービープレビューしたファイルの全ファイルサイズです。

書き出されたswfのファイルサイズを比べてみてください。ほぼ一緒くらいです。



では次回はロードされたファイルサイズを取得する方法、です。



ローディング02 - getBytesLoaded() へ進む

**************************************************
↓私の講座サイトです。興味のある人はぜひ見に来てください♪
フラッシュ講座
いいね!した人  |  コメント(0)  |  リブログ(0)

AD

ブログをはじめる

たくさんの芸能人・有名人が
書いているAmebaブログを
無料で簡単にはじめることができます。

公式トップブロガーへ応募

多くの方にご紹介したいブログを
執筆する方を「公式トップブロガー」
として認定しております。

芸能人・有名人ブログを開設

Amebaブログでは、芸能人・有名人ブログを
ご希望される著名人の方/事務所様を
随時募集しております。