スクラッチで動くアイコンを作ろう

スクラッチの基礎

今回つくるもの

スクラッチでは、アイコンに静止画だけでなく、GIFアニメ(動くアイコン)を設定することができます。今回はアイコンをGIFアニメでつくる方法を説明します。アイコンだけでもおもしろい表現をつくることができるので、是非挑戦してみてください。

youtube解説

こちらの動画ではこの記事と同じ内容をさらにわかりやすく解説しています。是非、動画と記事両方を見てください。チャンネル登録もよろしくお願いします!

【しっかり解説】スクラッチで動くアイコンの作り方(GIFアイコン)

ベースのアイコンを作成する

アイコンを作成するのはスクラッチのコスチューム機能を使うのが便利です。新しいプロジェクトを立ち上げると、以下のようにネコのコスチュームが設定されていますが、これを自分のアイコンに描きかえていきます。

スクラッチで動くアイコンを作ろう


アイコンを描くときに大切なポイントが2つあります。以下の2点に

  1. 必ず正方形にする →正方形にしなければアイコンにした時に縦長や横長になってしまいます
  2. なるべく大きく描く →大きく書いた方が最終的なしあがりがキレイになります
スクラッチで動くアイコンを作ろう

以上2点に注意しながら、アイコンを作っていきます。キャラクターの作り方については、こちらに詳しく書いていますので参考にしてください。
スクラッチで自分のキャラクターを作ろう

アイコンに動きをつける

アイコンに動きをつけるのは、パラパラマンガの方式です。2枚以上の画像を連続して表示することで動いているように見せることができます。
まずは、さきほど作ったコスチューム(ベースのアイコン)を右クリックして、複製ボタンを押します

スクラッチで動くアイコンを作ろう

そうすると、ベースのアイコンと全く同じ画像ができるので、それを動かしていきます。今回はまゆげだけが上下に動くように設定します。以下のように矢印ツールを使って、まゆげを選択して、回転・移動させていきます。

スクラッチで動くアイコンを作ろう

作り終えたら、どのように動くかシミュレーションしましょう。
シミュレーションするにはコードのタブに移動して以下のようにコードを書きます。

スクラッチで動くアイコンを作ろう

そうして、緑の旗を押すと、アイコンが動くようになりました。

0.15秒待つの部分の数字をいろいろ変えてみると、動くスピードが変わります。いちばんいいスピードに設定するようにしましょう。そして、この数字は後で使うので覚えておいてください。

ここまでできたら最後、GIFアニメを作っていきます

GIFアニメをつくる

それではここからGIFアニメを作っていきます。
まず、ここまで多くの人はアイコンを「ベクター」で作っていたと思いますが、それをビットマップに変換します。左下の「ビットマップに変換」というボタンを押すと簡単に変換できます。これを2つのコスチュームそれぞれで行なってください。

スクラッチで動くアイコンを作ろう
スクラッチで動くアイコンを作ろう

次に、アイコンを書き出していきます。コスチュームを右クリックすると下図のように書き出しというボタンが出てきますのでこちらを押して、パソコンにコスチュームを書き出します。2つのコスチュームそれぞれ書き出します。

スクラッチで動くアイコンを作ろう

ここまで準備できたらGIFアニメを作っていきます。GIFアニメが作れる無料WEBサイトはたくさんありますので、そちらを活用します。「GIFアニメ 作成」で検索するといろいろ出てきますので調べてみてください。ここではこちらのWEBサイトを活用させていただきました。
アニメーションGIFを作ろう!

スクラッチで動くアイコンを作ろう

こちらのWEBサイトは使い方が簡単なうえに、画像の間隔やサイズが指定できますのでGIFアイコン作りにはとても便利です。

まずは画像ファイル1を選択画像ファイル2を選択のボタンを押して、先ほど書き出したファイルを指定します。

スクラッチで動くアイコンを作ろう

次に以下のように詳細の設定をしていきます。まずは持続時間ですが、こちらは各画像を表示する間隔です。さきほどスクラッチで0.15待つと指定したので、それと同じ秒数にします。こちらのWEBサイトの場合は1秒を100としているので0.15秒は15になります。持続時間一括設定のボタンを押すのを忘れないようにしてください。
次に、横縦幅の指定に移ります。スクラッチのアイコンは500×500が最大になりますので、任意のボタンを押してWとHにそれぞれ500と記入してください。できたらアニメーションGIF作成ボタンを押してください。以下のようにGIFアニメのプレビューが表示されます。

スクラッチで動くアイコンを作ろう

プレビューに問題がなければ、プレビュー画面を右クリックして、「名前を付けて画像を保存」を選択し、パソコンにGIFファイルを保存します。

スクラッチで動くアイコンを作ろう

動くアイコンを設定する

最後に、動くアイコンをプロフィールに設定していきます。
スクラッチのプロフィール画面に移動して、プロフィールアイコンにマウスをのせると、Changeという表示が出てきますので、クリックしてください。

スクラッチで動くアイコンを作ろう

ファイルの選択画面になりますので、先ほどパソコンに保存したGIFファイルを選択し、アップロードしてください。
このとき、もしサイズが大きすぎると以下のようにアラートが出てアップロードできません。

スクラッチで動くアイコンを作ろう

それを避けるために、さきほど横縦幅を500×500に指定しました。

アップロードが完了してもすぐに反映はされませんが、何度か画面をリロードすれば反映されます。
このように動くアイコンが反映されれば成功です。

コメント

  1. くりくさ より:

    わかりやすかったです!今度パソコンでやろうと思います!

  2. キノスケ より:

    僕も作りたいです‼

  3. 長野ひろと より:

    Scratchで、回って動くアイコンの作り方を教えて下さい

    • ビンゴおじさん より:

      リクエストありがとうございます。こんどやってみますね!

      • びんご より:

        時間があるときに、参考にしています!これからもがんばってください!応援しています(・∀・)。

        • ビンゴおじさん より:

          返信遅くなりました!ありがとうございます。とてもうれしいです