【1限目】ステージとボタンを準備しよう

投稿者:クマガイモトツグ
公開日  最終更新日2019/05/04

profile
TechKidzACADEMY代表 プログラミングインストラクター デザイナー 料理人
小中高校生向けプログラミング教育、教材の開発、企業研修ほか、WEB/アプリのデザイン・開発に従事している
著書に「小学校6年生までに必要なプログラミング的思考力が1冊でしっかり身につく本」「親子で学べる いちばんやさしいプログラミング おうちでスタートBOOK」Amazon1位、 「MA/マーケティングオートメーション 5分でできるMA導入と成功する8つのプロセス」Amazon1位がある

Scratch(スクラッチ)完成作品を確認しよう

今度はScratch(スクラッチ)で動く絵本の作品です。

Scratch(スクラッチ)には「ステージ」というものがあり、この「ステージ」、つまり背景を変更することで、絵本のような作品をつくることができます。

まずは完成品をみてみましょう。

右下の矢印をクリックするt次のステージへすすみます。
左下のボタンをクリックすると最初にもどります。

今回は簡単に2番目のステージにうつったときにネコをアニメーションさせています。

Scratch(スクラッチ)のステージを追加

まずはステージを3つ追加して、もともとあった背景が白いステージを削除しておきます。

今回は「Room1」「Room2」「Space city2」を追加して、下図のように「Room1」「Space city2」「Room2」という順で、上から並び替えました。
この順番が絵本のページの順番になりますので、まちがえないよう注意してください。

Scratch(スクラッチ)背景追加後の画面

Scratch(スクラッチ)のスプライトを追加

次にスプライトの追加です。
今回追加したのは「Arrow1」と「Button4」です。

Scratch(スクラッチ)スプライト追加後の画面

それぞれ下図のような位置に配置します。

「Button4」はそのままでは少し大きい感じがしたので、スプライト管理パネルのところで「大きさ」を100から50に変更しています。

Scratch(スクラッチ)ナビゲーションボタンの配置

Scratch(スクラッチ)のコスチュームを追加

もうひとつ、ネコが2番目のステージになったときに、飛んでいる姿に変わるので、ネコのスプライトにコスチュームを追加しておきます。

ネコのスプライトの「コスチューム」タブに移ってからコスチューム「Cat Flying-a」を追加します。

Scratch(スクラッチ)CatFlyingのコスチューム追加

「05動く絵本をつくろう」授業一覧
当スクールは出版、各種メディア・企業様に、学習コンテンツ等の提供を行なっております。 プログラミング教育コンテンツは対馬市の教育委員会に認定され対馬市の全小学校で採用されました。
全国書店にて発売中!
2022年夏開校 オンラインスクール
オンラインでプログラミングを本格的に学べます。
学習塾・学校関係者様
副業・起業されたい方
プログラミングは簡単
プログラミング教材で採用されたTechKidzACADMEY
当スクールは出版、各種メディア・企業様に、プログラミング教材・コンテンツ等の提供を行なっております。 プログラミング教育コンテンツは対馬市の教育委員会に認定され対馬市の全小学校で採用されました。
paiza株式会社
このサイトはスクラッチ(SCRATCH)を使ったプログラミング学習のためのサイトです。スクラッチの使い方からゲームの作り方まで様々な内容をお伝えします。

▲ PAGE TOP