m-School (エムスクール)は、駿河台学園グループが運営する
法人向け研修トレーニングセンター、およびレンタル教室・会議室です。

2010年11月10日

CaptivateでPresenter風のナビゲーションを作る方法

連載:eラーニング教材開発内製化支援の第29回です。今回は、Adobe CaptivateでAdobe Presenter風なナビゲーションを作る方法を紹介します。

Adobe Presenterのナビゲーション


まずは、Adobe Presenterのナビゲーションを見てみましょう。
Presenterってなに?という方はこちらをご確認ください。

nav01.gif

シナリオの画面があり、右側にナビゲーション用のボタンがあります。

Captivateで作るには


上記のようなCaptivateでも、[プロジェクト]→[目次]を行うだけでPresenter風のナビゲーションが作れますが、ナビの幅や高さ指定ができなく、ちょっと使いづらい場合があります。
そんな時にはこんな方法もあります。

まず、Captivate上に PowerPoint などのスライドを読み込みます。
この時、ナビゲーションの幅などは気にしなくて結構です。

nav02.gif

次に、[修正]→[プロジェクトのサイズを変更]をクリックします。
ここで、ナビゲーションを追加する分の横幅設定をします。

nav03.gif

次に、変更した大きさにあわせてプロジェクトの内容を変える必要はないため、「プロジェクトを同じサイズに保持し、位置を変更する」を選び、プロジェクトをどちらに寄せるか、位置の指定をします。

nav04.gif

設定するとこうなります。

nav05.gif

スライドの左側に空白ができましたね。

あとは、クリックボックスやボタンなどCaptivateの機能を使って配置していきます。

nav06.gif

かなり適当なデザインですが、画像など加えるともっとかっこよくなりますのでお試しください。

完成品はこちらでご覧いただけます。

今回はボタンだけですが動画を追加してもっと見栄えをよくすることもできますよ。

m-Schoolでは、Captivate 4 の講座をやってます!
m-Schoolでは定例でCaptivate4トレーニング(2日間)をやっています。操作方法はもちろん、制作するときのポイントも含め盛りだくさんの内容をご紹介いたします。短期間で集中して習得したい方はぜひご受講ください。
内容の詳細・申し込みはこちらからAdobe Captivate4トレーニング
posted by エンディー at 15:53
連載:eラーニング教材開発内製化支援 | コメント(0) | トラックバック(0)
2010年11月04日

いろいろ便利なCaptivateのクリックボックス

連載:eラーニング教材開発内製化支援の第28回です。さて今回は、Captivateでシミュレーションプロジェクトを作成する場合になくてはならない、クリックボックスの便利な使い方をご紹介します。

クリックボックスとは


Captivateのクリックボックスというと。シミュレーション機能で良く利用する、
サイズや位置の変更が可能なクリックが可能になる領域です。

click01.gif

これを一つ追加するだけで、プロジェクトの画面を停止させることができます。
通常は、アプリケーションの操作方法を実演するために使用します。
例えば、[ファイル]-[名前を付けて保存]という動作を、学習者にやってもらいたい場合、
まず[ファイル]メニューの上に、クリックボックスを配置します。

click02.gif

するとこの時点で、再生したときに画面が停止になり、学習者は[ファイル]メニューをクリックしないと先に進むことができなくなります。これが一般的な使い方ですが、クリックボックスはシミュレーション以外に使うこともできるとっても便利な機能です。

プレゼンテーションとして使う


Captivateでは、Microsoft PowerPoint と同様にプレゼン資料をCaptivateで作るということもできます。利点としては、最終出力をswf(Flash形式)で行うことができるため、ネット環境が整っている場所であればいつでもそのデータにアクセスしプレゼンを行うことができます。他にもプレゼンの後に、クイズやシミュレーションなど、Captivate独自の機能を追加することでPowerPointではできない表現を追加し、コンテンツを充実させることができます。

click03.gif
※左右に1つずつのクリックボックスを配置してプレゼンとして利用

