V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

ViewletBuilder8
プロフェッショナル

ユーザーズガイド

Page1

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

お読みくださいこのユーザーズガイドに記載の情報は変更することがあります。その際、予告のないこともあります。
特に記述のない場合、このユーザーズガイドで使用するデータの名称、画像の情報などは解説の便宜上、架空のものを使用している箇所もあります。それらは実在する名称等とは関係ありません。
本ガイドでは、ビューレットビルダー８プロフェッショナルの実際の画面を使用して図を掲載し、機能を説明しています。（平成 2６年７月 11 日現在）
本書のいかなる部分も、その目的や形態（複写や記録、電子的・物理的な全ての手段を含む）がどのようなものであっても、株式会社ウェブデモの書面による許諾を受けることなく複製または譲渡をすることを禁じます。ただし著作権法上のお客様の権利を制限するものではありません。
Microsoft®、Windows®は米国 Microsoft Corporation の米国およびその他の国における登録商標です。
Windows®の正式名称は Microsoft Windows Operating System です。

ViewletBuilder®は Qarbon, Inc. の登録商標です。

その他本書に記載の会社名、製品名およびサービス名等は各社の商標または登録商標です。

©201４ Webdemo Inc. All rights reserved.

Page2

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

目次
お読みください ················································································· 2
ガイドの表記について ······································································· 11
システム概要 ·················································································· 13
ソフトウェアのダウンロードとインストール ·········································· 14
ライセンス認証 ··································································································· 15
オンラインでの認証方法 ················································································ 15
オフライン環境でのライセンス認証 ································································· 17
認証の解除 ································································································· 20
オフライン環境でのライセンス認証解除 ···························································· 21

インターフェース ············································································ 24
起動画面 ···································································································· 24
プロジェクト編集時のインターフェース ···························································· 25

ビューレットビルダー8 の基本設定 ······················································ 26
基本設定の保存···························································································· 28

Viewlet の製作手順の基本 ································································· 29
新規プロジェクトの作成 ···································································· 30［NEW プロジェクトを作る］パネル ······································································· 30

スクリーンキャプチャプロジェクトを作成する ······································· 31［オプション］タブ ····························································································· 31［キャプチャ］タブ ····························································································· 32
キャプチャ範囲の設定 ··················································································· 32［キャプチャモード］欄 ················································································ 35
キャプチャモードの追加・編集 ······································································· 37
スクリーンキャプチャのオプション設定 ··································································· 38［キャプチャモード:］の選択 ········································································· 38［一般］タブ ······························································································ 39［フィードバック］タブ ················································································ 40［マウス］タブ···························································································· 41［ホイール］タブ（スマートキャプチャモードのみ） ·········································· 42［キーボード］タブ（スマートキャプチャモードのみ） ······································· 42［注釈］タブ（スマートキャプチャモードのみ） ················································ 43
Page3

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［アドバンス］タブ ······················································································ 43
スクリーンショットの開始（スマートキャプチャおよびマニュアルキャプチャ） ··············· 44
スクリーンキャプチャの終了 ·········································································· 46

ビデオキャプチャプロジェクトを作成する ············································· 48［オプション］タブ ····························································································· 49［キャプチャ］タブ ····························································································· 49
キャプチャ範囲の設定 ··················································································· 49［キャプチャモード］欄 ················································································ 49
キャプチャモードの追加・編集 ······································································· 49
ビデオキャプチャのオプション設定 ········································································· 50［一般タブ］ ······························································································ 50［フィードバック］タブ ················································································ 51［マウス］タブ···························································································· 51［アドバンス］タブ ······················································································ 51
ビデオキャプチャの開始 ······················································································· 53
ビデオキャプチャの終了 ················································································ 54

イメージプロジェクトを作成する ························································ 55［画像イメージ］タブ ·························································································· 56［オプション］タブ ····························································································· 56［スライド］タブ ································································································ 57［ナビゲーション］タブ ······················································································· 57
イメージプロジェクトの開始 ················································································· 57

白紙のプロジェクトを作成する ··························································· 58［スライド］タブ ································································································ 59［オプション］タブ ····························································································· 59
白紙のプロジェクトの用途 ···················································································· 60

新規プロジェクトの保存 ···································································· 61
タブツールを使用してスライドを編集する ············································· 62
タブの表示切り替え ······················································································ 63［ブラウザ］タブ ································································································ 65［スライド］タブ ································································································ 67［タイムライン］タブ ·························································································· 68［スタイルシート］タブ ······················································································· 71
Page4

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［新規スタイルシート］ ················································································ 72［スタイルシート名の変更］ ·········································································· 72
スタイルの適用···························································································· 73［スライドメモ］タブ ·························································································· 77

スライドを編集する·········································································· 78
スライドプロパティの編集 ···················································································· 79
スライドの表示／非表示の切り替え ········································································· 79
スライドの複製 ··································································································· 80
スライドカラーの変更 ·························································································· 80
スライドの背景画像 ····························································································· 82
スライドの移動 ··································································································· 83
スライドの削除 ··································································································· 83
プロジェクトのリサイズ ······················································································· 84
プロジェクトのトリミング ···················································································· 85
新たなスライドの追加 ·························································································· 86
空白スライドの追加 ······················································································ 86
スクリーンキャプチャスライドの追加······························································· 86
ビデオスライドの追加 ··················································································· 86
画像スライドの追加 ······················································································ 87
スライドを印刷する ····························································································· 88
印刷レイアウト···························································································· 88
目次の設定········································································································· 89
色の吸着 ··········································································································· 90
検索と置き換え ··································································································· 91
検索 ·········································································································· 91
置換 ·········································································································· 92
拡大表示・縮小表示・スライドビューにフィット ······················································· 93
スライドのプレビュー ·························································································· 94

メッセージオブジェクトの挿入 ··························································· 95
吹き出しの挿入 ··································································································· 95
背景色の変更 ······························································································ 96
テキストの編集···························································································· 96
影をつける ································································································· 97
ロールオーバー領域 ······················································································ 98
Page5

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

吹き出しにサウンドを設定する ······································································· 99
オブジェクトの位置、サイズ合わせ ································································ 100
メモの挿入········································································································ 101
テキストボックスの挿入 ······················································································ 101

メッセージオブジェクトの編集 ························································· 102
メッセージタイプの変更 ······················································································ 102
スタイルシートのメッセージオブジェクトへの適用 ··················································· 102
プロパティの変更 ······························································································· 103
メッセージオブジェクトの移動·············································································· 103
メッセージオブジェクトの削除·············································································· 103
メッセージオブジェクトのタイミング ····································································· 104
プロパティからの調整 ·················································································· 104［タイムライン］タブ内での調整 ··································································· 105

カーソルの挿入 ············································································· 106
カーソルの挿入 ·································································································· 106
カーソルのパス（軌跡） ······················································································ 107
パス形状の変更··························································································· 107
カーソルパスの削除 ····················································································· 107
ポイントの追加 ·································································································· 107
ポイントの削除··························································································· 107
クリックの追加 ·································································································· 108
クリックの削除··························································································· 108
カーソルスタイル ······························································································· 109
カーソル形状の変更 ····················································································· 109

サウンドの挿入 ············································································· 110
スライドのサウンド ···························································································· 110
オブジェクトのサウンド ······················································································ 112
サウンドの挿入··························································································· 112
サウンドの録音 ·································································································· 113
サウンドファイルの再生 ··············································································· 114
サウンドファイルの削除 ··············································································· 115

画像オブジェクトの挿入 ·································································· 116
画像の挿入········································································································ 116
Page6

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

画像の編集········································································································ 116
画像オブジェクトのプロパティ·············································································· 119

形状オブジェクトの挿入 ·································································· 120
長方形ツール ····························································································· 121
楕円ツール ································································································ 121
フリーハンドツール ····················································································· 122
多角形ツール ····························································································· 122
形状オブジェクトの編集 ······················································································ 123
形状オブジェクトのプロパティ·············································································· 125

矢印ツール ··················································································· 126
ラインツール ················································································ 127
カラーハイライト ·········································································· 128
マット ························································································· 129
オブジェクトのタイミング ······························································· 130［タイムライン］タブ内での調整··········································································· 130
複数オブジェクトの調整 ······················································································ 131
タイミングリンク ······························································································· 132
タイミングリンクの追加 ··············································································· 132
タイミングリンクの解除 ··············································································· 133

ムービーの埋め込み········································································ 134
ムービーのプロパティ ·················································································· 135

ポップアウトハイライトの配置 ························································· 137
ポップアウトハイライトの編集 ······································································ 137
ポップアウトハイライトのプロパティ······························································ 137

ズームの挿入 ················································································ 138
ズームのプロパティ ····················································································· 139
ズームのプレビュー ····················································································· 139
オブジェクトへの影響と調整について······························································ 140
拡大表示をもとに戻す ·················································································· 140
ズームの取消 ····························································································· 140

ボタンオブジェクトの挿入 ······························································· 141
ボタンオブジェクトのプロパティ··········································································· 142
Page7

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

ボタンの編集 ····································································································· 143
スタイルの変更··························································································· 143

イベントとアクション ····································································· 144
イベントとアクションの一覧 ········································································· 144
ボタンのイベント ························································································ 145
スライドのイベント ····················································································· 145
画像・形状オブジェクトのイベント ································································ 146
アクション········································································································ 147
アクション一覧··························································································· 148
順序の変更 ································································································ 149
アクションの編集 ························································································ 149
アクションの削除 ························································································ 149

ハイパーリンク ············································································· 150
メッセージのハイパーリンク（テキストリンク） ······················································ 150

インタラクティブゾーン ·································································· 152
インタラクティブゾーンの種類·············································································· 152
スライドに含まれるインタラクティブゾーンの数 ··············································· 153
サウンドの付加··························································································· 153
応答メッセージオブジェクト ········································································· 153
イベントとアクション ·················································································· 154
スコアリング ····························································································· 155
クリック範囲型クイズゾーン ················································································ 156
クリック範囲のプロパティ ············································································ 156
クリック範囲の編集 ····················································································· 158
テキスト入力型クイズゾーン ················································································ 159
クイズゾーンの編集 ····················································································· 159
クイズオブジェクトの削除 ············································································ 160
キー入力型クイズゾーン ······················································································ 161
キーストロークの定義 ·················································································· 161
選択型クイズゾーン ···························································································· 162
質問のメッセージオブジェクトの編集······························································ 162
選択肢の追加 ····························································································· 162
選択肢の削除 ····························································································· 162
正否の設定 ································································································ 163
Page8

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

選択肢のメッセージオブジェクトの編集 ··························································· 163
解答確定のボタンオブジェクトの編集······························································ 163
チェックボックスのスタイルを変更する ··························································· 163
クイズゾーンの削除 ····················································································· 164
一時停止ゾーン ·································································································· 165
一時停止ゾーンの挿入 ·················································································· 165
一時停止ゾーンの編集 ·················································································· 166
一時停止ゾーンの削除 ·················································································· 166

インポート ··················································································· 167
他のプロジェクトからのインポート ········································································ 167
解像度の違うプロジェクトの設定··········································································· 168
XML ファイルのインポート ·················································································· 168

エクスポート ················································································ 169
XML ファイルの出力 ··························································································· 169
サウンドの出力 ·································································································· 169

プロジェクトのプロパティ ······························································· 170［Viewlet プロファイル］ ···················································································· 171［画質］ ·········································································································· 173［音質］ ·········································································································· 174［Viewlet サウンド］·························································································· 175［タイミング］ ·································································································· 176［Viewlet オプション］ ······················································································· 177［質問オプション］ ···························································································· 180［言語］ ·········································································································· 184［ViewletSkin］ ································································································ 186［HTML フレーム］ ···························································································· 188
プロパティを保存する ························································································· 189

Viewlet のパブリッシュ ·································································· 190
パブリッシュとは ······························································································· 190
保存先の追加 ····························································································· 191
Flash ムービー ·································································································· 192
SWF 形式 ·································································································· 192
FLV 形式でパブリッシュ ··············································································· 194
Page9

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

YouTube に公開 ································································································ 195
Facebook に公開 ······························································································· 197
ワードに出力する ······························································································· 199
PDF に出力する ································································································· 202
画像ファイルとして出力する ················································································ 203
HTML に出力する ······························································································· 205
EXE 形式、hqx 形式で出力する ············································································· 206
SCORM 形式、AICC 形式で出力する ······································································ 207
Qarbon ViewletCentral とコーポレイト ViewletCentral について ································ 208

ビューレットビルダー8 のプロジェクトを構築するファイル ···················· 209
旧プロジェクトのデータを読み込む ··················································· 210
ビューレットビルダー7 からビューレットビルダー8 のデータにコンバートする ······· 210

ソフトウェアアップデート ······························································· 211
最新版の確認 ····································································································· 211

ビューレットビルダー・サポートデスク ·············································· 212
最新情報 ·········································································································· 212
動画マニュアル.com ··························································································· 212

各種サービスのご案内 ····································································· 213
セミナー ·········································································································· 213
トレーニング ····································································································· 213
ムービー制作サービス ························································································· 213

Page10ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

ガイドの表記について
名称［］で囲まれています。
メニュー名、パネルタイトル、ボタン名、フィールド名、ツールチップなど。
例：［プロジェクトのプロパティ］パネル、［OK］ボタン、［新規作成...］メニューコマンドメニューバーからのコマンド選択を次のように記述します。

例：メニューバーから［編集］→［基本設定...］を選択します。

メニューバーの［編集］をクリックして表示された項目の中から［基本設定...］を選択する、という操作を表します。
マウス操作
ポイント
マウスカーソルをあてる動作。
クリック（あるいは､シングルクリック）
マウスのボタンを押して、すぐに離す動作。
ダブルクリック
マウスのボタンをすばやく２回クリックする動作。
ドラッグ
マウスのボタンを押したまま移動する動作。
ドラッグ・アンド・ドロップ
マウスのボタンを押したまま移動し、適所でマウスボタンを離す動作。
キーボード・キー入力
プラスの記号でキー操作の組み合わせを表します。

例：［Shift］＋［Ctrl］キー［Shift］キーを押しながら［Ctrl］キーを押すことを表します。
Page11

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

ガイド
操作のポイント、コツなど情報を説明しています。
注意すべき点のあるときに説明しています。
操作方法や準備のように便利な情報を説明しています。
その他の表記について
上記以外の表記については、本書内でその都度説明しています。
リンクについて
本書の電子文書（PDF）では、参照語句はリンクが定義されています。クリックすると関連項目のタ
イトルにジャンプします。

Page12

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

システム概要ビューレットビルダー8 に必要な機能とスペックは次の通りです。
基本スペック■OS：

WindowsVista／Windows７／８／8.1（32bit および 64bit）■CPU：Intel P4、Intel Centrino、Intel Xeon、Intel Core Duo（または同等の CPU）

■メモリ：1GB 以上推奨
■解像度：800×600 以上、推奨 1024X768 以上
ビデオボード：16bit 色以上■インターネット接続環境（ライセンス認証に必要です）■入力フォーマット
画像フォーマット：PNG／GIF／JPG／BMP／TIFF
音声フォーマット：WAV／MP3／AU／Aif／RAW■出力フォーマット
動画フォーマット：Flash8、SWF ファイル、FLV フォーマット、H.264、MEG-4
印刷・画像フォーマット：PDF、JPEG、TIFF、BMP、PNG、RTF（MSword）

Page13ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

ソフトウェアのダウンロードとインストール
ビューレットビルダー８の最新バージョンは株式会社ウェブデモのサイト内にあります。ダウンロー
ドしてご利用ください。ダウンロードしたビューレットビルダー８をインストールすると全ての機能を使用することができます。
ビューレットビルダー８のページ：http://www.webdemo.co.jp/vb8/

ダウンロード後、exe ファイルをダブルクリックしてインストールを開始します。

表示されるパネルの内容に従って操作します。
インストールが終了したら、［完了］ボタンをクリックします。
体験版でコンパイルされたムービーには透かしのロゴマークが貼られます。
透かしマークのない Viewlet を作成するにはライセンスを購入し、認証を得る必要があります。

Page14ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

ライセンス認証
オンラインでの認証方法
ビューレットビルダー８を起動します。
メニュー画面の［ライセンス認証...］をクリックします。
この項目が［ライセンス認証解除...Licensed］となっている場合はライセンス認証が完了しています。

［ViewletBuilder7 アクティベーション］パネルが表示されます。
ここからはパネルの指示に従って操作します。

ライセンスコードは半角英数字になっています。入力は正確に行ないます。
［次へ＞］ボタンをクリックして進みます。
インターネット経由で Qarbon 社認証サーバーへ接続されて認証が行なわれます。
Page15ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

認証が正常に完了するとパネルが表示されます。

セキュリティの観点から上図では表示されていたデータを伏せるよう加工しています。実際はここに登録者の入力した情報が表示されています。
［終了］ボタンをクリックします。
認証が完了しました。

Page16

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

オフライン環境でのライセンス認証
インターネットに接続されていない場合の認証方法を説明します。
この操作にはインターネットに接続されている別のコンピュータが必要になります。
ビューレットビルダー8 を起動します。
メニュー画面の［ライセンス認証…］をクリックします。
［ViewletBuilder8 アクティベーション］パネルが表示されます。

取得している［ライセンスコード］を入力します。
［web で認証する...］リンクをクリックします。

［登録］項目が表示されます。
［名前］、［団体名］、［EMAIL］を入力し、［次へ ＞］ボタンをクリックします。

Page17

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［web 認証］の項目がパネル内に表示されます。

［ステップ１：］欄のボックスに URL が表示されています。
この文字をすべてコピーしてテキストエディタなどに貼りつけます。フォルダアイコンをクリックす
ると WEB ブラウザが起動します。URL アドレスのボックスをクリックし［CTrl］＋［A］キーを押してすべてを選択します。そのまま［CTrl］＋［C］キーを押してコピーします。
メモ帳、テキストエディタソフトなどを使用して、コピーした内容を保存します。

