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)

AD

ブログをはじめる

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

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

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

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

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