Captivateは再生させると順々にスライドを再生してしまうため、クリックボックスを追加して画面を停止しています。上の図では2つのクリックボックスを追加しています。理由は、左のクリックボックスをクリックしたときには、前のスライドに戻る設定をしていて、右のスライドには次のスライドに進む設定をしています。このようにすることによって、前にも後ろにも進める動きが作れます。

ボタンとして使う


ボタンのデザインをしたいけど画像を用意するのが面倒。。。ということが良くあります、その時にもクリックボックスは活躍します。クリックボックスは無色透明な領域なので、テキストキャプションの上にクリックボックスを被せるだけでデザインされたボタンとして使えます。

click04.gif
※テキストキャプションの上にクリックボックスを配置

どんな場面でも画面を止めたいときに使う


ここで画面を止めたい!や、ロールオーバーキャプション、ロールオーバー画像を表示している最中に画面を止めたい!といったときにもクリックボックスは活躍します。クリックボックスの領域は、自由に拡大縮小できるので、わずか1ピクセルの領域を配置するだけでも止めることができます。ここでストップ!という時にはクリックボックスを使いましょう。

click05.gif
※画面の左下に小さい領域のクリックボックスを配置

と、いうことでクリックボックスはいろいろ使えるとっても便利な機能です。他にも考え方次第でまだまだ活用できると思います。是非お試しください!

m-Schoolでは、Captivate 4 の講座をやってます!
m-Schoolでは定例でCaptivate4トレーニング(2日間)をやっています。操作方法はもちろん、制作するときのポイントも含め盛りだくさんの内容をご紹介いたします。短期間で集中して習得したい方はぜひご受講ください。内容の詳細・申し込みはこちらからAdobe Captivate4トレーニング
posted by エンディー at 11:49
連載:eラーニング教材開発内製化支援 | コメント(0) | トラックバック(0)
2010年10月21日

複数のCaptivateプロジェクトをリンクして再生してみよう

連載:eラーニング教材開発内製化支援の第27回です。さて今回は、Adobe Captivate 5で、複数のCaptivateプロジェクト同士をリンクさせて再生させる方法をご紹介します。

Captivateでプロジェクトを作成する場合、一般的にはひとつのCaptivateプロジェクトにすべての内容を追加し、パブリッシュして終了。という使い方が多いと思います。ですがこの方法だと、スライド数が100枚以上にもなるような場合、プレビューで再生させるだけでも一苦労。たとえ苦労してパブリッシュをした完成品を再生してみたらロード時間が長すぎてしまい、再生が困難ということもあります。

ではどうしたらもっと効率よくなるかというと、プロジェクトを分割する方法オススメです。

例えば、導入→解説→クイズといったシナリオのコンテンツ.cpというファイルがあったとします。これをひとつだけのファイルで完結させるのではなく、導入だけで1ファイル「導入.cp」、解説だけで1ファイル「解説.cp」、クイズだけで1ファイル「クイズ.cp」に分割します。

そして、作成したファイルに対して、 「導入.cp」を見たら「解説.cp」を再生、そして「クイズ.cp」を再生する設定をします。

その様にすることによってファイル間同士で移動ができるため、ロード時間の短縮だけでなく、データ容量も低くおさえることができるため、効率良く作業ができるようになります。

では、どうやって作るか解説していきます。

まず、Captivateのプロジェクトファイルを準備します。
ここでは、A、B、Cというファイルに分けました。
※Captivate 5 から拡張子が、cp から cptx に変わりました。

bun01.gif

次に、Aのファイルを開き、[B.cptx]に移動する設定を[環境設定]で行います。

bun02.gif

Aのファイルをパブリッシュします。

bun03.01.gif

その際、フォルダーにパブリッシュのチェックは外しておきます。

bun03.02.gif

続いて、BとCのファイルも開き、移動設定を加え、Aと同じディレクトリにパブリッシュします。パブリッシュ後のフォルダは次のような形です。

bun04.01.gif

色々なファイルができましたね。
迷ってしまいそうなのでちょっと解説。