インターネットに接続されているコンピュータで、WEB ブラウザを起動します。
アドレスバーにコピーした URL を張り付けます。

Web Activation ページが表示されたら、［Submit］ボタンをクリックします。

Page18ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［Confirmation Code］欄に認証確認コードが表示されます。

この Confirmaton code:］欄の文字列をすべてコピーします。
ボックスをクリックし［CTrl］＋［A］キーを押してすべてを選択します。そのまま［CTrl］＋［C］
キーを押してコピーします。
メモ帳、テキストエディタソフトなどを使用して、コピーした内容を保存します。

元のコンピュータに戻り、［ViewletBuilder8 アクティベーション］パネルの［ステップ 3：］欄のボックスに認証確認コードを張り付けます。

［次へ ＞］ボタンをクリックします。
［成功 認証が成功しました］と表示されたら認証完了です。

Page19ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

認証の解除
他の PC にアプリを移動する場合は一旦認証を解除してから他の PC に移動する必要があります。

ビューレットビルダー8 を起動します。
メニュー画面の［ライセンス認証解除...］をクリックします。
この項目が［ライセンス認証...Unlicensed］となっている場合はライセンスが認証されていません。認証解除操作は必要ありません。

［ViewletBuilder8 認証解除］パネルが表示されます。登録されている認証情報が表示されています。
［次へ＞］ボタンをクリックします。

Qarbon 社認証サーバーへ接続されて認証の解除が行なわれます。

解除手続きが正常に完了したことを表示されるパネルで確認し、［終了］ボタンをクリックします。

Page20ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

オフライン環境でのライセンス認証解除
ビューレットビルダー8 をインストールしたコンピュータが、インターネットに接続されていない場
合のライセンス認証解除方法を説明します。
この操作には、インターネットに接続されているコンピュータが必要になります。
ビューレットビルダー8 を起動します。
メニュー画面の［ライセンス認証解除…］をクリックします。
［ViewletBuilder7 認証解除］パネルが表示されます。

［web で認証解除する...］をクリックします。
［web 認証解除］の項目がパネル内に表示されます。

［ステップ１：］欄のボックスに URL が表示されています。
この文字をすべてコピーしてテキストエディタなどに貼りつけます。フォルダアイコンをクリックす
ると WEB ブラウザが起動します。URL アドレスのボックスをクリックしてから［CTrl］＋［A］
キーを押してすべてを選択します。そのまま続けて［CTrl］＋［C］キーを押してコピーします。
メモ帳、テキストエディタソフトなどを使用して、コピーした内容を保存します。
Page21

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

インターネットに接続されているコンピュータで、WEB ブラウザを起動します。
アドレスバーにコピーした URL を張り付けます。

Web Deactivation ページが表示されたら、［Submit］ボタンをクリックします。
［Confirmation Code］欄に解除確認コードが表示されます。

この Confirmaton code］欄の文字列をすべてコピーします。
ボックスをクリックし［CTrl］＋［A］キーを押してすべてを選択します。そのまま［CTrl］＋［C］
キーを押してコピーします。
メモ帳、テキストエディタソフトなどを使用して、コピーした内容を保存します。

元のコンピュータに戻り、［ViewletBuilder8 認証解除］パネルの［ステップ 3：］欄のボックスに
認証解除の確認コードを張り付けます。

Page22

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［次へ］ボタンをクリックします。
［成功 認証解除が成功しました］と表示されたら認証解除完了です。

Page23ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

インターフェース
起動画面
ビューレットビルダー8 を起動すると、次のような画面が表示されます。

上図はライセンス認証が完了している場合の画面一例です。
タイトルバー

メニューバー

Page24ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

プロジェクト編集時のインターフェース①ボタンコマンドツールバー
プロジェクト作成や保存、編集から出力まで基本的な操作を呼び出します。
②連動ツールバー
プロジェクトを開くと表示されるツールバー。コマンドに連動してさまざまなボタンアイコンが表示されます。
③オブジェクトツールバー
スライド上にオブジェクトを配置するコマンドのボタンアイコンです。
④スライドビュー
スライドへのオブジェクトの追加や編集の作業領域です。プレビューの領域にもなります。
⑤タブ表示
スライドビューの左側および下部に表示されています

Page25ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

ビューレットビルダー8 の基本設定
言語の選択、録音時のカウントダウン、スペルチェック、プロキシ情報、ログファイル、バックアップ、起動画面の表示項目 Java に関する設定を行ないます。

メニューバーから［編集］→［基本設定…］を選択します。
［基本設定］パネルが表示されます。

以下、各タブの内容です。
［一般］タブ［言語］欄：ビューレットビルダー8 で使用する言語です。デフォルトとして OS と同じ言語が選択されています。
［ドキュメントのディレクトリ］欄：プロジェクトに関するファイルやイメージファイルなどのライ
ブラリのロケーション設定です。
［テキストの編集］欄：吹き出し、メモ、テキストを直接オブジェクトに入力する場合は［直接編集する］を選択します。［テキストエディタを使用する］オプションを選択するとエディタが自動的に起動します。

Page26

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［目次］タブ
目次の作成に関する設定です。
［スペル］タブ
スペルチェック機能の設定です。
ドロップダウンリストからスペルチェックに使用する辞書（言語）を選択します。
日本語(２バイト文字)は対応していません。英語・スペイン語・フランス・イタリ
ア他 9 カ国の言語に対応しています。
［proxy］タブ
ご自分のサーバーにアクセスし、動画を自動アップロードする設定です。
サーバーのアドレス、ポート、パスワード、Proxy 情報を予め設定します。
［ロギング］タブ［アウトプットウィンドウ］欄：
ドロップダウンリストからオプションを選択します。

［アウトプット］タブの内容をいったん消去す
るには［アウトプットウィンドウをクリアする］ボタンをクリックします。
［ログファイル］欄：アウトプットウィンドウに表示される内容をファイルに保存するためのオプションです。［有効］チェックボックスをオンにすると［フォルダ：］ボックスで指定したファイルに記録されます。
［バックアップ］タブ
プロジェクトファイルのバックアップ保存に関するオプション設定です。

バックアップファイルの拡張子は.qvpx.BAK になります。

Page27

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［起動ページ］タブ
ビューレットビルダー8 起動画面で表示する情報を設定することができます。
［ビュー］欄：表示項目とレイアウト、最大復元回数（UNDO 回数）の設定です。

［パブリッシュ履歴：］欄：パブリッシュ履歴を項目ごとに表示・非表示にすることができます。

［アドバンス］タブ
Java に関するオプション設定です。
［基本設定］パネルの［アドバンス］タブを選択します。
［Java の設定を変更する］ボタンをクリックします。
［Java 設定］パネルが表示されます。

［メモリ］欄：メモリの使用領域を指定することができます。

基本設定の保存
設定の変更を有効にするには［OK］ボタンをクリックします。

Page28ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

Viewlet の製作手順の基本

Page29ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

新規プロジェクトの作成
メニュー画面から［新規プロジェクト］をクリックします。

他の方法：ボタンコマンドツールバーの［新規作成...］アイコンをクリックします。
［NEW プロジェクトを作る］パネルが表示されます。

［NEW プロジェクトを作る］パネル

ビューレットビルダー8 では、4 つの方法が準備されています。
［スクリーンキャプチャプロジェクト］［ビデオキャプチャプロジェクト］［イメージプロジェクト］［白紙のプロジェクト］

Page30ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

スクリーンキャプチャプロジェクトを作成する
他のアプリケーションの動作をキャプチャしてプロジェクトを作成します。

［NEW プロジェクトを作る］パネル左部のナビゲーションメニューから［スクリーンキャプチャプ
ロジェクト］を選択します。

［作成］ボタンをクリックします。
［プロジェクト新規作成］パネル（スクリーンキャプチャプロジェクト）が表示されます。

［オプション］タブ

吹き出しやメモ、ボタンなどのスタイルを選択します。

Page31

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［キャプチャ］タブ

キャプチャ範囲の設定
キャプチャする範囲を［プロジェクト新規作成］パネル［キャプチャ］タブの［キャプチャ範囲］ドロップダウンリストの 6 種類から選択します。
［カスタム］［スタンダード］［アプリケーション］［エリア］［ウィンドウ］［フルスクリーン］［カスタム - キャプチャ領域の幅・高さを変更］
任意のサイズでキャプチャの範囲を指示することができます。

［幅：］、［高さ：］の数値をキーボードから入力するかまたは、スピンボタンで指示します。

Page32

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［スタンダード - 登録サイズから選択］登録されているスライドサイズが下段ドロップダウンリストで表示されます。ここから適当なものを選択します。

必要であれば、緑色の＋マーク［サイズを登録］アイコンをクリックして、新たにサイズを登録することができます。削除するときはリストから選択して赤い×マーク［登録サイズの削除］アイコンをクリックします。
［アプリケーション - 起動中のアプリケーションをキャプチャする］
起動中のアプリケーション一覧から選択してキャプチャを始めることができます。

下段に表示されるドロップダウンリストから該当するアプリケーションを選択します。
［アプリケーションリストのリフレッシュ］アイコンでリストを更新することができます。
［アプリケーションのリサイズ：］チェックボックスをオンにしてサイズを指示しておくとキャプ
チャ開始と同時にアプリケーションのウィンドウサイズを変更されます。

Page33ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［エリア - キャプチャ領域をスクリーンから手動で指定する］
スクリーン上のキャプチャする範囲の対角２点をドラッグ・アンド・ドロップで指示する方法です。

［ウィンドウ - キャプチャするウィンドウを手動選択］
アプリケーションの一部を囲んで赤色の枠が自動表示されます。その領域のひとつをクリックして選択する方法です。

［フルスクリーン - 全画面でキャプチャする］
スクリーン全体をキャプチャします。

下段に表示されるドロップダウンリストからモニターの解像度を選択します。

Page34ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［キャプチャモード］欄［プロジェクト新規作成］パネル（スクリーンキャプチャプロジェクト）の［キャプチャ］タブの［キャプチャモード］欄について説明します。

［キャプチャモード］欄にあるボックスをクリックします。（下図参照）［キャプチャの設定］パネルが表示されます。

スクリーンキャプチャプロジェクトのキャプチャモードは特徴から２種に分類されています。
スマートキャプチャとPage35

マニュアルキャプチャです。

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［スマートキャプチャ］
キャプチャする領域に変化のあるとき、ビューレットビルダー8 が自動的にキャプチャを行ないます。
制作者はアプリケーションの操作に専念してキャプチャを進行することができます。

あらかじめ設定された以下の４種類のスマートキャプチャタイプがあります。
［クイックデモ］：クリック時に注釈が自動で挿入される簡単でスピーディなキャプチャタイプです。
［デモンストレーション］：クイックデモとほぼ同じ内容です。
［トレーニングシュミレーション］：クリックしたポイントにクリック型クイズ、入力クイズと解説の吹き出しを自動的に設置します。
［評価試験］：画面キャプチャをしながら、クリック個所、入力箇所に自動でクイズや問題を組み込むキャプチャタイプです。

［マニュアルキャプチャ］
任意のタイミングでホットキーを押してキャプチャします。
タイムラインが管理しやすいので、スライドへの編集作業が入ることが多い場合は、このタイプのキャプチャをおすすめします。

あらかじめ設定された以下の３種類のマニュアルキャプチャタイプがあります。
［マニュアルキャプチャ］：ホットキーを使ってカーソルの動きに合わせてキャプチャします。吹き出しは制作者が編集時に適宜付加します。
［マウスクリックキャプチャ］：ホットキーとマウスクリックによるキャプチャタイプです。
［シンプルキャプチャ］：カーソルなしのスクリーンショットをホットキーで撮影するキャプチャタ
イプです。

Page36

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

キャプチャモードの追加・編集［キャプチャの設定］パネルのリスト欄の下にアイコンがあります。
キャプチャタイプの追加やタイプの詳細を変更することができます。

モードを選択して［変更］アイコンをクリックするか、または［追加］アイコンをクリック

します［キャプチャ オプション］パネルが表示されます。

Page37

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

スクリーンキャプチャのオプション設定［キャプチャモード:］の選択
モードを変更するとタブも設定内容の項目も変わります。
［スマートキャプチャ - クリックの動きを自動でキャプチャする］
スマートキャプチャのオプションタブ［マニュアルキャプチャ - ホットキーを使用してキャプチャする］
マニュアルキャプチャのオプションタブ

Page38ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［一般］タブ［タイプの概要］欄：キャプチャタイプの［名前：］、［概要：］を入力します。他のタイプと区別できるように分かりやすく記述します。
［タイミング］欄：［タイミングリンクを維持］チェックボックスをオンにすると吹き出し、矩形など作成順に順序を自動で紐付けします。
［イントロタイミング：］：スライドそれぞれの最初の吹き出しの表示をスライド表示後 XX 秒後に設定します。通常 1 秒を推奨しています。

［ホットキー］欄：キャプチャに関する指示に使用するホットキーは任意のキーに割り当てることができます。それぞれの項目のボタンをクリックして新しく割り当てるキーを押します。
アプリケーションのショートカットキーと重複しないものを選択してください。
背景フレームキャプチャは、背景アニメーションを撮影するスマートキャプチャの機能です。

Page39ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［フィードバック］タブ［トレイアイコンを隠す］チェックボックスをオンにすると、キャプチャ中のビューレットビルダー
8 のトレイアイコンが表示されません。
［トレイアイコンの点滅］チェックボックスをオンにすると、キャプチャ動作中、タスクバーの通知領域にビューレットビルダー8 のアイコンが点滅表示されます。

［サウンド再生］欄：キャプチャ時のサウンドの有無を指示します。
キャプチャ時の同時録音ではありません。

Page40ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［マウス］タブスマートキャプチャ時、マウスの動きに合わせて自動付加させる項目を選択します。

［クリックする場所に注釈を移動挿入］：チェックボックスをオンにすると、吹き出しを自動挿入します。
［カーソルのシミュレーション］：カーソルの軌跡が自動作成されます。
［クリック範囲型クイズを自動作成］：チェックボックスをオンにすると、自動的にクイズを作成します。
キャプチャタイプ［デモンストレーション］、［トレーニングシュミレーション］、［評価試験］それぞれの［キャプチャオプション］パネルの［マウス］タブを参考にしてください。
［マウスのタイミング］欄：タイミングを設定しておくことで、キャプチャ時の誤差や個人差がなくなります。

Page41

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［ホイール］タブ（スマートキャプチャモードのみ）
スマートキャプチャ時、マウスホイールの動きに合わせて自動付加させる項目を選択します。

［マウスホイールのキャプチャ］欄：チェックボックスをオンにすると吹き出しを自動挿入します。
［ホイールのシミュレーション］：ホイール操作のキャプチャ設定です。
［ホイールのタイミング］欄：キャプチャ時の誤差や個人差がなくなります。

［キーボード］タブ（スマートキャプチャモードのみ）
スマートキャプチャ時、タイピングの動きに合わせて自動付加させる項目を選択します。

［タイピング時に注釈を移動挿入］：チェックボックスをオンにすると、吹き出しを自動挿入します。
［タイピングのシミュレーション］：［キークリック音］の挿入も可能です。
［テキスト型クイズを自動作成］：チェックボックスをオンにすると、クイズを自動的に作成します。
［完了時のキー：］：クイズ作成時、回答完了時のキーを確定しておく必要があります。

［修正］

アイコンからキーを追加・削除することができます。
［キー入力のタイミング］欄：キャプチャ時の誤差や個人差がなくなります。

Page42

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［注釈］タブ（スマートキャプチャモードのみ）
自動挿入される注釈の文章をあらかじめ設定しておきます。

［アドバンス］タブ
キャプチャに関わるその他の設定です。

［フレームレート］欄：マウスドラッグ操作、背景キャプチャ時のフレームレート。スマートキャプ
チャでは 1～５フレーム/秒で設定します。
［スクリーンショットの時間差］欄：画像表示が遅い PC の場合などにこの項目を調整します。
［ポップアップのキャプチャ］：アプリケーションによってはポップアップメニューなどがキャプ
チャできない場合があります。その際に、このチェックボックスをオンにします。

Page43ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

スクリーンショットの開始（スマートキャプチャおよびマニュアルキャプ
チャ）（下図のオプション内容は一例です）［プロジェクト新規作成］パネルの［OK］ボタンをクリックします。

スクリーン上にメモが表示されます。キャプチャする範囲をメモの内容に従って選択あるいは指示します。（下図はスライドサイズ［ウィンドウ］での例です）［スライドサイズ］で［フルスクリーン］を選択しているときは、メモは表示されません。

このとき、範囲の選択をしないで操作をキャンセルするには、右ボタンをクリック
するか、キーボードの［ESC］キーを押します。プロジェクトは作成されずビュー
レットビルダー8 の起動画面に戻ります。
Page44ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［インフォメーション］パネルが表示されます。

［次回からこのメッセージを表示しない。］チェックボックスをオンにすると次回から［インフォメーション］パネルは表示されません。
［閉じる］ボタンをクリックするとキャプチャを開始します。
スマートキャプチャの場合はクリック、ドラッグなどのタイミングで自動キャプチャされます。
マニュアルキャプチャの場合はホットキーを押したタイミングでキャプチャされます。
キャプチャ途中での状況の確認
タスクバーの通知領域に表示されているビューレットビルダー8 のアイコンにマウスカーソルをあてるとそれまでにキャプチャした回数の情報が表示されます。

キャプチャ途中でのオプションの変更
スクリーンキャプチャ操作中にオプション変更を行なうことができます。
タスクバーの通知領域に表示されているビューレットビルダー8 のアイコンをクリックします。
キャプチャが一時停止して［キャプチャ状況］パネルが表示されます。

