popcorn maker manual by mozilla webmaker japan community

62
Popcorn Maker の使い方 Mozilla Webmaker Japan community https://popcorn.webmaker.org/ 1 Ver. 2013/7/19

Upload: elie-j

Post on 02-Jul-2015

3.925 views

Category:

Documents


0 download

DESCRIPTION

Last Update 2013/07/19

TRANSCRIPT

Page 1: Popcorn Maker Manual by Mozilla Webmaker Japan community

Popcorn Maker の使い方

Mozilla Webmaker Japan community

https://popcorn.webmaker.org/

1Ver. 2013/7/19

Page 2: Popcorn Maker Manual by Mozilla Webmaker Japan community

Popcorn Maker の使い方目次0. Popcorn Maker 画面メニュー

1. 動画を貼りつけるには

1.-1 WebM 編一般サイトにあるビデオを使う場合

1.-2 YouTube 編

2. 編集/リミックスする前に (動画の頭出しと最後の部分のカットなど)

3. テキスト(文字)を表示するには

3.-1 基本編: 文字の追加、リンクを張る、文字位置の調整、アニメーションの追加

3.-2 上級編: 書体の変更、文字の大きさ、文字の色、影付き文字、文字の背景色

4. 吹き出しを追加するには

4.-1 基本編: 吹き出しを追加、表示時間の変更、吹き出しの種類を変える、

表示方法を変える

4.-2 上級編: 文字の色を変える、文字の大きさを変える

5. 地図を貼りつけるには

6. 画像を貼りつけるには

7. ループ (繰り返し) させるには

8. スキップ (カット) するには

9. 一時静止させるには

10. Wikipedia を表示するには

11. 編集を取り消すには

2

Page 3: Popcorn Maker Manual by Mozilla Webmaker Japan community

0. Popcorn Maker メニュー (1)

Popcorn Maker メニュー その1メディアタブ

レイヤー

3

Page 4: Popcorn Maker Manual by Mozilla Webmaker Japan community

0. Popcorn Maker メニュー (2)

Popcorn Maker メニュー その1イベントタブ

テキスト (文字)

ポップアップ (吹き出し)

Google マップ

スキップ (飛ばし)

ループ (繰り返し)

画像

一時静止

Wikipedia

保存

4

Page 5: Popcorn Maker Manual by Mozilla Webmaker Japan community

1.-1 動画を貼りつけるには

ビデオが 「WebM 形式」であれば

Popcorn Maker が使えます

WebM形式のビデオであれば Popcorn Maker が使えます。※Web掲載されているMozilla の動画を例にしています。

WebM編 (一般サイトにあるビデオ を使う場合) (1)

5

Page 6: Popcorn Maker Manual by Mozilla Webmaker Japan community

1.-1 動画を貼りつけるには

「リンクの URL をコピー」をクリック

動画の URL をコピー

WebM編(一般サイトにあるビデオを使う場合) (2)

6

Page 7: Popcorn Maker Manual by Mozilla Webmaker Japan community

1.-1 動画を貼りつける には

ここで右クリックして「貼り付け」を選択

WebM編(一般サイトにあるビデオを使う場合) (3)

動画の URL を Popcorn Maker に貼りつけます

7

Page 8: Popcorn Maker Manual by Mozilla Webmaker Japan community

1.-1 動画を貼りつける には

「Create clip」をクリック

WebM編(一般サイトにあるビデオを使う場合) (4)

8

Page 9: Popcorn Maker Manual by Mozilla Webmaker Japan community

1.-1 動画を貼りつける には

出てきた動画をクリック

WebM編(一般サイトにあるビデオを使う場合) (5)

9

Page 10: Popcorn Maker Manual by Mozilla Webmaker Japan community

1. -1 動画を貼りつける には

動画の貼りつけが完了しました!

WebM編(一般サイトにあるビデオを使う場合) (6)

10

Page 11: Popcorn Maker Manual by Mozilla Webmaker Japan community

1.-2 動画を貼りつけるには

アドレスを右クリック

YouTube編 (1)

YouTube や Vimeo に掲載されている動画を編集・リミックスする場合

11