通常、Captivateで保存をすると、.cp または .cptx ファイルが作られます。このファイルは、Captivateを持ってる人だけが編集できる作業ファイルです。

Flash形式でパブリッシュをすることで、swfhtm のファイルもできあがります。swfはFlash形式の素材ファイル。htm は、Webページ上でswfファイルを閲覧するための、Webページの形式です。

通常swf形式は、そのファイル単体で動作する形式ではなく、大抵はhtmとセットで読み込みをします。そのため、今回の例でいうと

A.htmが開かれたらそこに、A.swfを読み込んでください。
それを読み込み終わったら、B.htmを開いて、そこにB.swfを読み込んでください。
続いて、それを読み込み終わったら、C.htmを開いて、そこにC.swfを読み込んでね!

ということになります。
言葉だけだとわかりにくいのでイメージするとこんな感じ。

bun04.02.gif

原理は簡単ですが、ここで一つ注意です。
前述の操作の中で、次に、Aのファイルを開き、[B.cptx]に移動する設定を[環境設定]で行います。の部分がありましたが、ちょっと違和感があると思いませんか??

何かというと、[A]のデータを見終わったら、[B.cptx]のファイルを開くようリンクの設定をしている所です。通常は、cptxにリンクをしても、Captivate作業用ファイルにリンクしているだけなので、当然[A]のファイルをパブリッシュしても、B.cptxを開くという解釈になります。
しかし、Captivateでは若干解釈が異なり[B.cptx]にリンクをしても、自動的に[B.htm]にリンクする設定に書き換わります。

bun04.03.gif

そのため、他のCaptivateファイルとリンクする場合は、リンク先のファイルも必ずパブリッシュをしておき、htm形式のデータを書き出しておく必要があります。

では、解説は終わりにしてパブリッシュしたA.htmを開いてみましょう。

完成系はこちらをクリック

こんな感じで、複数のプロジェクトをリンクしながら再生が簡単にできます。
是非おためしください。

番外編 Flashグローバルセキュリティ設定の変更



ブログ内の操作を試してみたけど、あれっ動かないぞ!?
と、以下のような画面になる場合があります。

bun05.gif

この場合、大抵Flash Playerのセキュリティの問題で表示ができなくなっています。
その様な時は、まず画面上で右クリックして[グローバル設定]を選択。

bun06.gif

グローバルプライバシー設定パネルをクリック。

bun07.gif

グローバルセキュリティ設定をクリック。

bun08.gif

常に許可をクリック。

bun09.gif

編集から追加をクリック。

bun10.gif

フォルダーを参照をクリック。

bun11.gif

上手く表示ができないコンテンツが格納されているフォルダを選択して[OK]。

bun12.gif

これで再生ができます!

m-Schoolでは、Captivate 4 の講座をやってます!
m-Schoolでは定例でCaptivate4トレーニング(2日間)をやっています。操作方法はもちろん、制作するときのポイントも含め盛りだくさんの内容をご紹介いたします。短期間で集中して習得したい方はぜひご受講ください。内容の詳細・申し込みはこちらからAdobe Captivate4トレーニング
posted by エンディー at 17:54
連載:eラーニング教材開発内製化支援 | コメント(0) | トラックバック(0)
2010年10月16日

Captivateのロールオーバー機能でちょっとひとネタ

連載:eラーニング教材開発内製化支援の第26回です。だいぶ期間が空いてしまいましたが、定期的に更新できるように続けていきます!さて、前回まではCS5が発売されて間もないということもあり、CS5の新機能についてCaptivateで記録した動画を紹介しておりました。ですが、もーそろそろ旬な時期も過ぎてしまいましたので、今回からはいろいろなCaptivateのネタを紹介できればと思っています。

ロールオーバー機能でひとネタ


Captivateはキャプチャした画面や、自分で作成した画面に対して、付加価値を加える機能がたくさんあります。

