ビスケットでプログラミング入門

ビスケット(Viscuit)は、プログラミング学習用のツールです。

幼稚園児でも使えるとても簡単なもので、動く絵本のような動画（アニメーション）を簡単な操作で作ることができます。

参考：ことのは「ビスケット」

どのようなものか、簡単に説明します。
まずは、ビスケットのホームページを開いて「あそぶ」を選択して「やってみる」を選択します。適当なテーマか「じゆうにつくる」を選ぶと作成画面を開くことができます。

以下、とても簡単な例で使い方を説明します。

使い方（作成例）

画面に丸いボールを置いて、それを左に動かす動画（アニメーション）を作ります。

１．作成画面です

えんぴつアイコンを選んで絵を作る画面を開きます。

 

２．動かす絵を描きます　（例として、丸い形を描きます）

色や線の太さを選んで丸い形を描きます。タブレットなら操作はすべて指でできます。
描き終われば、まるアイコンを選んで最初の画面に戻ります。 

 

３．動かす絵とその動きを配置します

①画面の右側のめがねの形の部品を真ん中のエリアに指で動かします 

メガネの部品は絵の動きを決める部品です 

②画面の右側から 動かす絵（青い丸い形）を左上のエリアに指で動かします

左上のエリアは動画（アニメーション）のスクリーンです 

③画面の右側から 動かす絵（青い丸い形）を真ん中のエリアのメガネの左側に指で動かします 

メガネの左側は動作の〝前〟の状態を示します。

④動かす絵（青い丸い形）を真ん中のエリアのメガネの右側に指で動かします

メガネの右側は動作の〝後〟の状態を示します。

 

 ４．動きの調整をします

メガネの右側の絵の位置を調整します。 

メガネの右の丸(レンズ)の中の薄い絵(青い丸い形)は動作前の位置を示しています。 

濃い絵(青い丸い形)は動作後の位置を示しています。 

濃い絵が薄い絵の少し左に配置されているところが絵の動きの仕掛けになります。 

この時点で画面左上のエリアの絵(青い丸い形)は動いています。

 

５．作成した動画(アニメーション)を見る

画面右の四角アイコンを選択するとスクリーンだけの画面になります。 

作成した動画を自分の作品として見ることができる画面です。 

画面左上の×アイコンを選択すると元の画面に戻ります。

 

６．さらに動きを追加する

メガネの部品をもう一つ配置して、指さし部品を左側に置き、右側には絵(青い丸い形)を置きます。 

指さし部品は画面でタッチした時の動きを示すものです。その動作が絵(青い丸い形)ということなので、このメガネは、「画面をタッチしたところに青い絵を置きます」という動作の仕組みとなります。タッチして配置された絵(青い丸い形)ももう一つのメガネで設定した動作のルールによって最初の絵(青い丸い形)と同じ動きをします。

と、いうことで

このように動かす絵をいろいろ描いて、その動きのルールをメガネ部品でいろいろ追加していくことでよりたくさんの絵をいろいろな動かしかたで見せる動画(アニメーション)にしていくことができます。

言葉で書いてもよくわからないところもあると思います。

〝百軍は一見に如かず〟 実際に使ってみることをお勧めします。

ここで紹介したような使い方であれば、ユーザ登録のような手続きは不要です。