TOSSランド

コンテンツ登録数
(2017/07/25 現在)

21403
TOSS子どもランド TOSSオリジナル教材 TOSS動画ランド TOSSメディア TOSS-SNS TOSS公式(オフィシャル)サイト
TOSS子どもランド
TOSSランドアーカイブ
TOSSランドNo: 1751627 更新:2013年10月07日

【アプリ作成】⑧ひき算練習アプリをつくる


1.準備をする

(1) レイヤーを増やす&名前をつける
 ・レイヤー1の上で「右クリック」→「レイヤーを挿入」
 ・レイヤーを6つにして,名前を上から「stop」「script」「正解ボタン」「間違いボタン」「問題」「背景」とする。

(2) スタートの画像を作る
 ・背景レイヤーの1フレームに,長方形をかく。
  右側の「矩形ツール」をクリックして,ステージ上でドラッグ&ドロップ。
 ・できた四角をダブルクリック(線と塗りを両方選択するためでしたね)
  「右クリック」→「シンボルに変換」→(グラフィックにして“スタート”とつける)→「OK」

__________2012-12-27_21.00.32
__________2012-12-27_21.00.51

・“スタート”とつけた四角をダブルクリック。“スタート”のレイヤーが出るので,「レイヤーを挿入」
・新しくできたレイヤー(上にあるレイヤー)を選択して,1フレームに,“スタート”とかく。
 (テキストツール(T)をクリックしてから文字をかく)←四角の中に書くのですよ。

__________2012-12-27_21.01.34

※ 文字の大きさ,色などは,「プロパティ」で変更する。

(3) スタートボタンを作る
 ・“スタート”のレイヤーの中にいます。元のステージに戻します。「シーン1」をクリック。

__________2012-12-27_21.02.24