水色の下向き矢印［最大化］アイコンをクリックします。

Page45ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［キャプチャ状況］パネルが広がり［キャプチャオプション］パネルと同様の内容に［状態］タブが加わって表示されます。

キャプチャの再開とキャンセル
キャプチャを再開するには［キャプチャ状況］パネルの緑色の［続ける］アイコンをクリックします。

キャプチャを取りやめてスライドの作成も行なわない場合は赤色の×マーク［キャンセル］アイコンをクリックします。

スクリーンキャプチャの終了［キャプチャ状況］パネルの赤色の四角［停止］アイコンをクリックします。
［停止］パネルが表示されます。［はい］ボタンをクリックします。

Page46

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［キャプチャセッションの読み込み中］パネルが表示されます。

プロジェクトとしてスライドに作成されて、スライドビューに表示されます。

Page47

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

ビデオキャプチャプロジェクトを作成する
画面の動きを 1 秒間に指定されたフレーム数で撮影するモードです。マウスカーソルの動きではなく、画面の動き、シミュレーションなどをキャプチャする場合に有効なキャプチャ方法です。
キャプチャはカーソルパス、ビデオ、サウンドのレイヤから構成され、スライド単位で作成されます。
カーソル位置の調整、削除は可能です。吹き出しなどのオブジェクトは追加することができます。
カーソル、ビデオのタイミング調整はできません。

［NEW プロジェクトを作る］パネル左部のナビゲーションメニューから［ビデオキャプチャプロ
ジェクト］を選択します。

［作成］ボタンをクリックします。
［プロジェクト新規作成］パネル（ビデオキャプチャプロジェクト）が表示されます。

Page48ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［オプション］タブ［オプション］タブについては、本ガイド「スクリーンキャプチャプロジェクトを作成する」の章をご参照ください。

［キャプチャ］タブ
キャプチャ範囲の設定［キャプチャ範囲］欄のドロップダウンリストについては、本ガイド「スクリーン
キャプチャプロジェクトを作成する／キャプチャ範囲の設定」をご参照ください。

［キャプチャモード］欄［キャプチャモード］欄にあるボックスをクリックします。（下図参照）［キャプチャの設定］パネルが表示されます。

キャプチャモードの追加・編集
Page49ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［キャプチャの設定］パネルのリスト欄の下にアイコンがあります。
キャプチャタイプの追加やタイプの詳細を変更することができます。

モードを選択して［変更］アイコンをクリックするか、または［追加］アイコンをクリックします。
［キャプチャ オプション］パネルが表示されます。

ビデオキャプチャのオプション設定
ビデオキャプチャの［キャプチャモード：］は、1 種類のみです。

［一般タブ］［タイプの概要］欄：キャプチャタイプの［名前：］、［概要：］を入力します。他のタイプと区別できるように分かりやすく記述します。
［ホットキー］欄：キャプチャに関する指示に使用するホットキーは任意のキーに割り当てることができます。それぞれの項目のボタンをクリックして新しく割り当てるキーを押します。
アプリケーションのショートカットキーと重複しないものを選択してください。
［キャプチャ中の音声を録音］：チェックボックスをオンにすると、キャプチャと同時に録音が可能になります。音声のデバイス等の設定は［録音オプション...］ボタンをクリックします。

Page50ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［フィードバック］タブ［トレイアイコンを隠す］チェックボックスをオンにすると、キャプチャ中のビューレットビルダー
8 のトレイアイコンが表示されません。
［トレイアイコンの点滅］チェックボックスをオンにすると、キャプチャ動作中、タスクバーの通知領域にビューレットビルダー8 のアイコンが点滅表示されます。

［マウス］タブ［カーソルのシミュレーション］：カーソルの軌跡が自動作成されます。

［アドバンス］タブ
キャプチャに関わるその他の設定です。

［フレームレート］欄：ビデオキャプチャでは 5～10 フレーム/秒で設定します。

Page51

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［ポップアップのキャプチャ］：アプリケーションによってはポップアップメニューなどがキャプ
チャできない場合があります。その際に、このチェックボックスをオンにします。
［ビデオの分割間隔］欄：ビデオキャプチャでは、指定する間隔でいくつかのスライドに区切ることができます。［一時停止でビデオを分割］チェックボックスをオンにしておくと再生時に一時停止させることができます。

Page52

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

ビデオキャプチャの開始［OK］をクリックします［次回からこのメッセージを表示しない］チェックボックスをオンにすると次回からこのメモは表示されません。

キャプチャを開始するには中心の［開始する］ボタンをクリックするか、
画像下のコントロールで［開始する］アイコンをクリックします。

マイクロフォンアイコンをクリックすると同時録音が可能です。

Page53ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

ビデオキャプチャの終了
終了するには［停止］アイコンをクリックします。
［キャプチャの終了］パネルが表示されます。

［停止し、キャプチャをインポートする］ボタンをクリックします。
プロジェクトとしてスライドが作成されて、スライドビューに表示されます。

Page54ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

イメージプロジェクトを作成する
既存の画像を利用してプロジェクトを作成します。
サポートされるイメージ形式は jpeg、gif、tiff、jpg、png と bmp です。イメージは背景画像としてスライドに配置されます。
［NEW プロジェクトを作る］パネル左部のナビゲーションメニューから［イメージプロジェクト］
を選択します。

［作成］ボタンをクリックします。
［プロジェクト新規作成］パネル（イメージプロジェクト）が表示されます。

Page55ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［画像イメージ］タブ
スライドに取り込む画像を選択します。

［追加］アイコンで画像ファイルを選択します。
右側に画像がプレビューされます。
順序の変更には、と［上へ］あるいは［下へ］アイコンを使用します。

のアイコンは、選択した画像を 90 度ずつ［左回転］、［右回転］することができます。
削除するには、リストのファイル名を選択して［削除］アイコンをクリックします。
プロジェクトを開いたあとも、スライドの順序の変更、削除やスライドの追加などは行なうことができます。

［オプション］タブ［オプション］タブについては、本ガイド「スクリーンキャプチャプロジェクトを作成する」の章をご参照ください。

Page56

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［スライド］タブ
作成するプロジェクトのスライドのサイズを選択します。

［カスタム］と［スタンダード］の２種類があります。

［ナビゲーション］タブ
スライドの再生時間を変更することができます。

［一時停止をスライドに追加］：チェックボックスをオンにすると、スライドを表示するごとに一時停止します。

イメージプロジェクトの開始
画像の選択と各設定ができたら、［プロジェクト新規作成］パネル（イメージプロジェクト）の［OK］ボタンをクリックします。
画像を取り込んだスライドが作成されてプロジェクトとして開きます。

Page57

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

白紙のプロジェクトを作成する
キャプチャも既存画像も使用せず、白紙のスライドからプロジェクトを開始します。

［NEW プロジェクトを作る］パネル左部のナビゲーションメニューから［白紙のプロジェクト］を選択します。

［作成］ボタンをクリックします。
［プロジェクト新規作成］パネル（白紙のプロジェクト）が表示されます。

Page58ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［スライド］タブ
作成するプロジェクトのスライドのサイズを選択します。
［カスタム］と［スタンダード］の２種類があります。
［カウント］欄
プロジェクト開始時の白紙のスライドの枚数を指示します。

［オプション］タブ［オプション］タブについては、本ガイド「スクリーンキャプチャプロジェクトを作成する」の章をご参照ください。
プロジェクトを開始後もスライドの追加および削除が可能です。
確定したら［OK］ボタンをクリックします。

Page59ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

白紙のプロジェクトの用途
白紙プロジェクトではスライドにテキストや画像を入れてプレゼンテーションムービーを作成します。

クイズオブジェクトを追加して e ラーニングコンテンツも作成できます。

Page60ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

新規プロジェクトの保存
メニューバーから［ファイル］→［保存する］を選択します。

［新規プロジェクト保存］パネルが表示されます。
［プロジェクト名］を入力します。

［OK］ボタンをクリックします。
フォルダとファイルが作成されて、プロジェクトが保存されます。

ビューレットビルダー8 ではファイル拡張子は「.qvpx」です。［プロジェクト名］に付加されます。

「プロジェクト名」フォルダ内に「プロジェクト名.qvpx」とキャプチャ背景画像と音声、カーソル
データが「esouse」フォルダに格納されます。
出力（パブリッシュ）データは「putput」フォルダに格納されます。
ボタンコマンドツールバーの［保存する］アイコンをクリックすることでもプロジェクトは保存されます。こまめに保存することをお勧めします。

Page61

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

タブツールを使用してスライドを編集する

タブ表示についてスライドビューの左側および下部に表示されています。⑤の部分です。
ここには［ブラウザ］、［サムネイル］、［スタイルシート］、［アウトプット］、［タイムライ
ン］、［スライドメモ］の 6 種類のタブツールがあります。個々のスライドからムービー全体の編集に関わるツールです。

Page62

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

タブの表示切り替え表示させるには、メニューバーの［表示］から選択してチェックマークをオンにします。

タブ表示の解除
表示されているタブのタイトルの右端にある マークをクリックします。（下図参照）
タブ表示の最小化と最大化
タブの右上に配置されている最小化または、最大化ボタンをクリックします。（下図参照）

左のタブ表示と下のタブ表示を最小化するとスライドビューがさらに広がります。

Page63ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

Page64ViewletBuilder8 ユーザーズガイド

ユーザーズガイド2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［ブラウザ］タブ
Viewlet を作成する上でリソースの管理・組織化に有効な機能です。Viewlet のリストを表示することもできます。ビューレットビルダー8 を終了することなくフォルダやファイルの管理を行なうことができます。

メニューバーから［表示］→［タブ］→［ブラウザ］を選択してチェックボックスをオンにします。
［ブラウザ］タブが表示されます。タブ名をクリックすると最前面に表示されます。

この［ブラウザ］タブ上段に表示されるのはフォルダへのショートカットです。
このとき［ブラウザ］タブ下段に表示されるのは実際のフォルダやファイルです。
ファイルのショートカットではありません。ご注意ください。

参照フォルダの追加
フォルダへのショートカットを追加することができます。
［ブラウザ］タブの［追加...］アイコンをクリックします。
ドロップダウンリストから［ローカル or ネットワーク
フォルダ...］を選択します。
参照したいフォルダを選択します。

フォルダへのショートカットが［ブラウザ］タブ上段のリストに追加されます。

Page65ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド参照フォルダの解除
フォルダのショートカットを［ブラウザ］タブ上段から選択します。
［削除...］アイコンをクリックします。

リストからショートカットが削除されます。

ファイルの削除
この操作で削除されたファイルは、コンピュータから完全に削除されます。
十分に確認したのち、慎重に作業を行なってください。

［ブラウザ］タブ下段に表示されているフォルダやファイルから削除するものを選択します。
［削除...］アイコンをクリックします。

Page66

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［スライド］タブ
メニューバーから［表示］→［タブ］→［スライド］を選択してチェックマークをオンにします。
［スライド］タブが表示されます。開いているプロジェクトの全スライドがサムネイル表示されます。

サムネイルの拡大と縮小
タブの上部にあるボタンで、サムネイルの縮小率を変更することができます。また、サムネイルを最新の状態にするための［サムネイルを再表示］、［全てのサムネイルを再表示］ボタンがあります。
スライドの操作
スライドを追加する位置を指示したり、削除するスライドを選択したりすることができます。
ドラッグ・アンド・ドロップでスライドの順番を変更することもできます。
また、選択したサムネイル上で右ボタンをクリックしてショートカットメニューから各種の操作を行なうことができます。
複数のスライドを選択して同時に同じ内容の処理を施すことができます。
スライドの情報アイコン
サムネイルの下部には、スライドに含まれるオブジェクトがアイコンで表示されています。カーソルを当てるとツールチップが表示されます。

Page67

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［タイムライン］タブ
タイムラインに沿ってスライドやオブジェクトをデザインすることができます。スライドのプレビューを行なうこともできます。

メニューバーから［表示］→［タブ］→［タイムライン］を選択してチェックマークをオンにします。
［タイムライン］タブが表示されます。

［タイムライン］タブの上部左側から、［スライドシークエンス］［経過時間］：スライド全体の再生秒数とスライド毎のタイム［スライド表示時間］：調整スピンボタン［ズーム］：タイムラインの縮尺調整スピンボタン［全てのスライド］または［現在のスライド］：タイムラインの表示切り替え［スライドの分割］と［スライドの統合］［スライドタイミングの持続］または［スライドタイミングの無効］［タイミングリンクの追加...］と［タイミングリンクを取り除く］
スライド間の移動アイコンが４種
スライドプレビューのボタン
レイヤ
スライドのオブジェクトは［タイムライン］タブにレイヤ表示されています。

スライド名をクリックしてレイヤ表示の展開と折りたたみを切り替えることができます。
Page68ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

レイヤ毎の表示と非表示
目のマークのアイコンをクリックして表示／非表示を切り替えます。

レイヤのロックと解除
レイヤごとに編集を制限するには鍵マークのアイコンをクリックして閉じた状態にします。制限を解除するときもクリックして鍵マークが開いた状態にします。

オブジェクトの位置
オブジェクトの順番や位置をタイムライン上で調整することができます。
変更するオブジェクトを選択します。マウスの右ボタンをクリックしてショートカットメニューから［重ね順］または［揃える］を選択して配置の場所を指示します。
オブジェクトの動作
レイヤごとにオブジェクトの動作タイミングや表示時間を示す長方形のバーがあります。長方形のエッジにポイントすると両方向矢印のカーソルに変化します。これをドラッグして動作を調整することができます。

Page69ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイドタイミングリンク
オブジェクト間の相互関係を定義しておくことができます。
操作方法については、「タイミングリンク」の項をご参照ください。
レイヤの削除レイヤを選択します。
キーボードの［Delete］キーを押します。
他の方法：マウスの右ボタンをクリックしてショートカットメニューから［削除］を選択します。

Page70ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［スタイルシート］タブ
オブジェクトの特性をスタイルシートと呼ばれるテンプレートとして定義することができます。定義
した内容はオブジェクトやスライドなどに反映させることができます。

メニューバーから［表示］→［タブ］→［スタイルシート］のチェックマークをオンにします。
［スタイルシート］タブが表示されます。

［Default Stylesheet］：デフォルトのスタイルシートです。ドロップダウンリス
トから選択します。削除することはできません。

Page71

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［新規スタイルシート］
スタイルを登録することができます。

タブの上部にある［新規スタイルシート］アイコンをクリックします。

［スタイルシート］パネルが表示されます。

スタイルシートの［名前：］を入力します。
必要であれば［パスワード保護］チェックボックスをオンにしてパスワードを入力します。
パスワードの管理には十分注意してください。
［OK］ボタンをクリックします。

［スタイルシート名の変更］
スタイルシートの名称およびパスワードを変更することができます。
デフォルトのスタイルシート［Default Stylesheet］は名称を変更することができません。
また、パスワード保護されているスタイルシートの名称を変更するにはパスワードを入力する必要があります。

Page72

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

スタイルの適用
プロジェクト全体へのスタイルシート全体の反映
プロジェクトに含まれる全スライドに選択されているスタイルの全体が適用されます。

［スタイルシート］タブのスタイルのリストから基にするスタイルシートを選択します。
必要に応じて、スタイルの内容を編集しておきます。
［スタイルシート］タブの［スタイルシートをプロジェクトに適用］アイコンをクリックします。

他の方法：基にするオブジェクトの種類の上で右ボタンをクリックしてショート
カットメニューから［スタイルシートをプロジェクトに適用］を選択します。
確認のパネルが表示されます。

［OK］ボタンをクリックします。

Page73ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

選択したスライドへの反映
選択しているスライドにのみスタイルを適用することができます。
［スタイルシート］タブ内のスタイルのリストから基にするオブジェクトの種類を選択します。
必要に応じてスタイルの内容を編集しておきます。
［スタイルシートの設定に変更］アイコンをクリックします。

スタイルシートへ登録変更されているオブジェクトのスタイルをスタイルシートへ登録することができます。
スライド上のオブジェクトを選択して［スタイルシート］タブの［選択内容でスタイルシートを上書きする］アイコンをクリックします。

スタイルシートの削除［スタイルシート］タブの［スタイルシート：］ドロップダウンリストから削除するスタイルシート
を選択します。
［スタイルシートを削除］アイコンをクリックします。

確認のパネルが表示されます。
［はい］ボタンをクリックします。

Page74ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

スタイルとして定義する内容
オブジェクト

プロパティ

スライド

背景色

吹き出し

メッセージタイプ、背景色、影のプロパティ

メモ

テキストプロパティ（フォント、サイズ、スタイル、配置、色）

カラーハイライト

背景色、不透明度

ポップアウトハイライト

ポップアウト量、影のプロパティ

ライン

ラインスタイル、線幅、枠線、不透明度、影矢印

スタイル、背景色、幅、枠線、不透明度、影マット

背景色、不透明度、境界線、枠線

メッセージ
未解答のメッセージ
不正解メッセージ
質問用テキスト
選択肢用テキスト
列のテキスト

メッセージスタイル
背景色
テキストのプロパティ（フォント、サイズ、スタイル、配置、色）欄のテキスト
質問用コメント

テキストボックス

ボタン
クリック範囲Page75

テキストフィールドスタイル
チェックボックス スタイル
テキストのプロパティ（フォント、サイズ、スタイル、配置、色）
ボタンスタイル
テキストのプロパティ
クリック範囲の変更

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

スタイルの追加
タブ上部の［スタイル追加］アイコンをクリックします。

表示されるメニューから［標準的なスタイルを追加］を選択します。
メニューから追加したいスタイルの種類を選択します。
スタイルの変更［スタイル変更］アイコンをクリックします。
［スタイル変更］パネルが表示されます。

