INKSCAPEとScratchでイラストを動かす方法

「プログラミング1年生」の20時限でスクラッチで動く人を作ろう◎人体【型紙】と関連しています。インクスケープで描いた「人」を動かしたいと思ったらスクラッチで簡単に動かせるので、プログラミングの超簡単な勉強にもなります◎

 

こうゆう事です。

 

◎「スクラッチ」で描いた物は「インクスケープ」で使える。
◎「インクスケープ」で描いた物は「スクラッチ」で使える。

お互いに保存形式「.svg」が使えるからです。（もちろんイラストレーターにも「.svg」はあります）

 

 

つまりインクスケープで描いてスクラッチに持って行って（アップロード）もいいですし、スクラッチの「コード」「コスチューム」「音」タブの中の「コスチューム」のお絵描き機能の所で描けばそのまま使えます。

ではインクスケープとスクラッチどちらで描くのが良いのか比べてみると、

 

インクスケープとスクラッチ比べてみました。

 

今回使う「人」はテンプレートを用意しているのでぜひ使ってみてください。

人体素材の入手方法は2つです。
1：こちらにある「human.svg」をダウンロードしてインクスケープで開く。
2：ENBARQMENTのスクラッチサイト（E-design）の『自由にポーズを作ろう◎人体テンプレート』ページから持ってくる

 

 

スクラッチのサイトからダウンロードする方法

2：”ENBARQMENTのスクラッチサイト（E-design）〜” の方法をもう少し詳しく書きます。

 

書き出す（ダウンロードする）

左上「コスチューム」タブを選択します。（１〜４どの番号（ポーズ）でも良いのですが）1つ選んで（Macの場合）右クリックし「書き出し」ます。

 

右下に表示されている所から「書き出す」と１〜４のポーズ全体と「コード（プログラム）」や「音」などここで説明すると長くなってしまうファイルまで付いて来るので今回はここでは無く。

ここから書き出した時の説明を知りたい方は「15時限：スクラッチを保存して中身を見てみる」を

 

「書き出し」たもの（ダウンロードしたもの）を

 

インクスケープで開く

インクスケープで開くとこんな感じです。

 

 

グループ解除

スクラッチで描いた時に「グループ化」してあるので「グループ解除」して

 

パーツ、パーツで好きに動かして服を着せたり髪を描いたりアレンジします。

 

関節の○印さえ合わせればそれなりにちゃんとした動きが表現出るのがこのテンプレートの良い所です◎

 

 

１つのポーズが出来たら保存します。

たくさんのポーズを作らなくて良いの？

ここでは1つでOKよ。続きはスクラッチでやった方が効率がいいの

 

 

加工した物をスクラッチに取り込む

スクラッチを開き右下から「スプライト（キャラクターの事）をアップロード」します。

 

先ほどインクスケープで保存したファイルを「開き」ます。

 

 

スクラッチのお絵かきツールの使い方

スクラッチのお絵描きツールの使い方は「プログラミング1年生」11時限、１２時限に詳しく描いています◎

インクスケープが使える方ならより簡単です

 

 

複製して動きを出す

１を「複製」して２を作り、そのポーズを変えます。

 

同じように２を「複製」して３を作り、２から連動するように次のポーズを作ります。（この直前にイラストの向き反転させました）

 

６ポーズ作りました。これを動かします。

 

 

 

プログラムで動かしてみる

動かすためのコードを組みます。上のタブを「コード」に切り替えるとこんな画面になるのでブロックをグッと持って来て組みます。

スクラッチは本来はプログラミングのためのツールだもんね

この通りにコードを組みます。（timeは任意です。０.２も好みです）右上の緑のハタを押すと動きます。（プログラムが実行されます）隣の赤丸を押すと停止します。

 

完成品はこちら「フライングスタート」です。緑のハタで動き出します。延々と同じ動作を繰り返しますので飽きたら赤い丸でストップします。１コマ１コマの動き、プログラムなどは詳しくは右上に出ている「中を見る」で見れます。

 

 

 

YouTubeで見る

以上の事はYouTube「スクラッチで人を描いて動かす」を見て頂くと理解が深まると思います。
こちら10分の中から25秒抜粋したものです↓

 

 

せっかくならスクラッチも覚えてお子さんに教えてあげてください◎