例えば
  • テキストキャプション
  • ハイライトボックス
  • クリックボックス
  • テキスト入力ボックス
  • ズーム領域
  • 画像
  • ロールオーバーキャプション
  • アニメーション
  • Flashビデオ
  • ボタン

などなど。。。

これらを追加することで、画面の表現力を高めることができますが、その中のロールオーバーキャプションやロールーバー画像を使うとインターフェイスの解説として使えそうな表現ができます。



これらは一見、たくさんのスライドを使っているように見えますが、
スライド数はタイトル画面と解説画面の2スライドだけです。

v2601.jpg

タイムラインはこんな感じです。

v2602.jpg

この設計のポイントは、ロールオーバー機能は画面停止処理が掛かりませんので、プロジェクトの最後の方でクリックボックスを追加して停止の制御を入れています。

こちら紹介した動画を作りたいなら、 Captivateの短期習得講座がオススメです。m-Schoolでは定例でCaptivate4トレーニング(2日間)をやっています。操作方法はもちろん、制作するときのポイントも含め盛りだくさんの内容をご紹介いたします。Captivate5をお持ちの方でも基本の記録方法に関しては同じなので、安心してご受講いただけます。内容の詳細・申し込みはこちらからAdobe Captivate4トレーニング
posted by エンディー at 17:20
連載:eラーニング教材開発内製化支援 | コメント(0) | トラックバック(0)
2010年08月31日

Contribute CS5 の基本操作をしてみた動画

連載:eラーニング教材開発内製化支援の第25回です。今回はAdobe Creative Suite Web Premium CS5に含まれているContribute CS5(コントリビュート)を使ってみました。

基本は見て・編集して・公開するの3ステップ


普段の連載では、新機能紹介をメインにしていますが、Contribute CS5の新機能は!といってもピンとくる方はなかなかいないと思います。
それよりもContributeってなに?という人の方が多いと思いますので、今回はContributeの使い方Adobe Captivateで撮ってみました。

Contributeとは?


Contributeは、「見る・編集・公開」という3ステップの簡単操作でサイトやブログの更新管理が行える簡易ホームページ更新ソフトです。
複数の人とサイトの更新作業を行う場合や、日常的に更新作業をしなければ行けないサイトの場合にとくに力を発揮します。Dreamweaverよりも安価で購入できるところも魅力のひとつです。



操作方法


1.Webサイトを表示します。
※動画ではローカルフォルダのデータを参照していますが、一般的にはWebサーバー内の実際のWebページを参照します。
2.サイトが表示された後、編集したいWebページを開きます。
3.[ページを編集]をクリックします。
4.ページを編集します。
5.編集完了後、[ページを公開]をクリックします。
※これでWebサーバー内のHTMLファイルが上書きされ、ページの更新作業が完了します。

こちら紹介した動画を作りたいなら、 Captivateの短期習得講座がオススメです。
m-Schoolでは定例でCaptivate4トレーニング(2日間)をやっています。操作方法はもちろん、制作するときのポイントも含め盛りだくさんの内容をご紹介いたします。Captivate5をお持ちの方でも基本の記録方法に関しては同じなので、安心してご受講いただけます。内容の詳細・申し込みはこちらからAdobe Captivate4トレーニング
posted by エンディー at 17:08
連載:eラーニング教材開発内製化支援 | コメント(0) | トラックバック(0)
2010年08月24日

Acrobat 9 Pro 新機能ポートフォリオ使ってみた動画

連載:eラーニング教材開発内製化支援の第24回です。Adobe Creative Suite 5 Premiumシリーズ(CS5)に含まれているAcrobat 9 Pro(アクロバット9プロ)の新機能を使ってみました。

PDF ポートフォリオの作成


今回はAcrobat9の新機能を紹介いたしますが、Acrobatについてもっと詳しく知りたい!という方は、「Acrobat 9入門講座」や、m-Schoolのデベロッパー記事「今さら聞けない Adobe Acrobat & PDF」で詳しく紹介をしてますので参考にしてみてくださいね!

