Scratch 3.0 ユーザーアイコンをGIFアニメーションにする方法

KIDSPRO

Scratch 3.0(スクラッチ3.0)のユーザーアイコンをGIFアニメーションに設定するやり方、SVGファイルをPNG形式に変換するやり方、GIFアニメーションを作成するやり方を説明します。
STEP.1
アイコン用の画像を作成

インターネットなどからライセンスフリーの画像をダウンロードして使用する方法もありますが、ここではScratch 3.0(スクラッチ3.0)のペイントエディターでアイコン用の画像を作ります。

アップロード出来る画像ファイルは、最大サイズが512KB、500 x 500ピクセルまでとなっていますので、インターネットなどから画像をダウンロードする場合は注意してください。

コスチュームタブをクリック(タップ)し、ペイントエディターで2つ以上の画像を作ってください。

ここでは、「dinosaur4-b」というコスチュームを複製(コピー)して、恐竜のしっぽを「形を変える」ツールで変更しました。また、アイコンにした時の背景になる正方形の枠を作り、最背面に移動しています。

アイコン用の画像の準備が出来たら、上記画面のようにサムネイルを右クリックして、「書き出し」というメニューを選択してください。

STEP.2
ダウンロードした画像のファイル形式をSVGからPNGに変換

Scratch 3.0(スクラッチ3.0)で、コスチュームを書き出すとSVGファイル形式でダウンロードされます。

このSVGファイルをPNG、JPG、GIFなどの形式に変換します。「SVG PNG 変換」などでWeb検索すると、ファイル形式をSVGからPNGなどに変換できるサイトが見つかると思います。

ここでは、下画面のSVG to PNGというサイトでファイルをPNG形式に変換しました。SVGファイルを本サイトにアップロードすると、数秒で下記画面のようにPNG形式に変換されます。変換後は、「全てダウンロード」ボタンを押してPNGファイルをパソコンにダウンロードしてください。

STEP.3
PNG形式に変換した複数画像を使ってGIFアニメーションを作成

上画面のSVG to PNGというサイトで変換したPNGファイルは、圧縮された状態でダウンロードされますので、圧縮ファイルを右クリックし「すべて展開」を選択してください。左図のようなフォルダーとPNGファイルが表示されます。

ここでは、2つのPNGファイルによりGIFアニメーションを作ります。GIFアニメーションを作る事が出来るサイトもあるので、「GIF アニメーション」などでWeb検索して、GIFアニメーションが作れるサイトを探してください。

ここでは、下画面のGIFアニメ作成というサイトでGIFアニメーションを作成しました。2つのPNGファイルをアップロードし、点滅間隔(2つのファイルが切り替わる時間間隔)、ループ設定などを設定し「GIFアニメーション」ボタンを押してください。

STEP.4
完成したGIFアニメーションをダウンロード

GIFアニメーションが完成したら、GIFファイルをパソコンにダウンロードしてください。

今回作成したGIFアニメーションは、恐竜のしっぽが上下に動きます。

 

 

 

STEP.5
GIFアニメーションをScratchのユーザーアイコンにアップロード

パソコンにダウンロードしたGIFアニメーションを、Scratchのユーザーアイコンとしてアップロードします。

Scratchにログインした後に、ユーザー名をクリック(タップ)し「プロフィール」を選択して下さい。プロフィール画面が表示されたら、画面左上の青色ネコのアイコンにマウスを移動させてください。「Change」という文字が表示されるので、それをクリック(タップ)してください。

STEP.6
ユーザーアイコンのGIFアニメーション設定完了

KIDSPRO

ユーザーアイコンの恐竜のしっぽが上下に動いています。
完成!