Page 12: Popcorn Maker Manual by Mozilla Webmaker Japan community

1.-2 動画を貼りつける には

「コピー」を選択

YouTube編 (2)

12

Page 13: Popcorn Maker Manual by Mozilla Webmaker Japan community

1.-2 動画を貼りつける には

ここで右クリックして「貼り付け」を選択

YouTube編 (3)

13

Page 14: Popcorn Maker Manual by Mozilla Webmaker Japan community

1.-2 動画を貼りつける には

「Create clip」をクリック

YouTube編 (4)

14

Page 15: Popcorn Maker Manual by Mozilla Webmaker Japan community

1.-2 動画を貼りつける には

出てきた動画をクリック

YouTube編 (5)

15

Page 16: Popcorn Maker Manual by Mozilla Webmaker Japan community

1.-2 動画を貼りつけるには

動画の貼りつけが完了しました!

YouTube編 (6)

16

Page 17: Popcorn Maker Manual by Mozilla Webmaker Japan community

2. 編集/リミックスする前に (1)

17

動画を貼りつけると以下のような画面 (素材ビデオのレイヤー画面)になります

素材ビデオのレイヤーです。ここをクリックするとこの画面になります

再生/一時停止ボタン

音声あり or なし

ビデオのタイトル (変えられます)

Page 18: Popcorn Maker Manual by Mozilla Webmaker Japan community

2. 編集/リミックスする前に (2)

18

素材ビデオのスタート (頭出し) とエンド (最後の部分) の設定

ここをドラッグ&ドロップしても、素材ビデオの前と後ろのカット部分設定できます

素材ビデオの最初をカットする場合はスタートさせたい時間を In に入力、

後ろをカットしたい場合は終わらせる時間を Out に入力

Page 19: Popcorn Maker Manual by Mozilla Webmaker Japan community

2. 編集/リミックスする前に (3)

19

編集するビデオ全体の中で素材ビデオを実行する時間を設定する

編集するビデオ全体の中で、素材ビデオをどのタイミングで表示させるかを

Start と End で設定できます

ここをドラッグ&ドロップしても、素材ビデオのスタートタイミングとエンドのタイミングを設定できます

Page 20: Popcorn Maker Manual by Mozilla Webmaker Japan community

3.-1 文字を表示するには :基本編(1)

「Events」をクリック

ビデオに字幕や説明の文字を追加します

20

Page 21: Popcorn Maker Manual by Mozilla Webmaker Japan community

「Text」 をクリック

3.-1 文字を表示する には :基本編(2)

21

Page 22: Popcorn Maker Manual by Mozilla Webmaker Japan community

基本操作 (Basic) タブをクリック

3.-1 文字を表示するには: 基本編(3)

22

Page 23: Popcorn Maker Manual by Mozilla Webmaker Japan community

「Start」「End」に動画のどこからどこまで

文字を表示するか、を入力

例えば、0秒目から10秒目まで表示したいなら、Startに0:00、Endに0:10と入力します

文字を表示させるタイミングを設定

3.-1 文字を表示するには: 基本編(4)

23

Page 24: Popcorn Maker Manual by Mozilla Webmaker Japan community

「Text」に表示

したい文字を入力

文字を入力します

3.-1 文字を表示するには :基本編(5)

24

Page 25: Popcorn Maker Manual by Mozilla Webmaker Japan community

文字にリンクを張りたいなら、「Link URL」にリンク先の

URLを入力

リンクを張る場合

3.-1 文字を表示するには :基本編(6)

25

Page 26: Popcorn Maker Manual by Mozilla Webmaker Japan community

文字をどの位置に表示したいかを「Text Position」で

選択

「Middle」は中央、「Bottom」は下部、「Top」は上部に文字を表示します

文字の (縦) 位置を調整文字の位置を 「Middle (中央) / Bottom (下) / Top (上)」 のいずれかにする場合

3.-1 文字を表示するには :基本編(7)

26

Page 27: Popcorn Maker Manual by Mozilla Webmaker Japan community

文字をそろえる文字列の (横) 位置を調整する

文字をどうそろえるかを「Text

Alignment」で選択

「Center」は中央、「Left」は左、「Right」は右に文字をそろえる。