属性を変更します。
［OK］ボタンをクリックします。

Page76

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［スライドメモ］タブ
スライドメモとは、実際にはスライドに表示させない注釈を書き込んでおくための機能です。複数のスタッフで編集する場合のメモにも便利です。

メニューバーから［表示］→［タブ］→［スライドメモ］を選択してチェックマークをオンにします。
［スライドメモ］タブが表示されます。

スライドを選択してメモを入力します。
スライドメモはスライド１枚に対してひとつずつ用意されています。
スライドメモの印刷
メニューバーから［ファイル］→［印刷のレイアウト...］を選択します。
［印刷レイアウト］タブが表示されます。
［オプション］欄で［スライドメモ］チェックボックスをオンにすると、印刷時にその内容を加えることができます。

Page77

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

スライドを編集する
ビューレットビルダー8 のスマートキャプチャでは 1 アクションごと、マニュアルキャプチャでは 1
ショットごと、イメージプロジェクトでは画像枚数ごと、スライドが作成されます。
ムービーの長さ調節、シナリオの変更、インタラクティブな機能の追加など、スライドの編集操作はかかせません。

スライド編集としてはプロジェクトタブに表示されたスライドの複製、並び替え、削除やタイミングの設定、挿入、イベントなどがあります。
スライド編集連動ツールバー
編集画面でオブジェクトなどを選択していないときは、連動ツールバーは次のようなアイコンが表示されます。

Page78ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

スライドプロパティの編集［スライド］タブでスライドを選択します。
連動ツールバーの［スライドのプロパティ...］アイコンをクリックします。

他の方法：スライド上で右ボタンをクリックしてショートカットメニューから［ス
ライドのプロパティ...］を選択します。
［スライドのプロパティ］パネルが表示されます。

［名前］欄：スライドの名前です。
［表示時間］欄：スライドの表示されている時間を秒単位で指示します。

スライドの表示／非表示の切り替え
削除するのではなくプレビューやコンパイルなどの際にスライドを含めず表示させない方法です。必要なときに再び表示させる設定に戻すことができ便利です。

［スライド］タブでスライドを選択します。
連動ツールバーの［スライド表示］アイコンあるいは、［スライド非表示］アイコンをクリックします。

Page79ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

隠す設定になっているスライドはサムネイルの左下に×マークが表示されています。また、サムネイ
ルとスライドビューは半透明になっています。

隠す設定にされているスライドは、スライドのプレビューの際には表示されません。
サウンドが含まれている場合も再生されません。コンパイルにも含まれません。ス
ライド数のカウントには含まれます。

スライドの複製
スライドビューに表示されているスライドを簡単に複製することができます。
［スライド］タブで複製するスライドを選択して、連動ツールバーの［スライドの複製］アイコンをクリックします。複製されたスライドが挿入されます。

スライドカラーの変更
スライドの背景色を変更することができます。
［スライド］タブでスライドを選択します。
連動ツールバーの［背景色］アイコンをクリックします。

他の方法：右ボタンをクリックしてショートカットメニューから［背景色］を選択します。
［背景色］パネルが表示されます。
単色の場合［スウォッチ］タブでカラーをパレットから選択するかあるいは、［レインボー］タブで RGB の数値などを指示します。

Page80ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

カスタムカラー
パレットで選択しているカラーあるいは、RGB の数値を調整したカラーをカスタムカラーとして登録
しておくことができます。
［背景色］パネルの［現在のカラーをカスタムカラーに追加］アイコンをクリックします。

［カスタム］欄にカラーが追加されます。
削除するには［一番左のカスタムカラーを削除する］アイコンをクリックします。

グラデーション
［グラデーション］タブでは背景色を 2 色のグラデーションに指定することができます。
プルダウンリストには、デフォルトのグラデーションパターンがあります。
新しく作るには、プルダウンリストの［無名グラデーション］を選択して、［最初の色：］と［最後の色：］、グラデーションの［方向：］を指定します。
［方向］は、角度を入力します。上から下への水平グラデーションを 0 度とし、時計回りに度数法（360°）で指示します。
［グラデーション リネーム］アイコンをクリックしてグラデーションの設定に名前を付けます。

Page81

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

スライドの背景画像
スライドの背景に画像を埋め込むことができます。配置のパターンも選択することができます。
［スライド］タブでスライドを選択します。
連動ツールバーの［背景の編集...］アイコンをクリックします。

［背景フレーム］パネルが表示されます。

［フレーム：］：画像ファイルを選択します。
［整列：］：画像の配置パターンを選択します。
［OK］ボタンをクリックするとスライドに画像が配置されてパネルが閉じます。
背景画像の削除［スライド］タブでスライドを選択します。
連動ツールバーの［背景の編集...］アイコンをクリックします。

［背景フレーム］パネルが表示されます。
他の方法：スライドの上で右ボタンをクリックしてショートカットメニューから［背景の編集...］を選択します。
［背景を取り除く］アイコンをクリックします。
［OK］ボタンをクリックすると画像がスライドから取り消されます。

Page82

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

スライドの移動
ドラッグ・アンド・ドロップ［スライド］タブのサムネイルをドラッグして移動先でドロップします。
切り取りと貼付けのコマンド［スライド］タブで移動するスライドを選択します。
ボタンコマンドツールバーの［切り取り］アイコンをクリックします。

スライドが切り取られます。
切り取りをすぐに元に戻すには、ボタンコマンドツールバーの［元に戻す］ア

イコンをクリックします。切り取りの操作は、十分に確認してから行ってください。
［スライド］タブで移動先のひとつ前のスライドを選択します。
ボタンコマンドツールバーの［貼付け］アイコンをクリックします。

スライドの削除［スライド］タブでスライドを選択します。
ボタンコマンドツールバーの［削除］アイコンをクリックします。

他の方法：サムネイルの上で右ボタンをクリックしてショートカットメニューから［削除］を選択します。あるいは、キーボードの［Delete］キーを押します。
［削除］パネルが表示されます。

確認して［はい］ボタンをクリックします。
削除を取りやめる場合には［いいえ］ボタンをクリックします。
複数スライドの一括削除［スライド］タブをクリックします。［スライド］タブが最前面に表示されます。
削除する複数のスライドを選択します。
ドラッグしながら対角を選択して囲まれた複数のスライドを選択します。
キーボードの［Ctrl］キーを押しながらクリックしてひとつずつ追加選択することもできます。
上記の「ひとつのスライドの削除」と同様の手順で削除します。
Page83ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

プロジェクトのリサイズ
ファイルサイズを小さくしたり、表示サイズを小さくまたは、大きくしたりするためにプロジェクト
全体のサイズを変更することができます。
便利な機能ですが、いったんリサイズすると取り消すことができませんので、事前にプロジェクトのバックアップを作成してから作業することをお勧めします。
メニューバーから［プロジェクト］→［プロジェクトのリサイズ...］を選択します。

［プロジェクトのリサイズ］パネルが表示されます。

［新しいプロジェクトサイズ］欄：リサイズ後の［幅：］、［高さ：］をピクセル単位で入力します。
［縦横比を固定する］チェックボックスをオンにすると縦横の比率が固定されたまま［幅：］と［高さ：］が入力できます。
［スケール］欄：チェックボックスをオンにした項目はリサイズ時にスケールが反映されます。
テキスト、吹き出し等はリサイズ前の大きさ、フォントサイズが維持されます。

Page84ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

プロジェクトのトリミング
プロジェクトの一部を切り取るトリミングの機能です。すべてのスライドを一括して切り取ります。
便利な機能ですが、いったんトリミングすると取り消すことができませんので、事前にプロジェクトのバックアップを作成してから作業することをお勧めします。
メニューバーから［プロジェクト］→［プロジェクトのトリミング...］を選択します。
次のようなパネルが表示されます。

内容を確認して、続行する場合は［はい］ボタンをクリックします。
プロジェクトのバックアップを作成していないときは［いいえ］ボタンをクリックします。
トリミングの操作

プロジェクトウィンドウに表示された赤枠の境界線をマウスでドラッグして削除したい領域まで移動します。赤く表示された部分がトリミング（削除）されます。
トリミングはすべてのスライドで一括処理されます。カーソルの位置、吹き出し等がトリミングされる領域に入らないように注意して行いましょう。
幅・高さを確認して領域を確定領域が確定したら［トリミングを適用］をクリックします。
中止をする場合は［トリミングを中止］をクリックします。

Page85ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

新たなスライドの追加
既存プロジェクトにスライドを挿入することができます。プロジェクトの新規作成と同じ４つの方法のうちいずれでも可能です。
いずれの方法でも選択しているスライドのすぐ後に新しいスライドが挿入されます。
スライドは挿入後に順番を変更することもできます。

空白スライドの追加
既存のスライドを選択します。
ボタンコマンドツールバーの［スライドの挿入］アイコンをクリックします。

選択したスライドの後に白紙のスライドが一枚、挿入されます。

スクリーンキャプチャスライドの追加
既存のスライドを選択します。
ボタンコマンドツールバーの［新しいスクリーンショットの挿入…］アイコンをクリックします。

［スクリーンショットの挿入］パネルが表示されます。
新規スクリーンキャプチャプロジェクトの作成と同様の手順でキャプチャします。
キャプチャを終了すると開いているプロジェクトにスライドとして挿入されます。
キャプチャサイズと既存のスライドサイズが違う場合［スライドの配置］パネルが表示されます。ス
ライドのサイズを指定して［OK］ボタンをクリックします。
［キャンセル］ボタンをクリックするとキャプチャからやり直しになります。

ビデオスライドの追加
既存のスライドを選択します。
ボタンコマンドツールバーから［ビデオスライドを挿入する...］アイコンをクリックします。

新規ビデオャプチャプロジェクトの作成と同様の手順でキャプチャします。
キャプチャサイズと既存のスライドサイズが違う場合［スライドの配置］パネルが表示されます。ス
ライドのサイズを指定して［OK］ボタンをクリックします。

Page86

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［キャンセル］ボタンをクリックするとキャプチャからやり直しになります。

画像スライドの追加
既存のスライドを選択します。
ボタンコマンドツールバーの［画像スライドを挿入...］アイコンをクリックします。

［インポートする画像の選択］パネルが表示されます。
新規イメージプロジェクトの作成と同様の手順で画像を選択します。
［OK］ボタンをクリックするとスライドが挿入されます。

Page87

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

スライドを印刷する
スライドの内容を用紙に印刷することが可能です。
ボタンコマンドツールバーの［印刷...］アイコンをクリックします。

［プリント］パネルが表示されます。

印刷レイアウト［ページレイアウト...］ボタンをクリックします。

Page88ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

プレビューがパネル右側に表示されます。

［ヘッダー］欄：［タイトル］を入力します。
［日付・時間を表示する］、［スライドの境界線を表示］チェックボックスで設定します。

［レイアウト］欄：用紙の向きおよび一枚の用紙上に配置するスライドの向きや枚数を指示します。
［オプション］欄：スライドの吹き出し、カーソルなどの印刷の有無を設定できます。
［非表示スライド］：［スライドを隠す］設定にされているスライドも印刷します。
［スライドタイトル］：個々のスライドのタイトルを印刷します。
［スライドメモ］：個々のスライドに付加されているメモがある場合に印刷します。
［カーソル］、［カーソルパス］：カーソルとスライドに含まれるカーソルの軌跡です。

［フッタ］欄：用紙にページ番号を印刷します。スライドの枚数ではありません。
［スライド］欄：スライドの出力範囲を設定します。

設定が完了したら［OK］ボタンをクリックします。
［プリント］パネルに戻ります。

目次の設定
スライドの目次レベルを 3 段階で指定することができます。

Page89ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド色の吸着スタイルシートの変更や適用などを行なわずに簡単にオブジェクトから他のオブジェクトへ個々のス
タイルをコピーする機能です。
元にするオブジェクトを選択します。

ボタンコマンドツールバーの［色の吸着］アイコンをクリックしてオンにします。

色の吸着機能はアイコンがオンになっている間有効です。

カーソルがに変わります。

他のオブジェクトをクリックします。

オブジェクトの色が変更されます。

この作業を終えるには［色の吸着］アイコンをオフにします。

Page90ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

検索と置き換えボタンコマンドツールバーの［検索と置き換え...］ボタンをクリックします。

［検索と置き換え］パネルが表示されます。

検索［検索］タブをクリックします。
［テキスト］欄：検索文字列を入力します。
［大文字小文字の区別］オプション：英数字の大文字と小文字を区別して検索するには、このチェックボックスをオンにします。
［ディレクション］欄：検索をする方向を選択します。
［スライド］欄：検索の範囲をスライド単位で指定します。

Page91

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

置換［検索と置き換え］パネルの［置き換え］タブをクリックします。

［テキスト］欄：検索文字列を入力します。
［置き換えるテキスト］欄：検索した文字列と置き換えるための文字列を入力します。
［大文字小文字の区別］オプション、［ディレクション］欄、［スライド］欄の指定方法は［検索］タブのものと同様です。
［全て置き換える］ボタン：指定の文字列すべてを検索、一括置換します。
［置き換え］ボタン：検索した文字列を置き換えます。
［次を検索］ボタン：置き換えないで次を検索します。

Page92

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

拡大表示・縮小表示・スライドビューにフィット
スライドの表示を拡大、縮小することができます。

［フィット］アイコンをクリックすると表示スライドの倍率をスライドビューの広さに合わせます。

メニューバーの［表示］→［表示倍率］から選択することもできます。

Page93ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

スライドのプレビュー
ボタンコマンドツールバーの［現在のスライドのプレビュー］アイコンの右側の▼をクリックします。
プルダウンメニューが表示されます。

［現在のスライドのプレビュー］
スライドビューに表示されているスライドのみをプレビューします。
［現在のスライドからプレビュー］
スライドビューに表示されているスライドから終りのスライドまでをプレビューします。
［全てのプレビュー］
プロジェクト全体をプレビューします。
［ブラウザでプレビュー］
プロジェクト全体が SWF 形式にコンパイルされブラウザで表示されます。
パブリッシュは行ないません。

Page94ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

メッセージオブジェクトの挿入
メッセージには「吹き出し」、「メモ」、「テキストボックス」があります。
ビューレットビルダー8 ではひとつのスライドに複数のメッセージを追加することができます。
またそれらのメッセージをどのようなタイミングで表示するのかを個々に制御することもできます。

吹き出しの挿入このタイプのメッセージオブジェクトはスライドの特定の部分を指示するのに便利です。

オブジェクトツールバーの［吹き出しの挿入］アイコンをクリックします。

スライド上の配置する場所をクリックします。
［テキストエディタ］が起動します。テキストを入力します。

吹出しの背景色、フォント、サイズ、行揃え、配置位置も設定できます。
完了したら［OK］をクリックします。
ビューレットビルダー8 の［基本設定］パネル［一般］タブで［テキストエディタ
を使用する］オプションを選択した場合は上記の手順です。同項目の［直接編集する］オプションを選択するとスライドに空白の吹き出しが表示されて、テキストを直接入力する手順になります。
吹き出しが表示されます。

Page95ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

タイムラインを見ると、吹き出しはカーソルの動く前、スライド表示後 1 秒後に自動的に表示されます。また背景フレームより上のレイヤ、カーソルレイヤの直下になります。

背景色の変更
吹き出しを選択します。
連動ツールバーの［背景色］アイコンをクリックします。

［背景色］パネルが表示されます。
パレットから任意の色を選択します。
［OK］ボタンをクリックすると吹き出しの背景色が変更されてパネルが閉じます。

テキストの編集
吹き出しを選択します。
連動ツールバーの［テキストエディタで開く...］アイコンをクリックします。

［テキストエディタ］が起動します。
テキスト入力エリア内で右ボタンをクリックするとショートカットメニューから、フォント、文字色、サイズ、ハイパーリンクなどを設定することができます。

Page96

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

影をつける
吹き出しを選択して、連動ツールバーの［影のプロパティ］をクリックします。

［影のプロパティ］パネルが表示されます。

［影なし］チェックボックスをオフにすると吹き出しの輪郭に影が付きます。
［左オフセット：］、［トップオフセット：］：影の方向を設定します。
［ぼかしの半径：］：影の大きさを設定します。
［不透明度：］：影の濃さを設定します。
影のサンプルPage97

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

ロールオーバー領域
ムービーの任意の範囲を指定してカーソルが上に来た時だけメッセージを表示する、というインタラ
クティブな設定を行う機能です。

吹き出しオブジェクトを選択します。
連動ツールバーの［ロールオーバー領域の作成］アイコンをクリックします。

スライド内の範囲を対角指定します。
そのまま連動ツールバーの［イベント...］アイコンをクリックします。

［ロールオーバー］タブ（形状が上に来たときのアクション）で、［オブジェクトを表示する］［ロールアウト］t 部（形状の上からカーソルが離れた時のアクション）で［オブジェクトを隠す］
を確認し［OK］ボタンをクリックします。

詳細は「イベントとアクション」の項目をご参照ください。

Page98ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

吹き出しにサウンドを設定する
連動ツールバーの［吹き出しにサウンドを挿入する...］アイコンをクリックします。

オブジェクトの種類別にアイコンが準備されており、する...］、［メモにサウンドを挿入［テキストボックスにサウンドを挿入する...］、［形状にサウ

ンドを挿入する...］が選択されているオブジェクトに応じて表示されています。
［サウンド］パネルが表示されます。

［サウンドファイル...］フォルダアイコンをクリックして既存のサウンドファイルを選択します。もしくはマイクロフォンから音声を録音します。
［OK］ボタンをクリックします。

オブジェクトの右下にサウンドのマークが表示されます。（コンパイル後の Viewlet では表示されません）

Page99ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

オブジェクトの位置、サイズ合わせメッセージ型オブジェクトを、テキストの量やサイズによって自動的に大きさを調整してくれます。

