TOSSランド

コンテンツ登録数
(2017/10/20 現在)

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

【アプリ作成】④Flashカードをつくる


1.カードをつくる

(1)「テキストツール(Tのマーク)」を選択して,ステージの上でクリック。「起」と書く。

(2)「起」を選択して,文字の大きさを200ptにする。

__________2012-12-27_10.57.40

(3) 整列で文字を中央に配置する
 ・整列タブをクリック。
 ・「起」をクリック。
 ・「ステージを基準」にチェックを入れる。
 ・「中央揃え(水平方向)」と「中央揃え(垂直方向)」をクリック。

__________2012-12-27_10.58.52

(4) キーフレームの挿入
 ・2フレームを選択して,「右クリック」→「キーフレームの挿入」をクリック。
 ・同様にして,3フレーム,4フレームにも,「キーフレーム」をつくる。

__________2012-12-27_10.59.10

(5) 文字を書き換える
 ・2フレームを選択。「起」を「承」に書き換える。
 ・「テキストツール」をクリックして,「起」をクリック。文字がうてるようになるので,「承」に書き換える。
 ・同様にして,3フレームを「転」,4フレームを「結」にする。「起承転結」になる。

(6) 名前をつけて保存する
 ・ここで,いったん保存する。
 ・「ファイル」→「名前をつけて保存」
 ・名前を「flashcard」にする。(後のアプリ化のことを考えて,半角英数で名前をつけておく)

__________2012-12-27_11.02.00

※ 「起」「承」「転」「結」が高速で繰り返し表示されます。

2.scriptを書く

(1) scriptを書くためのレイヤーをつくる
 (レイヤーの上で)「右クリック」→「レイヤーを挿入」

__________2012-12-27_11.03.02

(2) レイヤーに名前をつける
  レイヤーを「ダブルクリック」。上を「script」下を「カード」とする。

__________2012-12-27_11.03.48

(3) 空白キーフレームをつくる
 「script」レイヤーの4フレームで,「右クリック」→「空白キーフレームの挿入」

__________2012-12-27_11.04.22

(4) 4フレームにscriptを書く
 「script」レイヤーの4フレームを選択して,その状態で,「アクション・フレーム」タブをクリック。
 (scriptを書けるようにする)「アクション・フレーム」に,stop(); と書く。

__________2012-12-27_11.05.08

※ 「結」でとまるようになった。(高速で表示される)

3.フレームを増やす

(1) 再生ヘッドの上でF5キーをおす。(「フレームを挿入」のショートカットキー)
 ・起承転まで,10フレームずつ増やす。

__________2012-12-27_11.08.09

※ 再生ヘッドの上で「フレームを挿入」すると,すべてのレイヤーのフレームが増えます。
  (レイヤーの上で「フレームを挿入」すると,そのレイヤーのフレームだけが増えます。)

※ 少しゆっくり表示が切り替わるようになりました。

4.ボタンで動かす

(1) 3で増やしたフレームを削除する。(2の状態に戻す)
 (削除したいフレームを選択して)「右クリック」→「フレームを削除」

__________2012-12-27_11.09.14

・同様にして,「承」「転」のレイヤーも(1フレームだけ残して)削除する

 ※「挿入」と違い,再生ヘッドでまとめて「削除」はできません。

(2)「script」レイヤーを一つのキーフレームにする
 ・「script」レイヤーの4フレームを選択して,「右クリック」→「フレームを削除」

__________2012-12-27_11.10.07

・「script」レイヤーが3フレームだけになってしまったので,フレームを挿入する。
 「script」レイヤーの3つのフレームのどこかの上で,「F5」

__________2012-12-27_11.10.54

(3) 新しいレイヤーをつくる(ボタンを配置するレイヤー)
 「カード」レイヤーの上で「右クリック」→「レイヤーを挿入」

__________2012-12-27_11.11.36

・新しいレイヤーに「ボタン」と名前をつけておく。

(4) レイヤーのロックをする。
 ・誤って他のレイヤーにボタンを配置しないように,レイヤーにロックをする。
 ・クリックすることで,ロックの解除ができる。
 ・上の鍵ボタンをクリックすると,全てのレイヤーにロックがかかる。

__________2012-12-27_11.12.30

(5) ボタンをつくる
 ・「ボタン」レイヤーのどこかのフレームを選択しておく。(選択ツール↑で)
 ・「楕円ツール」をクリック。ステージの右下に,◯をかく。

__________2012-12-27_11.13.04

・(色をかえた後)ボタンの上でダブルクリック。(線と塗りを両方選択する)
  「右クリック」→「シンボルに変換」  → 名前をつける →「OK」

__________2012-12-27_11.13.40

(6) ボタンにインスタンス名をつける
 ・ボタンを選択して,「プロパティ」タブ→ インスタンス名をつける。

__________2012-12-27_11.14.15

・ここは重要! インスタンス名は,next_btn とする。(半角英数で)

(7) scriptを書く
 ・「script」レイヤーの1フレームをクリック。
 ・「アクション・フレーム」タブをクリック。(scriptを書く画面にする)
 ・次のように書く。

__________2012-12-27_11.15.06

「(1フレームずつ)とまります。
 next_btnをクリックすると,nextClickという命令をします。
 nextClickとは,次のフレームに移動しろという命令です。」 という意味。

・「自動フォーマット」をクリック。(間違っていると,ここでエラーが出る)
※ 次へボタンをクリックすることで,次の画面に進むようになりました。

5.戻るボタンをつくる

(1) ボタンをコピー&ペーストする
 ・「次へボタン」の上で「右クリック」→「コピー」
 ・(ステージの上で)「右クリック」→「同じ位置にペースト」

__________2012-12-27_11.16.36

・新しくできたボタンを左に動かしておく。

__________2012-12-27_11.20.34

(2) ボタンを複製する
 ・新しくできたボタンは,まだ「次へボタン」です。
  このボタンの色をかえると,元の「次へボタン」の色をかわってしまう。新しいボタンにチェンジさせる。
 ・(新しくできたボタンの上で)「右クリック」→「シンボルの複製」

__________2012-12-27_11.22.08

(3)「戻るボタン」のインスタンス名をかえる
 ・「次へボタン」のインスタンス名(next_btn)が入ったままになっている。(back_btn)にかえる。

※ インスタンス名は,ボタンを選択してから,「プロパティ」タブで変更します。

__________2012-12-27_11.23.04

(4) scriptを書く
 ・scriptレイヤーのアクションフレーム(stop()とnext_btnの命令の下)に,back_btnを使った命令を書く。
 (1つ前のフレームに戻るときは,prevFrame();を使います。
 ・書いてみましょう。
 (next_btnのscriptをコピー&ペーストして,ボタン名,命令名等を書き換える)

※ 「次へボタン」で進み,「戻るボタン」で戻るようになりました。


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

コメント

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