3.-1 文字を表示するには: 基本編(8)

27

Page 28: Popcorn Maker Manual by Mozilla Webmaker Japan community

文字にどうアニメーションを付けるかを「Transition」で

選択

「None」は何もしない。「Pop」「Fade」「Slide Up」「Slide Down」はそれぞれ効果を設定できます。

文字の出し方 (アニメーションの追加)

3.-1 文字を表示するには :基本編(9)

28

Page 29: Popcorn Maker Manual by Mozilla Webmaker Japan community

文字表示に関するその他の機能は、「Advanced」 タブをクリック

3.-2 文字を表示するには :上級編(1)

29

Page 30: Popcorn Maker Manual by Mozilla Webmaker Japan community

文字の書体を変える

「Font」 を変更する

と、文字の書体が変化します

3.-2 文字を表示するには :上級編(2)

30

Page 31: Popcorn Maker Manual by Mozilla Webmaker Japan community

文字の大きさを変える

「Font Size」 を変更

すると、文字の大きさが変化します

3.-2 文字を表示する には :上級編(3)

31

Page 32: Popcorn Maker Manual by Mozilla Webmaker Japan community

文字の色を変える

使える色は black、silver、gray、 、maroon、red、purple、fuchsia、green、lime、olive、 、navy、blue、teal、aquaの16種類

「Font Colour」 を

変更すると、文字の色が変化します

3.-2 文字を表示するには :上級編(4)

32

Page 33: Popcorn Maker Manual by Mozilla Webmaker Japan community

文字に影をつける

「Shadow」 にチェック

を入れると、文字に影をつけられます。影の色は「Shadow colour」 で設定でき

ます

3.-2 文字を表示するには :上級編(5)

33

Page 34: Popcorn Maker Manual by Mozilla Webmaker Japan community

文字に背景色をつける

「Background」 に

チェックを入れると、文字に背景を設定

できます。

背景の色は「Background colour」で設定できます

3.-2 文字を表示するには :上級編(6)

34

Page 35: Popcorn Maker Manual by Mozilla Webmaker Japan community

4.-1 吹き出しを追加するには: 基本編(1)

Popup をクリック

35

Page 36: Popcorn Maker Manual by Mozilla Webmaker Japan community

4.-1 吹き出しを追加するには: 基本編(2)

Text に文字を入力する

吹き出しの文字を変えます

36

Page 37: Popcorn Maker Manual by Mozilla Webmaker Japan community

Start と End で設定

吹き出しの表示時間を変えるには

4.-1 吹き出しを追加するには: 基本編(3)

37

Page 38: Popcorn Maker Manual by Mozilla Webmaker Japan community

Type で種類を選ぶ

吹き出しの種類を変えるには

4.-1 吹き出しを追加するには: 基本編(4)

38

Page 39: Popcorn Maker Manual by Mozilla Webmaker Japan community

Transition で選ぶ

吹き出しの表示方法を変えるには

4.-1 吹き出しを追加するには: 基本編(5)

39

Page 40: Popcorn Maker Manual by Mozilla Webmaker Japan community

1. Advanced をクリック

2. Font colour に設定

吹き出しの文字色を変えるには

4.-2 吹き出しを追加するには: 上級編(1)

40

Page 41: Popcorn Maker Manual by Mozilla Webmaker Japan community

1. Advanced をクリック

2. Font Size から選ぶ

吹き出しの文字の大きさを変えるには

4.-2 吹き出しを追加するには: 上級編(2)

41

Page 42: Popcorn Maker Manual by Mozilla Webmaker Japan community

5. 地図を貼り付けるには (1)

GoogleMap をクリック

42

Page 43: Popcorn Maker Manual by Mozilla Webmaker Japan community

表示する場所を指定します

住所や施設名を入力

5. 地図を貼り付けるには (2)

43

Page 44: Popcorn Maker Manual by Mozilla Webmaker Japan community

地図の表示範囲を変更できます。

Zoom の数値を変更

5. 地図を貼り付けるには (3)

44

Page 45: Popcorn Maker Manual by Mozilla Webmaker Japan community

6. 画像を貼り付けるには (1)

Image をクリック

