ホームページビルダーでアニメを作ってみよう!
2005.10.15 Saturday 23:50
先日作ったクラウド/フェンリルのアイコン↓はどのように作っているのですか?というご質問を頂いたので簡単ですが説明させて頂きます^^



「基本的なアニメの作り方■1〜4」ならホームページビルダー初心者でも大丈夫。
基本を覚えれば■1〜6でさらにより高い効果のアニメが作れます^^(↑のような効果(風を付けた)アニメ)
是非トライしてみて下さいね^^


***************

まずは基本的なアニメの作り方からお勉強です(`ω´*)ゞ

風のないこちら↓のバージョンを作ってみましょう♪



最初に用意するのはアニメにする画像。
アニメですから2枚以上用意して下さい^^
ここではクラウド/フェンリルに登場してもらいましょうヽ(´∀`)ノ

このアイコンは実は4枚の画像が使われています。

10-15

全く同じように見えますが4枚の画像は微妙に違います。

1を基本だとすると、2ではタイヤの位置は同じですがバイクのボディは1ドット(青線)、クラウドの体は2ドット(赤線)下がっています。

どのくらい下がっているのか、スピードを落として見てみましょうヽ(´∀`)ノ



↓そしてスピードアップするとこうなります。



ちなみに1と3、2と4は全く同じ位置です。
それなら2枚の画像でアニメにしたら?と思われるかもしれませんが、どうも上のアニメでは走っているという感じがしませんよね。

それで4枚の画像のタイヤに少しづつずらして光を入れました。(緑枠内)
そうするとこうなります。



上のアニメよりは走って見えますよね^^

おっと、前置きが長かったですね(笑)
フェンリルの解体をしてどうする(^_^;)
アニメの作り方本編はこれからです。


***************

では、ここからが本題「基本的なアニメの作り方」です。


■1 ホームページビルダー(HPB)を立ち上げ、
「ツール」→「ウェブアニメーターの起動」をします。
以前の「スターウォーズ風ロゴを作ってみよう」では、ここでアニメーションウィザードを選択しましたが、今回は新規作成を選びます。

10-15


■2 次にファイル」→「開く」で画像を呼び出します。
アニメにしたい画像を全て呼び出して下さい。

10-15

↓*画像を呼び出すには、属性の横の白い余白で右クリック→画像の挿入でも出来ます。

10-15


■3 画像の上でダブルクリックして下さい。
すると「フレームのプロパティ」が表示されます。

10-15

ここではスピードや位置の決定、透過などをします。

表示時間(スピード)の初期値は500ですが、これを好きな速さに変更します。
数字は少ないほど動きが速いです。

ちなみにクラウド/フェンリルは表示時間「80」です^^


背景を透過したい場合ははここで透過にチェックをして透過したい色を選択して下さい。
色の部分をクリックすると、画像に使われている色がカラーパレットで全て表示されます。

位置は同じサイズの画像でアニメを作る時には変更する必要はありません。
消去方法もそのままで結構です。
(位置や消去方法は、使いこなすとアニメを軽くするのに非常に有効です。
ですが説明となると非常に大変なのでここでは説明しませんが、アニメ作りに慣れてきたら是非トライして下さい^^/)

さて、プロパティが決定したら10-15をクリックしてみましょう^^

さて思った通りのアニメが出来ましたでしょうか〜(笑

■4 最後に「ファイル」→「名前を付けて保存」で完成です。

アニメを容量を軽くされたい時は、こちらの下の方を読んで下さい。
「簡単最適化」について書いてあります。



***************


では次は効果(風など)の付け方です。


■1 ホームページビルダーを立ち上げ、
「ツール」→「ウェブアニメーターの起動」→「アニメーションウィザード」
(上記■1参照)→「一枚の画像ファイルからアニメーション効果を使用してアニメーションを作成→「次へ」をクリックします。)

10-15


■2 「参照」で効果(風など)を付けたい画像を呼び出します。
*ここで選ぶ画像は、アニメではなく基本の静止画1枚を選択して下さい。
(アニメに直に効果は入れられません(泣)
選んだら「次へ」をクリック

10-15


■3 アニメーション効果の選択をします。
「ツールバー」→「風」
「時間」はそのままでもOKです。
「作成するフレーム数」は、風効果を付ける時は適当な数字を選んで下さい。
1枚の画像に風効果を入れるだけなら数字は少なくていいですが、
その風効果を入れた画像を数枚使ってさらに動くアニメに(フェンリルのように)されるのなら、ここでは多い目の数字を選びましょうヽ(´∀`)ノ

