ステップ1 - school web japan2014/10/28 · 編集・実行ボタン キャンバス...
TRANSCRIPT
![Page 1: ステップ1 - School Web Japan2014/10/28 · 編集・実行ボタン キャンバス 操作パネル ②【実行・編集ボタン】が【編集】になっているか確認する。](https://reader036.vdocuments.us/reader036/viewer/2022081619/60f955d9b6eaab78ba476453/html5/thumbnails/1.jpg)
スタンプを貼って、自由に動かしてみよう!
ステップ1
![Page 2: ステップ1 - School Web Japan2014/10/28 · 編集・実行ボタン キャンバス 操作パネル ②【実行・編集ボタン】が【編集】になっているか確認する。](https://reader036.vdocuments.us/reader036/viewer/2022081619/60f955d9b6eaab78ba476453/html5/thumbnails/2.jpg)
①【新規ボタン】をクリックし、編集画面を開く
![Page 3: ステップ1 - School Web Japan2014/10/28 · 編集・実行ボタン キャンバス 操作パネル ②【実行・編集ボタン】が【編集】になっているか確認する。](https://reader036.vdocuments.us/reader036/viewer/2022081619/60f955d9b6eaab78ba476453/html5/thumbnails/3.jpg)
編集・実行ボタン
キャンバス
操作パネル
②【実行・編集ボタン】が【編集】になっているか確認する。
編集画面
![Page 4: ステップ1 - School Web Japan2014/10/28 · 編集・実行ボタン キャンバス 操作パネル ②【実行・編集ボタン】が【編集】になっているか確認する。](https://reader036.vdocuments.us/reader036/viewer/2022081619/60f955d9b6eaab78ba476453/html5/thumbnails/4.jpg)
③【スタンプボタン】を選択し、好きなスタンプをキャンバスにはる。
スタンプボタン
編集画面
![Page 5: ステップ1 - School Web Japan2014/10/28 · 編集・実行ボタン キャンバス 操作パネル ②【実行・編集ボタン】が【編集】になっているか確認する。](https://reader036.vdocuments.us/reader036/viewer/2022081619/60f955d9b6eaab78ba476453/html5/thumbnails/5.jpg)
④スタンプの端を掴み、好きな大きさに拡大する。
編集画面
![Page 6: ステップ1 - School Web Japan2014/10/28 · 編集・実行ボタン キャンバス 操作パネル ②【実行・編集ボタン】が【編集】になっているか確認する。](https://reader036.vdocuments.us/reader036/viewer/2022081619/60f955d9b6eaab78ba476453/html5/thumbnails/6.jpg)
⑤貼りつけたスタンプを選択・右クリックし、プロパティを選択する。
編集画面
![Page 7: ステップ1 - School Web Japan2014/10/28 · 編集・実行ボタン キャンバス 操作パネル ②【実行・編集ボタン】が【編集】になっているか確認する。](https://reader036.vdocuments.us/reader036/viewer/2022081619/60f955d9b6eaab78ba476453/html5/thumbnails/7.jpg)
⑥実行タブを選択し、【ドラッグ可】【回転可】【変形可】にチェックを入れ、適用をクリックする。
編集画面
![Page 8: ステップ1 - School Web Japan2014/10/28 · 編集・実行ボタン キャンバス 操作パネル ②【実行・編集ボタン】が【編集】になっているか確認する。](https://reader036.vdocuments.us/reader036/viewer/2022081619/60f955d9b6eaab78ba476453/html5/thumbnails/8.jpg)
⑦実行画面に移動し、動くことを確認。完成!
実行画面
![Page 9: ステップ1 - School Web Japan2014/10/28 · 編集・実行ボタン キャンバス 操作パネル ②【実行・編集ボタン】が【編集】になっているか確認する。](https://reader036.vdocuments.us/reader036/viewer/2022081619/60f955d9b6eaab78ba476453/html5/thumbnails/9.jpg)
コピー機能でスタンプを増やそう!
ステップ2
![Page 10: ステップ1 - School Web Japan2014/10/28 · 編集・実行ボタン キャンバス 操作パネル ②【実行・編集ボタン】が【編集】になっているか確認する。](https://reader036.vdocuments.us/reader036/viewer/2022081619/60f955d9b6eaab78ba476453/html5/thumbnails/10.jpg)
① 【スタンプボタン】を選択し、好きなスタンプをキャンバスにはる。
スタンプボタン
編集画面
![Page 11: ステップ1 - School Web Japan2014/10/28 · 編集・実行ボタン キャンバス 操作パネル ②【実行・編集ボタン】が【編集】になっているか確認する。](https://reader036.vdocuments.us/reader036/viewer/2022081619/60f955d9b6eaab78ba476453/html5/thumbnails/11.jpg)
②スタンプを選択し、右クリックで【プロパティ】を選択。実行タブを選択し、【ドラッグ可】【回転可】【変形可】にチェックを入れ、適用をクリックする。
編集画面
![Page 12: ステップ1 - School Web Japan2014/10/28 · 編集・実行ボタン キャンバス 操作パネル ②【実行・編集ボタン】が【編集】になっているか確認する。](https://reader036.vdocuments.us/reader036/viewer/2022081619/60f955d9b6eaab78ba476453/html5/thumbnails/12.jpg)
③【機能】から【コピーペースト】を選択し、スタンプの近くに置く。
機能ボタン
編集画面
![Page 13: ステップ1 - School Web Japan2014/10/28 · 編集・実行ボタン キャンバス 操作パネル ②【実行・編集ボタン】が【編集】になっているか確認する。](https://reader036.vdocuments.us/reader036/viewer/2022081619/60f955d9b6eaab78ba476453/html5/thumbnails/13.jpg)
④スタンプを選択したまま、【リンクボタン】を選択し【コピー】に リンクを貼る。
編集画面
リンクボタン
![Page 14: ステップ1 - School Web Japan2014/10/28 · 編集・実行ボタン キャンバス 操作パネル ②【実行・編集ボタン】が【編集】になっているか確認する。](https://reader036.vdocuments.us/reader036/viewer/2022081619/60f955d9b6eaab78ba476453/html5/thumbnails/14.jpg)
⑤実行画面に移動し、スタンプが増えるか確かめる。完成!
実行画面
![Page 15: ステップ1 - School Web Japan2014/10/28 · 編集・実行ボタン キャンバス 操作パネル ②【実行・編集ボタン】が【編集】になっているか確認する。](https://reader036.vdocuments.us/reader036/viewer/2022081619/60f955d9b6eaab78ba476453/html5/thumbnails/15.jpg)
みかんが取れるトレーをつくろう!
ステップ3
![Page 16: ステップ1 - School Web Japan2014/10/28 · 編集・実行ボタン キャンバス 操作パネル ②【実行・編集ボタン】が【編集】になっているか確認する。](https://reader036.vdocuments.us/reader036/viewer/2022081619/60f955d9b6eaab78ba476453/html5/thumbnails/16.jpg)
①【図形ボタン】から正方形を選び、キャンバスに貼り付ける。
図形ボタン
編集画面
![Page 17: ステップ1 - School Web Japan2014/10/28 · 編集・実行ボタン キャンバス 操作パネル ②【実行・編集ボタン】が【編集】になっているか確認する。](https://reader036.vdocuments.us/reader036/viewer/2022081619/60f955d9b6eaab78ba476453/html5/thumbnails/17.jpg)
②【色指定】から好きな色を選択する。
編集画面
![Page 18: ステップ1 - School Web Japan2014/10/28 · 編集・実行ボタン キャンバス 操作パネル ②【実行・編集ボタン】が【編集】になっているか確認する。](https://reader036.vdocuments.us/reader036/viewer/2022081619/60f955d9b6eaab78ba476453/html5/thumbnails/18.jpg)
③【塗りつぶしボタン】で、正方形に色を付ける。
塗りつぶしボタン
編集画面
![Page 19: ステップ1 - School Web Japan2014/10/28 · 編集・実行ボタン キャンバス 操作パネル ②【実行・編集ボタン】が【編集】になっているか確認する。](https://reader036.vdocuments.us/reader036/viewer/2022081619/60f955d9b6eaab78ba476453/html5/thumbnails/19.jpg)
④正方形を右クリックし、プロパティを開き【ドラッグ可】【回転可】 【変形・拡縮可】にチェックを入れる。
編集画面
![Page 20: ステップ1 - School Web Japan2014/10/28 · 編集・実行ボタン キャンバス 操作パネル ②【実行・編集ボタン】が【編集】になっているか確認する。](https://reader036.vdocuments.us/reader036/viewer/2022081619/60f955d9b6eaab78ba476453/html5/thumbnails/20.jpg)
⑤【機能】から【トレー】を選択し、正方形の近くに置く。
機能ボタン
編集画面
![Page 21: ステップ1 - School Web Japan2014/10/28 · 編集・実行ボタン キャンバス 操作パネル ②【実行・編集ボタン】が【編集】になっているか確認する。](https://reader036.vdocuments.us/reader036/viewer/2022081619/60f955d9b6eaab78ba476453/html5/thumbnails/21.jpg)
⑥【トレー】を選択したまま、【リンクボタン】を選択し正方形にリンクを貼る。
編集画面
リンクボタン
![Page 22: ステップ1 - School Web Japan2014/10/28 · 編集・実行ボタン キャンバス 操作パネル ②【実行・編集ボタン】が【編集】になっているか確認する。](https://reader036.vdocuments.us/reader036/viewer/2022081619/60f955d9b6eaab78ba476453/html5/thumbnails/22.jpg)
⑦【スタンプ】から、みかんを選び貼る。
編集画面
![Page 23: ステップ1 - School Web Japan2014/10/28 · 編集・実行ボタン キャンバス 操作パネル ②【実行・編集ボタン】が【編集】になっているか確認する。](https://reader036.vdocuments.us/reader036/viewer/2022081619/60f955d9b6eaab78ba476453/html5/thumbnails/23.jpg)
⑧好きな数だけみかんを貼り付ける。
編集画面
![Page 24: ステップ1 - School Web Japan2014/10/28 · 編集・実行ボタン キャンバス 操作パネル ②【実行・編集ボタン】が【編集】になっているか確認する。](https://reader036.vdocuments.us/reader036/viewer/2022081619/60f955d9b6eaab78ba476453/html5/thumbnails/24.jpg)
⑨実行画面に移動し、みかんが取れるか確認する。完成! (みかんを個別に動かしたい場合は、プロパティでみかんをドラッグ可にしておく)
実行画面
![Page 25: ステップ1 - School Web Japan2014/10/28 · 編集・実行ボタン キャンバス 操作パネル ②【実行・編集ボタン】が【編集】になっているか確認する。](https://reader036.vdocuments.us/reader036/viewer/2022081619/60f955d9b6eaab78ba476453/html5/thumbnails/25.jpg)
簡単なアニメーションを作ろう!
ステップ4
![Page 26: ステップ1 - School Web Japan2014/10/28 · 編集・実行ボタン キャンバス 操作パネル ②【実行・編集ボタン】が【編集】になっているか確認する。](https://reader036.vdocuments.us/reader036/viewer/2022081619/60f955d9b6eaab78ba476453/html5/thumbnails/26.jpg)
①【アニメオブジェクト】・【アニメを開始する為のボタン】・【アニメとして動かすスタンプ】をキャンバスに置きます。
編集画面
アニメオブジェクト
アニメオブジェクト
ボタン
(スタンプから好きなものを選びます)
動くもの
(スタンプから好きなものを選びます)
![Page 27: ステップ1 - School Web Japan2014/10/28 · 編集・実行ボタン キャンバス 操作パネル ②【実行・編集ボタン】が【編集】になっているか確認する。](https://reader036.vdocuments.us/reader036/viewer/2022081619/60f955d9b6eaab78ba476453/html5/thumbnails/27.jpg)
②【ボタン】を選択し、リンクボタンをクリックし、【ボタン】から【アニメオブジェクト】にリンクをはります。
リンクボタン
編集画面
![Page 28: ステップ1 - School Web Japan2014/10/28 · 編集・実行ボタン キャンバス 操作パネル ②【実行・編集ボタン】が【編集】になっているか確認する。](https://reader036.vdocuments.us/reader036/viewer/2022081619/60f955d9b6eaab78ba476453/html5/thumbnails/28.jpg)
③そのまま【アニメオブジェクト】をクリックして【アニメオブジェクト】からうさぎにリンクを貼ります。
編集画面
クリック
![Page 29: ステップ1 - School Web Japan2014/10/28 · 編集・実行ボタン キャンバス 操作パネル ②【実行・編集ボタン】が【編集】になっているか確認する。](https://reader036.vdocuments.us/reader036/viewer/2022081619/60f955d9b6eaab78ba476453/html5/thumbnails/29.jpg)
④もう一度【リンクボタン】をクリックすると、うさぎから矢印がのびるので、好きな位置をクリックし、うさぎの移動先をきめます。
編集画面
リンクボタンをクリック
![Page 30: ステップ1 - School Web Japan2014/10/28 · 編集・実行ボタン キャンバス 操作パネル ②【実行・編集ボタン】が【編集】になっているか確認する。](https://reader036.vdocuments.us/reader036/viewer/2022081619/60f955d9b6eaab78ba476453/html5/thumbnails/30.jpg)
⑤実行画面にうつり、ボタンを押し、うさぎが動くか確認する。完成!
実行画面