TOSSランド

コンテンツ登録数
(2017/12/13 現在)

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

【アプリ作成】⑤画像のFlashカード


1.準備をする

(1) レイヤーを増やす&名前をつける
 ・レイヤー1の上で「右クリック」→「レイヤーを挿入」
 ・レイヤーを3つにして,名前を上から「script」「ボタン」「カード」とする。

__________2012-12-27_11.33.54

(2) フレームを増やす
 ・再生ヘッドの上で,F5をおす。(7フレームにする)

__________2012-12-27_11.34.31

(3) ボタンをつくる
 ・ボタンレイヤーにつくる。(scriptレイヤーと,カードレイヤーをロック)
 ・ボタンレイヤーの1フレームをクリックしてから,「楕円ツール」をクリック。
 ・ステージの上で,ドラッグして,円をかく。
 ・かいた円をダブルクリック(線と塗りを同時に選択する)
 ・「右クリック」→「シンボルに変換」
 ・シンボルの種類をボタンにして,“次へボタン”と名前をつける。
 ・「次へボタン」を選択して,「プロパティ」インスタンス名を“next_btn”にする。

__________2012-12-27_11.35.45
__________2012-12-27_11.36.01

(4) 戻るボタンをつくる
 ・「次へボタン」の上で「右クリック」→「コピー」
 ・ステージの上で,「右クリック」→「同じ位置にペースト」
 ・新しくできたボタンを左側に動かす。
 ・新しくできたボタンの上で,「右クリック」→「シンボルの複製」

__________2012-12-27_11.36.42

・シンボル名を“戻るボタン”とする。
・「戻るボタン」をクリックして,「プロパティ」インスタンス名を,”back_btn”にする。

(5) scriptを書く
 ・scriptレイヤーの1フレームを選択して,「アクション・フレーム」に次のscriptを書く。

__________2012-12-27_11.37.37

・書き終わったら,「自動フォーマット」で確認。
・next_btnのscriptをコピー&ペーストして,back_btnのscriptに書き換える。書き換えるのは,この4ヶ所。

__________2012-12-27_11.38.12

最後は,”prevFrame();”に。

(6) カードレイヤーのフレームを7フレームに分ける
 ・カードレイヤーに画像をはっていく。画像を7枚はりたいので,7つのキーフレーム(空白キーフレーム)に分けておく。
  カードレイヤーの2フレームを選択して,「キーフレームの挿入」

__________2012-12-27_11.39.09

・同様に,3フレームを選択して「キーフレームの挿入」
 4フレームを選択して・・・・  7フレームまで,キーフレームをつくる。

__________2012-12-27_11.39.41

・これで,準備は終了です。

※ 「キーフレーム」と「空白キーフレーム」の違い
  「キーフレームの挿入」をすると,1つ前のキーフレームに画像がはってあった場合,
  その画像が新しくできたキーフレームに,複製される。
  「空白キーフレームの挿入」をすると,1つ前のキーフレームに画像がはってあっても,
  新しくできたキーフレームに複製されない(空白になる)

※ (6)の場合,1つ前のフレームも空白なので,「キーフレームの挿入」をしても,
  「空白キーフレームの挿入」をしても,結果は変わらない。(どちらも空白のキーフレームができる)

※ ここで,いったん保存しておきましょう。
  「ファイル」→「名前をつけて保存」ファイル名は,”flashcard2”としておきます。

2.画像を挿入する

(1) 画像をライブラリに読み込む
 ・「ファイル」→「読み込み」→「ライブラリに読み込み」

__________2012-12-27_11.41.43

・「Flash講座4画像」フォルダの7つの画像を選択して,「開く」

__________2012-12-27_11.42.31

・ライブラリに,画像ファイルが入る。

__________2012-12-27_13.08.10

(2) 画像をステージに配置する
 ・カードレイヤーの1フレームを選択。(ロックをはずしておく)
 ・「卑弥呼」の画像を,ステージにドラッグ&ドロップする。

__________2012-12-27_13.08.53

・同様に,2フレームを選択して,「聖徳太子」。3フレームに「小野妹子」と,順番に配置していく。

(3) 位置を美しくそろえる
 ・「卑弥呼」の画像を選択して,「整列」をクリック。
  「ステージを基準」にチェックを入れて,水平方向,垂直方向に「位置揃え」する。

(4) 大きさをかえる
 ・今回は,ちょうどいい大きさの画像だが,ステージをはみ出す大きさの画像であることも多い。
 ・画像を選択して,「自由変形ツール」(上から3番目にある。)
 ・すると,画像のまわりに点がつく。大きさをかえる。Word等での画像の大きさのかえ方と同じ。

__________2012-12-27_13.10.20

※ shiftをおしながら大きさをかえることで,縦横の倍率を保ちながら大きさをかえられる。

3.画像の下に名前をつける

(1) 画像を少し上にあげる
 ・「卑弥呼」の画像を選択して,少し上にあげる。(下に名前を書く場所を作るため)
 ・同様にして,残り6つの画像も少し上にあげる。

(2) 「名前」レイヤーをつくる
 ・名前だけを書くレイヤーをつくる。
 ・「カード」レイヤーの上で,「右クリック」→「レイヤーの挿入」
 ・新しくできたレイヤーに”名前”とつける。
 ・「名前」レイヤーをドラッグして,「カード」レイヤーの下にもってくる。
  (この作業は好き好きです。レイヤーの順番をかえる練習としてやってみましょう)
 ・「カード」レイヤーのフレームのように,「名前」レイヤーのフレームも,一つ一つばらばらのキーフレームにする。
  (画像の名前はすべて違うから)「右クリック」→「キーフレームの挿入」

__________2012-12-27_13.12.22

(3) テキストツールで名前を書く
 ・「テキストツール」をクリック。
 ・ステージのどこか,名前を書く場所をクリック。名前を書く。

__________2012-12-27_13.13.03

・おそらくねらったところに書けない。
 「選択ツール」をクリック。「卑弥呼」を画像データの状態にして,ドラッグ&ドロップで適当な場所に移動させる。

※ 文字をきれいに中央に持っていく方法
  テキストツールにして,文字の右上(白い丸)をドラッグして端までひっぱる。

__________2012-12-27_13.13.52

「プロパティ」の「段落」「行揃え」で中央揃えを選ぶと,ちょうど,用紙の真ん中で中央揃えされる。

__________2012-12-27_13.14.27

・選択ツールで,文字を選び,「コピー」
・「名前」レイヤーの2フレーム,3フレーム・・・7フレームでそれぞれ,「同じ位置にペースト」する。
・2フレーム以降,すべて「卑弥呼」になっているので,それぞれの画像の名前に書き換える。
 (聖徳太子,中大兄皇子など)

4.ループさせる(「行基」から「卑弥呼」に戻る)

(1) キーフレームをつくる
 ・「script」レイヤーの7フレームにキーフレームをつくる。
   (7フレームで)「右クリック」→「キーフレームの挿入」
 ・「ボタン」レイヤーの7フレームにキーフレームをつくる。
   (7フレームで)「右クリック」→「キーフレームの挿入」

__________2012-12-27_20.33.58

(2) 次へボタンを複製する
 ・(次へボタンの上で)「右クリック」→「シンボルの複製」

__________2012-12-27_20.34.52

・インスタンス名を,”top_btn” とする。

(3) scriptを書く
 ・scriptレイヤーの7フレームに,以下のscriptを書く。

__________2012-12-27_20.35.34

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

コメント

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