ちなみに私は6枚にしてみました。
4枚の画像でアニメにしたいので、4枚より少し多い目ということで(笑

*ここで選ぶ枚数によって、完成品の重さが決まります。
ただ効果を付けるだけなのに枚数を多くすると滑らかなアニメにはなりますが、恐ろしく重くなります((( ;゜Д゜)))

10-15

10-15をクリックしたら・・・ホラ!風が吹きましたね^^!

「OK」をクリック。
プレビューを確認してそれでOKなら「完了」をクリック。


■4 ただ1枚の画像に効果を入れたいだけなら、
ここで「ファイル」→「名前を付けて保存」で完成です^^/

(スピード変更&背景透過などをされたい方は、■3を参照にして 「フレームのプロパティ」を設定して下さい。)

10-15


*****


■5 フェンリルのように風効果を入れたアニメを作るには…■1〜4の作業を、アニメを作る為に必要な全ての画像(4枚分)に行います(;´Д`A ```

この画面から「ファイル」→「アニメーションウィザード」を呼び出し、■1〜4の作業をあと3回(他の画像)にして下さい_| ̄|〇;

↓下に赤枠が4個ありますよね。
アニメにする画像全てに風効果を入れました。

次に新しくアニメを作成する為のパレットをひとつ作ります。
「ファイル」→「新規作成」

新しくアニメを作成するパレットが表示されましたら、そこに下部の4枚の風効果の入ったそれぞれの画像の中で、一番見た目が綺麗に効果が付いている画像を上部の新しく作ったパレットに運びます。

下部それぞれの「運びたい画像の上で右クリック」→「コピー」
新しいパレット(上部)の白い場所で「右クリック」→「貼り付け」

これを各画像から1枚づつ、計4回します。

10-15


■6 フレームのプロパティ(スピード、透過など)を■3を参照に設定。
最後に10-15をクリックして確認。

「ファイル」→「名前を付けて保存」でやっと完成です。・゚・(ノД`)・゚・。



最後は駆け足になりましたがお分かりになりましたでしょうか^^

慣れるまでは大変ですが、慣れると多種多様な効果のアニメを作る事が出来るようになり非常に楽しいですよ♪

ホームページビルダーを是非活用して下さいヽ(^o^)丿


***************

ホームページ・ビルダー10 通常版 ガイドブック付き
ホームページ・ビルダー10 通常版 ガイドブック付き
価格:¥9,850 (税込)
OFF:¥4,951 (33%)


IBMホームページ・ビルダー10 FlashMaker3付き
IBMホームページ・ビルダー10 FlashMaker3付き
価格:¥14,612 (税込)
OFF:¥5,188 (26%)


***************

おまけ

風以外にもこんなに沢山の効果があります^^
10-15
(↑キャプ画面ですからスクロールは出来ませんよ(* ̄m ̄) ププ)

色々と効果も楽しんでみて下さい^^/


ランキングに参加しています。応援お願い致します。 orz
人気ブログランキング FC2ブログランキング ブログランキング・にほんブログ村へ ブログランキング・ranQ
| nana | アニメの作り方 | - | - | pookmark |
←back 1/2 pages next→



icon icon
DQXI ダブルパック
勇者のつるぎボックス
ローチケHMV icon
e-STORE


DQXI過ぎ去りし時を求めて
ロトゼタシアガイド
特典いのりのカード
定価1200円 転売に注意
Amazon
オムニ7・セブンネット
ローチケHMVicon
楽天ブックス


DQXI過ぎ去りし時を求めて
公式ガイドブック
ラッキーベスト等付き
8月29日発売
Amazon

Archive

アクセスランキング
ランキングを全て見る
ロリポップ!


【管理者】ナナ twitter HP
DQ11をプレイ中
現在:天空魔城
【今後プレイ予定のゲーム】
FF7R、MHW
Death Stranding
DQ11終了後FF12TZA復帰
FF15はDLC配信時に復帰
ブログ内はネタバレしておりますのでご注意下さい。
Calendar
  12345
6789101112
13141516171819
20212223242526
2728293031  
<< August 2017 >>
▼最近の記事▼
8/18 DQ11の旅
 ボス討伐 増殖成功

8/17 DQ11の旅
 モンスター生息地一覧

8/16 DQ11の旅-19
 古戦場〜伝説の鍛冶場

8/15 DQ11の旅-18
 「青春の1ページ」老人の正体

8/14 DQ11の旅-17
 黄金城〜聖地ラムダ【後】

8/13 DQ11の旅-16
 カジノクエ・ジャックポット

8/12 DQ11の旅-15
 ドゥルダ卿〜ソルティコ

8/11 DQ11の旅-14
 命の大樹〜最後の砦

8/10 DQ11の旅-13
 古代図書館〜聖地ラムダ

8/9 DQ11の旅-12
 ボウガンコンプ、クレイモラン

8/8 DQ11の旅-11
 はぐメタ しあわせのぼうし

8/7 DQ11の旅-10
 人魚クエ もうひとつの結末

8/6 DQ11の旅-9
 マジスロうちどめの理由





Links
Category
Recent Comment
  • ドラクエ11 モンスター図鑑コンプ 生息地別一覧(討伐モンスターリスト画像あり)
    ミキ (08/19)
  • ドラクエ11 モンスター図鑑コンプ 生息地別一覧(討伐モンスターリスト画像あり)
    ナナ (08/18)
  • ドラクエ11 モンスター図鑑コンプ 生息地別一覧(討伐モンスターリスト画像あり)
    りもーね (08/18)
  • DQ11の旅-17 黄金城〜聖地ラムダ【後】
    ナナ (08/17)
  • DQ11の旅-17 黄金城〜聖地ラムダ【後】
    りもーね (08/17)
  • DQ11の旅-17 黄金城〜聖地ラムダ【後】
    ナナ (08/16)
  • DQ11の旅-17 黄金城〜聖地ラムダ【後】
    りもーね (08/16)
  • DQ11の旅-17 黄金城〜聖地ラムダ【後】
    ナナ (08/15)
  • DQ11の旅-17 黄金城〜聖地ラムダ【後】
    りもーね (08/15)
  • FF12TZAの旅-7 戦艦,リヴァイアサン
    ナナ (07/30)
Admin
Profile
Search
Mobile
qrcode
無料ブログ作成サービス JUGEM