メッセージオブジェクトを選択したとき連動ツールバーの［テキストサイズを編集時に自動で合わせる］アイコンがオンになっていれば、自動的に文字列に合わせたオブジェクトサイズの調整がされます。
次ような吹き出しの大きさが自動調整されます。

↓

このほかにセンタリング機能もあります。
メッセージオブジェクトを選択して連動ツールバーのアイコンを使用します。

スライド内で水平、垂直、中心に配置します。

Page100

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

メモの挿入
閲覧者に内容を説明する場合や解説などに表示すると便利です。

オブジェクトツールバーの［メモの挿入］アイコンをクリックします。

メモが表示されます。

メモの編集方法は吹き出しの編集方法と同じです。

テキストボックスの挿入
スライド上に文字列を表示するためのオブジェクトです。
スライドに対して直接文字を書き込んだような効果のオブジェクトです。

オブジェクトツールバーの［テキストボックスの挿入］アイコンをクリックします。

配置する場所をクリックします。
テキストボックスが表示されます。
テキストボックスの編集方法は吹き出しの編集方法と同様です。

Page101

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

メッセージオブジェクトの編集
メッセージタイプの変更
メッセージは形状を変更することができます。

メッセージオブジェクトを選択します。
連動ツールバーの［メッセージタイプ...］アイコンをクリックします。

［メッセージタイプ］パネルが表示されます。（上図参照）［メッセージスタイルの選択：］のドロップダウンリストからスタイルを選択します。
［メッセージタイプを選択：］欄でタイプを選択します。
［OK］ボタンをクリックするとパネルが閉じて形状が適用されます。

スタイルシートのメッセージオブジェクトへの適用
スタイルシートを利用してメッセージオブジェクトのスタイルを簡単に変更することができます。
メッセージオブジェクトを選択します。
連動ツールバーの［スタイルシートコマンド］アイコンをクリックします。

（ここではメモオブジェクトを選択しています）
プルダウンメニューから動作を選択します。

Page102

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

プロパティの変更
メッセージオブジェクトを選択します。
連動ツールバーの［メッセージのプロパティ...］アイコンをクリックします。

［メッセージのプロパティ］パネルが表示されます。

［名前］欄：オブジェクトの名前です。
複数のオブジェクトを配置するときはわかりやすい名前をつけておくと便利です。
［ロケーションとサイズ］欄：数値で位置を指定することができます。
［タイミング］欄：表示時間を設定します。
［フェードアニメーションが有効］チェックボックスをオンにするとオブジェクトにフェードアニ
メーション効果を定義することができます。

メッセージオブジェクトの移動
メッセージオブジェクトを選択します。
カーソルをあてると手の形状になります。ドラッグ・アンド・ドロップで移動します。

メッセージオブジェクトの削除メッセージオブジェクトを選択します。
キーボードの［Delete］キーを押します。

Page103ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

メッセージオブジェクトのタイミング
オブジェクトはそのスライドに表示させる時間を指示することができます。これをタイミングと呼びます。プロパティを設定する方法と［タイムライン］タブ上で設定する方法があります。

プロパティからの調整メッセージオブジェクトを選択します。
連動ツールバーの［メッセージのプロパティ...］アイコンをクリックします。

［メッセージのプロパティ］パネルが表示されます。

［タイミング］欄でドロップダウンリストからオプションを選択します。
［タイミング手動設定］［スライドの最後まで］［読み取り速度］
設定を終えたら［OK］ボタンをクリックします。
［タイミング手動設定］
オブジェクトの表示時間を制作者が指示します。
スライド上にオブジェクトを表示する［開始時間］と［表示時間］秒数を変更します。
スライドが表示されてからそのオブジェクトが表示されるまでの秒差を［開始時間］とします。
［スライドの最後まで］

Page104

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

スライド上にオブジェクトを表示し始める［開始時間］を指示します。オブジェクトは次のスライドに移行するまでの間表示され続けます。
［読み取り速度］
スライド上にオブジェクトを表示し始める［開始時間］を指示します。メッセージオブジェクトに含まれる文字の量に応じて自動的に表示時間が設定されます。

［タイムライン］タブ内での調整
スライドビュー下の［タイムライン］タブのタブ名をクリックして最前面に表示します。

オレンジ色の長方形は選択されているオブジェクトの表示時間を示しています。
ドラッグ・アンド・ドロップで移動してタイミングを変更したり、長方形の長さを調節することで表
示時間を変更したりすることができます。

Page105

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

カーソルの挿入ビューレットビルダー8 では、キャプチャすると同時にカーソルの軌跡はスライドに取り込まれます。
カーソルの動きにしたがって色分けされています。
これらは、編集可能です。

カーソルの挿入
カーソルの取り込まれていないスライドに新たにカーソルを挿入するには、オブジェクトツールバーの［カーソルの挿入］アイコンをクリックします。
カーソルパスが配置されているスライドで［カーソルの挿入］アイコンをクリック
すると、既存のカーソルが削除されます。

緑色の円

そのスライドでのカーソルの最初の位置を示しています。
ドラッグ・アンド・ドロップで移動することができます。移動すると前のスライドのカーソルの最終地点（赤色の円）が一致するように自動的に変更されます。
赤色の円

そのスライドでのカーソルの移動先を示しています。
ドラッグ・アンド・ドロップで移動することができます。移動すると次のスライドでのカーソルの開始位置（緑色の円）が一致するように自動的に変更されます。

Page106

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

カーソルのパス（軌跡）
円と円の間の点線はカーソルの軌跡を示しています。

パス形状の変更
カーソルのパスは直線と曲線の２種類から選択することができます。
カーソルを選択します。
連動ツールバーの［カーソルパスを直線にする］アイコンをクリックします。

プロジェクト全体のカーソルのパスを一括して変更するには［カーソルパスを直線にする-全てのスライド］あるいは［カーソルパスを曲線にする-全てのスライド］
を選択します。
青色の円
緑色と赤色の円の間のカーソルの軌跡上にあって、カーソル形状が変化する位置を示しています。
ドラッグ・アンド・ドロップで移動することができます。

カーソルパスの削除
オブジェクトツールバーの［カーソルの挿入］アイコンをクリックしてオフにします。

カーソルが軌跡とともに削除されます。

ポイントの追加
カーソルがポイントする位置を追加することができます。
追加する位置の直前のカーソルあるいはカーソルポイントを選択します。
連動ツールバーの［カーソルパスのポイントを追加］アイコンをクリックします。

次のような赤色のポイントが挿入されます。

ポイントの削除

Page107

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

カーソルのパス上のポイントを削除するには、ポイントを選択して右ボタンのショートカットメ
ニューから［削除］を選択します。
他の方法：ポイントを選択してボタンコマンドツールバーの［削除］アイコンをクリックします。あるいは、ポイントを選択してキーボードの［Delete］キーを押します。

クリックの追加
クリックの動作を追加することができます。
連動ツールバーの［カーソルパスにクリックを追加］アイコンをクリックします。

タイムラインのカーソルパスのレイヤに、クリックのマークが挿入されます。
クリック音も追加されます。

その他のオブジェクトと同様に移動などの編集を行なうことができます。

クリックの削除
タイムライン上にあるクリックのマークの位置で右ボタンをクリックしてショートカットメニューから［削除］を選択します。

Page108

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

カーソルスタイル
ビューレットビルダー8 には標準的なカーソル形状がライブラリとして準備されています。ライブラ
リを参照して簡単にカーソルの形状を変更することができます。

カーソル形状の変更
カーソルを選択します。
連動ツールバーの［カーソルスタイル...］をクリックします。

［カーソルスタイル］パネルが表示されます。

［カーソルのスタイルを選択］欄で形状を選択します。
［OK］ボタンをクリックすると、カーソルが変更されてパネルが閉じます。
新しいカーソルスタイルの追加
キャプチャの際に取り込まれた（ライブラリに未登録の）新しいカーソルを保存することができます。
未登録のカーソルを選択します。
連動ツールバーの［カーソルスタイル...］をクリックします。

［カーソルスタイル］パネルが表示され、自動的に新しいカーソルが登録されます。
［OK］ボタンをクリックするとパネルが閉じます。
影をつける
カーソルを選択します。
連動ツールバーの［影のプロパティ...］アイコンをクリックします。

［影のプロパティ］パネルが表示されます。
メッセージオブジェクトの［影のプロパティ］パネルの項をご参照ください。

Page109

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

サウンドの挿入ビューレットビルダー8 ではスライドやオブジェクトにサウンドを加えることができます。

スライドのサウンド［スライド］タブからスライドを選択します。
連動ツールバーの［スライドにサウンドを挿入する...］アイコンをクリックします。

［サウンド］パネルが表示されます。

［サウンドファイル...］フォルダアイコンをクリックして既存のサウンドファイルを選択します。
サポートされているサウンドデータのファイル形式は、MP3、RAW、AIF、WAV
および AU になります。
［OK］ボタンをクリックします。
赤色の円［録音］ボタンをクリックすると録音が開始されます。

Page110ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

記録範囲
プレビューViewletWhile Recording のチェックボックスをオンにすると、音声録音を行う範囲を変更することができます。

［現在のスライドから最後まで］～「全てのスライド」では、複数のスライドで録音が可能です。
この場合、音声ファイルは選択できません。音声のタイミングはスライドのタイミ
ングに依存しまうので、予めスライドの長さを調整しておきます。
サウンドが挿入されると、サムネイルの下部にサウンドマークが表示されます。

Page111ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

オブジェクトのサウンド
ビューレットビルダー8 では、メッセージや形状のオブジェクトごとにサウンドファイルを定義する
ことができます。表示と同時に再生させることができます。

サウンドの挿入
スライドに配置されているオブジェクトを選択します。
吹き出しの場合は、［吹き出しにサウンドを挿入する...］連動ツールバーのアイコンをクリック

します。
オブジェクトの種類別にアイコンが準備されており、する...］、［メモにサウンドを挿入［テキストボックスにサウンドを挿入する...］、［形状にサウ

ンドを挿入する...］が選択されているオブジェクトに応じて表示されています。
［サウンド］パネルが表示されます。

［サウンドファイル...］フォルダアイコンをクリックして既存のサウンドファイルを選択します。
［OK］ボタンをクリックします。
オブジェクトの右下にサウンドのマークが表示されます。（コンパイル後の Viewlet では表示されません）

Page112ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

サウンドの録音
ビューレットビルダー8 では音声の録音が可能です。MP3 形式を使用しています。
録音にはサウンドカードが必要です。
［スライド］タブからスライドまたは、スライドビューからオブジェクトをクリックして選択します。
［サウンド］パネルを表示します。（下図はオブジェクトの［サウンド］パネルです）
スライドの［サウンド］パネルの表示方法は、「スライドのサウンド」の項を、オブジェクトの［サウンド］パネルの表示方法は、「オブジェクトのサウンド」の項をご参照ください。
赤色の円［録音］ボタンをクリックします。

カウントダウンが始まります。
カウントダウンの秒数設定については、「ビューレットビルダー8 の基本設定」の項をご参照ください。

Page113

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

カウントダウンに続いてマイクを通して音声を入力します。

録音を終了するには赤色の四角形［停止］ボタンをクリックします。
［OK］ボタンをクリックします。

サウンドファイルの再生
サウンドを含むスライドまたは、オブジェクトを選択します。
［サウンド］パネルを表示します。（下図はスライドの［サウンド］パネルです）
スライドの［サウンド］パネルの表示方法は、「スライドのサウンド」の項を、オブジェクトの［サウンド］パネルの表示方法は、「オブジェクトのサウンド」の項をご参照ください。

緑色の矢印［再生］ボタンをクリックします。

Page114ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

サウンドファイルの削除
削除したいサウンドを含むスライドまたは、オブジェクトを選択します。
［サウンド］パネルを表示します。（下図はスライドの［サウンド］パネルです）
スライドの［サウンド］パネルの表示方法は、「スライドのサウンド」の項を、オブジェクトの［サウンド］パネルの表示方法は、「オブジェクトのサウンド」の項をご参照ください。

赤色の×［サウンドを削除］アイコンをクリックします。
［OK］ボタンをクリックします。
サウンドのエクスポート
サウンドをプロジェクト外にファイルとして出力することができます。
メニューバーから［ファイル］→［エクスポート］→［サウンド...］を選択します。
［サウンドのエクスポート］パネルが表示されます。

サウンドを含むスライドを指示するため［スライド］欄でオプションを選択します。
［エクスポート］ボタンをクリックします。
保存先を指示します。
サウンドのエクスポートは、MP3、RAW、AIF、WAV、AU 形式がサポートされています。

Page115

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

画像オブジェクトの挿入
スライド上にイメージを複数配置させることができます。ビューレットビルダー8 では、JPEG、GIF、TIFF、JPG、TIF、PNG および BMP の画像ファイル形式がサポートされています。これらにはイベントを定義することもできます。

画像の挿入
オブジェクトツールバーの［画像の挿入］アイコンをクリックします。

［画像の挿入］パネルが表示されます。
ブラウザで画像ファイルを選択します。
［開く］ボタンをクリックするとスライドの中心に画像オブジェクトが表示されます。

画像の編集
画像の移動
スライド上の画像オブジェクトをクリックして選択します。
ドラッグ・アンド・ドロップで画像を移動します。このときカーソルは手の形に変わります。

サイズの変更スライド上の画像オブジェクトをクリックして選択します。
ハンドルをドラッグ・アンド・ドロップして画像の大きさを変えます。このときカーソルは両方向矢印に変わります。

Page116ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

画像の透過率
スライド上の画像オブジェクトをクリックして選択します。
連動ツールバーの［不透明度（％）］欄に値を入力します。スピンボタンで変更することもできます。

画像の重ね順
スライド上の画像オブジェクトを右ボタンでクリックしてショートカットメニューの［重ね順］から移動させたい場所へのコマンドを選択します。
画像の削除
スライド上の画像オブジェクトをクリックして選択します。
キーボードの［Delete］キーを押します。
他の方法：右ボタンをクリックしてショートカットメニューから［削除］を選択します。あるいは、ボタンコマンドツールバーの［削除］アイコンをクリックし

ます。
影をつける
画像オブジェクトを選択します。
連動ツールバーの［影のプロパティ...］アイコンをクリックします。

［影のプロパティ］パネルが表示されます。
メッセージオブジェクトの［影のプロパティ］パネルの項をご参照ください。

Page117

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

画像の回転
スライド上の画像オブジェクトを右ボタンでクリックしてショートカットメニューの［回転する］からコマンドを選択します。

任意に回転させる
オブジェクトの基準点をドラッグして、任意に図形を回転できます。

Page118

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

画像オブジェクトのプロパティ
スライド上の画像オブジェクトを選択します。
連動ツールバーの［画像プロパティ...］アイコンをクリックします。

［画像のプロパティ］パネルが表示されます。

［名前］：画像オブジェクトの名前です。
［ロケーションとサイズ］：位置と大きさを数値で指示することができます。
［回転］：画像の回転角度を入力します。
［タイミング］：「メッセージオブジェクトのタイミング」の項をご参照ください。
［フェードアニメーションが有効］チェックボックスをオンにするとオブジェクトにフェードアニ
メーション効果を定義することができます。

［OK］ボタンをクリックすると適用されてパネルが閉じます。

Page119

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

形状オブジェクトの挿入
長方形、楕円形、多角形などを作成してオブジェクトとしてスライド上に配置することができます。
これらにはイベントを定義することもできます。
オブジェクトツールバーの［形状の挿入］アイコンをクリックします。

連動ツールバーに下図のようなアイコンが表示されます。

形状オブジェクトの作成ツールには、［長方形ツール］［楕円ツール］［フリーハンドツール］［多角形ツール］
があります。

Page120

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

長方形ツール
正方形・長方形のオブジェクトを作成します。
連動ツールバーの［長方形ツール］アイコンをクリックします。

十字カーソルを対角にドラッグ・アンド・ドロップして長方形を作成します。

キーボードの［Shift］キーを押しながらドラッグ・アンド・ドロップすると正方形を作成します。

楕円ツール
円形・楕円形のオブジェクトを作成します。
連動ツールバーの［楕円ツール］アイコンをクリックします。

十字カーソルをドラッグ・アンド・ドロップして楕円形を作成します。

キーボードの［Shift］キーを押しながらドラッグ・アンド・ドロップすると円を作成します。

Page121

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

フリーハンドツール
不規則な形状のオブジェクトを作成します。
連動ツールバーの［フリーハンドツール］アイコンをクリックします。

投げ縄カーソルをドラッグして自由な形状を作成します。

カーソルをドロップした場所から始点へつながれて閉じた形状が作成されます。

多角形ツール
連動ツールバーの［多角形ツール］アイコンをクリックします。

投げ縄カーソルでスライド上をクリックします。

クリックした箇所に頂点が作られます。
続けて頂点となる箇所をクリックしていきます。
キーボードの［Shift］キーを押しながらクリックすると 45 度で線を置きます。

Page122

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

多角形の閉じ方
始点の位置にカーソルを置くと、投げ縄カーソルの右下に［。］が表示されます。
ここでクリックすると多角形が閉じられます。

他の方法：ダブルクリックするとその箇所から始点へとつながれて閉じた多角形が作成されます。または、キーボードの［Enter］キーを押すとその箇所から始点へとつながれて閉じた多角形が作成されます。

形状オブジェクトの編集
形状の移動
スライド上の形状オブジェクトをクリックして選択します。
ドラッグ・アンド・ドロップで形状を移動します。このときカーソルは手の形に変わります。

［形状のプロパティ］パネルで数値を変更する方法もあります。
サイズの変更スライド上の形状オブジェクトをクリックして選択します。
ハンドルをドラッグ・アンド・ドロップして形状の大きさを変えます。このときカーソルは両方向矢印に変化しています。

Page123

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

