ホームページビルダーでアニメを作ってみよう!
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


カップヌードル
FF ボスキャラパッケージ
Amazon


モンハンダブルクロス
Nintendo Switch
Ver. スペシャルパック
Amazon
楽天市場


Archive

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


【管理者】ナナ twitter HP
現在ウイッチャー3プレイ中
ダクソ3は無事にクリア!
【今後プレイ予定のゲーム】
DQ11、FF12TZA、FF7R
Death Stranding、MHW

FF15はDLC配信時に復帰。
ブログ内はネタバレしておりますのでご注意下さい。
Calendar
    123
45678910
11121314151617
18192021222324
252627282930 
<< June 2017 >>
▼最近の記事▼
6/27 FF15の旅-107
 エピソード プロンプト

6/26 FF15の旅-106
 レガリアTYPE-D配信開始

6/25 ウィッチャー3の旅-17
 ジュニアを探せ

6/24 ウィッチャー3の旅-16
 大きな賭け、剣と団子

6/23 ウィッチャー3の旅-15
 生死に関わる問題

6/22 ウィッチャー3の旅-14
 君に届け

6/21 ウィッチャー3の旅-13
 夢のノヴィグラド

6/20 FF15の旅-105
 タイムドクエスト第13弾

6/19 ウィッチャー3の旅-12
 再びクルックバック湿原へ

6/18 ウィッチャー3の旅-11
 レース:クロウバーチ

▼Horizon Zero Dawn▼
・テキストデータポイント世界(Text Datapoints-World)
位置マップ全箇所の画像

・衣装一覧画像 outfit
・感想・評価(ネタバレなし)
IGNスクショコンテスト




Links
Category
Recent Comment
  • FF15の旅-107 DLC「エピソード:プロンプト」 隠し要素、本編へ引き継ぐアイテム等
    ナナ (06/27)
  • FF15の旅-107 DLC「エピソード:プロンプト」 隠し要素、本編へ引き継ぐアイテム等
    りもーね (06/27)
  • FF15の旅-106 レガリアTYPE-D 配信開始
    ナナ (06/26)
  • FF15の旅-106 レガリアTYPE-D 配信開始
    りもーね (06/26)
  • ★Horizon Zero Dawn 「テキストデータポイント:世界」場所一覧 Text Datapoints - World
    ナナ (06/26)
  • ★Horizon Zero Dawn 「テキストデータポイント:世界」場所一覧 Text Datapoints - World
    サユウ (06/25)
  • FF15の旅-105 タイムドクエスト第13弾 第4回タイムアタック詳細
    ナナ (06/20)
  • FF15の旅-105 タイムドクエスト第13弾 第4回タイムアタック詳細
    りもーね (06/20)
  • FF15の旅-104 FF15×ハニトー天王寺コミュニティイベント開催決定 タイムドクエスト第12弾 第4回ハンティング詳細
    ナナ (06/14)
  • FF15の旅-104 FF15×ハニトー天王寺コミュニティイベント開催決定 タイムドクエスト第12弾 第4回ハンティング詳細
    りもーね (06/14)
Admin
Profile
Search
Mobile
qrcode
無料ブログ作成サービス JUGEM