では、本題のPDFポートフォリオとはなにかというと、ひとつのPDFファイルの中に、Word・Excel・PDF・動画などのあらゆるファイルを添付させ、ひとつのPDFファイルにまとめあげることができる機能です。乱雑になったファイルをひとつのファイルとしてまとめておくことができるため効率よくファイルを管理することができます。



操作方法


1.ポートフォリオを新規に作成します。
2.まとめたいファイルを複数選択して読み込みます。
3.表示効果や全体の色合い等を変更します。
4.保存して作成したポートフォオファイルを開きます。
5.確認したいデータをダブルクリックして個々のファイルを開きます。

こちら紹介した動画を作りたいなら、 Captivateの短期習得講座がオススメです。
m-Schoolでは定例でCaptivate4トレーニング(2日間)をやっています。操作方法はもちろん、制作するときのポイントも含め盛りだくさんの内容をご紹介いたします。Captivate5をお持ちの方でも基本の記録方法に関しては同じなので、安心してご受講いただけます。内容の詳細・申し込みはこちらからAdobe Captivate4トレーニング
posted by エンディー at 15:01
連載:eラーニング教材開発内製化支援 | コメント(0) | トラックバック(0)
2010年08月11日

FlashCS5 新機能 air2.0書き出しをしてみた動画

連載:eラーニング教材開発内製化支援の第23回です。今回は、Adobe FlashCS5(アドビ フラッシュCS5)の新機能を使ってみました。

AIR2.0ファイルの作成


本ブログの連載にて、FlashCS5でAndroidアプリを書き出す方法は既にFlash CS5でAndroidアプリ開発:パブリッシュ編!で紹介済みでしたので、ここではAIR2.0の書き出しをやってみました。AIRコンテンツの書き出し方法はFlashCS4でも行えますが、CS5からAIR2.0の書き出しが行えるようになっています。



操作方法


1.新規ファイルAir2.0で作成します。
2.通常のFlash制作と同じようにコンテンツを作成します。
3.パブリッシュの設定をします。
4.AIRファイルの書き出しには、電子証明書が必要なため証明書を持っていない場合は作成します。
5.パブリッシュをします。
6.書き出された.airをインストールします。

Captivateの短期習得講座をやってます。
m-Schoolでは定例でCaptivate4トレーニング(2日間)をやっています。操作方法はもちろん、制作するときのポイントも含め盛りだくさんの内容をご紹介いたします。Captivate5をお持ちの方でも基本の記録方法に関しては同じなので、安心してご受講いただけます。内容の詳細・申し込みはこちらからAdobe Captivate4トレーニング
posted by エンディー at 15:30
連載:eラーニング教材開発内製化支援 | コメント(0) | トラックバック(0)
2010年07月27日

DreamweaverCS5 新機能 BrowserLabを使ってみた動画

連載:eラーニング教材開発内製化支援の第22回です。今回は、Adobe DreamweaverCS5(アドビ ドリームウィーバー5)の新機能ムービーです。

複数のブラウザで同時にプレビュー


Dreamweaverは完成度が高い製品のため、新機能のほとんどはかゆいところに手が届く的な機能が多いですが、その中でもBrowserLab(ブラウザラボ)に関してはかなりかゆいところをカバーした機能ではないでしょうか?
BrowserLabは、Internet Explorer、Firefox、Safari、Chromeの複数のバージョンでWebページを表示した場合のスクリーンショットが確認できる、クロスブラウザーテストサービスです。いままで複数のブラウザをインストールしてプレビューしていた方にとっては、目からウロコの機能ですね。




操作方法


1.Dreamweaverで確認したいサイトを開きます。
2.[ブラウザでプレビュー]をクリックし、[Adobe BrowserLab]をクリックします。
3.[表示]から切り替えたい画面数を選択します。
4.ブラウザの名称を切り替え、内容を確認します。