キーボードの［Shift］キーを押しながらドラッグ・アンド・ドロップすると
幅：高さの比率を固定したまま大きさを変えることができます。
形状の重ね順
スライド上の形状オブジェクトを右ボタンでクリックしてショートカットメニューの［重ね順］から移動させたい場所へのコマンドを選択します。
形状の削除
スライド上の形状オブジェクトをクリックして選択します。
キーボードの［Delete］キーを押します。
他の方法：右ボタンをクリックしてショートカットメニューから［削除］を選択します。あるいは、ボタンコマンドツールバーの［削除］アイコンをクリックし

ます。
影をつける
形状オブジェクトを選択します。
連動ツールバーの［影のプロパティ...］アイコンをクリックします。

［影のプロパティ］パネルが表示されます。
メッセージオブジェクトの［影のプロパティ］パネルの項をご参照ください。
形状の回転
スライド上のオブジェクトを右ボタンでクリックしてショートカットメニューの［回転する］からコマンドを選択します。
任意に回転させる
オブジェクトの基準点をドラッグして、任意に図形を回転できます。

Page124

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

形状オブジェクトのプロパティ
スライド上の形状オブジェクトを選択します。
連動ツールバーの［形状のプロパティ...］アイコンをクリックします。

［形状のプロパティ］パネルが表示されます。

［名前］：形状オブジェクトの名前です。
［ロケーションとサイズ］：位置と大きさを数値で指示することができます。
［回転］：形状の回転角度を入力します。
［タイミング］：「メッセージオブジェクトのタイミング」の項をご参照ください。
［フェードアニメーションが有効］チェックボックスをオンにするとオブジェクトにフェードアニ
メーション効果を定義することができます。

［OK］ボタンをクリックすると適用されてパネルが閉じます。

Page125

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

矢印ツール
スライドに矢印をオブジェクトとして作成配置することができます。
矢印には、音声、イベントを入れることもできます。
オブジェクトツールバーの［ライン・矢印］アイコンをクリックします。

連動ツールバーから［矢印ツール］を選択しスライドにドラッグ＆ドロップします。

始点、終点とも形状を編集できます。また、線の太さ、色、形状などを設定します。
矢印の形状はドロップダウンメニューから選択します。

矢印のスタイルはスタイルシートに記録することができます。

Page126

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

ラインツール
スライドに矢印をオブジェクトとして作成することができます。
矢印には、音声、イベントを付加することもできます。
オブジェクトツールバーの［ライン・矢印］アイコンをクリックします。

連動ツールバーから［ラインツール］を選択しスライドにドラッグ＆ドロップします。

線の太さ、色、線種を設定します。

ラインのスタイルはスタイルシートに記録することができます。

Page127

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

カラーハイライト
スライド内の重要箇所に蛍光ペンで線を引いて目立たせるようなツールが［カラーハイライト］です。

オブジェクトツールバーの［カラーハイライト］アイコンをクリックします。

カラーハイライトの色、不透明度を設定します。
スタイルシートにスタイルを保存しておくことができます。

Page128

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイドマット
スライド内の重要個所を目立たせるために、他の部分を暗く隠すように見せる手法です。

オブジェクトツールバーの［マット］アイコンをクリックします。

暗部の色と不透明度、枠の色、太さなどを設定できます。
設定した値はスタイルシートに保存できます。

Page129

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

オブジェクトのタイミング
オブジェクトをスライドに表示させるタイミングと時間を調整します。プロパティを設定する方法と［タイムライン］タブ上で設定する方法があります。

［タイムライン］タブ内での調整
スライドビュー下の［タイムライン］タブをクリックして最前面に表示します。
スライド上のオブジェクトを選択します。
オレンジ色の長方形は選択されているオブジェクトの表示時間を示しています。
ドラッグ・アンド・ドロップで移動してタイミングを変更したり、長方形の長さを調節することで表
示時間を変更したりすることができます。

Page130

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

複数オブジェクトの調整
スライド上のオブジェクトのひとつをクリックして選択します。
続けて［Ctrl］キーを押しながら他のオブジェクトをクリックして選択に追加します。

タイミング調整［同じ開始時間］：選択されたオブジェクトを同時にスライド上に表示させます。
［同じ終了時間］：選択されたオブジェクトをスライド上から同時に非表示にします。
［同じ開始 終了時間］：同時に表示し同時に非表示にします。
［スライド終了まで表示する］：スライドの終わりまで表示させます。
［シークエンス時間］：選択した順番でひとつずつ表示・非表示していきます。

Page131

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイドタイミングリンク
オブジェクトの表示のタイミングを相互関係で定義しておくことができます。タイムライン上の異なる２つのオブジェクトが連結されることによって、一方が変更された場合に、その関係性を維持した
まま他方の要素が更新されます。

タイミングリンクの追加
スライド上の２つのオブジェクトを選択します。
このときの選択順序は重要です。注意してください。

タイムラインの右側にある、［タイミングリンクの追加...］アイコンをクリックします。

［タイミングリンク］パネルが表示されます。

Page132

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイドタイミングリンクの方法には次の４種類があります。
［エンドからスタートへ］：はじめに選択されたオブジェクトの動作終了後に続けて２番目に選択されたオブジェクトを動作します。
［スタートからエンドへ］：２番目に選択されたオブジェクトの動作終了後に続けてはじめに選択されたオブジェクトを動作します。
［スタートを一致］：はじめに選択されたオブジェクトの動作開始時に２番目に選択されたオブジェクトの動作開始時を合わせます。
［エンドを一致］：はじめに選択されたオブジェクトの動作終了時と２番目に選択されたオブジェクトの動作終了時を合わせます。

タイミングリンクのタイプを選択します。
［OK］ボタンをクリックします。

指示されたオブジェクトの表示時間とタイミングが変更されます。
タイムライン上のオレンジの長方形の位置が変化します。（下図は、その一例です）

タイミングルールを手動に切り替えるためにメッセージが表示されることがあります。

タイミングリンクの解除
解除したいオブジェクトを選択します。
タイムラインの右側にある

Page133［タイミングリンクを取り除く］をクリックします。

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

ムービーの埋め込み
ビューレットビルダー8 ではスライド内に swf ファイルと Flv ファイルを埋め込むことができます。

オブジェクトツールバーの［ムービー挿入］アイコンをクリックします。もしくは［挿入/ムービー…］をクリックします。

ムービーファイル（FLV ファイル、SWF ファイル）を読み込みます。

Page134

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

ムービーが読み込まれると黒い四角のオブジェクトが表示されます。
位置とサイズを調節します。

タイムラインはムービーの長さが計測できる場合（一時停などが含まれずに再生する場合等）計測されたムービー長がスライドに追加されます。

ムービーのプロパティ
ムービーオブジェクトをダブルクリックすすと［ムービーのプロパティ］が開きます。

［一般タブ］
Page135

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

オブジェクト名と配置位置とサイズを調整します。
［ソース］タブローカルにあるムービーファイルやウェブ上にあるファイルの URL を入力します。

［オプション］タブ

挿入したムービーをプレビューするには swf にパブリッシュする必要があります。
FLV にパブリッシュした場合挿入ムービーは再生できません。

Page136

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

ポップアウトハイライトの配置
スライド内の画像を目立たせるために一部だけ拡大表示する機能です。
範囲選択された個所がポップアウトズームし、元に戻ります。

オブジェクトツールバーの［ポップアウトハイライト］アイコンをクリックします。

拡大したい範囲をドラッグで囲みます。

ポップアウトハイライトの編集
ポップアウトハイライトを選択します。
連動メニューの［エフェクトのプロパティ］をクリックします。

［効果のプロパティ］パネルが表示されます。

ポップアウトハイライトのプロパティ［タイミング］：エフェクトで設定した時間も含まれています。
［影のプロパティ］：ポップアウト ハイライトに影をつけることができます。
効果のプロパティ、影のプロパティはスタイルシートに保存できます。

Page137

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

ズームの挿入拡大・縮小を動画の中で行います。ズームの範囲、スピード、タイミングを調整できます。

オブジェクトツールバーの［ズーム］アイコンをクリックします。

拡大したい範囲をドラッグで囲みます。

Page138

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

ズームのプロパティ
ズームを選択して、連動ツールバーの［プロパティ］アイコンをクリックします。

［ロケーションとサイズ］欄：左、上の座標と、幅、高さを入力します。
拡大サイズの縦横比は元スライドと同じです。
［タイミング］欄：［開始時間］スライド表示からズーム開始までの時間です。
［表示時間］ズームしている時間です。

ズーム終了後は拡大した表示が次スライド以降も続きます。

ズームのプレビュー

タイムラインのスライド欄にある三角ゲージをドラッグして移動させます。

Page139

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

オブジェクトへの影響と調整について
拡大表示後、吹き出しの位置がずれてしまうことがあります。
この場合はタイムラインから三角ゲージをドラッグし、プレビューを確認しながら、吹き出しを調整してください。

拡大表示をもとに戻す
一旦拡大表示したスライドを、動画内で元の表示に戻すには［フルサイズ］をクリックします。
ズーム設定と同じ要領でタイミングを修正します。

ズームの取消タイムライン上で、ズームオブジェクトを削除します。

Page140

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

ボタンオブジェクトの挿入
ボタンオブジェクトは閲覧者と Viewlet の間の対話性を拡張するのに有効な要素です。

オブジェクトツールバーの［ボタンの挿入］アイコンをクリックします。

［テキストエディタ］が起動します。

ボタンのタイトル、フォント、大きさを設定します。
［OK］ボタンをクリックします。
デフォルトスタイルのボタンオブジェクトがスライド上に配置されます。

Page141

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

ボタンオブジェクトのプロパティ
スライド上のボタンオブジェクトを選択します。
連動ツールバーの［ボタンのプロパティ...］アイコンをクリックします。

［ボタンのプロパティ］パネルが表示されます。

［テキスト：］フィールド：入力した文字列がボタン上に表示されます。
［ロケーションとサイズ］欄：表示する位置とサイズを指示します。
数値で指示することができるので別のスライドと位置を揃えるときなどに便利です。
［タイミング］欄：ボタンの表示時間を調整します。

［OK］ボタンをクリックするとパネルが閉じて適用されます。
ボタンはクリックするとイベントを発生するオブジェクトです。ボタン装着後は［イベント］を設定してください。

Page142

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

ボタンの編集スタイルの変更
スライド上のボタンオブジェクトを選択します。
連動ツールバーの［ボタンスタイル...］アイコンをクリックします。

［ボタンスタイル］パネルが表示されます。

スタイルを選択します。
［OK］ボタンをクリックするとパネルが閉じて適用されます。
ボタンのタイプ、フォント情報は、スタイルシートに保存できます。
テキストエディタで開く
ボタンの表示タイトル、フォントサイズ、文字色などを変更します。
移動
スライド上のボタンオブジェクトを選択します。
ドラッグ・アンド・ドロップでボタンを移動します。カーソルは手の形に変わります。
サイズの変更スライド上のボタンオブジェクトを選択します。
ハンドルをドラッグ・アンド・ドロップしてボタンの大きさを変えます。このときカーソルは両方向矢印に変化しています。
削除
スライド上のボタンオブジェクトを選択します。キーボードの［Delete］キーを押します。

Page143

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

イベントとアクション
ビューレットビルダー8 では、スライドの進行や閲覧者の動作に合わせてスライドやオブジェクトなどの動きを指示することができます。

イベントとアクションの一覧
イベントとアクションはオプションとして用意されています。以下はその種類です。
イベント

ハイパーリンクのイベント

画像のイベント
形状のイベント
ボタンのイベント
スライドのイベント（クイズゾーンなし）

スライドのイベント（クイズゾーンあり）

アクション

イベントの種類（全イベントに共通）

クリック時
ロールオーバー
クリック時
ロールオーバー

スライドに移動ロールアウト

スライドを移動クリック時

スライドのリピート

実行前

ウェブページを開く

実行後

Viewlet を再生

キーアクション

Viewlet を一時停止

実行前

Email To

実行後

JavaScript

キーアクション

オブジェクトを表示する

正解の時

オブジェクトを隠す

未解答時

サウンドの再生タイムアウト時

ムービー再生

不正解の時

全て

スコア表示

最後のスライド以外全て 解答を判定する
最初

サブミット・スコア

2 番目

ムービーを閉じる

3 番目
最後
残り

Page144

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

ボタンのイベント
スライド上のボタンを選択します。
連動ツールバーの［イベント...］アイコンをクリックします。

［ボタンのイベント］パネルが表示されます。

閲覧者がボタンオブジェクトをクリックした時のアクションを指示します。

スライドのイベント［スライド］タブでスライドを選択します。連動ツールバーの［イベント...］アイコンをクリックします。［スライドのイベント］パネルが表示されます。

［実行前］タブ：スライドのロードのあとに指示するアクションです。
［実行後］タブ：スライドが切り替わる前のアクションです。
［キーアクション］タブ：指示したキーを閲覧者が押したときのアクションです。

Page145

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

画像・形状オブジェクトのイベント
スライド上の形状オブジェクトを選択します。
連動ツールバーの［イベント...］アイコンをクリックします。

［形状のイベント］パネルが表示されます。

［クリック時］タブ：閲覧者が形状オブジェクトをクリックした時のアクションです。
［ロールオーバー］タブ：閲覧者がマウスカーソルを形状オブジェクトの上に置いたときのアクションです。
［ロールアウト］タブ：閲覧者がマウスカーソルを形状オブジェクトから離したときのアクションです。

Page146

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

アクション
イベントに対する動作内容を指示します。

前述のイベントのパネルで、イベントのタブを選択します。
［追加］アイコンをクリックします。
［アクション］パネルが表示されます。

［アクションタイプ：］ドロップダウンリストからアクションを選択します。
アクションの種類に応じて下段にオプションが表示されます。
必要な項目の値を入力します。
［OK］ボタンをクリックするとパネルが閉じて適用されます。

Page147

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

アクション一覧
アクション名内容

備考

Email To

メールを送信する

文字は unicode で送信

JavaScript

JavaScript を入力します。

変数表から設定します。

Viewlet を一時停止

再生中のムービーを一時停止

Viewlet を再生

ムービーを再生する

一般的なスタート用のアクション

ウェブページを開く

ウェブページにリンクFlash のセキュリティ設定に注意

オブジェクトを表示する

オブジェクトを表示させる

画像、矩形、メッセージ等に有効

オブジェクトを隠す

オブジェクトを非表示にする

画像、矩形、メッセージ等に有効サウンドの再生サウンドの再生ファイルもしくは録音した音声

サブミット・スコア

採点データの送信

クイズコンテンツのみ有効

スコア表示

採点結果の表示

クイズコンテンツのみ有効

スライドに移動

指定したスライドに移動する

絶対パス

スライドのリピート

最ライドをもう一度再生する

スライドを移動前 or 後のスライドに移動する

相対パス

ムービーを閉じる

ムービーウィンドウを閉じますHtml を制御するコマンドです。
swf だけでは動きません

ムービー再生

挿入したムービーを再生

ムービーが読み込まれているスライドのみ有効

解答を判定する

解答を判定する

クイズコンテンツのみ有効

アクションの注意点
アクションは swf にパブリッシュした場合のみ、実行されます。FLV、そのほかの出力では動作しません。
［ムービーを閉じる］は、swf＋html の状態、かつ Javascript が有効な場合のみ動作します。
動作の確認はパブリッシュして行います。パソコン、OS のバージョン、セキュリティ状況によっては動作しな場合があります。予めご了承ください。

Page148

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

順序の変更
ひとつのスライドまたはオブジェクトに対して複数指示しているアクションは、その順序を変更することができます。

リスト内でアクションを選択して、へ移動するには［上へ］アイコンでアクションを上の順番へ移動します。下［下へ］アイコンをクリックします。

［OK］ボタンをクリックするとパネルが閉じて適用されます。

アクションの編集
タブ内で内容を変更したいアクションを選択して［変更］アイコンをクリックします。

［アクション］パネルが表示されます。
［アクションタイプ：］やオプションなどを変更します。
［OK］ボタンをクリックするとパネルが閉じて適用されます。

アクションの削除
タブ内でアクションを選択します。
［削除］アイコンをクリックします。
アクションが削除されます。
［OK］ボタンをクリックするとパネルが閉じて適用されます。

Page149

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

ハイパーリンク
ビューレットビルダー8 では、文字列の部分を選択してハイパーリンクを設定することができます。
この他のオブジェクトに関するハイパーリンクはイベントとアクションで設定することができます。

メッセージのハイパーリンク（テキストリンク）
テキストボックス内の文字列に対してハイパーリンクを設定することができます。
リンクに使用する文字列を選択します。

連動ツールバーの［ハイパーリンク...］アイコンをクリックします。

［ハイパーリンク］パネルが表示されます。

定義するイベントのタブを選択します。
［追加］アイコンをクリックします。

Page150

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［アクション］パネルが表示されます。

［アクションタイプ：］ドロップダウンリストから［ウェブページを開く］を選択します。
［URL］フィールドに URL を入力します。
［ウィンドウサイズ］と必要な［Windows オプション］を選択します。
［OK］ボタンをクリックするとパネルが閉じて適用されます。
ハイパーリンクの指示されている文字列には青色の下線（デフォルトのスタイル）が引かれます。文字のスタイルは連動ツールバーや右ボタンのショートカットメ
ニューから変更することができます。

Page151

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

インタラクティブゾーン
動画コンテンツでの対話性は閲覧者の興味を惹きつけ、関心を維持するのに大切です。ビューレット
ビルダー8 の重要な特徴であるインタラクティブな動画を用いることによってトレーニング、マーケ
ティング、リサーチなどにおいて必要になる情報をあつめることもできます。

