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

今回つくるもの

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

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

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

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

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

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

アイコンに動きをつける

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

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

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

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

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

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

GIFアニメをつくる

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

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

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

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

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

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

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

動くアイコンを設定する

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

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

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

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