dnjiro’s 9VAe blog

誰でもアニメが作れる無料ソフト9VAeきゅうべえ開発者のブログ

Springin' Classroom (スプリンギン)の使い方:ひとコマ解説

Springin' Classroom の使い方を説明します。

ほかの解説動画はこちら

 

Springin' Classroom とは

  • Springin' (スプリンギン) は、しくみデザインが開発した、手描きイラストに物理演算を働かせて、動く絵本やゲームが作れるアプリです。言語をつかわないので子供でも簡単にできるプログラミング開発環境といってもよいです。Springin' Classroom は、Springin' を学校教育向けに修正したもので、コインのやりとりやコンテスト応募をなくし、授業で使える教材などが追加されています(要アクティベート)。

Springin' Classroom ダウンロード

契約して使う教育機関向けのソフトとのことですが、無料で試用できます。学習用はこちらがおすすめ

Classroom でない Springin' はこちら

 

絵を描いてレイアウト

絵を描くのは簡単です。描き終わるとパーツになります。ドラッグして画面にレイアウトします。

  1. Springin' Classroom を起動。「アクティベートせずに試用」でスタート
  2. 「+」で作成画面になります。
  3. 下の「i」ボタンが「ヘルプ」です。使い方説明が表示されます。画面説明やサンプルゲームの作り方まで動画でわかりやすいです。
  4. 「+」で絵を描く画面になります。
  5. まるい顔を描いてみましょう。
  6. 終了は、右下のチェックマーク。描いた図形が部品リストに入ります。
  7. もう一回「+」
  8. 「し」の形の線を描きましょう。
  9. チェックマークで終了
  10. 「し」をドラッグして、右側にいれます。タッチするとパレットが表示されます。
  11. 拡大ボタンをタッチ
  12. ドラッグして拡大します。2本指でさわって拡大、回転することもできます。

 

重力を設定して動かす

重力を設定すると、レイアウトした図形が下に落下します。ピン留めすると落下しなくなります。自由に回転する設定もあります。

  1. 顔をドラッグして入れます
  2. 何もないところをタッチすると重力設定ボタンが表示されます
  3. 重力設定ボタン
  4. 中央から下にドラッグすると下向きの重力が設定されます。
  5. チェックマークで完了
  6. 顔をタッチ。
  7. パレットから「自由回転」をタッチ。これで顔の向きが自由に動きます。
  8. 線をタッチ
  9. パレットから「ピン止め」をタッチ。「自由回転」が設定されていないので、線は動かなくなります。
  10. 「スタート」をタッチ。顔が下に落ちて転がります。重力が小さいと止まります。
  11. 「停止」ボタンで終了
  12. 重力をもっと下にのばすと、重力が強くなります。重力を強くすると顔が外に飛び出します。

 

ホッケーゲーム

タブレットだと、描いた図形を指ではじいて動かすことができます。形を変えるといろんな方向にはねかえります。

  1. 「+」で新規作成
  2. 「+」で絵を描きます。
  3. 三角、四角、まる、ホッケーのリンクを描きます。ホッケーリンクは上下にすきまをあけておきます。角をまるくしておいたほうがよいでしょう。
  4. 描いた図形をドラッグして画面に配置します。
  5. ホッケーリンクを選びます。
  6. 拡大ボタン
  7. ドラッグして拡大
  8. ホッケーリンクを選びます。
  9. ピン止めボタン
  10. 三角を選びます
  11. 自由回転
  12. 四角も選んで自由回転にします
  13. パレットは、端のボタンで消すことができます。
  14. スタートボタンで、ゲームスタート
  15. 指で、交互に、三角、四角を指ではじいて、ゴールにボールをいれたほうが勝ち

 

Springin' Classroom の魅力

  • 自分の描いた絵に簡単に動きがつけられるのが魅力です。
  • 物理演算があり、プログラム言語を使わずに、複雑な動きを作ることができます。9VAeは自分が描いた絵をキーフレーム補間で動きをつけますが、より複雑な動きが簡単に作れます。
  • 形によって接触したときの動き方がかわるので、どのような形をつくれば、どんな動きをするか、想像しながら自由に作れます。

 

内容:


解説動画の作り方

この記事のひとコマ解説GIFは、フリーソフト9VAeきゅうべえで作成しています。

9VAeきゅうべえのダウンロード


www.youtube.com

  • 9VAeきゅうべえで、キャプチャー画面に、矢印や説明を加え、ページに「ひとコマ」設定するだけで作れます。
  • Youtube動画より短く、キャプチャー画面の羅列より見やすいのが特長です。
  • FFmpeg を使って Youtube 動画にすることもできます。

 