インタラクティブゾーンの種類
一時停止ゾーン
このゾーンを挿入されたスライドで一時停止します。スライドの右下部に三角形の一時停止マークが表示されます。Viewlet 最盛時はこの一時停止マークは表示されず、閲覧者からは見えません。
クリック範囲型クイズゾーン
スライドの一部にクリックするための領域を配置します。たとえば閲覧者が画面上をクリックして解答するとき、その正否を判別するのにクリック範囲を配置しておきます。
テキスト型クイズゾーン
閲覧者がテキスト入力フィールドに解答を入力するタイプのクイズゾーンです。
キー入力型クイズゾーン
閲覧者のキー入力から正否を判別する形式のクイズゾーンです。
選択型クイズゾーン
選択肢から正解を選ぶ形式のクイズゾーンです。

Page152

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

スライドに含まれるインタラクティブゾーンの数
インタラクティブゾーンはその特性上ひとつのスライドにつきいずれかの種類をひとつ配置します。
重ねて配置しようとすると［警告］パネルが表示されます。

［オプション］を選択することでインタラクティブゾーンを置き換えることができます。また、新しいスライドとして挿入することもできます。

サウンドの付加
ゾーンのオブジェクトにはサウンドを付加することもできます。
「サウンド」の項をご参照ください。

応答メッセージオブジェクト
インタラクティブゾーンを作成するときは、閲覧者の解答に対しての応答を準備します。
たとえば、正解したときのメッセージオブジェクトや、不正解を知らせるメッセージオブジェクトなどです。アクションの組み合わせによって閲覧者をリンクから誘導することなどもできます。
クイズゾーンを挿入すると解答欄などのほかに応答に使用するメッセージオブジェクトが２または３種配置されます。

応答のメッセージオブジェクトは他のメッセージオブジェクトと同様にテキストのスタイル、メッ
セージのタイプを編集することが可能です。
「メッセージオブジェクトの編集」の項をご参照ください。
緑色のメッセージオブジェクト：正解のとき表示されます。
ライム色のメッセージオブジェクト：解答が不完全な場合に表示されます。解答を入力していないときあるいは、選択していないときなどです。
赤色のメッセージオブジェクト：不正解の場合に表示されます。

Page153

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

応答オブジェクトの削除
スライドの応答オブジェクトを選択します。
ボタンコマンドツールバーの［削除］アイコンをクリックします。

削除の対象となったオブジェクトによっては、同時にスライド内のクイズオブジェ
クト全体を削除するものがあります。

イベントとアクション
クイズゾーンにイベントとアクションを定義することもできます。

クイズゾーンを含んでいるスライドを選択します。
連動ツールバーの［イベント...］アイコンをクリックします。

［スライドのイベント］パネルが表示されます。

イベントのタブを選択します。
［追加］アイコンをクリックします。
［アクション］パネルが表示されます。
アクションを選択してオプションを設定します。
［OK］ボタンをクリックします。

Page154

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

スコアリングインタラクティブゾーンでは閲覧者の入力、解答に対して制限時間を設けたり、得点を設定したりすることが可能です。
スコア設定
クイズゾーンを含むスライドを選択します。
連動ツールバーの［スコア設定...］アイコンをクリックします。

［スコア］パネルが表示されます。

［得点］欄：正解に対する配点を設定します。
［解答回数］欄：解答を許される回数の上限を設定します。これに達すると不正解とします。
［再解答を許可する］チェックボックス：Viewlet を連続して再生したとき、同じクイズに対して再び解答することができるようにするにはこれをオンにします。
［時間］欄：解答までの制限時間です。チェックボックスをオンにすると制限時間内に解答しない場
合不正解となります。
［OK］ボタンをクリックすると適用されてパネルが閉じます。

Page155

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

クリック範囲型クイズゾーン
スライドの一部に配置される、閲覧者のクリックによって動作する領域です。この領域を閲覧者がクリックしたとき正解となります。

・クリックの領域を示すオブジェクト
・２つの応答メッセージオブジェクトが含まれます。

クイズゾーンを配置するスライドを選択します。
オブジェクトツールバーの［挿入 クリック範囲型クイズ］アイコンをクリックします。

デフォルトのクリック範囲と 3 種類の応答メッセージオブジェクトがスライド中央に配置されます。
応答のメッセージオブジェクトは他のメッセージオブジェクトと同様にテキストのスタイル、メッセージのタイプを編集することが可能です。

クリック範囲のプロパティ
Viewlet として再生されたときのクリック範囲の背景色、不透明度、境界線の色と線の太さをそれぞれ状況別に変更することができます。
クリック範囲をダブルクリックします。
他の方法：クリック範囲を選択して連動ツールバーの［クリック範囲の変更...］アイコンをクリックします。
［クリック範囲］パネルが表示されます。

Page156

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［ノーマル］欄：下記２つの状態以外での見え方。
［ロールオーバー］欄：クリック範囲に閲覧者のマウスカーソルが載っている状態での見え方。
［選択状態］欄：閲覧者がクリック範囲をクリックしたときの見え方。
［ダブルクリックで選択する］チェックボックス：閲覧者が回答するときシングルクリックではなくダブルクリックを使用します。

［背景色］［背景色］アイコンをクリックします。
［背景色］カラーパレットが表示されます。

カラーを選択します。
［OK］ボタンをクリックすると背景色として適用されてパネルが閉じます。
［不透明度］

不透明を１００として不透明度を入力します。

［境界線］

境界線の太さを入力します。
単位は pixel です。
［境界線色］アイコンをクリックします。
［境界線色］カラーパレットが表示されます。
カラーを選択します。
［OK］ボタンをクリックすると適用してパネルを閉じます。

Page157

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

クリック範囲の編集
移動
スライド内のクリック範囲を選択します。
ドラッグ・アンド・ドロップでクリック範囲を移動します。このときカーソルは手の形に変わります。
サイズ変更
スライド内のクリック範囲を選択します。
ハンドルをドラッグ・アンド・ドロップしてクリック範囲の大きさを変えます。このときカーソルは両方向矢印に変化しています。
クイズオブジェクトの削除
スライド内のクリック範囲を選択します。
キーボードの［Delete］キーを押します。
他の方法：ボタンコマンドツールバーの［削除］アイコンをクリックします。あるいは、クリック範囲の上で右ボタンをクリックしてショートカットメ
ニューから［削除］を選択します。
クイズオブジェクト全体が削除されます。

Page158

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

テキスト入力型クイズゾーン
閲覧者が解答欄に文字列を入力する形式のインタラクティブゾーンです。

・テキストを入力するフィールド・３つの応答メッセージオブジェクト

以上のものが含まれます。

クイズゾーンを配置するスライドを選択します。
オブジェクトツールバーの［挿入 テキスト型クイズ］アイコンをクリックします。

デフォルトのテキスト入力フィールドと 3 種類の応答メッセージオブジェクトがスライド中央に配置されます。

クイズゾーンの編集
テキスト入力フィールドの編集
テキスト入力フィールドをダブルクリックします。
他の方法：テキスト入力フィールドを選択して連動ツールバーの［正解の編集...］アイコンをクリックします。
［変更 テキストフィールド］パネルが表示されます。

［正解］フィールド：正解を入力します。
複数の正解を用意するには、改行して入力します。
［確定キー：］：閲覧者が解答の入力を確定するための動作をドロップダウンリストから選択します。
日本語入力システムの変換機能で使用するキーと重複しないようにします。

Page159

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［確定キー：］ドロップダウンリストで［None］を選択したときは、入力を確定するためにボタンオブジェクトなどを追加しておきます。
ボタンオブジェクトの［クリック時］のイベントに［解答を判定する］アクションを定義しておきます。これで閲覧者の解答の正否が判定されます。
［大文字小文字を区別する］：正解が固有名詞などの場合区別する必要があります。
［右端で折り返す］：入力された内容がテキスト入力フィールドの長さよりも長くなった場合に右端で折り返して表示させるにはこのチェックボックスをオンにします。
［入力文字列を伏せ字にする］：閲覧者がテキストフィールドに入力した文字をパスワード入力の際のように伏せ字にする機能です。
移動
スライド内のテキスト入力フィールドを選択します。
ドラッグ・アンド・ドロップでテキスト入力フィールドを移動します。このときカーソルは手の形に変わります。
サイズ変更
スライド内のテキスト入力フィールドを選択します。
ハンドルをドラッグ・アンド・ドロップしてテキスト入力フィールドの大きさを変えます。このときカーソルは両方向矢印に変化しています。

クイズオブジェクトの削除
スライド内のテキスト入力フィールドを選択します。
ボタンコマンドツールバーの［削除］アイコンをクリックします。

クイズオブジェクト全体が削除されます。

Page160

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

キー入力型クイズゾーン
指定されたキーを閲覧者が押したかどうかを判定することができます。

・キーストロークオブジェクト
・解答に対する３つの応答のメッセージオブジェクト

以上のものが含まれます。

クイズゾーンを配置するスライドを選択します。
オブジェクトツールバーの［挿入 キー入力型クイズ］アイコンをクリックします。

キーストロークと３つの応答メッセージのオブジェクトがスライド中央に配置されます。

キーストロークの定義
キー入力型クイズゾーンを含むスライドを選択します。
連動ツールバーの［キーストローク定義...］アイコンをクリックします。

［キーストローク定義］パネルが表示されます。

［定義...］ボタンをクリックします。
［何かキーを押してください。］の文字が点滅します。
キーボードから任意のキーを押します。
シングルキーおよび組み合わせでの定義が可能です。
［OK］ボタンをクリックすると確定してパネルを閉じます。

Page161

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

選択型クイズゾーン
選択肢のあるクイズ形式のインタラクティブゾーンです。

・問いのためのメッセージオブジェクト
・解答のための選択肢とチェックボックス
・解答を確定するためのボタンオブジェクト
・３つの応答メッセージオブジェクト

以上のものが含まれます。

クイズゾーンを配置するスライドを選択します。
オブジェクトツールバーの［挿入 選択型クイズ］アイコンを選択します。

メッセージオブジェクトとチェックボックス、ボタンオブジェクト、応答メッセージのオブジェクト
がスライド中央に配置されます。

質問のメッセージオブジェクトの編集
質問のメッセージオブジェクトをダブルクリックします。
メッセージ内のカーソルが点滅します。
メッセージを編集します。
完了したら、オブジェクトの外側でクリックして選択を解除します。

選択肢の追加スライド内の選択肢オブジェクトのひとつを選択します。
連動ツールバーの［選択肢を追加］アイコンをクリックします。

スライド内に新しく選択肢オブジェクトが配置されます。

選択肢の削除
選択肢オブジェクトを選択します。
ボタンコマンドツールバーの［削除］アイコンをクリックします。

選択肢オブジェクトが削除されます。

Page162

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

正否の設定
正解に設定する選択肢のチェックボックスをダブルクリックします。
チェックマークが表示されます。

チェックマークを取り消すには、ダブルクリックします。
連動ツールバーの［正解の編集...］アイコンをクリックすることでも正否の設定を切り替えることができます。
複数の正解正解とする選択肢全てに上記と同様の方法でチェックマークを表示させます。

選択肢のメッセージオブジェクトの編集
質問のメッセージオブジェクトの編集方法と同様です。

解答確定のボタンオブジェクトの編集
スライド内の解答のボタンオブジェクトを選択します。

連動ツールバーからボタンのスタイル、テキスト、フォントサイズ、位置を変更できます。
ボタンのスタイルやイベントとアクションについては、「ボタンオブジェクトの編集」の項をご参照ください。

チェックボックスのスタイルを変更する
チェックボックスを右ボタンでクリックしてショートカットメニューから［チェックボックスのスタ
イル］を選択します。

Page163

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［チェックボックス スタイル］パネルが表示されます。

スタイルを選択し［OK］ボタンをクリックします。
ラジオボタンのオブジェクトがスライド上に配置されます。

正否の設定はラジオボタンのダブルクリックで行います。

クイズゾーンの削除
スライド内の質問や選択肢のすべてを削除するには、オブジェクトツールバーの［挿入 選択型

クイズ］アイコンを選択します。
［警告］パネルが表示されます。

［取り消す］オプションを選択します。
［OK］ボタンをクリックするとスライド内のクイズ全体が削除されます。

Page164

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

一時停止ゾーン
Viewlet の再生を中断させるために使用します。
たとえば、閲覧者がハイパーリンクをクリックする必要のあるときなどに画面を停止させておきます。

一時停止ゾーンの挿入
オブジェクトツールバーの［挿入 一時停止］アイコンをクリックします。

赤色の三角形がスライドの右下に表示されます。

この三角形の表示されたスライドの箇所で再生が一旦停止します。
Viewlet ではこの三角形は表示されません。
プロジェクトタブスライドに一時停止のマークが表示されます。

タイムラインに［一時停止レイヤ］ができ、一時停止オブジェクトが表示されます。

Page165

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

一時停止ゾーンの編集
タイムライン上で一時停止オブジェクトを移動して、オブジェクトのタイミングを変更します。
［タイミングルールの変更］パネルが表示されます。

［OK］ボタンをクリックすると一時停止マークが取り消されます。

一時停止ゾーンの削除

タイムラインよりレイヤごと削除します。

一時停止オブジェクトが 2 つ以上ある場合はオブジェクトごと、マウスで指定しで削除します。

Page166

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

インポート
ビューレットビルダー8 には以下のインポートオプションが装備されています。
・スライドのインポート
・テキストのインポート

他のプロジェクトからのインポート
メニューバーから［ファイル］→［インポート］→［スライドのインポート...］を選択します。
［スライドのインポート］パネルが表示されます。

［ブラウズ］ボタンをクリックしてプロジェクトファイルを選択します。

インポートするスライドを選択します。
複数のスライドを選択するときは［Ctrl］キーを押しながらスライド名をクリックします。

Page167

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

解像度の違うプロジェクトの設定
サイズの違うプロジェクトをインポートする場合はインポート先、もしくはインポートするスライド
サイズに合わせてリサイズします。

［OK］ボタンをクリックします。

XML ファイルのインポート
エクスポートした XML ファイルのキャプションを別の言語に翻訳して取り込むなどの作業に大変便利です。
この機能を有効に使用するためには、スライドに含まれるメッセージオブジェクトがインポートしようとする XML の内容と一致している必要があります。
メニューバーから［ファイル］→［インポート］→［テキスト（キャプション）のインポート...］を選択します。
XML ファイルを選択して［開く］ボタンをクリックします。

Page168

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

エクスポート
ビューレットビルダー8 には以下のエクスポートオプションが準備されています。
・XML 形式での出力
・サウンドの出力

XML ファイルの出力
メニューバーから［ファイル］→［エクスポート］→［テキスト（キャプション）...］を選択します。
ファイルの保存先を選択します。ファイル名を入力します。
［保存する］ボタンをクリックします。
メッセージオブジェクトに含まれるテキストが出力されます。

サウンドの出力
ビューレットビルダー8 のプログラムのフォルダ以外の場所に保存先を作成しておきます。
メニューバーから［ファイル］→［エクスポート］→［サウンド...］を選択します。
［サウンドのエクスポート］パネルが表示されます。

サウンドを含むスライドを選択します。
［エクスポート］ボタンをクリックします。
ファイルの保存先を選択します。
ファイル名を入力します。
［保存する］ボタンをクリックします。

Page169

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

プロジェクトのプロパティ
Viewlet の作成に必要な各種項目の設定を行ないます。
ボタンコマンドツールバーの［プロジェクトのプロパティ...］アイコンをクリックします。

［プロジェクトのプロパティ］パネルが表示されます。

このパネルでは、以下の 11 項目を確認・設定することができます。これらはパネル左のナビゲー
ションメニューからクリックして選択します。
［Viewlet プロファイル］

［画質］

［音質］

［Viewlet サウンド］［タイミング］［Viewlet オプション］［質問オプション］［言語］［Viewlet Skin］［HTML フレーム］［JavaScript］

設定内容はパネル下部の［基本の設定値として保存する］ボタンをクリックして保存しておくと、新しいプロジェクトの作成時に常に同じ条件を反映させることができます。

Page170

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［Viewlet プロファイル］
パブリッシュによって Viewlet に保存される内容です。

［プロジェクトのプロパティ］パネルのナビゲーションメニューから［Viewlet プロファイル］を選択します。
［Viewlet］タブ

タブは［Viewlet］、［制作者］、［団体名］の３つです。
各項目は空欄でも登録可能です。

Page171

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［制作者］タブ［団体名］タブPage172

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［画質］
作成される Viewlet の画質を選択します。
［プロジェクトのプロパティ］パネルのナビゲーションメニューから［画質］を選択します。

Page173

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［音質］作成される Viewlet の音質を選択します。
［プロジェクトのプロパティ］パネルのナビゲーションメニューから［音質］を選択します。

Page174

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［Viewlet サウンド］
マウスクリックやタイピングの効果音、Viewlet の BGM 作成に関する設定です。
［プロジェクトのプロパティ］パネルのナビゲーションメニューから［Viewlet サウンド］を選択します。

［サウンドトラック］欄：BGM のファイルを選択します。

Page175

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［タイミング］
表示時間に関する設定を行ないます。
［プロジェクトのプロパティ］パネルのナビゲーションメニューから［タイミング］を選択します。

［スライドタイミングの持続］欄：［可能］チェックボックスをオンにすると、スライドが編集された場合でもタイミングリンクの定義を維持させることができます。

Page176

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［Viewlet オプション］
Viewlet の作成に必要なオプションを設定します。
［プロジェクトのプロパティ］パネルのナビゲーションメニューから［Viewlet オプション］を選択します。

［一般］タブ［表示サイズ］欄で、［ウェブページに倍率をフィットさせる］を選択すると、Viewlet の大きさがウェブの表示に合わせて変わるように作成されます。

Page177

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［スタートボタン］タブ
Viewlet のムービーの冒頭にスタートボタンを表示させることができます。

