Scratch 3.0(スクラッチ3.0)& ロボットプログラミング教室

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

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

1 アイコン用の画像を作ります

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

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

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

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

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

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ファイルをパソコンにダウンロードしてください。

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

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

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

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

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

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

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

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

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

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

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

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

【関連する投稿ページ】

・PCNこどもプロコン2018で、KIDSPROスクール生2名が佳作受賞
・第1回北区こどもプログラミングコンテストで、KIDSPROスクール生が審査委員賞を受賞
・Scratch 3.0(スクラッチ3.0)正式版リリース/Scratch 3.0対応のゲーム集を公開
・「一緒に作るSCRATCH 3.0ゲームプログラミング実践編」をAMAZONで予約注文開始
・第6回デジタルえほんアワード授賞式のスナップショット
・第6回デジタルえほんアワードで、KIDSPROスクール生2人がグランプリ受賞と入選
・AmazonDOD売れ筋ランキング1位に!DVD「スクラッチゲームプログラミング入門編」
・「ゼロから始めるスクラッチゲームプログラミング入門編」をAmazonで予約注文開始
・荒川区の複合施設「ゆいの森あらかわ」でプログラミングワークショップ実施
・アンガーマネジメントキッズ講座開催のお知らせ
・Hanakoママ「保育園キッズの習いごと」特集に紹介
・javaやC言語などの学習コースがない理由
・プログラミングと学力(勉強)の関係性について
・TBSラジオ「THE FROGMAN SHOW AI共存ラジオ 好奇心家族」に出演
・アイディア(思考)を実現化させる
・授業の流れ(キッズ・プログラミング教室KIDSPRO)
・地域情報ウェブマガジン荒川102に取材して頂きました
・プログラミング教育の必要性について
・プログラミング教育による効果について

【キッズ・プログラミング教室KIDSPROについて】

【Scratch(スクラッチ)コースの紹介動画】

1162