Captivateの短期習得講座をやってます。
m-Schoolでは定例でCaptivate4トレーニング(2日間)をやっています。操作方法はもちろん、制作するときのポイントも含め盛りだくさんの内容をご紹介いたします。Captivate5をお持ちの方でも基本の記録方法に関しては同じなので、安心してご受講いただけます。内容の詳細・申し込みはこちらからAdobe Captivate4トレーニング
posted by エンディー at 15:55
連載:eラーニング教材開発内製化支援 | コメント(0) | トラックバック(0)
2010年07月21日

Captivate5 新機能 アニメーションエフェクトを使ってみた動画

連載:eラーニング教材開発内製化支援の第21回です。今回は、今月発売されたばかりのAdobe Captivate 5(アドビ キャプティベイト5)の新機能ムービーです。

アニメーションエフェクトでキャプションに動きをつけてみた


Captivate5の新機能については、発売まで待ちきれない!Adobe Captivate 5 新機能紹介で投稿しましたが、今回は実際の操作方法をCaptivateで記録しました。Captivate4まではテキストアニメーションを使うことで、入力した文字だけをアニメーションさせる方法がありましたが、Captivate5で追加された機能を使用することで、各種オブジェクトにFlashのようなモーショントゥイーンアニメーションのエフェクトを加えることができるようになりました。




操作方法


1.テキストキャプションなどのオブジェクトを追加し、選択します。
2.[タイムライン]パネルの隣にある、[エフェクト]パネルをクリックします。
3.[エフェクト]ボタンから追加したいエフェクトを選びます。
4.エフェクトを実行したいタイミングをタイムラインで調整します。
5.[ライブプレビュー]または[プレビュー]で内容を確認します。

Captivateの短期習得講座をやってます。
m-Schoolでは定例でCaptivate4トレーニング(2日間)をやっています。操作方法はもちろん、制作するときのポイントも含め盛りだくさんの内容をご紹介いたします。Captivate5をお持ちの方でも基本の記録方法に関しては同じなので、安心してご受講いただけます。内容の詳細・申し込みはこちらからAdobe Captivate4トレーニング
posted by エンディー at 11:37
連載:eラーニング教材開発内製化支援 | コメント(0) | トラックバック(0)
2010年07月07日

Illustrator CS5 新機能 遠近グリッドの使い方動画

連載:eラーニング教材開発内製化支援の第20回です。今回もAdobe CreativeSuite5(CS5)を題材にCaptivate 4で記録したムービーをご紹介します。

Adobe Illustrator CS5 で立体感のあるイラストを書いてみた


Adobe Illustrator CS5から、遠近グリッドが搭載されました。この機能を使うと立体感のあるイラストの制作が可能になり、奥行きのある描画が可能になります。[表示]メニュー[遠近グリッド]から「一点遠近法」・「二点遠近法」・「三点遠近法」の選択もできます。




操作方法


1.ツールパネルの[遠近グリッドツール]をクリックします。
2.矩形ツールなど描画ツールを選択し、立体になる面を作成します。
3.画面左上に表示される立方体の面の部分をクリックすると、描画する面を切り替えることができます。
4.既存のグラフィックを、立体にする場合は、[遠近図形選択ツール]を選択して、グラフィックをドラッグします。

Adobe Illustrator CS5制作テクニック講座がおすすめ
m-Schoolでは定例でIllustratorCS5のトレーニングを開催しています。いままでIllustratorを触ったことがあるけれど、操作方法に自身がない。。。基礎が身についていないと、感じている方にぴったりの脱初心者向け講座です。内容の詳細・申し込みはこちらからAdobe Illustrator CS5目指せ、脱初心者!制作テクニック講座

Captivateの短期習得講座もやってます。
m-Schoolでは定例でCaptivate4トレーニング(2日間)をやっています。操作方法はもちろん、制作するときのポイントも含め盛りだくさんの内容をご紹介いたします。短期間で集中して習得したい方はぜひご受講ください。内容の詳細・申し込みはこちらからAdobe Captivate4トレーニング
posted by エンディー at 15:09
連載:eラーニング教材開発内製化支援 | コメント(0) | トラックバック(0)