［スタートボタンを Viewlet の最初に表示する］チェックボックスをオンにします。
続く［スタイル］、［スケール］などの欄で形状を編集することができます。

［エキストラ］タブ［プレローダー］欄：プレローダーは、Viewlet をロードする間に処理の経過状況をプログレスバー
で画面上に表示させるアニメーションです。
［アニメーション］欄：Viewlet ムービー本体の導入部や終了時に既存のアニメーション映像（Flash形式）を付加することができます。あらかじめ用意された SWF ファイルを選択します。
Page178

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［アドバンス］タブ［圧縮ムービー］：ファイルサイズをより小さくします。
［Flash の右クリックメニューを簡略化する］：右ボタンをクリックしたときに表示されるショート
カットメニューの項目を減らします。
［ループ再生］：スライドが終了すると始めに戻り自動再生を繰り返します。
［ローカルアクセスモード］：Viewlet からローカルのファイルにアクセスすることができます。

Page179

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［質問オプション］［プロジェクトのプロパティ］パネルのナビゲーションメニューから［質問オプション］を選択します。
［一般］タブ［ログイン機能を付加する］チェックボックス：Viewlet を再生する前にログインプロンプトを表示します。
［Viewlet パスワード］チェックボックスおよびテキストボックス：［ログイン機能を付加する］オ
プションがオンに設定されている場合、閲覧者はパスワードを入力してムービーを再生します。（下図は一例です）Page180

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

Viewlet のログインプロンプトでは［ユーザー名］入力フィールドも表示されます
がこれは任意です。1 文字以上入力します。
［合格設定 正解率％：］チェックボックス：オンにすると合否判定をします。全体の何％正解すると合格になるのかを数値入力します。
［リピートを許可する］チェックボックス：Viewlet 終了のスコア表示の際、リピートボタンを表示します。スコア表示しない場合も Viewlet の最初に戻るためのボタンを有効にします。（下図はスコ
ア表示の一例です）［スコアリング］タブ
質問と回答の制限などを設定します。

Page181

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［返信］タブ［制限時間］タブ［制限時間に達した場合の Viewlet アクション］
解答の制限時間の設定がある場合、それを超えたときの Viewlet のアクションを指示することができます。

Page182

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［アドバンスド］タブ

Page183

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［言語］
パブリッシュ時に付加される項目のテキストを編集することができます。
［プロジェクトのプロパティ］パネルのナビゲーションメニューの［言語］を選択します。

上図の［ログインパネル］タブと以下の各タブで編集することができます。
［サイドバー］タブ

Page184

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［現在の範囲］タブ［スコア表示パネル］タブ［パネルを再開する］タブ［スコアの警告が提示］タブ

Page185

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［ViewletSkin］
Viewlet を表示するデザインスキンを選択することができます。
［プロジェクトのプロパティ］パネルのナビゲーションメニューから［ViewletSkin］を選択します。

Page186

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

Page187

ViewletBuilder8 ユーザーズガイド

ユーザーズガイド2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［HTML フレーム］
Viewlet の HTML フレームを編集することができます。
［プロジェクトのプロパティ］パネルのナビゲーションメニューから［THML フレーム］を選択します。

［パブリッシュで使用される HTML フレームを選択］：ドロップダウンリストからデフォルトのフ
レームを選択します。
通常は［Standard.qframe］を利用ください。

HTML フレームの追加
ドロップダウンリストの右にある［HTML フレームを追加］アイコンをクリックします。

名前の変更［HTML フレーム名の変更］アイコンをクリックします。

Page188

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

HTML フレームの削除
ドロップダウンリストで選択して［HTML フレームの削除］アイコンをクリックします。確認のパネルが表示されます。
ファイルの追加［追加］アイコンをクリックします。
表示されるメニューから追加するファイルを選択します。
コーディング［ファイル］リストのファイル名をダブルクリックします。
［リソースプロパティ］パネルで編集することができます。
リソースの削除［ファイル］欄でファイルを選択します。
［削除］アイコンをクリックします。
ファイルを削除する前に確認してください。削除すると元に戻せません。

プロパティを保存する［プロジェクトのプロパティ］パネルのすべてのオプションを設定・確認して［OK］ボタンをク
リックします。

また、初期設定として以降同じ内容を使用するには［基本の設定値として保存する］ボタンをクリッ
クします。

Page189

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

Viewlet のパブリッシュ
パブリッシュとは作成してきた Viewlet のプロジェクトを閲覧するためのムービーを作成したり、特定のファイル形式
で出力したりすることをパブリッシュと呼びます。
ビューレットビルダー8 では基本出力として flash 形式（SWF）とともに Flash ビデオ形式（FLV）
YouTube や Facebook への公開、Word 用リッチテキスト形式、画像ファイル形式、PDF ファイルにも出力できます。

プロジェクトを開きます。
ボタンコマンドツールバーの、［Viewlet のパブリッシュ...］アイコンをクリックします。

［Viewlet のパブリッシュ］パネルが表示されます。

Page190

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

保存先の追加［Viewlet のパブリッシュ］パネルではリストに新たなロケーションを追加することができます。

左下の［追加］ボタンをクリックして［ローカル or ネットワークフォルダ…］を選択します。

出力先のフォルダを選択します。
削除
リストからロケーションを選択して［削除］アイコンをクリックします。

［警告］パネルが表示されます。
内容を確認し、よければ［はい］ボタンをクリックします。

Page191

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

Flash ムービーSWF 形式
ボタンコマンドツールバーの［Viewlet のパブリッシュ...］アイコンをクリックします。

［Viewlet のパブリッシュ］パネルが表示されます。

［出力フォーマット：］欄で［SWF］を選択します。
［結果を送る:］欄にメールアドレスを入力すると閲覧状況が電子メールで送信されます。送信元
メールアドレスは［scoring@qarbon.com］です。コンテンツサーバーがインターネットに接続されている必要があります。
［サブフォルダを作成］：ファイルをサブフォルダに作成します。
［ZIP ファイルへ出力］：ファイルフォルダを zip 形式で圧縮します。

右下の［パブリッシュ...］ボタンをクリックします。
パネルが変わります。

Page192

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［表示］ボタンをクリックすると、html が開いてムービーのプレビューが始まります。
［ブラウズ］ボタンをクリックすると出力先のフォルダが開きます。
以下のような複数のファイルが作成されフォルダが表示されます。
ムービーを確認するには html ファイルをクリックします（html から swf ファイ
ルが呼び込まれます）。

作成されるファイルの種類や内容は、個々のプロジェクトでの設定やコンテンツによって変わります。パブリッシュで生成されたファイルは個別に削除や移動、上書きなどの変更を行わないようにし、必ずフォルダ単位で操作してください。
Flash はウェブブラウザー上で表示され、ボタンやクイズなどのインタラクティブコンテンツが動作します。

Page193

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

FLV 形式でパブリッシュ
FLV とは Flash ビデオ形式の動画ファイルで、FlashPlayer 上で再生されることを前提として開発された動画フォーマットです。Youtube やニコニコ動画などのポータルサイトでも採用されている
フォーマットです。

［Viewlet のパブリッシュ］パネルのナビゲーションメニューから［現在のプロジェクト］を選択します。

［出力フォーマット:］欄で［FLV‐Flash ビデオ］を選択します。
［パブリッシュ...］ボタンをクリックします。

FLV 形式のムービーファイルが作成されます。
flv ファイルの閲覧には AdobeMediaPlayer、GOMplayer などのソフトウェアが必要です。

Page194

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

YouTube に公開
世界最大の動画サイト「YouTube」にムービーをアップロードする機能です。
あらかじめ YouTube のアカウントを取得しておきましょう。

［Viewlet のパブリッシュ］パネルのナビゲーションメニューから［YouTube］を選択します。

［タイトル］欄、［概要］欄を入力します。
［カテゴリー］欄、プライバシー欄も適当なものを選択します。

YouTube アカウントを指定します。
［アカウント名：］欄の［編集］ボタンをクリックします。
［YouTube］パネルが表示されます。

YouTube のアカウントを入力し［OK］をクリックします。
Page195

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

設定が完了したら［パブリッシュ］ボタンをクリックします。
［タイトル］等は YouTube から修正することができます。

［表示］ボタンをクリックしてムービーを確認することができます。
Youtube コンテンツの所有や公開の権利、著作権等につきましては Youtube のガ
イドラインをご覧ください。
［閉じる］ボタンをクリックします。

Page196

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

Facebook に公開
ソーシャル・ネットワーキング・サービス（SNS）の Facebook にムービーをアップすることができます。

［Viewlet のパブリッシュ］パネルのナビゲーションメニューから［Facebook］を選択します。

［タイトル］欄、［概要］欄を入力します。Facebook の投稿に表示されます。
［クリックで確認 Facebook アカウント］ボタンをクリックします。
［タイトル］等は Facebook から変更することができます。
ブラウザが起動します。
Facebook にログインし、表示に従って操作します。

Page197

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド［Viewlet のパブリッシュ］パネルに戻って、［クリックで完了 Facebook 認証］ボタンをクリックします。

［パブリッシュ...］ボタンをクリックします。

［表示］ボタンをクリックしてアップロードを確認することができます。
［閉じる］ボタンをクリックします。

Page198

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

ワードに出力する
Micrisoft Word で編集できるように rtf（リッチテキストフォーマット（Rich Text Format）の文書ファイル）で出力します。

［Viewlet のパブリッシュ］パネルのロケーションの［＋追加］アイコンをクリックして［ワード/RTF 文書］を選択します。

ワード出力の設定を行います［著作］欄：［追加］アイコンから出力先を追加できます。

［ページレイアウト...］ボタン：RTF 出力のレイアウトを変更することができます。

［印刷レイアウト］パネルが表示されます。

Page199

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド設定ができたら［OK］ボタンをクリックします。
［パブリッシュ...］ボタンをクリックします。
パブリッシュが完了すると下図のパネルが表示されます。

［表示］ボタンをクリックすると Word が起動してファイルが開きます。（使用しているパソコンにMicrisoft Word がインストールされている場合）

Page200

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

Page201

ViewletBuilder8 ユーザーズガイド

ユーザーズガイド2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

PDF に出力する
ロケーションの［追加］アイコンをクリックして［PDF ドキュメント］を選択します。

［印刷レイアウト］パネルが表示されます。
設定ができたら［OK］ボタンをクリックします。
［パブリッシュ...］ボタンをクリックします。
パブリッシュが完了すると下図のパネルが表示されます。

［著作：］欄：［現在のプロジェクト］を指定します。［＋］アイコンから出力先を追加できます。
［ページレイアウト...］ボタン：PDF のレイアウトを設定することができます。
［パブリッシュ...］ボタンをクリックします。
パブリッシュが完了すると［PDF ドキュメントパブリッシュ 完了］のパネルが表示されます。
［表示］ボタンをクリックすると PDF ファイルが開きます。
PDF をご覧になるには adobeReader が必要です。

Page202

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

画像ファイルとして出力する
ロケーションの［追加］アイコンをクリックして［画像設定］を選択します。

［著作：］欄で出力するプロジェクトを選択します。
［画像タイプ］：ファイル拡張子 BMP、JPG、PNG、TIFF から選択します。
［ファイルプレフィックス］：ファイル名の最初に固定の名前を付けます。
［ページレイアウト...］ボタン：レイアウトを変更することができます。

Page203ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

各設定ができたら［パブリッシュ...］ボタンをクリックします
画像ファイルに出力されます。

Page204

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

HTML に出力する
スライドを画像で出力する方法です。

ロケーションの［追加］アイコンをクリックして［HTML ドキュメント］を選択します。

HTML ドキュメントの設定を行います［パブリッシュ...］ボタンをクリックします。
HTML ドキュメントとして出力されます。
HTML ドキュメントは html とスライド画像データで構成されます。

Page205

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

EXE 形式、hqx 形式で出力する
実行形式の Exe（MaｃOSX では hqx）で出力する方法です。フルスクリーンでオートデモをプレゼンする場合にも使えます。

ロケーションの［追加］アイコンをクリックして［CD の配布］を選択します。

作成する形式を選択します。
［パブリッシュ...］ボタンをクリックします。
ファイルが出力されます。

Page206

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

SCORM 形式、AICC 形式で出力する
ロケーションの［追加］アイコンをクリックして［SCORM］もしくは［AICC］を選択します。

［SCORM］欄：SCORM2004、SCORM1.2 から作成する形式を選択します。
［zip 形式ファイルの作成］：Zip 形式に圧縮します。
［アドバンスド...］：SCORM のオプション設定を行います。

［パブリッシュ...］ボタンをクリックします。
ファイルが出力されます。

Page207

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

Qarbon ViewletCentral とコーポレイト ViewletCentral について
ViewletCentral は ViewletBulder 開発元 USQarbon.com の提供する、有償 Flash サーバーサービ
スです。日本国内でのサポートはしておりません。

何卒ご理解のほどよろしくお願い致します。

Page208

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

ビューレットビルダー8 のプロジェクトを構築するファイル
ビューレットビルダー8 のプロジェクトを構成するファイルは、初期設定ではViewletBuilder8/Projects/というフォルダの下に project 名のフォルダで格納されています。

.qvpx（ファイル）スクリーンショット、出力イメージ、音声などのパスを含むソースファイルです。
このファイルは、ビューレットビルダー8 の内部でプロジェクトとして開かれます。
.qvq.BAK（ファイル）
プロジェクトのバックアップ・ソースファイルです
Resouce フォルダ
qvpx に関連付けられた画像、音声、カーソル情報（.cr）が入っています。

output フォルダ
パブリッシュされたデータが格納されています。
データを移動するときは、qvpx ファイルだけでなく、resouces フォルダファイルも一緒に移動します。

Page209

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

旧プロジェクトのデータを読み込む
ビューレットビルダー7 からビューレットビルダー8 のデータにコンバートする
既存のビューレットビルダー7 のプロジェクトを開くと、［プロジェクトのコンバート］パネルが表示されます。

変更すべき項目があれば変更します。
［OK］ボタンをクリックします。

ViewletBuilde8 プロジェクトにコンバートされ、データが開きます。

Page210ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

ソフトウェアアップデート
ビューレットビルダー8 ではサポートの有無にかかわらず、現行バージョンのアップデート版を配信しています。弊社ウェブサイト、メールマガジンにて告知いたします。

最新版の確認
メニューバーから［ヘルプ］→［アップデート確認...］を選択します。

［アップデートの確認］パネルが表示されます。

［手動でアップデートする］オプションを選択します。
［確認する...］ボタンをクリックします。
［インフォメーション］パネルが表示されます。

アップデートが必要であると表示された場合は、弊社サイトから日本語版アップデートソフトをダウンロードしてください。
http://www.webdemo.co.jp/softwaredownload.html

Page211ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

ビューレットビルダー・サポートデスク
サポートサービス
ソフトウェアご購入から 1 年間、ビューレットビルダー8 の操作に関するご質問を承っております。
2 年めからは有償になります。
受付時間帯：
月

火

水

木

金

土日

祝祭日

午

午前 10 時から

前

午前 12 時までサポート業務は午

午後 1 時から行なっておりません。

後

午後 5 時まで

夏季休業
年末年始休業E-mail： support@webdemo.jp
ライセンスコードを元にしたサポート ID をご記入の上、お問い合わせください。
ビューレット以外のソフトウェア、ハードウェアのご質問、無記名のもの、当方の承諾なきデータ添付などの問い合わせメールにはお答えできない場合があります。
保守料金、お申込み：株式会社ウェブデモサポートまでお問合わせください。

最新情報
ビューレットビルダー8 の最新情報はこちらで確認できます。
http://www.webdemo.co.jp/vb8/

動画マニュアル.com
仕事で使う定番パソコンソフトやフリーソフト、インターネット活用法さらに日常生活での便利ノウ
ハウまで、皆さまのちょっとした疑問にわかりやすい解説付きムービーでお答えする本格的・実用的な動画ポータルサイトです。
http://www.dougamanual.com/
こちらからビューレットビルダーの操作方法のムービーを見ることができます。
制作のヒントにどうぞご活用ください。

Page212ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

各種サービスのご案内
セミナー
株式会社ウェブデモは、無料セミナーを開催してお客様の Viewlet 活用をより有益に有意義にしていただこうと考えております。
開催日程・会場などについては、随時弊社ウェブサイトで発表しています。
http://www.webdemo.co.jp/
予約の必要な場合があります。ご確認の上ご参加くださいますようお願い申し上げます。
また弊社発行のメールマガジンでもお知らせしています。
最新情報・得する情報満載のメールマガジン登録は上記サイト内で承っております。

トレーニングビューレットビルダー8 の操作方法を株式会社ウェブデモのスタッフから学べるトレーニングはご要
望に応じて有償にて承ります。
株式会社ウェブデモ
電話：（代表）0467-58-0365

ムービー制作サービス
インタラクティブな Flash 形式のコンテンツを短期間・低コストにて作成いたします。
e-ラーニング、社内マニュアル、動画プロモーションに最適です。
インターネットでの配信、CD-ROM での配布が可能です。
お客様のニーズに沿った制作を承ります。お気軽にご相談ください。
株式会社ウェブデモ
電話：（代表）0467-58-0365

Page213

ViewletBuilder8 ユーザーズガイド

2014

V i e w l e t B u i l d e r 8 プロフェッショナル

ユーザーズガイド

ビューレットビルダー８ユーザーズガイド

西暦 2014 年 8 月 1 日初版発行

発行
株式会社ウェブデモ
代表取締役 川崎実知郎〒253-0085 神奈川県茅ヶ崎市矢畑 1290
http://www.webdemo.co.jp/
電話：（代表）0467-58-0365

ファクス：（代表）0467-58-0505

Page214ViewletBuilder8 ユーザーズガイド

2014