ホームページビルダーでアニメを作ってみよう!
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 |
スターウォーズ風ロゴアニメをホームページビルダーで作ってみよう♪
2005.10.10 Monday 22:33
昨日作ったこちら↓
10-9
ホームページビルダーで簡単に作る方法を紹介します^^

まず用意するものがふたつあります。

一つ目は、背景となる画像

10-10

サイズはお好みで♪
ペイントなどで黒く塗りつぶしたところに、白く点を書けば完成です。

次に用意するのは「スターウォーズ・フォント」
これは配布先をSTAR WARS FAN 管理人:Organaさん10月8日付けブログで紹介されていますので、そちらを参考にDLして下さい。
DL後、フォントを使えるようにする方法はご自分で調べて下さいm__m

DLが面倒だヽ(´∀`)ノとおっしゃる方は、他のフォントでももちろんOK〜ですが、やはり出来ればスターウォーズの雰囲気を出したいとは思いませんか( ̄ー ̄)?(笑

さて、これで準備は完了。
次にホームページビルダーの「ツール」→「ウェブアニメーターを起動」します。

10-10

↓次に「アニメーション・ウィザード」を選択

10-10

↓「文字アニメーションを利用してアニメーションを作成」を選択
  「次へ」をクリック

10-10

↓背景を指定します。参照をクリックして用意した黒い背景を呼び出しましょう。
  「次へ」をクリック

10-10

↓ひゃ〜><難しい画面!!!!に見えるだけです(*´▽`)ノ

10-10

アニメにしたい文字を入力。
フォントを選択。
ここでダウンロードしたフォントの出番です!
私は「STAR JEDI」を選んでみました(ノ ̄▽ ̄)ノ
文字サイズ&色も選択。

