FC2ブログ

動くイラストと猫漫画

鉄道・猫漫画・イラスト・音楽のブログ。15年目に突入。

Entries

連載「GIFアニメと私」第7章-長い列車アニメの作り方


「GIFアニメと私」第7章は、前回の列車が走るGIFアニメーションの作り方のつづきです。
前回は、下のようなアニメーションの作り方を説明しました。
観光列車ながらイラスト素材
モデル長良川鉄道観光列車「ながら」の動くイラスト
GIFアニメーションフリー素材
春のブログ素材

今回は下のように長い列車のGIFアニメーションの作り方を説明します。
36p3-sakurajima-ani500x92_2021022606523415f.gif
モデル観光列車36ぷらす3(JR九州)と桜島
動くイラストフリー素材GIFアニメーション

説明を簡単にするために横幅400ピクセルの場合で説明します。

【1】.背景画と走らせる列車のイラスト(透過素材)を用意します。
今回は下の3つで説明します。
背景 町
A 町のイラスト 400×70ピクセル

観光列車36ぷらす3
B 観光列車36ぷらす3のイラスト400×39ピクセル
前半分

観光列車36ぷらす3
C 観光列車36ぷらす3のイラスト400×39ピクセル
後ろ半分

【2】読み込み位置の指定
前回同様ホームページビルダーのウェブアニメクリエーターでの作り方で説明します。
AとBの画像をソフトによみこませるまでは前回と同じです。
しかし、読み込み位置は、下のように「右下」を選択します。
0226-1.png


【3】.順番入れ換え
前回と同じように列車の画像を右クリックして「アニメーション効果」→「左から右へ」選択して、その後列車コマの順番を入れ換えます。
下は入れ換え後の状態
0226-2.png

【4】.C画像挿入
最後のフレームの後ろの空白にカーソルを移し、右クリックして「画像の挿入」
0226-3.png

【5】.位置調整
Cの画像を挿入します
すると真ん中の位置に入るのでマウスでぎりぎりまで下げます
0226-4.png

【6】.位置決めについて
この位置がずれていると全体がつながらなかったり、背景がずれたりするのでここは慎重に1ドットも狂わないように位置決めします。

【7】.アニメーション追加
その後は一つ前の画像を選択して右クリック→アニメーション追加→「右から左」
ここでは普通通り「右から左」を選択します。秒数とコマ数は【3】のときと同じ。
0226-6.png

説明のためコマ数を少なくしていますが、実際は2秒8コマぐらいあったほうがアニメらしくなります。

0226-9.png

【8】.ダブり削除
すると下のようになりますが、だぶっているコマが二つあるので削除します
0226-7.png

【9】.アニメーション追加
最後のコマを選び、【7】と同じことをします
0226-8.png

【10】.同じようにダブりのコマを削除します
0226-10.png

【11】.消去の変更
全部のコマを選択して右クリック→「プロパティの一括変換」で消去方法を「フレームが表示される前の画像」にします

0226-11.png

0226-12.png

【12】.背景コマの処理
最初の背景コマを選んで、右クリック→プロパティ→消去方法を「そのまま残す」に変更します。
0226-13.png

【13】.完成
プレビューで動作確認して、ファイル→適当な名前をつけて保存

観光列車36ぷらす3

以上で列車GIFアニメーションの作り方講座を終わります。
「GIFアニメと私」は、ひとます、ここで一区切りですが、今後何か書きたいことが出て来たら続けます。

ここまでの第1章から第6章まではこの下のリンクを。

動くイラスト3000点以上を無料ダウンロードできるサイトはこちら

鉄道イラスト1500点以上の目次ページはこちら

鉄道コムへのリンク

関連記事

コメント

Re: 小太郎さん 

コメントありがとうございます。
拍手コメントもありがとうございます。
イラストはご自由にお使いください。
メールだと機種によっては動かない場合もありますが
その場合は静止画をお使いください。

Re: マイラさん 

私もゼロからイラストを書くのではなく
何かの写真を参考にして加工しています。
ペンタブレットは使っていないのですべてマウスだけで書いています。
読んでいただきありがとうございました。

無題 

毎回製作の過程を拝見してただ凄いなぁーとため息がでるばかりです。
私は動かなくてもいいから最初に用意するイラストだけでも描けたらいいなあと思うのですがそれすらできません~。
これからも大切に使わせて戴きますね。
  • posted by マイラ 
  • URL 
  • 2021.02/27 08:18分 
  • [Edit]

Re: 峠さん 

Yahoo!ブログ時代に説明図の作り方、鍛えられましたね~
ずいぶんいろいろな使い方説明記事を書きました。
Yahoo!ブログがなくなった今は、まったく無駄な記事になってしまいましたが。。。

一度説明を想像しながらスクリーンショットを何枚も保存して、文字を入れたり加工して、文章の間に入れていくので、けっこう手間がかかりますが、どなたかが見て役立ってくれたらいいな~と思ってます。

無題 

細やかに 図入り説明で。
この図入り説明に私は何度も助けられました 過去。
 素材制作は・・・・横着者のあんごうたれ なんで パス
 ありがたく ちいこさん作 これからも 使わせていただきますね

 今日は 雨なんですよ
 ゆっくりしています
  • posted by 峠 美千子 
  • URL 
  • 2021.02/26 13:05分 
  • [Edit]

Comment_form

管理者のみ表示。 | 非公開コメント投稿可能です。

Menu

最新記事一覧(サムネイル画像付き)

猫漫画「チビばあちゃんの冬用おうち」 Sep 25, 2022
撮り鉄の副産物 Sep 24, 2022
誕生!西九州新幹線かもめ-動画イラストフリー素材 Sep 23, 2022
日本が地震大国なことを実感する動画「世界の地震30年イッキ見」 Sep 21, 2022
フリー素材「観光特急ふたつ星4047動くイラスト」JR九州キハ40/47 Sep 20, 2022
猫漫画「台風どこ?」 Sep 19, 2022
猫漫画「カツラ猫の訪問」と台風接近フリー素材 Sep 17, 2022
LINEで送れる敬老祝い動画イラスト Sep 13, 2022

ブロとも申請フォーム

シンプルアーカイブ

シンプルアーカイブの使い方
2007~2012ヤフーブログ

プロフィール

ちいこ

Author:ちいこ
ホームページ「動くイラストフリー素材」で3200点以上の著作権フリー画像を配布しています。「動くイラスト」で検索して下さい。

FC2ブログカウンター

ランキング参加中

応援ありがとうございます

鉄道コム にほんブログ村 イラストブログ フリーイラストへ
にほんブログ村