Oddcast Vhost Studio Tutorial

Oddcast Vhost Studio Tutorial
Version 2.0
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
1
Table Of Contents
INTRODUCTION ............................................................................................................................ 3
Support Material...................................................................................................................... 3
Conventions Used.................................................................................................................... 3
Terminology ............................................................................................................................ 4
LESSON 1: CREATING A BASIC SCENE ......................................................................................... 5
Before you begin ..................................................................................................................... 5
First steps................................................................................................................................. 5
What is a Scene?...................................................................................................................... 7
Creating a Scene ...................................................................................................................... 8
Creating and selecting a new character ................................................................................... 8
Editing a character................................................................................................................... 9
Model Customization Options............................................................................................... 10
background images................................................................................................................ 12
Select an audio track.............................................................................................................. 13
Previewing Your Scene ......................................................................................................... 15
LESSON 2: CUSTOMIZE YOUR SCENE BY UPLOADING MEDIA .................................................. 16
Adding a Custom Background Image ................................................................................... 16
Adding a new audio track...................................................................................................... 18
Recording an audio track....................................................................................................... 21
Adding an audio track using Text to Speech......................................................................... 21
LESSON 3: SCENE EDITOR – ADVANCED FEATURES ................................................................. 23
Advanced Scene Settings page.............................................................................................. 23
Scene’s advanced settings ..................................................................................................... 24
LESSON 4: HOW TO CREATE A MULTIPLE-SCENE SHOW .......................................................... 28
Creating a Show with more than one Scene .......................................................................... 28
Navigation Logic ................................................................................................................... 30
Display Scene load Show indicator ....................................................................................... 32
Embedding a Show............................................................................................................... 33
Email a Scene or a Show ....................................................................................................... 35
LESSON 5: ADDING INTERACTIVITY TO YOUR SHOW ................................................................ 36
Adding a link ......................................................................................................................... 36
Adding a button ..................................................................................................................... 38
Call a JavaScript function...................................................................................................... 38
Embed in a HTML page ........................................................................................................ 39
LESSON 6: LOADING A SHOW INTO A FLASH MOVIE ................................................................. 41
Embedding a Show/Scene into a Flash Movie ...................................................................... 41
Using ActionScript to Control you Scenes and Shows ......................................................... 43
LESSON 7: ADVANCED INTERACTIVITY – USING THE API ........................................................ 45
Using the API functions in HTML pages using JavaScript................................................... 45
Using the show flow API functions....................................................................................... 46
Adding Frames and Links ..................................................................................................... 47
Using callback events ............................................................................................................ 47
Using the sayText() API function.......................................................................................... 47
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
2
Introduction
The tutorial lessons cover everything you need to learn in order to build rich interactive shows.
Each lesson walks you through the process of creating a VHost show.
SUPPORT MATERIAL
With each lesson, the following support material is typically available online for review and
download:
•
Preview of the Completed Lesson - a completed example of the show.
•
Tutorial Editing Environment - The actual tutorial account within the VHost Studio
where your tutorial lessons have been created. Reviewing the tutorial account provides an
overview of the shows, their component scenes and details within each individual scene.
Use these shows as examples for future creation and management of your own shows.
•
Source Code - The source code (Flash files/HTML and JavaScript pages) for all the
tutorial shows. Use the show’s source code as an example of how to embed and control
your shows within web pages.
•
Building Blocks - The assets which comprise a show and it’s component scenes.
NOTE: Support material is available at
http://vhost.oddcast.com/support/examples/studio_tutorial
When downloading source code or building blocks you will receive a zip file that contains the
requested files. “Zip” files need to be opened or “extracted” before you can use them. Zip
software is available to download at: http://www.winzip.com
CONVENTIONS USED
Through out the tutorial lessons you will find various conventions denoting a particular locations
and calls to action as follows.
•
The lessons include numbered lists that will take you step by step through the process of
creating shows accompanied with images illustrating relevant VHost Studio screens.
•
In every lesson you will find Notes and Tips pointing out additional information.
•
References to VHost Studio call to action elements (buttons, text fields, pull down menus
etc.) will be marked in bold lowercase quotes. For example: click the, “Add New Scene”
button.
•
References to files (file names) used and selected while building shows with in the VHost
Studio will be marked in single quotation marks. For example: ‘ski_background.swf’
•
Code (embed tags, JavaScript etc.) is displayed in code font. For example: “…copy
and paste javascript:function(); into the text field….”
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
3
TERMINOLOGY
The tutorial lessons use terminology specific to the VHost Studio. Below is a list of frequently
used terms and their definitions:
•
Model – A set of blank ‘head and shoulders’ templates ready to be customized and saved
as a character. Your account includes a set of Models.
•
Characters – A customized and saved Model. Characters are selected to appear in
Scenes.
•
Scene –VHost Scenes are the parts used to build a VHost show. Each Scene is comprised
of one VHost™ character, one background file, an audio file and various display
attributes that control the manner in which the scene is played.
•
Show – Shows are comprised of one or more Scenes.
•
Embed – To insert a Show or Scene’s <object> and <embed> tags into a web page.
•
Export – To download a directory with the files of a Show or Scene. Exported shows or
scenes can be viewed on machines offline, saved to a portable media or placed on a
server and then viewed online or a local network.
•
Link – The option to link from the scene to any web-page or call a JavaScript function.
The admin may set different triggers to activate the link.
•
Player - An optional visual frame with playback control panel that appears around your
Scene.
•
Loading Animation – An optional loading status animation that precedes a Show or
Scene while loading.
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
4
Lesson 1: Creating a Basic Scene
In this lesson you will create a new VHost™ character to serve as a virtual instructor. You will
assign basic attributes to your new character and preview the end result.
Topics covered in lesson:
•
•
•
•
•
•
•
•
Main navigation
What is a Sene?
Adding a Scene
What is a model?
Creating a character
Selecting a background
Selecting an audio
Previewing the scene
BEFORE YOU BEGIN
Before you begin, go to the tutorial examples page at
http://vhost.oddcast.com/support/examples/studio_tutorial and on click on “Preview Example”
under ‘Lesson 1’ to view the end product you will create during this lesson.
As you follow the steps of this lesson you are encouraged to examine the “Tutorial Editing
Environment” if any of the steps are unclear. There you can examine a completed version of the
scene you are building in this lesson.
NOTE: The Tutorial Editing Environment is the actual administration environment used to
create the end product covered in the tutorial.
FIRST STEPS
1. Open the VHost Studio site at http://vhost.oddcast.com/admin
2. Login using your user name and password.
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
5
Figure 1.1
NOTES: If the environment remains inactive for several minutes you may be asked to login
again. This is done for your protection. If you forgot your password click on the link in the login
page and follow the instructions.
3. The VHost Studio site will open. The Homepage is the first page you see. In this page
you can find usable news and info about your account and links to main areas: the VHost
store, your account reports, your account info and a link to the support area.
4. Select the account from the pull-down and click “Enter” to begin working. The Shows
page will open.
5. The navigation bar at the top of the screen will always display. It provides the following
options: (Figure 1.2)
Figure 1.2
•
Use the “Current Account” pull-down menu to select different accounts if you have
more than one.
•
The “Select Show” pull-down menu is a shortcut to all shows.
•
The “Shows” button will switch back to the Shows page.
•
The account info area, background, audio and models management areas are covered in
the VHOST Studio Reference Manual.
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
6
The Shows Page lists the shows created in the account. Your account is still empty.
1. Create a new show by clicking the “Add New Show” button; the Add New Show page is
displayed (Figure 1.3).
2. Name your new show ‘Lesson 1’ and click “Submit”.
Figure 1.3
3. After creating the new show the Show Editor page appears (Figure 1.4).
Figure 1.4
WHAT IS A SCENE?
A Scene is the element used to build a VHost Show. Each Scene is comprised of one Vhost
character, one background image, an audio track and various display attributes that control the
manner in which the Scene is played back.
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
7
NOTE: As the Show is new, it only contains one Scene.
NOTE: You will learn more about Show creation in Lesson 4.
CREATING A SCENE
The following will describe the process of how to create a Scene:
1. Check off the “Player on/off” box. You will learn more about the player in Lesson 4.
2. Click on ”Add New Scene.”
3. A new row is added showing the Scene’s components (Figure 1.5). Now there are two
Scenes listed. At this point the Scene’s components are not set - the character,
background or audio have not been selected, thus a ‘none’ indicator appears in each
component’s settings.
Figure 1.5
Now that a new Scene has been created, you can continue to edit the Scene’s components.
CREATING AND SELECTING A NEW
CHARACTER
This section describes how to create and
select a character for use in your Scene:
1. In the 1st scene’s Character
column, click on the text link labled
“None.” The Character Selection
window will then open (Figure 1.6):
Figure 1.6
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
8
2. Click on the default character’s thumbnail or the ‘Edit’ button for the default Character
and the Character Editor window will open (Figure 1.7):
Figure 1.7
EDITING A CHARACTER
You can customize the character’s appearance by following these steps:
1. Select a model by clicking the left and right ‘Model
Selection’ arrows in the top right corner of the Edit
Character area..
Figure 1.8
NOTE: A model is a generic set of ‘head and shoulders’ templates ready to be customized and
saved as a character. Your account includes a numher of pre-defined models.
2. You can customize your model’s appearance by using the following settings found in the
Edit Character area.
NOTE: Options vary for each model and some may not be available.
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
9
MODEL CUSTOMIZATION OPTIONS
The Character Editor supports a number of different options that allow you to customize your
models to create an almost infinite number of character variations. For example, you can adjust
the coloring, accessories and even the physical attributes of your characters.
Coloring
This option allows you to adjust the color of specific character features such
as eyes, hair, mouth/lips, skin and even make-up. Simply click on one of the
five coloring cateogories to select the physical attribute you wish to color.
1. To select a color, click or dragging your mouse over the vertical
color slider (Figure 1.9 and circled in red).
2. You may also adjust the shade or tint (light or dark values) of a
given color by clicking or dragging your mouse over the square to
the left of the slider (circled in green) until you achieve the desired
combination.
Figure 1.9
3. As you adjust the color, it will appear in the small color square to the left of the color
slider.
4. Repeat the steps above for any of the categories mentioned above.
Accessories
This option allows you to adjust both physical (hair, mouth/lips,
facial hair) and clothing (shirts, glasses, hats and necklaces) styles
for your character.
You can select a particular accessory by clicking on the
appropriate icon (Figure 1.10) and clock on the “left” and “right
arrow” buttons until you find the style you want.
Figure 1.10
NOTE: As you make different accessory selections, they will automatically be applied to your
character.
NOTE: The numbers below the arrows denotes the selected accessory and number available.
For example: ‘4/13’ means the fourth accessory out of a total of 13.
NOTE: Different models support different types of accessories. Unsupported accessories will
not be selectable and their icons will appear in dark gray while supported accessories will have
icons that appear in light gray.
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
10
Adjustments
This option allows you to make adjustments to the physical
attributes of your character. These attributes can include age,
mouth/lip shape, nose shape, shoulder width, head height and
width, and eye make-up.
Each attribute is selected and adjusted by dragging one of the
orange sliders and moving them left or right (Figure 1.11).
Moving the slider right increases a particular setting while
moving the left, decreases a setting.
Figure 1.11
Model Customization Action Buttons
At the bottom of the Character Editor are three buttons lablel ‘Reset’, ‘Save’ and ‘Cancel’,
respectively (Figure 1.12).
The Reset button allows you to clear all of your
changes and returns the model to its original
appearance.
Figure 1.12
NOTE: You can’t undo the Reset action. Any changes that were made to your character and not
saved will be lost.
The Cancel button allows you to exit out of the Character Editor area without saving any
changes.
The Save button allows you to save your character alterations. Once clicked, you will return to
the Character Selection dialogue where you can name your newly created/customized character.
To name a character, simply enter a name into the ‘Character’ textbox and click on the Update
button circled in red (Figure 1.13) to accept it.
Next, click the radio button to the left of the character’s thumbnail and click on the ‘Select’
button (circled in green). The Character Selection window will close and the name ‘mike’ will
now appear in the Character column.
1. The character ‘mike’ is added to the list of characters available for this show:
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
11
Figure 1.13
2. The “radio button” (circled in purple) next to the character’s name (in this example,
‘mike‘) is selected indicating that this character has been chosen. Click the “Select”
button to assign this character to the scene. You will now be able to assign the character
to any scene in this show.
BACKGROUND IMAGES
Backgrounds are one of the main design components of a Sene and can be used for a variety of
purposes, includng branding or to embelish the appearance of the Scene. Backgrounds can be an
image (.jpg), Flash movie
(.swf) or simply an area filled
in with a particular color.
To select a Background, do
the following:
1. In the Show Editor
page, under the
scene’s Background
column, click on the
text link “none.” The
Background
Selection window
will then open (Figure
1.14).
Figure 1.13
A list of all the background images available for this account will appear as a list on the left
side of the window (Figure 1.13).
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
12
2. Click the Select Box next to the Add New Background button and choose the ‘Abstract’
category. The default background images included with your account are organized into
several different categories that span a variety of different themes and subjects.
NOTE: Any background images that you upload will be included in the ‘Private’ category.
3. Select the background image ‘Blue Halo‘ by clicking the radio button to the left. A
preview is displayed on the right side whenever a selection has been made.
4. Finally, click on the Select button to accept the chosen background and complete the
selection process.
Finding a Background Image
When an account has a large numer of background images in it, you can use on of several
methods to find the one you are looking for:
1. Click on the column headers to sort the list by background name, creator name or
creation date.
2. Enter any part of the description in the search box and click “Search.”
3. Filter the background images by their Show name by selecting the Show name from the
pull-down menu. This will display only background images that are in use within the
selected Show.
4. Select a letter from the “All” pull-down menu, to see a partial list of background images
whose description begins with that letter.
5. Click “Show All” to show the entire list of background images.
SELECT AN AUDIO TRACK
The VHost’s ability to speak is at the heart of the technology. Audio tracks enable VHosts to
speak. This section will briefly describe the process of how to select an audio track for use with
your Scene:
1. In the Show Editor page, under the scene’s Audio column, click on the text link “none.”
The Audio Selection window will open (Figure 1.14).
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
13
Figure 1.14
2. On the left side of the window, a list of all audio tracks available for an account are
displayed.
3. Select an Audio track by clicking the radio button to the left of its name (circled in red).
An audible preview of the character lip-syncing the selected audio track will be displayed
on the right side of the screen.
Finding an audio track
When an account has a large numer of audio tracks in it, you can use on of several methods to
find the one you are looking for:
1. Click on the column headers to sort the list by audio track name, creator name or creation
date.
2. Enter any part of the audio track name in the search box and click “Search.”
3. Filter audio tracks by their Show name by selecting the Show name from the “Select
Show” pull-down menu. This will display only audio files that are in use within the
selected show.
4. Select a letter from the “All” pull-down menu, to see a partial list of audio tracks whose
name begins with that letter.
5. Click “All” to show the entire list of audio tracks.
You have now completed the selection of character, background image and audio track for your
scene. You can see the names of the components you selected displayed in the scene’s row
(Figure 1.15).
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
14
Figure 1.15
PREVIEWING YOUR SCENE
To preview your Scene, click on the “Preview” button (circled in red) on the Show Editor page.
The Preview window will then open and play the Scene you have created. Click “Close” to close
the “Preview” window when you are finished.
In the next lesson you will learn how to upload your own media to customize the scene.
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
15
Lesson 2: Customize Your Scene by Uploading Media
In this lesson you will create a new scene using your own background and audio track.
Topics covered in lesson:
•
•
•
•
Adding your own audio track
Adding your own background image
Adding a recorded audio
Adding an audio track using Text to Speech
Login to the VHost Studio by repeating the steps discussed in Lesson 1. The Shows page will
open. The existing Show you created in Lesson 1 will be displayed as part of a list (Figure 2.1).
Next to the Show name, you can see when it was created and the last date when it was modified.
You can also choose to preview it or delete it.
Figure 2.1
1. In the Shows page, create a new show by clicking “Add New Show” and name it
‘Lesson 2.’ The Show Editor page will now appear.
2. Click “Add New Scene” to create a new Scene.
3. Repeating the steps you learned in Lesson 1, create a new character, save it as ‘mike‘
and click “Select” to add it to Scene 1.
ADDING A CUSTOM BACKGROUND IMAGE
In Lesson 1 you learned how to select a background image for your Scene. Now you will learn
how to upload your own background image and use it in your Scene.
NOTE: Make sure you have an image file with the proper format and dimensions on your hard
drive.
NOTE: Background images can be in JPEG or SWF format and have dimensions of 300x225.
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
16
There are several options for uploading JPEG image files and you can:
•
•
•
Upload an image file that is exactly 300x225.
Upload an image with other dimensions. If the image is smaller than the background area,
empty area will be left around the image.
Upload an image with other dimensions and check the “Resize” box – the image will be
resized to fit the background area. However, be aware that the image may be distorted
while resized.
TIP: Using a SWF (Flash movie) can create interesting effects but may reduce the playback
quality. To learn how to optimize a swf background file, read the “Guidelines for creating
dynamic swf background file” technical note.
NOTE: It is highly recommended to use an image editing application (such as Adobe
PhotoShop) to resize the JPEG image to the required dimensions and save it optimized for the
web. This will prevent possible image quality loss and ensure an optimal file size.
NOTE: You may also use the image file ‘ski_background.swf’ from the downloadable building
blocks.
To upload your own background image,
please do the following:
1. In the Show Editor page, under
the scene column Background,
click on ‘None’. The
Background Selection window
will now open.
2. Click on “Add new
background” button. The
Background Upload window
will open (Figure 2.2).
Figure 2.2
3. Enter the background name in the “Name” text field.
TIP: It is recommended to use a descriptive name; this will be helpful later when the account
background list grows.
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
17
NOTE: Enter a unique name that wasn’t used for any other background image in the account.
Be sure your background files are named properly with all spaces represented by underscores
and proper extensions. For example: ‘purple_backround.jpeg’ or
‘pink_animation.swf’
4. Click “Browse”; navigate to the image file on your hard drive and click “Open.”
5. If necessary check the “Resize” box (if you are using one of the building block’s images
there is no need to check it).
6. Click “Upload.” Wait for the new file to be uploaded. The window will close when the
upload is completed.
7. Back in the Background Selection window, the new background image is displayed in
the list. It is now available to be added to any scene in the account.
8. Click “Select” to assign this background to the Scene.
NOTE: You can set a Scene to have no background at all. This can be done in one of the
following ways: In the Show Editor, un-check the “Background Visible” checkbox, or in the
Background Selection window, set the background image to “None’”. In both cases, no
background will be shown.
You may also select a solid color to use as a background for a Scene by selecting not to display
a background and selecting same the color as the Scene’s loading animation (learn more about
loading color in lesson 3).
ADDING A NEW AUDIO TRACK
In Lesson 1 you learned how audio tracks were selected from a list of audio tracks that were
previously uploaded to the account. In this lesson you will learn how to add your own audio
track.
There are three methods you may use to create and add an audio:
1. Uploading a pre-recorded WAV, WMA or MP3 file – useful if you have an existing file
you would like to use.
2. Recording an audio track using a browser-based recording interface – use this option if
you would like to use a specific voice but don’t have any recording facilities. If you have
a microphone, this is probably the easiest way to add your voice to a Scene.
3. Using Text to Speech by typing in text – use this option if you have no microphone, or, if
you are interested in using a synthetic voice. This is also the fastest method to add audio
to your Scene.
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
18
NOTE: Make sure you have an audio file with the proper format and properties on your hard
drive. The upload function supports WAV (mono or stereo, 22.50KHz or 44.1Khz), MP3
(mono, stereo – 16-64kbps), and WMA (mono, stereo, 22.50Khz or 44.1Khz) audio formats.
TIP: If your existing audio file does not conform to these requirements, use an audio editing
program like Audacity (audacity.sourceforege.net) to convert it. For further information
regarding the production of audio recordings suitable for the VHost see the “Guidelines for
recording high quality, low bandwidth audio technical note.
NOTE: Your audio track may not be longer than 90 seconds, however it is suggested that single
audio tracks do not exceed 60 seconds for Shows created for viewing online. Audio tracks
longer than 90 seconds will not be uploaded. Use audio editing software to crop the file to the
proper length before attempting to upload.
NOTE: You may also use the audio file ‘audio1.wav’ from the downloadable building blocks
available for this lesson.
To upload a pre-existing audio file, do the following:
1. In the Show Editor page, in the scene column Audio, click on ”None”. The Audio
Selection window will open.
2. Click on the “Add New Audio” button. The Audio Upload window will then appear
(Figure 2.3).
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
19
Figure 2.3
3. Enter a name for the audio track.
TIP: It is recommended to use a descriptive name; this will be helpful later as your account’s
audio list grows.
NOTE: Enter a unique name that isn’t used for any other audio track in the account.
4. Click “Browse”, navigate to the WAV or MP3 file on your hard disk and click “Open”.
5. Click “Upload.” Please wait for the audio to upload. When the upload is finished, the
window will close.
6. The new track will now appear in the audio list in the Audio Selection window. It is now
available to be added to any Scene in the account.
7. Click “Select” to assign this audio track to the Scene.
8. Select 32 kbps for Playback Bit Rate as this is recommended for Internet use.
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
20
The Scene is now ready and uses your original audio track and background image. Preview the
Scene to proceed to the next lesson and learn how to edit your Scene’s advanced features.
RECORDING AN AUDIO TRACK
You may add a new audio track to a Scene by recording it using a browser-based recording tool
by following these steps:
NOTE: To record you need a microphone hooked up to your computer.
1. In the Show Editor page, in the scene column Audio, click on ”None”. The Audio
Selection window will open.
2. Click on the “Add New
Audio” button. The Audio
Upload window will appear
(Figure 2.4).
3. Select the “Record Audio“
tab.
4. Click on the ‘Record’
button. If this is your first
time attempting to make a
recording, you will be asked
to install the Oddcast Vhost
plug-in. When prompted,
click ‘Yes’, and the
Recorder plug-in (about
60K) will be installed. This
is a one-time installation.
Figure 2.4
5. Once recording starts, you will see a status indicator that shows the progress of the
operation. Click ‘Stop’ to stop recording and click ‘Play’ to hear what you have
recorded.
6. If you like what you hear, enter the audio track name and click ‘Save.’ Your new
recording is now saved and is added to your audio library.
NOTE: Audio recording does not work on Apple computers. Macintosh users should add
audio by uploading an existing audio file, as specified at the beginning of this lesson.
ADDING AN AUDIO TRACK USING TEXT TO SPEECH
You can add a Text to Speech audio track to a Scene by following these steps:
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
21
1. In the Show Editor page, in the scene column Audio, click on ”None.” The Audio
Selection window will open.
2. Click on the “Add New
Audio” button. The Audio
Upload window will appear
(Figure 2.5).
3. Select the “TTS Audio“ tab.
4. Select the language and a
voice you would like to use.
5. Enter the name for the audio
track.
Figure 2.5
6. Enter the text you would like the character to say using Text to Speech. You may enter
SSML tags in this text; see the Supported TTS Options for more info.
NOTE: The text should not include more than 600 characters.
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
22
Lesson 3: Scene Editor – Advanced Features
In this lesson you will learn how to use advanced Scene features and how to embed the Scene in
an HTML page.
Topics covered in lesson:
•
•
•
•
•
Editing character scale and position
Advanced Scene settings
Setting the Playback limit
Setting show status to on-air
Embedding a Scene in an HTML page
ADVANCED SCENE SETTINGS PAGE
Create a new show and name it ‘Lesson 3’.
Once in the Show Editor click on the character
name. Create a new character and name it
‘mike’. Select or upload the audio file
‘audio1.wav’ and the background image
‘ski_background.swf’ (both available in
the downloadable building blocks available for
this lesson.
You may change the scene’s properties in the
Scene Editor window.
In the Show Editor click on the ”Scene
Editor” icon.
Figure 3.1
The Scene Editor window will open (Figure 3.1).
Edit character scale & position
You may change the scene composition using the
character’s position and scale tools (Figure 3.2).
Figure 3.2
Scaling the character
There are two methods to modify the scale of a character:
1. Click on the ”Magnifier Tool” to scale the character; each click enlarges or reduces the
character size by 10%.
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
23
2. In the “Scale field”, enter the percentage and click the “Enter” keyboard button (100%
is the default size).
Positioning the character
There are two methods to modify the position of a character:
1. Select the “Hand” symbol. A border is displayed around the character. Move it around to
set the position.
2. In the “X Pos” and “Y Pos” position fields, enter coordinate value and press the “Enter”
key. The coordinate (0,0) is the character default location at the scene’s center.
SCENE’S ADVANCED SETTINGS
The Scene Editor page contains a Scene Settings area (Figure
3.3) that allows you to edit the Scene’s attributes, which affect its
composition and interactivity.
The following describes the different settings:
Follow Cursor:
The model’s eyes can follow the user’s mouse movement. This
will add life to the character. Because this feature may fit some
Scene themes andnot others, you can set it individually per Scene.
For this lesson, check off the Follow Cursor box.
Figure 3.3
NOTE: The movement stops whenever the character talks. Also, when the Show is embedded
in an HTML page or a Flash movie, the character’s eyes do not follow the mouse cursor when
the cursor is outside of the Scene area.
Character and Background Visibility:
You can set the “Visibility” of the scene’s character and background image by checking the
corresponding checkboxes.
TIP: You may decide to uncheck the visibility of the Scene’s attributes for two reasons:
An editorial reason, for example: a silent or speaking Scene with no character.
An invisible background, for example: when embedding a Show in another Flash movie, you
may prefer to use the other Flash movie’s art as the background.
Click “Close” to close the Scene Editor and get back to the Show Editor page.
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
24
Setting the Playback limit
The playback limit is a cap on the number of times the audio for a
particular Scene is played back to the same user. This allows you to
avoid too much repetition (which can be annoying). By setting a
playback limit you are also able to economize your use of streams.
Playback limit is implemented either for each Scene independently,
or for the Show as a whole. If you are Embedding the Playback limit
for a Show, the Playback Limit configuration for the first Scene in
the Show determines the Playback Limit for the entire Show. If you
Embed an individual Scene on your site, the Playback Limit setting
for the Scene which you are embedding applies.
Figure 3.4
NOTE: Playback limit does not affect optimized Scenes.
To configure the playback limit for a scene, in the Show Editor window, next to the scene, select
the ‘Play on Load’ setting and the ‘Limit Applies to’ setting (Figure 3.4). The ‘Play on Load’
setting determines the how many times the Scene or Show will automatically play. The ‘Limit
Applies’ to setting determines the length of time that the Playback Limit applies before it resets.
Embed in HTML
A scene can be embedded (included) in a web page. The page can be in any format that can
embed Flash movies (HTML, ASP, PHP, Perl, etc).
NOTE: Verify that the Scene’s Show status is set to on-air before embedding it.
To embed into a web page, do the following:
1. In the Show Editor, next to the scene click on the individual scene “embed icon”
The Embed Scene window will open (Figure 3.5).
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
25
Figure 3.5
Embed Options:
There are several options available when embedding your Scene into a web page:
Optimized Playback:
Use this option for a lighter scene, enabling faster loading time (it will reduce playback
download by about 20KB) but with the following limitations:
•
Only the character will be visible during playback. Background images and Link
information will not be included in the Scene when played back.
•
Several API functions (including 'sayText') are not supported. For details please
see the API Reference in the Support section.
Dimensions:
You can set the dimensions of a Scene to your specifications by modifying the width and
height properties in the Show’s embed tag. The default size is displayed in the
Dimensions area. To modify the default, enter a width (in pixels) and click “Set.”
NOTE: The height changes proportionally to the specified width.
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
26
Background and Loading Animation color:
A loading animation precedes a Scene as it loads. You may further integrate a Scene with
the page it is placed into by selecting the color of the Loading Animation.
In the Background and Loading Animation Color area, select one of the palette colors or
enter the RGB value (Hexadecimal) in the text field and click “Apply.”
2. The embed code is ready to be added to your web page. Notice that there are two types of
embed code to choose from:
•
Full-Featured Embed Code: This code consists of two pieces. The top piece must
be pasted between the <HEAD> and </HEAD> tags of the web page you’re
embedding the VHost into. This piece provides the ability to use our JavaScript API.
The bottom piece of code is the VHost itself and must be pasted anywhere after the
<BODY> tag on the web page you’re embedding the VHost into.
•
HTML-Only Embed Code: This code consists of a single block of code that should
be pasted anywhere after the <BODY> tag in the web page you’re embedding the
VHost into. Note that this version of the VHost provides no support for the
JavaScript API and is designed primarily for sites that do not allow JavaScript.
3. Copy the embed code from the Embed into HTML Page text area using your
computer’s standard copy/paste commands – e.g. Ctrl+C and Ctrl+V (or Command+C
and Command+V on a Mac).
4. Find the HTML page ‘oddboard_lesson3.html’ in the downloaded Lesson 3
building blocks. Open this html page with a text editor (such as MS Notepad) or an
HTML editor.
5. Paste the HTML code into the ‘oddboard_lesson3.html’ page. (Note the
comments in the HTML page will direct you where to paste the code). The HTML page
is now ready. Save it on your desktop as ‘index.html’ and preview it.
NOTES: The embed code includes a link to the Show that is hosted on the Oddcast servers.
When you edit the Show with the VHost Studio any change is instantly reflected in your page,
and does not require a new embed process.
To edit any of the Embed settings (loading screen, screen color or dimensions) you may
generate the embed code again by repeating the above steps or modify the pasted HTML code.
To learn how to edit the embed HTML code see Appendix A.
The “Embed” option can be used for both individual Scenes as well as entire Shows. In this
lesson we are embedding a single Scene rather than the entire show. See Lesson 4 to learn how
to embed a Show.
Proceed to the next lesson to learn how to add more scenes to the Show.
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
27
Lesson 4: How to Create a Multiple-Scene Show
In this lesson you will learn how to create a show, set the navigation logic and embed the show in
an HTML page.
Topics covered in lesson:
•
•
•
•
•
What is a show?
Adding a title
Setting navigation logic
What is a player?
Setting navigation buttons
In this lesson you will learn how to create a Show with multiple scenes. A Show is a group of
Scenes arranged in a specific playback order.
CREATING A SHOW WITH MORE THAN ONE SCENE
In this show you will create a scene like the one in Lesson 2 and add two additional Scenes. It is
recommended to download the Lesson 4 building blocks for this lesson and use the files when
following the next steps:
1. Create a new show and name it ‘Lesson 4’. The Show Editor page will open.
2. Add a new scene. Name it ‘scene 1’.
3. Follow the steps in Lesson 2: create a character, name it ‘mike’ and assign it to the
scene, select the audio track ‘audio1.wav’ and the background image
‘ski_background.swf’.
4. Enter a title ‘oddboard’ in the scene’s “Title” text field. See how to set the title’s
visibility on the VHost Player at ‘Editing player Components per scene’ later in this
lesson. Click the ‘Update’ button in ‘Show Details’ to apply the new title.
5. Add a new scene – name it ‘scene 2.’ Notice that the new scene is a duplicate of ‘scene
1’.
NOTE: When creating a new Scene in a show that already contains Scenes, the new Scene is a
copy of the previous one. Relying on this can save time when you are interested in maintaining
continuity between your Scenes. In this way, you can, for example, keep the same background
and character but modify the audio.
6. Modify the background image and audio track of scene 2 by clicking on their names.
Using the Lesson 4 building blocks, upload audio file ‘audio2.wav’ and image file
‘snow-shop1.jpg’. Do not modify the character to maintain continuity.
7. Add the 3rd scene and name it, ‘scene 3’. ‘Scene 3’ is a copy of ‘scene 2’. In
this case we would like to modify the components to create an interesting show with a
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
28
different character. Create and assign a new character, ‘character 2’ and upload new
audio ‘audio3.wav’ and an image file ‘snow-shop2.jpg’.
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
29
NAVIGATION LOGIC
After adding Scenes to your Show it is time to consider playback
navigation. By default, Scenes are played back in the order they were
created. You can also set the time length between when one Scene
ends and another begins by using the ‘Next Scene’ and the ‘AutoAdvance’ features.
Figure 4.1
Setting the Scene order:
In the NEXT SCENE column, use the ”Next Scene” pull-down menu to set the scene that will
follow. You can set the next slide to be:
• In order – Default option. The next scene will be the next scene in creation order
• Last – the last scene in the show
• First – the first scene in the show
• Specify – enter the number of a specific scene
Edit the “Auto Advance” settings:
You may turn on Auto-Advance to specify that the transition to the next Scene should occur
automatically. If you turn Auto Advance on, you may specify a delay, in seconds. The delay
specifies the number of seconds after the character stops talking for the transition to the take
place. Uncheck the “Auto Advance” box and your Scenes will not advance.
NOTE: It is important to distinguish between Scene creation order and playback order. The
Show is a list of slides. If no changes are made, one Scene will follow the other according to the
order in which they were created.
NOTE: Each Scene has a number assigned to it. Each Scene’s number is found in the ‘#’
column. The Show playback will always start in scene 1 unless a different Scene number was
set when embedding a Scene or exporting it. See Lesson 4 and Lesson 7.
TIP: See the API reference documentation to learn more about less conventional scene
ordering.
When the playback order of your
show is ready, it should look like
this: (Figure 4.2)
Figure 4.2
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
30
Setting player visibility
The “player” is a visual shell that supports Show playback by
providing a visual frame of reference and playback controls such
as play, pause, next and previous.
The player includes the following components (Figure 4.3):
•
•
•
•
Frame
Title - displayed only if the frame is visible
Navigation buttons - control the show’s progress
Volume slider
Figure 4.3
The Show is displayed within the confines of the VHost player. As such, you have the option to
display your Show with or without a visible player.
NOTE: The Show’s functionality is not dependent on the player but this option is provided for
aesthetic and user interface considerations.
Because the presence of the player affects the dimensions of the Show, and because these
dimensions must be the same for all Scenes, the player visibility applies to the entire Show.
In the Show Editor, you can turn on the show’s player visibility by checking the “Player
on/off” box and clicking “Update” (Figure 4.4)
Figure 4.4
Editing player Components per Scene
You may edit the player settings for ‘scene
1’. These changes will affect the player in
this scene only, not in any other scene in the
show.
Open the Scene Editor window for ‘scene 1’
by clicking on the “edit icon".
Figure 4.5
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
31
The player settings will appear in the Scene Editor window (Figure 4.5)
NOTE: If you cannot see the player settings the player is likely turned off. Close that window,
check the “Player on/off” box in the SHOW EDITOR window, click “Update” and open the
Scene Editor again.
NOTE: If you edit the player’s settings for a Scene, and then create a new Scene, the chosen
player settings are carried over to the new Scene.
1. In an earlier step you added the title ‘oddboard’ to each Scene. The title is displayed
as part of the player if the “Title Visibility” box is checked. Check the “Title Visibility”
box.
2. Check the “Volume Control” box. This will add a volume control slider to the player
and enables the user to adjust the volume while the audio track plays.
3. The player contains navigation buttons, which follow the playback order that is set for the
Show. Their visibility is set for each Scene separately to let the user control the flow of
playback.
4. Check the “Pause button”, “Previous button” and the “Next Button” button boxes (the
“Next” button is checked on default).
5. Set the player color. You may match the background image and the color of the web page
in which the show will be embedded. You can set the color in one of two ways:
•
Pick a color from the palette
•
Enter an RGB value (in Hexadecimal) into the “Hex” text field and click
“Apply” then click “Update”.
TIP: You can also use the API commands to control scene order as an alternative to player
controls (see VHOST API Reference).
DISPLAY SCENE LOAD SHOW INDICATOR
During playback, loading the next Scene may take anywhere from a fraction of a second, to
several seconds or more, depending on the network connection.
You may choose to display a 'load indicator' animation between Scenes. If the load indicator is
shown, you may also select the number of seconds of loading before indicator is displayed. This
will help ensure that the load indicator will not be seen when viewed over a fast connection.
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
32
To turn the 'load indicator' on, in the Show Editor window check the “Display scene load
indicator” box’ and set the number of seconds that should pass before the indicator is displayed in
the box labels as “after X sec“ next to it.
EMBEDDING
A SHOW
Now that the Show is ready, it is time to embed it in a web page. Embedding a Show is similar to
embedding a Scene (see Lesson 3).
1. Click on the “Embed Show” button in the SHOW EDITOR page (Figure 4.6).
Figure 4.6
NOTE: Make sure your Show status is on-air before embedding it; a link to a non-active Show
will not work. See Lesson 3 to learn about active/inactive slideshows.
The Embed Show window will open
(Figure 4.7).
1. Set the starting scene: In the
Show Properties area, Set the
first sSene to play on launch by
selecting “1” from the “Starting
Scene #” pull-down menu.
You may further integrate a show
with the page it is placed in by
selecting the color of the Loading
Animation and Background color
(if no background scene is used).
In the Background and Loading
Animation Color window, select
one of the palette colors or enter
the RB value (hexadecimal) in the
text field and click ”Apply”.
Figure 4.7
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
33
TIP: Changing the default starting Scene number can be very useful when using the same Show
in different areas in your website or for loading a different Scene depending on a criteria. See
Lesson 5 for an example.
TIP: Set the loading color to be the same as the color of the web page in which your Show is
embedded.
TIP: In case any of Scene backgrounds are selected as ‘none’ or the background visibility is
turned off, the color used for the loading animation will color the background area.
2. Set embedding dimensions: You can set the size of your Show by changing the
embedded area’s dimensions. In the Show Properties area you will find the dimensions
height and width. Width is set to a default value of 500 pixels. You can change the width
by entering a new value in the “width” text field and clicking “Set”. The height is
constrained to a set proportion ratio and will adjust accordingly to the width entered once
“Set” is clicked.
The embed code is ready to be added to your web page. Notice that there are two types of
embed code to choose from:
•
Full-Featured Embed Code: This code consists of two pieces. The top piece
must be pasted between the <HEAD> and </HEAD> tags of the web page you’re
embedding the VHost into. This piece provides the ability to use our JavaScript
API. The bottom piece of code is the VHost itself and must be pasted anywhere
after the <BODY> tag on the web page you’re embedding the VHost into.
•
HTML-Only Embed Code: This code consists of a single block of code that
should be pasted anywhere after the <BODY> tag in the web page you’re
embedding the VHost into. Note that this version of the Vhost provides no
support for the JavaScript API and is designed primarily for sites that do not
allow JavaScript. Copy the HTML code.
3. Find the HTML page ‘oddboard_lesson4.html’ from the Lesson 4 building
blocks . Open this page with a text editor (such as MS notepad) Find the comments <!- embed slideshow embed code here -->.
4. Paste the HTML code into the appropriate sections of the page as detailed in the embed
dialog box.
NOTE: The HTML code includes a link to the show that is hosted on the Oddcast servers.
When you edit the show with the VHost Studio any change is instantly reflected in your page,
and does not require a new embed process.
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
34
NOTE: To edit any of the Embed settings (loading screen, screen color or dimensions) you may
generate the HTML code again by repeating the above steps or modify the pasted HTML code.
To learn how to edit the HTML code, see Appendix A.
The HTML page is ready. Save it and preview it.
EMAIL A SCENE OR A SHOW
You may use this feature as an easy way to email a Show or a scene. The email will contain a link
to a web page with the embedded Show or Scene.
In the Show Editor page click on the “Email Show” button. The Email Show window will open
(Figure 4.8). You may customize the web page by entering a page title, setting the page color, the
dimensions of the scene and the loading animation color.
Enter the recipient/s email/s and the message that will be added to the email and click “Send”.
Figure 4.8
Proceed to the next lesson to learn how to add interactivity to the Show.
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
35
Lesson 5: Adding Interactivity to your Show
In this lesson you will learn how to add interactivity to the show by adding buttons and links.
Topics covered in lesson:
•
•
•
•
•
•
Creating a Show from a copy of another Show
Adding a button
Adding links
Refreshing a frame
Calling a JavaScript function
Changing the starting Scene
The VHost Link feature enable interaction with web pages in the site where the Scene or Show
are embedded. The trigger to the interaction with the web page may be one of three:
•
•
•
Automatically timed
User clicking on a button
User clicking on the Vhost
The action may be opening a URL in a frame or web page or calling a JavaScript function.
ADDING A LINK
In the first Scene you will add a link, which will automatically trigger an action without user
interactivity using the Auto Link event trigger. The Auto Link triggers a call to a link based on
the status of the audio playback. The link can be triggered at the start or the end of the audio
playback.
The automatically timed event trigger may be useful in the case of designing a flow between the
Scene and the web page where it is embedded. For example: the host is presenting a subject, and
2 seconds after the audio begun playing a new frame opens with more info.
Figure 5.1
1. Create a new show. Name it ‘Lesson 5’.
2. Instead of creating an empty show and repeating the steps of creating characters and
selecting audio tracks and background images you have the option to create a show as a
copy of another show from your account. In the “Add New Show” page under the
“Create As” pull-down select the Show “Lesson 3” and click “Update”. The Show
‘Lesson 5’ will be created as a copy of the Show ‘Lesson 3’.
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
36
3. In order to access the capabilities of the
link feature disable the player by
unchecking off the “Player on/off” box
and click “Update” in he Show Editor
page.
4. Next to Scene 1, click on “Link” (Figure
5.1). The Link Setting window will open
(Figure 5.2)
Figure 5.2
5. In the Link Settings area enter the
URLttp://vhost.oddcast.com/support/examples/studio_tutorial
/nav.html’ in the “URL” text field.
6. In the “Target” pull-down menu, choose “Framename” and in the “Frame Name” text
field enter the name ‘nav’. The URL entered in step 4 will open in the frame named
‘nav’.
The URL can be displayed in different browser windows or frames, depending on the
“target” you select:
•
•
•
•
•
_self – Replaces the web-page in which the Show is embedded.
_blank – Places the URL in a new window that appears in front of the current
browser window.
_parent – Targets the frameset in which the current web-page resides.
_top – Replaces the entire contents of the current window, including all
framesets.
_framename – Replaces a frame. Specify the frame’s name in the
“Framename” text field.
7. In the Event Trigger area check the “Auto-Link” box.
8. We would like the URL to open in the frame ‘nav’ 5 seconds after the audio track begins
playing. In the “When:” pull-down menu, select “Audio starts’” and enter ‘5’ seconds
in the “Delay:” field. The event trigger will open the URL in the frame named ‘nav’ 5
seconds after the audio track begins.
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
37
You can set the Auto-Link timer by changing the selection in the “When:” pull-down
menu:
•
Audio starts - the URL loads while character is speaking. When choosing this
option you can set the number of seconds of delay from the time the audio begins
playing or leave empty in order to set the auto-link trigger at the same time as
when the audio begins playing.
•
Audio ends – the URL loads after the audio track playback is done.
TIP: In order to insure approximate timing while using the “Auto-Link” event trigger, it is
important to make sure that the audio track has been trimmed properly. A properly trimmed
audio track does not contain more than and preferably less than a second of silence before and
after the speech in the track.
9. Make sure the “Display Button” box is not checked.
10. Click “Update.” The Link Setting window will close.
ADDING A BUTTON
In the second Scene you will add a button as the trigger as follows:
1. Open the LINK SETTING window for scene 2.
2. In the “Url” text field, enter the URL of the web page you would like to link to:
‘http://vhost.oddcast.com/support/examples/studio_tutorial/s
ale.html’
3. Select “Framename” from the “Target” pull-down menu and in the “Frame Name”
field, enter ‘info’.
4. Check the “Show Button” box.
5. Enter ‘on Sale!’ in the “Title” text field. ‘on Sale!’ will appear on the button as it’s title.
6. Make sure the “Auto-Link” checkbox is not checked. We are interested in letting the
user direct the show by using the button.
7. Click “Update” to close the Link Setting window.
CALL A JAVASCRIPT FUNCTION
In the third Scene you will call a JavaScript function instead of calling a web page with a URL.
The JavaScript function in this example replaces an image on the page.
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
38
In this case you will use both the “Display Button” and “Auto-Link” event triggers. The event
will be triggered either by the user’s action – clicking on the button, or, in case the user is passive,
the event will be triggered automatically when the audio track ends.
1. Open the “Link” window for ‘scene 3’.
2. In the “URL” text field enter the call for a JavaScript function:
‘javascript:callFlipBoard();’.
NOTES: The event trigger can only refer to JavaScript functions present in the web page in
which the show is embedded (you can bypass this limitation by adding a call from the function
in the page where the show is embedded to a function in another page).
NOTES: The call to the JavaScript function works only when the page is called from an http
connection, it will not work when viewing the page locally.
3. Set the “Target” pull down menu as ‘_Self’.
4. Check the “Auto-Link” box.
5. Set the “When” pull-down menu to “Audio Ends”, this will trigger the link after the
audio track ends.
6. Check the “Display Button” box.
7. Enter ‘more boards’ in the button “Title” text field.
8. Click “Update” to close the LINK SETTING window.
9. In the SHOW EDITOR page, uncheck the “Auto Advanced” box in ‘scene 2’ and click
“Update”. As a result, the playback will stop after ‘scene 2’.
10. You will not be able to preview the JavaScript event trigger call until the Show is
embedded in a web page that includes the JavaScript function.
EMBED IN A HTML PAGE
In this lesson embed the show twice, each time with a different starting Scene number to enable a
specific interaction between the show and the web page.
Open the html pages enclosed in the lesson 5 building blocks.
Embed the show with ‘scene 1’ as the starting Scene in the page ‘host.html’, and embed the show
with ‘scene 3’ as the starting Scene in the page ‘host2.html’. (See ‘Embed a Show’ in Lesson 4
for reference on embedding a Show).
Save the pages and preview ‘oddboard_lesson5.html’ in a browser to see the result.
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
39
In the next lesson you will learn how to use the API functions to add interactivity between the
web page and a Show.
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
40
Lesson 6: Loading a Show into a Flash Movie
In the previous lessons you have learned how to embed a Scene and a Show into a web page. In
this lesson you will learn how to load a Show into a Macromedia Flash movie.
Topics covered in lesson:
•
Load an Embedded Show or Scene into a Flash movie
EMBEDDING A SHOW/SCENE INTO A FLASH MOVIE
WARNING: This section assumes that you are familiar with using Flash and its scripting
language, ActionScript.
To add a Scene to a Flash movie, click the Publish to Flash button for a Scene on the Scene
Editor area and do the following:
•
Use the Scene Properties panel to choose whether or not to use the Optimized Playback
option. Optimized Playback reduces playback download by about 20 KB, which makes
your Scene load/start faster but displays only the character. Your chosen background
image and link settings are not used.
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
41
NOTE: Optimized Playback does not support Text-to-Speech or most of the available VHost
API functions and events so only use this option if page-loading time is your most important
concern.
•
Use the Background and Loading Animation panel to select a color for the status bar
that appears when your Scene is loading in Flash movie. Select a color from the palette
by clicking on a color box or on Transparent. Alternatively, you may enter a color’s RGB
value in the box centered below the palette.
•
Insert the following code in the first frame of the root level of your Flash movie. This is
required to enable VHost player root-level callbacks, which are used for authentication
and to communicate with the Oddcast servers that host your Scenes:
System.security.allowDomain("vhost.oddcast.com", "vhssa.oddcast.com", "vhss-c.oddcast.com");
•
In your Flash movie clip, paste the URL in the In Flash tab of the Embed scene dialogue
in the first parameter of the loadMovie method.
TIP: The loadMovie method is used to load another movie from a URL into a Flash movie
clip.
•
After you paste in the URL, the ActionScript code should look like the one shown below
but be placed on one line. For example, if your Flash movie clip is named 'vhost', you can
load the Scene as follows:
vhost.loadMovie("http://vhost.oddcast.com/vhsssecure.php?doc=http%3A
%2F%2Fvhost.oddcast.com%2Fgetshow.php%3Facc%3D13751%26ss%3D202307%26
sl%3D0%26embedid%3D694e9837b77a169a138d840ffcb04751&edit=0&acc=xxxxx
&firstslide=1&loading=1&bgcolor=0xFFFFFF&fv=6");
•
The second parameter of the loadMovie method – which is set to this in the code
above – represents the Flash object into which the Scene specified by the URL will be
loaded, and you may modify it as needed.
TIP: Scenes can be scaled with the ._xscale and ._yscale methods. vhost._xscale
= _scale; and vhost._yscale = _scale; where scale is a percentage
•
When you combine the code from steps 3 and 4, you will see something like the
following:
System.security.allowDomain("vhost.oddcast.com", "vhssc.oddcast.com", "vhss-a.oddcast.com");
loadMovie("http://vhost.oddcast.com/vhsssecure.php?doc=http%3A%2F%2F
vhost.oddcast.com%2Fgetshow.php%3Facc%3D11176%26ss%3D163900%26sl%3D0
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
42
%26embedid%3D720156259c878cbd282c1c1dab1b28eb&edit=0&acc=11176&first
slide=1&loading=1&bgcolor=0xFFFFFF", "[the name of the Flash object
you want to embed your SitePal Scene into]");
•
You are now ready to preview and publish your Flash movie with the embedded SitePal
Scene.
USING ACTIONSCRIPT TO CONTROL YOU SCENES AND SHOWS
The VHost API provides a powerful array of ActionScript functions which you can use to control
your Scenes from Flash. You can interactively test these functions by clicking on the View
Interactive Example button, which will bring you the following screen:
From here, you can adjust the different parameters supported by each API call and preview their
effect on a sample SitePal character by clicking on the Call button.
Clicking on the Download FLA file button located at the top right of this screen will generate
the FLA file (Flash source code) for this example. It will be packaged in a .zip file and you will
be prompted to download it as shown:
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
43
1. Save the .zip file to your computer and open it. The .zip file contains two files,
which are named inFlash.fla and inFlash.swf, respectively.
2. Open the inFlash.swf by double-clicking on it or dragging it onto an empty browser
window. You will then see an interactive example of how to interface your Scene with
Flash. You can also open the inFlash.fla file inside Flash to view and modify it as
you see fit.
NOTE: Clicking on the Download Sample FLA button from the Embed in Flash screen
produces the same result as clicking on the Download FLA file button.
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
44
Lesson 7: Advanced Interactivity – Using the API
In this lesson you will learn how to use the VHost API functions to control an embedded show
from the HTML page.
Topics covered in lesson:
•
•
•
•
How to use the API commands
Using the API commands to control the show navigation
Using the API commands to add Text to Speech
Using the API commands to call a specific audio track
NOTE: Basic knowledge of JavaScript is assumed.
One of the most powerful features of the VHost are the API functions that enable adding user
interactivity while a Show or Scene is playing.
The VHost Player provides an API (Application Programming Interface) that allows a JavaScript
or Flash programmer to affect different runtime attributes by making API calls from the hosting
page or Flash movie. The API enables communication between the host environment and the
embedded VHost character.
This lesson will cover a few of the API functions. For full API reference and examples please see
the VHOST API Reference document.
The API Reference document will specify the different available commands. The implementation
is of 2 types – functions and events (also known as callbacks).
USING THE API FUNCTIONS IN HTML PAGES USING JAVASCRIPT
The following steps explain how to use the API, see directions for specific API commands further
ahead in this lesson.
NOTE: The use of events is done with a different method, which will be covered further ahead
in this lesson.
1. Create a scene or a show or a scene and embed the Full-Featured HTML code into the
appropriate locations in your web page.
2. Add calls from the HTML page to a specific API function using the HTML tag <href>
around any image or text. The call to the API should be done in this format:
<a href="javascript:gotoSlide(2)">Click here to go to scene
2</a>
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
45
USING THE SHOW FLOW API FUNCTIONS
In this lesson you will learn how to create a children’s educational game – ‘My ABC's.’ The
game consists of a show and an interactive HTML page.
The Show includes an opening Scene, presenting the game and four Scenes for each letter (for
demo purposes we include only the letters A to D), in which the character says the letter name
and a name of an object that begins with that letter.
The Show is embedded in an HTML page. The HTML page includes images of the four letters. A
JavaScript function changes the letter to a corresponding image when the mouse rollover the
letter. You will learn how to add API functions to the images in order to control show navigation
from the HTML page.
1. Create the Show.
2. Create a new Show.
3. In the first Scene, create a character and select the background
‘alphabet_back01.swf’ and audio file ‘alphabet_intro.wav’ (both available with
the 'My ABC's' building blocks).
4. In the second Scene, select the audio ‘a_apple.wav’ presenting the letter A.
5. Repeat for Scenes 3-5 completing the letters B, C and D by adding the appropriate
backgrounds and corresponding audio tracks from the downloaded building blocks
materials.
6. Embed the show in the HTML page,
7. Open the ‘index.html’ from the downloaded building blocks and review the code in
the page. Notice that each button calls a JavaScript function that changes the letter image
on rollover.
8. Embed the Show you created in step one into ‘index.html’, being sure to use the ‘FullFeatured HTML Code’. (See ‘Embed a show’ in Lesson 4 for reference on embedding a
show).
9. The goal is to add interactivity between the web page and the Show: clicking the “Aapple” button will calls an API function to play ‘scene 2’, clicking the “B-Boy” button
calls an API function to play ‘scene 3’ and so on through ‘scene 5’. The API function
gotoSlide(slideNum)will be used to play a specific Scene.
10. In the index.html page locate the image of the letter A – ‘a_apple‘ and add the call
to the function to the image href tag:
<a href="javascript:gotoSlide(2)"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('a_apple','','images/abc_apple.
jpg',1);gotoSlide(1)"><img name="a_apple" border="0"
src="images/abc_a.jpg" width="194" height="45"></a>
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
46
NOTE: In this example the button already has a call to a JavaScript function ‘onMouseOver ‘
that changes the image from a letter to an object on rollover. The call to the VHost API in this
case is on mouse click.
11. Repeat step 2 for all buttons.
The web page is ready. Preview it and click on the buttons to see the interactivity with the Show.
ADDING FRAMES AND LINKS
After learning how to add interactivity between the web page and the Show by using API
functions, review the ‘E-learning’ example to see how you can complicate the interaction by
adding frames and adding links from the Show to the new frame.
USING CALLBACK EVENTS
The VHost API includes various callback events. By adding JavaScript code to the specific
callback function you can add functionality when those triggers occur.
For example, you can call any action when the host is done talking (change a frame, image, etc).
In this example we will open a new browser window when the host starts talking using the
talkSEnded() event:
1. Embed a scene in an HTML page
2. Add a call to vh_talkEnded() top open a new browser page when the Vhost stops talking,
as follows:
<SCRIPT LANGUAGE="JavaScript">
function vh_talkEnded(){
window.open('http://yoururl.com', 'myNewWindow',
'width=800,height=800');
}
</SCRIPT>
3. Save the HTML page and open it in a browser. When the host finishes talking the HTML
page will open.
USING THE SAYTEXT() API FUNCTION
The sayText() API command enables you to cause a VHost to speak any text, in your
preferred language and voice. The main advantage of using this command instead of using the
Text to Speech option in the studio (see Lesson 2) is the ability to use dynamic data over static
one. You may use info from your databases, info entered by the user, etc. – an option that enables
the VHost to interact with the user in a very interesting and even practical ways.
In order to use the TTS option you will need to set the domains names in your Account Info
page. The domain name is the address of the server where HTML page in which the Scene or
show are embedded is hosted.
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
47
1. Open the Account Info page. Click on “Define Domain” and enter the domain of the
server. In case you are hosting the HTML page in which the scene or show are embedded
in more than one server, make sure to enter all domain. Contact [email protected] if
you need the option to define more domains.
2. The implementation of the sayText() command is similar to the way any of the other
API functions are used: Create a Scene using the Full-Feature code and embed it in an
HTML page.
3. Select the method in which you would like to determine the Text to Speech text – typing
hard-coded text, using variables from a database or text entered by the user in a form. In
this example hard coded text is sent to the function:
javascript:sayText('hi and welcome to my site',2,1,1)
4. Save the HTML page and open it in a browser window.
Oddcast Vhost Tutorial - Copyright © 2005 Oddcast Media Technologies. All rights reserved.
48
Filename:
vhost_Studio_Tutorial.doc
Directory:
C:\Docs\latest_guide\061605\102605
Template:
C:\Documents and Settings\arifeldman\Application
Data\Microsoft\Templates\Normal.dot
Title:
VHost Tutorial
Subject:
2.0
Author:
Unknown - cleaned up by Ari Feldman
Keywords:
Comments:
Creation Date:
11/25/2005 10:22:00 AM
Change Number:
84
Last Saved On:
11/30/2005 2:46:00 PM
Last Saved By:
arifeldman
Total Editing Time:
382 Minutes
Last Printed On:
11/30/2005 2:48:00 PM
As of Last Complete Printing
Number of Pages: 48
Number of Words: 12,035 (approx.)
Number of Characters:
57,289 (approx.)

* Your assessment is very important for improving the work of artificial intelligence, which forms the content of this project