すると左上にレビューが出てきますよね。
ちょっと中央からずれてるぞ(;´Д`A ``` という時は、ドラッグして位置を修正して下さい。
文字のサイズもドラッグ(というのかしら?==&爆)で変更可能です♪
10-10を押すと、プレビューで確認出来ます。

右側の効果の種類は「飛び去り」を選択。
効果の設定は特に変更することはありませんが、もっと滑らかなアニメにしたい時(重くなりますが)やスピードの変更等をしたい時はここで変更します。

(文字の装飾ボタンを押すと、色や縁取りや効果のより細かい設定が可能です)

そしてOKをクリックすると・・・

10-10

↑お疲れ様でした、完成ですヽ(^o^)丿
アニメーションのプレビューが出てきますよね。
上手く出来ていましたか^^

ワッ!そして完了を押すと↓の画面に変わります。

10-10

アニメってこういう風に作成されています。
ファイルをクリックして「名前を付けて保存」で全ての作業は終了です^^



オマケでこんなのも作ってみました^^

10-10

難しいようですが慣れると5〜10分で出来ちゃいます^^
さらに極めると、もっともっと色んな効果を付けてアニメが作れます。
ホームページビルダーをお持ちの方は、是非アニメに挑戦されてはいかがでしょうかv(゚∇^*)

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

余談ですが・・・

私がアニメを作る時は、上記の最後の画面「ウェブアニメター」を直接開き「ファイル」→「新規作成」で製作しております(笑
↓こんな風に

10-10


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


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


ホームページ・ビルダー10 学割パック ガイドブック付き
ホームページ・ビルダー10 学割パック ガイドブック付き
価格:¥6,920 (税込)
OFF:¥3,480 (33%)
↑学割いいなぁ¬¬(チラッ

ホームページビルダーを初めて購入する時は、バージョンアップ版を間違って購入されないようにご注意下さい^^

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

〜追記〜

完成したアニメを軽くする方法をご紹介^^

ワッ!←このマークが↑上記にありますよね。
(アニメが完成しファイルに保存するところ)そこでこちらの作業致します。

10-11

↑「ファイル」→「簡単最適化」を選択

すると・・・

10-11

ホラ♪もう軽くなりましたヽ(´∀`)ノ
完了をクリックすると、新しいアニメのコマ送り画像が表示され、タイトルには「Opt」とうい英字が出ています。

そうです、私の作ったアイコンのファイル名にこの「Opt」が付いているのはこうして簡単最適化(軽く)していたからなんです^^

最後に「ファイル」→名前を付けて保存でダイエット完了です(笑

ちなみに簡単最適化を繰り返すと僅かですがさらに減量出来ます。

ここで注意がひとつあります

簡単最適化をすると減量は来ますが、元の画像の不要部分を削って軽くするという作業が自動で行われる為、再度アニメを編集したい時に出来なくなってしまう可能性があります。
ですから、念のため簡単最適化をする前の基本アニメは保存しておく方が良いかと思います。



他にも画像枚数を減らすと減量は出来ますが、アニメの動きはカクカク致します(;´Д`A ```


ランキングに参加しています。応援お願い致します。 orz
人気ブログランキング FC2ブログランキング ブログランキング・にほんブログ村へ ブログランキング・ranQ

  10月13日まで第三回お絵描き祭り
「ファイナルファンタジー・アドベントチルドレン祭」開催中
開催後も絵の展示は致しておりますので是非ご覧下さい^^
GALLERY




| nana | アニメの作り方 | - | - | pookmark |
←back 1/1 pages next→




PlayStation 4同梱版
ドラゴンクエスト
ロト エディション
Amazon
楽天市場
オムニ7 セブンネット
e-STORE


Newニンテンドー2DS LL
ドラゴンクエスト
はぐれメタルエディション
Amazon
楽天市場
オムニ7 セブンネット
e-STORE

ドラゴンクエストXI ダブルパック 勇者のつるぎボックス
DQ11 ダブルパック
勇者のつるぎボックス
2017年7月29日発売
e-STORE
ローチケHMV icon


アイテムDLコード付
カップヌードル FF BOSS COLLECTION
価格:¥2,916(半額)
Amazon

Archive

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


【管理者】ナナ twitter HP
Horizon Zero Dawnプレイ中。
テキストデータポイント:世界の位置情報マップを作りました。(ご自由にお持ち帰りください)67か所の画像一覧もあります。
FF15はDLC配信時に復帰。
【今後プレイ予定のゲーム】
DQ11、FF12、FF7R
デス・ストランディング
ブログ内はネタバレしておりますのでご注意下さい。
Calendar
 123456
78910111213
14151617181920
21222324252627
28293031   
<< May 2017 >>
▼最近の記事▼
4/30 FF15の旅-97
  アフロソード入手

4/29 FF30周年記念コラボ
  東京タワーイベントレポ

4/28 HorizonZeroDawn50
  女王の一計など

4/27 FF15の旅-96
  タイムドクエスト第5弾

4/26 HorizonZeroDawn49
  サイレンスの正体

4/25 HorizonZeroDawn48
  ロストの秘密

4/24 HorizonZeroDawn47
  メインクエ ノラの深奥3

4/23 HorizonZeroDawn46
  メインクエ ノラの深奥2

4/22 HorizonZeroDawn45
  メインクエ ノラの深奥1

4/21 HorizonZeroDawn44
  サイドクエ反逆の賞金首

4/20 HorizonZeroDawn43
  メインクエ サンの死神

4/19 HorizonZeroDawn42
  メインクエ地中に眠る謎2

4/18 HorizonZeroDawn41
  メインクエ地中に眠る謎1

DQ11 初回特典について

これ以前の記事は
カレンダーよりご覧下さい

★Horizon Zero Dawn★
・テキストデータポイント世界
 場所一覧(画像あり)

・衣装一覧(画像あり)




Links
Category
Recent Comment
  • WOFF ワールドオブファイナルファンタジー体験版 フェンリル&イフリータを仲間にする方法
    ふじ (05/01)
  • FF15の旅-96 タイムドクエスト第5弾 フィッシング-キャッチ-
    ナナ (04/28)
  • FF15の旅-96 タイムドクエスト第5弾 フィッシング-キャッチ-
    りもーね (04/27)
  • DQ11 PS4・DS同梱版 予約開始!早期・初回特典、店舗別特典紹介
    ナナ (04/13)
  • DQ11 PS4・DS同梱版 予約開始!早期・初回特典、店舗別特典紹介
    りもーね (04/12)
  • DQ11 PS4・DS同梱版 予約開始!早期・初回特典、店舗別特典紹介
    ナナ (04/12)
  • DQ11 PS4・DS同梱版 予約開始!早期・初回特典、店舗別特典紹介
    りもーね (04/11)
  • スクエニカフェ秋葉原 FF15コラボ第4弾レポ
    ナナ (04/11)
  • スクエニカフェ秋葉原 FF15コラボ第4弾レポ
    りもーね (04/10)
  • FF15の旅-94 「エピソードグラディオラス」柱19本の場所、アタックモードに挑戦
    ナナ (03/30)
Admin
Profile
Search
Mobile
qrcode
無料ブログ作成サービス JUGEM