ムービーでカンタンに分かる「うごうごブログの使い方」

「うごうごブログの使い方」テキスト解説

うごうごブログのアニメーションの仕組み

  • うごうごブログのアニメーションは、 背景の絵の上に動かす絵（これをアイテムと呼んでいます）を重ねて作ります。
    アイテムには、動きをつけることができ、つけた動きにしたがって、背景の上を動き回ります。
  • 基本動作は、直進と回転の2種類ですが、工夫次第で複雑な動きをさせることができます。
    画面外に移動したアイテムは、反対側から登場します。
    アイテムは、スタンプを押すかのように、好きなだけコピーして背景の上に置く事ができます。コピーはどれも同じ動きをします。
    背景は1枚で、スクロールはありません。アイテムは最大4枚の絵を描くことができ、それぞれ別の動きをつけられます。

    • 画面の名称

    解説図
    1. キャンバス : 絵を描いたり動きをつけたりする作業エリアです
    2. モード切替 : やりたいことを選択しましょう。いつでも自由に切り替えられます。
      背景 : 背景を描くモードです →ステップ1へ
      描画 : アイテムの絵を描くモードです　→ステップ2へ
      動き : アイテムに動きをつけるモードです　→ステップ3へ
      仕上 : 背景の上にアイテムを重ねて作品に仕上げるモードです　→ステップ4へ
    3. ツール : モードごとに内容が変わります

    ステップ1：まず、背景を描く

    解説図1
    1. 背景モードをクリックします
    2. ブラシツールをクリックします
    3. 好みの太さのブラシサイズをクリックします
    4. 好みのカラーをクリックします
    5. キャンバスに絵を描きます
    6. 消しゴムややり直しツールを使えば、修正することができます
    ヒント
    • 自信がなくても、 細かいことを気にせずに、一番太いブラシを使って大胆に背景を描いてみましょう。
      例えば画面を2分割、3分割するくらいの勢いで塗りつぶしてみましょう。意外に格好良くなります。
    上級ヒント
    • 半透明ツールを使うと 色の重なりも表現でき、 作品に深みがでてきます。
    • shift キーを押しながら絵をクリックすると、クリックした位置にある色を拾うことが出来ます。

    ステップ2：動かすアイテムを描く

    その1
    解説図2
    1. 描画モードを選択します
    2. アイテムは合計4つまで登録できます
    3. 作成/編集したい アイテムの「描画」ボタンをクリックします
    その2
    解説図3
    1. 背景の書き方を参考に、アイテムを描きましょう。描き方は同じです。
      アイテムの周囲の市松模様は透明な部分をあらわしています。
      描いた絵を透明にしたいときには、消しゴムを使いましょう。
      絵が何も描かれていないときには、人の形をしたマークが表示されていますが、絵を描き始めると消えます。
    2. アイテムができあがったたら 、「編集終了」ボタンをクリックします
    ヒント
    • アイテムのコピー機能を使うと、そのアイテムを使った別の アイテムを作れます。結構、便利です。
    上級ヒント
    • 半透明ツールを使うと 色の重なりも表現でき、 作品に深みがでてきます。
    • 消しゴムで半透明ツールを使うと、描いた絵が透けるようにできます。
    • shift キーを押しながら絵をクリックすると、クリックした位置にある色を拾うことが出来ます。

    ステップ3：アイテムに動きを付ける

    その1
    解説図4
    1. 動きモードを選択します
    2. 編集したいアイテムの「動き」ボタンをクリックします
    その2
    ここでは、アイテムの動きとして、直進と、回転移動を付けてみます。
    解説図5
    1. 動きをボタンを選ぶと、命令ツールと3つのアイテムがキャンバスに出ます
    2. 命令ツールの左の枠が変化前の絵です。今は無視してかまいません。
      命令ツールの右の枠が変化後の絵です。
    3. 右枠のアイテムをドラッグしてずらすと直進になります。
      ドラッグしたときに、うっすらと下に描かれている絵は、「変化前」の絵です。
      「変化前の絵からどれだけずらしたか」で、アイテムの移動方向や移動量が変わります。
      また、shiftキーを押しながらアイテムをドラッグすると、アイテムが回転します。
      変化後の絵が回転していると、アイテムは回転して動くようになります。
      アイテムを右の枠から大きく外に出すと、絵を外すことができます。
      はずすと、右枠が赤くなります。これは、アイテムが消える、という動きです。（あまりつかいません。）
      外した絵は、もう一度枠の中に入れると戻ります。
    4. 命令ツールの外にあるアイテムは動きの確認用です。
      確認用のアイテムは思い通りに動いていますか？
      動いていなければ、命令ツール右枠のアイテムのずらす量、回転させる量をいろいろ調整してみましょう。
    その3
    解説図6
    1. いらないアイテムや命令ツールは、キャンバスの外や画面外にドラッグ＆ドロップすると消えます。
      命令ツールやアイテムを追加したいときには、画面右からドラッグ&ドロップしてきましょう。
    2. 編集が終了したら、「編集終了」ボタンをクリックします。モードを選択してもかまいません。
    ヒント
    • 命令ツールの右の枠は、変化後の絵が変化前の絵から水平や垂直に移動するときには、枠にガイドラインが表示されます。
    • 面白い動きをしている作品を見つけたら、コメント欄をつかって、
      作者にどうやって作ったのか質問してみましょう。
    • みんなのテクニックがあつめられた、うごタグの "うごうごテクニック"と "てならい"も参考に！
    上級ヒント
    • もう一つ命令ツールを使って、[○→△] [△→○]のようにルールを作ってみましょう。
      2コマのアニメーションが出来上がります。
    • 実は、命令ツールはひとつにアイテムにひとつではありません。
      いくつかを組み合わせて複雑な動きを表現できます。いろいろ試してみましょう。

    ステップ4：絵を仕上げる

    その1
    解説図7
    1. 仕上げモードを選択します
    2. アイテムをキャンバス上にドラッグ＆ドロップして置きます
    3. アイテムの大きさは4段階に変えられます。拡大・縮小ツールで好みの大きさにしてからキャンバス上にドラッグ＆ドロップします
    4. スピードボタンを押して、アイテムをドラッグ＆ドロップすれば、動く速さを変えることができます
    5. プレビューボタンを押し続けることで、プレビューできます
    その2
    解説図8
    1. 完成したらタイトル・コメントなどを入力して「作品を投稿」ボタンをクリックします
    ヒント
    • Shiftキーを押しながら、アイテムをドラッグするとアイテムが回転します。アイテムの向きが変わると動き出す方向も変わります。
    上級ヒント
    • アイテムの大きさを特大にすると、背景と同じ大きさになります。背景が動いてる表現が出来ます。
    • アイテムのひとつを、前景として使ってみましょう。前景の後ろに隠れるようなアニメーションがつくれます。
    • ゆっくりしたアニメーションを作りたければ、ステップ3.動きを付けるでほんの少しだけずらしたり、ステップ4.仕上げるで、スピード1/10をえらぶとゆっくりしたアニメーションになります。
    • うごタグの”うごうごテクニック”の中には、あなたの知らないテクニックがあるかもよ！