はじめに
このチュートリアルでは、『プペポタイピング』のタイプ問題に画像・動画・効果音を入れる方法について学んでいきます。
タイプ問題に画像・動画・効果音を加えることで、タイピングがもっと楽しくなります！
工夫しだいで、あなただけの魅力的な問題が作れます。
今回のチュートリアルでは、実際に操作しながらタイプ問題に画像・動画・効果音を入れていく方法を、順に追って紹介していきます。
1-0 準備
まずは、画像・動画・効果音を入れるための問題と素材をダウンロードする必要があります。
ここでは問題と素材のダウンロード手順を紹介します。
1-1 素材のダウンロード
まず、以下のボタンをクリックして、使用する問題と素材をダウンロードしましょう。
ダウンロードをすると、チュートリアルフォルダがあるので、その中のChapter1-2を開いておいてください。
1-2 ダウンロードした問題を問題フォルダに移動
パソコンのドキュメントフォルダ内にあるPupepoTypeingフォルダのQuestionフォルダがあります。
Questionフォルダとはプペポタイピングの問題データが入っているフォルダです。
ここに先ほどダウンロードしたチュートリアルフォルダのChapter1-2フォルダに入っている動物問題フォルダをQuestionフォルダにドラッグ＆ドロップしてください。
次に問題メーカーを起動してください。
問題メーカーのホーム画面に動物問題が表示されているのでクリックして開いてください。
開いたら問題作成の詳細モードを開いておいてください。
2-0 タイプ問題に画像・動画を入れていこう
この項目では、タイプ問題に画像や動画を入れていきます。
その前に、2つの用語について確認しておきましょう。
問題には、画面の手前に表示される「前面画像・動画」と、背景として表示される「背面画像・動画」があります。
この項目では「前面画像・動画」と「背面画像・動画」を頻繁に使用して解説するため、あらかじめ覚えておいてください。
ではタイプ問題に前面・背面(画像・動画)を入れていきましょう！
2-1 ダウンロードした画像・動画素材を問題の画像・動画フォルダに移動
次に動物問題ににダウンロードした画像・動画素材を入れていきます。
左メニューからフォルダを開くをクリックしてください。
クリックすると「フォルダーを開く」の中身が展開され、メディアフォルダというのがあるので、それをクリックしてください。
クリックをすると、Pictureというフォルダが開きます、このフォルダに問題用の画像や動画を入れていきます。
Pictureフォルダに、チュートリアルフォルダのChapter1-2フォルダの動画・画像素材フォルダに入っている動画・画像素材の中にある動画・画像をすべてドラッグアンドドロップして移動させてください。
2-2 前面に画像を入れてみよう
まずは、前面画像を入れていきましょう。
タイプ問題「猫」を選択して、前面(画像・動画)項目のテキストボックス横にある追加ボタンをクリックしてください。
ファイルダイアログが出てきます。
今回は、猫のタイプ問題なので画像から猫_前面画像.webpをクリックして、開く(O)をクリックして開いてください。
画像が追加されると前面(画像・動画)のテキストボックスに開いた画像ファイル名(.\Pictures\猫_前面画像.webp)が入っているのを確認してください。
これで、タイプ問題に前面画像を追加することができました。
次に、背面(背景)を追加していきましょう。
2-3 背面に画像入れてみよう
次に背面画像を入れていきましょう。
タイプ問題「犬」を選択して、背面(画像・動画)項目のテキストボックス横にある追加ボタンをクリックしてください。
ファイルダイアログが出てきます。
今回は、犬をタイプしたので画像から犬_背面画像.webpをクリックして、開く(O)をクリックして開いてください。
画像が追加されると背面(画像・動画)のテキストボックスに開いた画像ファイル名(.\Pictures\犬_背面画像.webp)が入ってるのを確認してください。
これで、タイプ問題に背面画像を追加することができました。
最後に前面と背面両方に画像・動画を入れていきます。
2-4 前面に画像を背面に動画を入れてみよう
最後に前面と背面に画像と動画を入れていきましょう！
タイプ問題「ライオン」を選択して、前面(画像・動画)項目のテキストボックス横にある追加ボタンをクリックしてください。
ファイルダイアログが出てくるので、ライオン_前面画像.webpをクリックして、開く(O)をクリックして開いてください。
次に背面(画像・動画)項目のテキストボックス横にある追加ボタンをクリックしてください。
ファイルダイアログが出てくるので、ライオン_背面動画.webmをクリックして、開く(O)をクリックして開いてください。
どちらも開き終えると下の画像のように前面と背面のテキストボックスに追加したファイル名が入っているのを確認してください。
これですべてのタイプ問題に前面と背面画像・動画を入れ終えたので、確認をしていきましょう。
プペポタイピングを開いて問題をプレイしてみてください。
プレイをするとタイプ問題に沿った前面・背面(画像・動画)が表示されます。
もし表示されない項目があればその項目の作業が間違っている可能性があるのでもう一度確認し直ししてみてください。
今回作成した問題のフォルダはチュートリアルフォルダ内のChapter1-2フォルダ内に完成品(動物問題フォルダ)が入っているので、それを見ながら作成するのも有りです。
次の項目でタイプ問題に効果音を入れていきます。
3-0 タイプ問題に効果音を入れていこう
この項目では先ほど画像・動画を入れたタイプ問題に効果音を入れていきます。
3-1 ダウンロードした素材を効果音フォルダに移動
まず動物問題にダウンロードした効果音素材を入れていきます。
左メニューからフォルダを開くをクリックしてください
クリックすると「フォルダーを開く」の中身が展開され、サウンドフォルダというのがあるので、それをクリックしてください。
クリックをすると、Soundsというフォルダが開きます、このフォルダに問題用の効果音を入れていきます。
Soundsフォルダに、チュートリアルフォルダのChapter1-2フォルダに入っている音声素材フォルダの中にある効果音をすべてドラッグアンドドロップして移動させてください。
3-2 問題に効果音を入れてみよう
タイプ問題「猫」を選択して、タイプ問題編集画面を少し下にスクロールすると効果音の効果音があるので、効果音テキストボックス横の追加ボタンをクリックしてください。
ファイアダイアログが出てきます。
今回は、猫のタイプ問題なので、猫_効果音をクリックして、開く(O)をクリックして開いてください。
効果音が追加されると効果音のテキストボックスに開いた音声ファイル名(.\Sounds\猫_効果音.ogg)が入っているのを確認してください。
これでタイプ問題「猫」に効果音を追加することができました。
今までと同じ要領で、タイプ問題「犬」には「犬_効果音」を、タイプ問題「ライオン」には「ライオン効果音」を追加してみてください。
さいごに
すべて追加を終えたら、保存して問題をプレイしてみましょう！
プレイすると下の動画のようにタイプ問題に沿った動物の鳴き声が再生されます。
もし効果音が再生されない項目があればその項目の作業が間違っている可能性があるのでもう一度確認し直ししてみてください。
今回作成した問題のフォルダはチュートリアルフォルダ内のChapter1-2フォルダ内に完成品(動物問題フォルダ)が入っているので、それを見ながら作成するのも有りです。
わからないことがあったら
問題メーカーに関する更なる情報や、その他の問題解決方法については、以下のページを参照してください。
下のボタン先のページでは、問題メーカーの使い方に関する様々な情報が掲載されています。