・ここまではスタートボタンの画像を作っただけです。これから,スタートボタンを作ります。
・正解ボタンレイヤーの1フレームをクリック。(ここに作る)
「矩形ツール」をクリック→(先ほど作った“スタート”にかぶせるように,四角をかく。まるまる隠してしまって構わない。

__________2012-12-27_21.03.17

・今作った四角をダブルクリック(線と塗りを同時に選択)
 「右クリック」→「シンボルに変換」→(ボタンにして“スタートボタン”と名前をつける)→「OK」

__________2012-12-27_21.03.55

※ 四角をダブルクリックできなかった方は,右側に並んでいるツールを見てください。
  先ほど選んだ「矩形ツール」を選択したままになっていませんか? 
  一番上の矢印マーク(選択ツール)をクリックしてください。(わりとよくするミスです)

・今作った“スタートボタン”をクリック。
「プロパティ」のインスタンス名の枠に「start_btn」とつける。

__________2012-12-27_21.04.56

・さらにその下,「カラー効果」→「スタイル」で,「アルファ」を選択。
 アルファを選択することで,ボタンが透明になる。

__________2012-12-27_21.05.41
__________2012-12-27_21.06.05

(4) scriptを書く
 ・stopレイヤーの1フレームに下記のscriptを書く。

__________2012-12-27_21.06.36

※ scriptはアクションフレームの中に書く。(プロパティの2つ右隣)

・scriptレイヤーの1フレームに,下記のscriptを書く。

__________2012-12-27_21.07.23

※ 「start_btnをクリックすると,startClickという命令をしますよ。
   startClickという命令は,2フレームに飛びなさいという命令ですよ」ということを書いています。

・これで,1フレームの準備は終わりです。ここまででも,ずいぶん長かったですね。

2.問題と答えの枠を作る準備をする

(1) 答えの枠を作る
 ・背景レイヤーの2フレームで「右クリック」→「空白キーフレームの挿入」
 ・背景レイヤーの2フレームに数字を書いた四角の枠を作る。下のような枠です。
  1の(2)の復習です。やってみてください。

__________2012-12-27_21.08.52

(2) コピー&ペーストする
 ・同じように2〜9の枠(シンボル)を作るが,(1)の手順ですると,時間がかかるので,複製する(ここではその準備)。
 ・(1のシンボルの上で)「右クリック」→「コピー」(ステージの上で)「ペースト」(ペーストだけを8回繰り返す)
  このような状態になる。ややこしいので,全て選択して,整列させる。
 ・ドラッグして,全てを選択。「整列」で,「下揃え」と「中央分布」

__________2012-12-27_21.09.57
__________2012-12-27_21.10.30

(3) 複製する
 ・今の状態は,同じシンボルをコピー&ペーストしただけで,どれか1つのシンボルを“2”に変更すると,
  全てのシンボルが“2”に変更されてしまう。別のシンボルにしなくてはいけない。
 ・(左から2つ目のシンボル(四角)の上で)「右クリック」→「シンボルの複製」→(名前をつけて)「OK」

__________2012-12-27_21.11.32

・同様に,3〜9まで別のシンボルにする。

(4) 枠の表示をかえる(数字をかえる)
 ・左から2つ目のシンボル(2番とつけたシンボル)をダブルクリック。
 ・数字を打ち直す。
 ・同様にして,3〜9の枠を作る。

__________2012-12-27_21.12.25
__________2012-12-27_21.12.50

(5) 問題を作る
 ・問題レイヤーの2フレームを作る
  2フレームの上で「右クリック」→「キーフレームの挿入」

__________2012-12-27_21.13.28

・問題レイヤーの2フレームをクリックしてから,ステージに文字を書く。
 「テキストツール」をクリック。ステージの上でクリック。 “2−1=”と入力。

__________2012-12-27_21.14.19

・問題を10問作る。
 問題レイヤーの3フレームの上で,「右クリック」→「キーフレームの挿入」
 “2−1=”のフレームが3フレームにもできる。同じ要領で,問題を10こ作る。
・全て同じ問題(2−1=)なので,各フレームをクリックして,問題を書きなおす。

(6) 答えのレイヤーにフレームを挿入する
 ・問題を書き直している最中,下の答えの枠が消えてしまっている。
  これは,2フレームにしか,答えの枠が書かれていないからである。

__________2012-12-27_21.15.31

・背景レイヤーの2フレームをクリック。パソコンのキーボードの「F5キー」をクリック。フレームが挿入される。

__________2012-12-27_21.16.04

・同じようにして,stopレイヤーも11フレームまで,フレームを挿入してみましょう。

3.正解ボタンと間違いボタンを作る

(1) 間違いボタンを作る
 ・間違いボタンレイヤーの2フレームで「右クリック」→「キーフレームの挿入」
 ・「矩形ツール」をクリック。答えの枠(1から9まで作った下にある枠)にかぶせるようにして,図形を描く。
  (全部のわくをおおうように)

__________2012-12-27_21.17.30

・今かいた図形をダブルクリックして選択してから,「右クリック」→「シンボルに変換」
 “間違いボタン”と名前をつけて,「OK」

__________2012-12-27_21.18.10

種類が,「ボタン」になっているか注意。
・インスタンス名を“matigai_btn”とする。
・カラー効果のスタイルを「アルファ」にする。(これで透明になる)
・間違いボタンレイヤーの2フレームをクリックして,F5キーでフレームの挿入をする。

__________2012-12-27_21.18.59

(2) 正解ボタンを作る
 ・正解ボタンレイヤーの2フレームで,「右クリック」→「空白キーフレームの挿入」

※ ここで,「キーフレームの挿入」をすると,1フレームで作ったボタンがそのまま2フレームにコピーされます。
  ここは新しいまっさらなフレームがほしいので,「空白キーフレームの挿入」とします。
  では,間違いボタンのときは,なぜ,「キーフレームの挿入」でよかったのでしょうか?
  間違いボタンの1フレームには元々何も書かれていない空白フレームだったので,
  「キーフレームの挿入」でも新しいフレームができたのです。

・「矩形ツール」をクリック。
 答えの一つだけの枠に合わせて,図形をかく。

__________2012-12-27_21.20.25

・今かいた図形をダブルクリックして選択してから,「右クリック」→「シンボルに変換」
 “正解ボタン”と名前をつけて,「OK」

__________2012-12-27_21.21.02

・インスタンス名を“seikai_btn”とする。
・カラー効果のスタイルを,「アルファ」にする。

(3) 正解ボタンを増やす
 ・正解ボタンレイヤーの3フレームの上で,「右クリック」→「キーフレームの挿入」
  以下,同様にして,11フレームまで,キーフレームを挿入する。

※ 間違いボタンでは,「フレームの挿入」をしました。正解ボタンでは,「キーフレームの挿入」をします。
  何が違うのか。間違いボタンは動かす必要がないのです。正解ボタンは,今の“1”の場所から,
  フレームごとに動かしていきます。
  だから,1つ1つ「キーフレーム」にしていかなくてはいけないのです。

(4) 正解ボタンを動かす
 ・各フレームをクリックして,正解の場所に正解ボタンを動かす。
  問題が“4−2=”だったら,正解ボタンを“2”の上に動かす。

4.scriptをかく

(1) 準備
 ・scriptレイヤーの2フレームで「右クリック」→「キーフレームの挿入」

(2) scriptをかく
 ・scriptレイヤーの2フレームをクリック。アクションフレームに,以下のscriptをかく。

__________2012-12-27_21.23.36

※ 1フレームに,スタートボタンのscriptをかきました。
  これをコピー&ペーストして,部分を書きなおすのが一番楽で確実です。
  (私はコピー&ペーストで使いまわしています。未だに,何も見ずにscriptを書くことができません)
※ 「seikai_btnをクリックすると,seikaiClickという命令をしますよ。
  seikaiClickとは,次のフレームに飛びなさいという命令ですよ」というscriptです。

(3) フレームを増やす
  ・scriptレイヤーの2フレームをクリック。キーボードの「F5キー」でフレームを挿入する。

5.その他

(1) おめでとう画面を作る
 ・問題レイヤーの12フレームで,「右クリック」→「空白キーフレームの挿入」
 ・何か,12フレームに,何かおめでとうの画面を作る。

 ・ここまでで,「Ctrl」+「Enter」でパブリッシュしてみましょう。

(2) 音をつける
 ・「ファイル」→「読み込み」→「ライブラリに読み込み」で,
  「ピンポン」「ぶぶー」「ファンファーレ」の3つの音声ファイルを読み込む。

__________2012-12-27_21.25.54

・問題レイヤーの12フレーム(おめでとうのフレーム)をクリック。
 「プロパティ」の「サウンド」の名前を“ファンファーレ”にする。

__________2012-12-27_21.26.39

・間違いボタンをダブルクリック。ダウンの上で,「右クリック」→「キーフレームの挿入」
・ダウンを選択したまま,「プロパティ」の「サウンド」の名前を,“ぶぶー”にする。

__________2012-12-27_21.27.25

・同じように,正解ボタンをダブルクリックして,「ピンポン」をつける。


0回すごい!ボタンが押されました

コメント

※コメントを書き込むためには、ログインをお願いします。
New TOSSランド