45

Page 46: Popcorn Maker Manual by Mozilla Webmaker Japan community

貼り付ける画像を指定します

画像ファイルを

ドラッグ&ドロップ

6. 画像を貼り付けるには (2)

46

Page 47: Popcorn Maker Manual by Mozilla Webmaker Japan community

画像を移動させて位置を決めます

画像右上のプラスマークを

ドラッグ&ドロップ

6. 画像を貼り付けるには (3)

47

Page 48: Popcorn Maker Manual by Mozilla Webmaker Japan community

画像を拡大/縮小させ大きさを決めます

画像の上下と左右、左下の

バーをドラッグ&ドロップ

6. 画像を貼り付けるには (4)

48

Page 49: Popcorn Maker Manual by Mozilla Webmaker Japan community

画像を表示する時間を指定させます

レイヤー上のバーを

ドラッグ&ドロップ

6. 画像を貼り付けるには (5)

49

Page 50: Popcorn Maker Manual by Mozilla Webmaker Japan community

Loop (ループ)は、動画の一部を繰り返し再生させることができるイベントです。

7. ループ (繰り返し) させるには (1)

ここをクリックしてください

50

Page 51: Popcorn Maker Manual by Mozilla Webmaker Japan community

Start(スタート): 繰り返し再生さ

せたい部分が始まる時間を入力してください。(○分:○秒)

End(エンド):繰り返し再生した

い部分が終わる時間を入力してください。 (○分:○秒)

Number of loops: 繰り返

す回数を入力してください。0 を入力すると、無限に再生します。

7. ループ (繰り返し) させるには (2)

51

Page 52: Popcorn Maker Manual by Mozilla Webmaker Japan community

Skip(スキップ)は、動画の一部を再生しないように抜かすことができるイベントです。

8. スキップ (カット) するには (1)

ここをクリックしてください

52

Page 53: Popcorn Maker Manual by Mozilla Webmaker Japan community

Start(スタート):再生せずに

抜かしたい部分が始まる時間を入力してください。 (○分:○秒)

End(エンド):再生せずに

抜かしたい部分が終わる時間を入力してください。(○分:○秒)

8. スキップ (カット) するには (2)

53

Page 54: Popcorn Maker Manual by Mozilla Webmaker Japan community

Pause (ポーズ)は、動画を一時停止させることができるイベントです。

9. 一時静止 (Pause) させるには (1)

ここをクリックしてください

54

Page 55: Popcorn Maker Manual by Mozilla Webmaker Japan community

Start(スタート): 一時停止させ

たい場面の時間を入力してください。(○分:○秒)

End(エンド):このイベントでは、

特に設定する必要はありません。

Pause Duration:一時停止

させた状態を持続させる時間を入力してください。0 を入力すると、無限に停止します。

9. 一時静止 (Pause) させるには (2)

55

Page 56: Popcorn Maker Manual by Mozilla Webmaker Japan community

10. WikiPedia を表示するには (1)

Wikipedia をクリック

56

Page 57: Popcorn Maker Manual by Mozilla Webmaker Japan community

表示する記事を指定します

記事名を入力

10. WikiPedia を表示するには (2)

57

Page 58: Popcorn Maker Manual by Mozilla Webmaker Japan community

記事の言語を指定します

Japanese を選択

10. WikiPedia を表示するには (3)

58

Page 59: Popcorn Maker Manual by Mozilla Webmaker Japan community

11. 編集を取り消すには (1)

「Layer *」 の下の「+」をクリック

行った編集作業を取り消す場合は、レイヤーを削除します

59

Page 60: Popcorn Maker Manual by Mozilla Webmaker Japan community

11. 編集を取り消すには (2)

削除したい効果をクリックし、一番下のLayerにドラッグ&ドロップする

60

Page 61: Popcorn Maker Manual by Mozilla Webmaker Japan community

11. 編集を取り消すには (3)

Layerの左側にマウスをのせるとゴミ箱マークが出てくるので、そのゴミ箱マークをクリックする

61

Page 62: Popcorn Maker Manual by Mozilla Webmaker Japan community

11. 編集を取り消すには (4)

「Yes」 をクリックする

62