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



e-STORE専売!『FFXII ザ ゾディアック エイジ コレクターズエディション』
e-STORE専売 FF12
ザ ゾディアック エイジ
コレクターズエディション
3月13日予約開始
e-STORE


The Art of
Horizon Zero Dawn
Amazon


Horizon Zero Dawn Guide
Amazon


Horizon Zero Dawn
Amazon
楽天市場
Yahoo!ショッピング

プレイアーツ改 キングスレイブ ファイナルファンタジーXV ニックス・ウリック
プレイアーツ改
KGFFXV ニックス
Amazon

Archive

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


【管理者】ナナ twitter HP
Horizon Zero Dawnプレイ中。
モンハンでは双剣脳筋だった私ですが、ノーマルモードでクリア目指して頑張ってます!
3月22日のアップデートでX軸反転の設定が可能になりました!神対応に感謝!!
FF15はDLC配信時に復帰。
デス・ストランディングの発売が楽しみ。ノーマンを操作出来るなんて最高!(・∀・)
ブログ内はネタバレしておりますのでご注意下さい。
Calendar
   1234
567891011
12131415161718
19202122232425
262728293031 
<< March 2017 >>
▼最近の記事▼
3/26 HorizonZeroDawn22
  テキストデータ世界一覧

3/25 HorizonZeroDawn21
  薬となる花の写真

3/24 HorizonZeroDawn20
  「太陽の街」、エレンド撮影

3/23 HorizonZeroDawn19
  昆虫撮影、「富豪の受難」

3/22 HorizonZeroDawn18
  サイドクエ・娘の仇討

3/21 FF15の旅-91
  タイムドクエスト4弾詳細

3/20 HorizonZeroDawn17
  山賊コレクション

3/19 HorizonZeroDawn16
  サイドクエ・山積みの問題

3/18 HorizonZeroDawn15
  サンダージョー戦バグ

3/17 HorizonZeroDawn14
  紫コイルマラソン

3/16 HorizonZeroDawn13
  特殊改造アイテム箱中身

3/15 HorizonZeroDawn12
  機械炉SIGMA

3/14 FF15の旅-90
  タイムドクエスト3弾詳細

3/13 HorizonZeroDawn
  BRAVIAトークイベント

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

★Horizon Zero Dawn★
Text Datapoints-World
テキストデータポイント
世界の場所一覧(随時更新)



Amazon FFストア
FF15関連グッズ(楽天)


Links
Category
Recent Comment
  • スクエニカフェ秋葉原 FF15コラボ第4弾レポ
    りもーね (03/27)
  • FF15の旅-91 タイムドクエスト第4弾 ミドガルズオルム&ウトガルズオルム
    ナナ (03/23)
  • FF15の旅-91 タイムドクエスト第4弾 ミドガルズオルム&ウトガルズオルム
    Erica (03/23)
  • FF15の旅-91 タイムドクエスト第4弾 ミドガルズオルム&ウトガルズオルム
    ナナ (03/22)
  • FF15の旅-91 タイムドクエスト第4弾 ミドガルズオルム&ウトガルズオルム
    シンジです^^ (03/21)
  • FF15の旅-88 タイムドクエスト第2弾
    ナナ (03/14)
  • FF15の旅-88 タイムドクエスト第2弾
    Ely (03/14)
  • Horizon Zero Dawn-7 「腕試し」の報酬、「博打打ちの箱」の中身
    ナナ (03/09)
  • Horizon Zero Dawn-7 「腕試し」の報酬、「博打打ちの箱」の中身
    りゅうくん (03/09)
  • FF15の旅-86 カーテスの大皿は夜が幻想的
    ナナ (02/27)
Admin
Profile
Search
Mobile
qrcode
無料ブログ作成サービス JUGEM