【Scratchチュートリアル】スマホのアイコンをつくろう

【Scratchチュートリアル】スマホのアイコンをつくろう

アイコンを長押しするとプルプル震えて削除できるスマホの画面風のプログラムを作っていきます

ちょっと前に作ったので説明画面がScratch 2.0です

完成したプログラムはこちらです

アイコン 3つ Scratchで作成

素材の準備

ネコは使わないので削除します。右クリックして「削除」を選ぶか、メニューのはさみアイコンをクリックした後にネコをクリックします

【Scratchチュートリアル】スマホのアイコンをつくろう

「新しいスプライト」の「新しいスプライトをアップロード」を選び、「icon1.svg」と「delete1.svg」を読み込みます

【Scratchチュートリアル】スマホのアイコンをつくろう

名前を「アイコン」と「削除」に変更します

【Scratchチュートリアル】スマホのアイコンをつくろう

ステージの「背景」を選び、真っ黒に塗りつぶします

【Scratchチュートリアル】スマホのアイコンをつくろう

「アイコン」と「削除」スプライトを画面中央に移動します。「動き」カテゴリにある「x座標を()、y座標を()にする」に0を入力してからダブルクリックすれば中央に移動します

【Scratchチュートリアル】スマホのアイコンをつくろう

スクリプトを作ろう

「アイコン」スプライトを選びます

【Scratchチュートリアル】スマホのアイコンをつくろう

状態を管理する変数を2つ作ります

1つめはアイコンを長押ししているかを管理する「長押し中」。今回はアイコン1つしか作りませんが、2つ以上作る場合のことを考えて「このスプライトのみ」で作ります

【Scratchチュートリアル】スマホのアイコンをつくろう

2つめはアイコンがプルプル震えているかどうかを管理する「プルプル中」。こちらは「すべてのスプライト用」で作ります

【Scratchチュートリアル】スマホのアイコンをつくろう

「アイコン」スプライトの最初に初期化します。最初は長押し中でもプルプル中でもないので、どちらも0にします

【Scratchチュートリアル】スマホのアイコンをつくろう

長押し状態をチェックする処理を入れます。この段階では、マウスでアイコンを押すと変数「長押し中」を1に、押すのをやめると「長押し中」を0にします

【Scratchチュートリアル】スマホのアイコンをつくろう

長押しの時間を計測するため、長押しが開始したときにタイマーをリセットします

【Scratchチュートリアル】スマホのアイコンをつくろう

1秒以上長押ししていたら、アイコンがプルプル震える削除状態にします

【Scratchチュートリアル】スマホのアイコンをつくろう

「削除」スプライトにスクリプトを作成します

【Scratchチュートリアル】スマホのアイコンをつくろう

「アイコン」スプライトに、アイコンがプルプル震えるスクリプトを作成します

【Scratchチュートリアル】スマホのアイコンをつくろう

動作確認します。開発画面では長押しの判定ができないので、全画面モードにします

【Scratchチュートリアル】スマホのアイコンをつくろう

アイコンを1秒長押しすると、プルプル震えだします

【Scratchチュートリアル】スマホのアイコンをつくろう

「削除」スプライトも「アイコン」スプライトと同じように動かすようにします
「削除」スプライトにスクリプトを作成します

【Scratchチュートリアル】スマホのアイコンをつくろう

ステージをクリックするとプルプルが止まるようにします

【Scratchチュートリアル】スマホのアイコンをつくろう

削除しよう

「削除」スプライトをクリックするとアイコンを削除するようにします。まずは「削除」スプライトにスクリプトを作成します

【Scratchチュートリアル】スマホのアイコンをつくろう

「アイコン」スプライトにスクリプトを作成します。縮小して最後に非表示にします

【Scratchチュートリアル】スマホのアイコンをつくろう

開始時にサイズを戻して表示するように「アイコン」スプライトにスクリプトを追加します

【Scratchチュートリアル】スマホのアイコンをつくろう

プルプル震えている間は長押しができないようにします

【Scratchチュートリアル】スマホのアイコンをつくろう

削除できるようになりました

【Scratchチュートリアル】スマホのアイコンをつくろう

削除ボタンがアイコンの後ろに表示する場合は・・・

【Scratchチュートリアル】スマホのアイコンをつくろう

「前に出す」ブロックをダブルクリックしてアイコンの前に移動させてください

【Scratchチュートリアル】スマホのアイコンをつくろう

これで完成です!

こちらはアイコンを3つにしたバージョンです

【Scratchチュートリアル】スマホのアイコンをつくろう

アイコン 3つ Scratchで作成

タイトルとURLをコピーしました