画面キャプチャ方法

OS
画面キャプチャ方法
保存先
 Windows
クリップボード
(ペイントに貼り付けて保存)
 Mac
  • Shift + Command + 4 (ShiftキーはZの左、スペースでウィンドウ指定)
デスクトップ
 Android
  •  電源 + 音量Down
 adbコマンド (開発者向け)
  •  adb shell screencap -p /sdcard/screen.png
     adb pull /sdcard/screen.png
フォトアプリ>
ライブラリ>
Screenshots
 
iPhone / iPad
  •  ホームボタン + 電源ボタン
  • サイドボタン + 音量UP
写真>
アルバム>
スクリーンショット
 Linux Mint
  • Print Screen キー
クリップボード
ファイル
 Amazon Fire
  • 電源 + 音量Down 1秒長押し
  • USBケーブルでPCと接続し、
    設定>接続デバイス>USB>ファイル転送
ピクチャ >
スクリーンショット
 Chromebook
  • Shift + Ctrl + ウィンドウ一覧キー(上の中央のキー)
マイファイル >
ダウンロード

キャプチャ画像を転送する方法はこちら

キャプチャ画像を9VAeに読みこむ

f:id:dnjiro:20220119095713g:plain

  1. 画像入力ボタン「山」でキャプチャ画像を読み込む
  2. 画像の中心の「+」をクリック。メニューから「ステージの大きさにする」
  3. 画像の中心の「+」をクリック。メニューから「ページを画像に合わせる」

文字、矢印を入れる

f:id:dnjiro:20220119131719g:plain

  1. 文字入力ボタン「A」で数字を入力
  2. 角の■をドラッグでサイズ変更。
  3. 中心の「+」または枠線のドラッグで移動
  4. 線の種類ボタンをクリック。メニューから「→」で矢印に設定
  5. 折れ線ボタンをクリック
  6. 開始点
  7. 終了点
  8. 選択ボタンで入力終了
  9. 太さ設定ボタン。メニューから「太くする」で太くできます。
  10. 文字入力ボタン「A」で説明文章を入力
  11. 背景の色を設定
  12. 線の種類メニューの「ー」で枠線がつきます
  13. 太さ設定ボタン。メニューから「太くする」で太くできます。

文字の色、縁、影をつける

f:id:dnjiro:20220119140955g:plain

  1. 文字を選ぶ
  2. 文字タブ2をクリック
  3. 文字の色をクリック
  4. 赤に設定
  5. 文字と矢印をドラッグして選ぶ
  6. 図形タブ1をクリック
  7. 線の種類から「縁をつける」
  8. 線の種類から「影をつける」、線の種類から「広く」
  9. 線の色「赤」

ひとコマアニメーションにする

f:id:dnjiro:20220119154101g:plain

  1. ページ時間をクリック。メニューから「ひとコマ」を設定。これでアニメーションができます。
  2. プレイボタンで再生してみましょう。入力した順番に文字、矢印がでてきます。
  3. これで1ページ完成です。続きを作りたい場合は、ページの右側の「+」をクリックし「続きのページを作る」で、2ページ目が作成できます。

アニメGIF、動画出力

  • ファイルメニュー>アニメGIF出力」または「動画出力」で、好きなサイズのアニメGIF または MP4動画 が作成できます。
    Win / RaspberryPi / Linux版 でMP4動画を作るには FFmpeg が必要です
  • スマホの場合、端末内の「9VAe」フォルダの中に出力されます。フォトアプリで、「端末内の写真>9VAe」で見ることができます。
  • アニメGIFは、背景を透明にできます。音がいれられません。
  • MP4動画には音が入れられます。Youtubeに投稿できます。Youtubeに投稿する場合、1秒30コマ、高さ720 または 1080 で出力するとよいでしょう。

 

9VAeをつかえば素材動画が作れる 

      • 9VAeきゅうべえを使えば、オリジナルの素材動画が簡単に作れます。
      • Openclipart や  FreeSVG などフリーのSVGイラストをつかって動くキャラクタが作れます。
      • 動画編集ソフトで動画に合成できます。

OS

無料動画ソフト

9VAeで作れる素材

Windows

CapCut

AviUtl

MP4

連番PNG または MP4

Mac/iPhone/iPad

CapCut

iMovie

MP4 

MP4

Android

CapCut

PowerDirector

MP4

GIF または MP4

作り方

 

9VAeきゅうべえに関する質問