Getting Started with SitePal

Transcription

1 Version /05/2007 Introduction to SitePal... 2 Quick Start Guide to SitePal Open a Scene Create your Character Add audio to your Scene Customize your Scene Publish your Scene System Requirements... 19

2 Introduction to SitePal SitePal is an avatar creation software developed by Oddcast for small businesses and consumers. Avatars are sophisticated animated speaking characters that you can add to Web pages, messages, Flash movies, and ebay auctions. SitePal is an easy-to-use and affordable solution that can deliver amazing business results. A SitePal Character adds a personalized touch to your Web site enhances a customer s experience increases the profile of your brand The SitePal process Using SitePal's online interface, you can create and deploy your own virtual Character in just minutes. No programming knowledge is required to use SitePal. The following describes the simple process of creating and deploying your own SitePal Character on your Web site: 1. Edit a Scene 2. Create your Character 3. Audio in your Scene 4. Personalize your Scene 5. Publish your Scene In the Scene Editor, you design your Character, choose a background, and add the audio that you want your Character to speak. Design your SitePal Characters to fit your Web site design and style. Change its looks, position, features and accessories, and then save the character in your Character Library. Add audio for your Character to speak by recording the message with a microphone or the telephone, uploading an audio file, or by converting text that you type into synthesized speech. Choose a background image, choose and configure the Player Skin in which your Character appears, and position your Character in the Scene. Use the Publish Wizard to embed your finished Scene in a Web page or explore one of the many other available publish locations. Oddcast Media Technologies 2

3 Additional documentation and resources You can find additional documentation and reference information on the SitePal Support page. Included on this page are the following resources: SitePal User s Guide SitePal Online Help Quick Start Tutorial Movie (Video) SitePal Best Practices (PDF) API Reference & Examples Tech Notes Advanced features If you re an advanced user, you ll be interested in SitePal s advanced features and capabilities: Use the VHost API and JavaScript to extend the functionality and flexibility of SitePal Scenes. Use Dynamic Text-to-Speech (TTS) to determine the text that your Character speaks dynamically when your Scene plays. Use the AI Knowledge Base to bring your SitePal Character to life with the power of artificial intelligence (AI). Oddcast Media Technologies 3

4 Quick Start Guide to SitePal This guide leads you through the basic steps of creating your SitePal Scene and embedding it in a Web page: 1. Opening a Scene 2. Creating your Character 3. Adding audio to your Scene 4. Customizing your Scene 5. Publishing your Scene 1 Open a Scene You create your own SitePal Scene by editing a pre-configured Scene that is included with your SitePal account. You edit a Scene by selecting it from your Scene List. In the Scene Editor you select a model for your Character and adjust its features, change the background for the Scene, add audio, and choose a skin for the SitePal Player. 1. Go to the SitePal page at 2. Click My SitePal Login in the upper-right of the SitePal page. The SitePal Login Page loads. Figure 1 - SitePal Login page 3. Enter the address and password for your SitePal account, and then click Enter. The home page for your SitePal account loads. Your account home page may contain different content than is shown here. Oddcast Media Technologies 4

5 Figure 2 - Account Home page 4. Click Enter. Your SitePal Scene List page loads. The number of Scenes in your Scene list depends on the number of Scenes included with your SitePal package and the number of additional Scenes that you have purchased. Figure 3 - Scenes List page 5. Click Edit for a Scene that you want to use. The Scene Editor appears. Oddcast Media Technologies 5

6 Figure 4 - Scene Editor 2 Create your Character You create your own Character by selecting a pre-configured SitePal Model and modifying its accessories, features, and color. 1. Click the Model tab at the top of the Tools Panel. 2. Click the arrows on either side of the thumbnail images to view the available models. Figure 5 - Model Panel 3. Click the thumbnail image of the model that you want to use. The model you selected appears in the Preview Panel. 4. Click the Shades accessory to choose eyewear for the model. Oddcast Media Technologies 6

7 Adjust the features of the model 1. Click the Adjustments tab at the top of the Tools Panel. Figure 6 - Adjustments panel 2. Use your mouse to drag the orange slider in the Shoulder adjustment bar to increase or decrease the size of the model s shoulder. Adjust the color of the model s features 1. Click the Coloring tab at the top of the Tools Panel. Figure 7 - Coloring panel 2. Click the Hair button. 3. Drag the selector up or down in the narrow rectangular color ramp to choose the shades of color you want to work with. The shade that you select appears in the color range box on the left of the color ramp. 4. Drag the small circle in the color range box to pinpoint the exact color that you want. The color that you set is shown in the small square box to the right of the color ramp. 5. Click Apply in the lower-right of the Scene Editor. Oddcast Media Technologies 7

8 Your changes to the model are saved. Save the model as your SitePal Character 1. Click the Character Library tab at the top of the Libraries Panel. Figure 8 - Character Library 2. Click Save Character. The Save Character dialog box appears. Figure 9 - Save Character dialog box 3. Type a name for the new character, and then click OK. 4. Click OK when you are alerted that the Character was saved successfully. Oddcast Media Technologies 8

9 3 Add audio to your Scene SitePal uses advanced technology to synchronize your audio recordings with your Character's lip movements. This effect is known as lip-syncing and it enhances the overall realism and impact of your SitePal Characters. You can add audio for your Scene by recording it with a microphone, uploading an audio file, record by using a telephone, converting written text into synthesized audio, or by having professional voice talent record your message. To learn more about adding audio to your SitePal account, see Working with audio in the SitePal User s Guide. For this example, add audio to your Scene by uploading an audio file. 1. In the Scene Editor, click the Audio Library tab in the Libraries Panel. Figure 10- Audio Library panel 2. Click Add Audio. The Add Your Own Audio to SitePal dialog box appears. Figure 11 - Add Audio dialog box Oddcast Media Technologies 9

10 3. Click Upload Audio File. The Add New Audio dialog box appears. Figure 12 Upload Audio file 4. In the Name text box, type a name for your audio message. 5. Click Browse and locate your audio file. The Enhance Audio Quality option analyzes your audio file and then modifies it to improve its overall quality. The option is primarily for audio files originally recorded at a low volume. For higher-quality audio files this enhancement is unnecessary, and in some instances, can degrade the quality of an audio message. 6. Click Upload. 7. When you are alerted that your new audio is ready, click OK. The Character in the Preview Panel speaks your new recording and saves the new audio message in the Audio Library. This message is now the selected audio for your Scene. The name of the selected audio message is framed in red. Figure 13 - Selected Audio for Scene Oddcast Media Technologies 10

11 4 Customize your Scene A background is a graphical image that you incorporate in a SitePal Scene. Backgrounds give your SitePal Scenes context and atmosphere. Use an appropriate background to give your Web site a polished, professional look that reinforces the relevancy of your SitePal Scene. You can use the predefined backgrounds that are included with SitePal, or you can upload your own images to use in your Scenes. To learn more about uploading a background image to your SitePal account, see Working with backgrounds in the SitePal User s Guide. Select a background for your Scene 1. In the Scene Editor, click the Background Library tab in the Libraries Panel. The Background Library appears. Figure 14 - Background panel 2. Select a category of backgrounds. For example, you can select the Travel category. 3. In the list of backgrounds, click the thumbnail image of the background that you want to use. The background is applied to the Preview Panel and the thumbnail is highlighted. Figure 15 - Selected Background 4. Click Apply in lower-right of Scene Editor. The background that you selected is applied to your Scene. Oddcast Media Technologies 11

12 Customize the Player skin for your Scene The SitePal Player is the window in which your SitePal Scene plays. The Player skin is the frame of the window in which your SitePal Character appears. SitePal includes many styles of preconfigured skins that you can apply to your Scene. You can modify the skins by modifying their appearance and choosing which playback controls to include with your Scene. 1. From your Scene List, open a Scene and click Edit Skin. The Skin Editor appears. Figure 16 - Skin Editor 2. On the Skin Select tab, click the left or right scroll arrows to select the Standard skin type. To learn about using the FAQ, Lead Generator, and AI functional skins, see Working with the Player skin in the SitePal User s Guide. 3. Click the drop-down menu and select a category of skins. The skins that are available for the category appear in the list box. 4. In the list box, click a skin. The Preview Pane is updated with the skin that you selected. 5. Click the Settings tab. Figure 17 - Player skin settings Oddcast Media Technologies 12

13 6. In the Scene Title text box, type a title for your scene. Leave all the other skin options selected so that all the playback controls are included with your Scene. 7. Under Set Skin Colors, select the Color2 pre-defined color scheme. 8. Set the base color scheme by dragging the selector up or down in the narrow rectangular color ramp. 9. Pinpoint the exact color that you want by dragging the small circle in the larger color range box. The Preview Panel is updated to show the new color scheme. The color that you set is shown in the small square box to the right of the color ramp. 10. Click Save to save your Scene. The Skin Editor closes and you are returned to the Scene Editor. Position the Character in a Scene 1. In the Preview Panel, click Move / Zoom. You use the Zoom/Move controls to position the Character in the Scene. Figure 18 Move/Zoom controls 2. Click one of the Zoom buttons to increase or decrease the size of the Character. 3. Click one of the arrow buttons to move the Character. You can also move the Character by holding down the mouse button on the Character and dragging it. 4. Click the Close button or click Move / Zoom to hide the controls. 5. Click Save in lower-right of Scene Editor. Your Scene is saved and the Scene Editor closes. Note: When you use the Scene Editor to modify your Scene, any changes you make are automatically reflected in all of the Web pages in which the Scene is embedded. Oddcast Media Technologies 13

14 Set the options for your Scene 1. From your Scene List page, click Scene Options for the Scene you just saved. The Scene Options window appears. 2. Under Playback Settings, on the first drop-down menu, select Limit to 2 for the playback limit. 3. On the second drop-down menu, select per Day for the period of time for the playback limit. Your Scene will play as soon as the Scene is loaded. The Scene will be played twice to each viewer in a day. You can select Unlimited to play the Scene every time the page loads. The viewer can still click the Play button to play the Scene at any time. Figure 19 - Playback Settings 4. If you have a Web site that you would like to link to your Scene, under Link Settings, in the URL text box, type the address for the Web site. Figure 20 - Link Settings 5. If you entered the address of a Web site to link to, select the Clicking on the scene opens the link check box. 6. Under Follow Cursor Setting, select the Follow cursor in scene option. Your Character's eyes will follow the mouse pointer when the cursor is inside the frame of the SitePal Player. Figure 21 - Follow Cursor Settings 7. Click Save. Your settings are saved and the Scene Options window closes. To learn more about Scene options, see Working with Scenes in the SitePal User s Guide. Oddcast Media Technologies 14

15 8. From your Scene List page, in the text box under the Title column, type a name for your Scene. Figure 22 Rename a Scene 9. Click Save All Changes above the list of Scenes. Your title for the Scene is saved and the list of Scenes is sorted alphabetically. 5 Publish your Scene Publishing a Scene means to embed, or insert, the code for a SitePal Scene in a Web page or a Web environment. The embedded code generates a link to your Scene which is hosted on an Oddcast server. You use the SitePal Publish Wizard to set the properties for your embedded code and copy the code into a Web environment. 1. From your Scene List page, click Publish for your Scene. The Publish Wizard window appears. To learn more about Publishing targets for SitePal, see Publishing and embedding a Scene in the SitePal User s Guide. Figure 23 - Publish Wizard window Oddcast Media Technologies 15

16 2. Click the Embed in Web Page publish option. The next page of the Publish Wizard loads. Figure 24 - Publish Wizard Copy your Scene code to a Web page Follow these steps if you want to create a sample Web page and embed your Scene code in the page. 1. Create a new file in a text editor, such as Notepad. 2. Copy the following HTML code and paste it in the text file. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta content="text/html; charset=iso " http-equiv="contenttype"> <title>bigg & Littal Airport</title> </head> <body> <big>bigg & Littal Airport</big> For airplanes of all sizes Long and Winding Road Binary, NY, 10101 Bigg & Littal has a runway to fit your plane. Please call us at to learn more. </body> </html> Oddcast Media Technologies 16

17 3. Save the text file with an HTML extension. For example, mysitepal_sample.html. 4. Open the sample HTML file. Your browser opens the sample page. Figure 25 - Sample Web Page Now you can embed the code for your SitePal Scene in this page. 5. In the SitePal Publish Wizard window, click in the panel that contains the code for your Scene. All the code text is automatically selected for you. For this example, you do not need to change any of the properties under Settings. These settings are properties for the code that you embed in a Web page. To learn more about properties for embedded code, see Publishing and embedding a Scene in the SitePal User s Guide. 6. Right-click the selected code and then click Copy. 7. In your text editor, paste the Scene code starting on the line following this line of code: </head> The HTML code for this page should appear as follows. The SitePal Scene code appears in blue. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta content="text/html; charset=iso " http-equiv="contenttype"> <title>bigg & Littal Airport</title> </head> <body> <script language="javascript" type="text/javascript" src=" =1"></script><script language="javascript" Oddcast Media Technologies 17

18 type="text/javascript">ac_vhost_embed_27732(300, 400, 'FFFFFFF', 1, 1, , 0, 0, 0, 'bb7ac132f1f f85e2f222d9115', 6);</script> <big>bigg & Littal Airport</big> For airplanes of all sizes Long and Winding Road Binary, NY, 10101 Bigg & Littal has a runway to fit your plane. Please call us at to learn more. </body> </html> 8. Save the HTML text file. 9. Open the sample HTML file. Your browser opens the sample HTML page and plays your embedded Scene. Figure 26 - Scene embedded in sample Web page Oddcast Media Technologies 18

19 Appendix A SitePal System Requirements PC OS: Windows 95, 98, ME, NT, 2000 or XP Browsers: Internet Explorer 5.5, Internet Explorer 6, Firefox, Mozilla, Opera, etc. CPU: 400Mhz or faster Other: Flash Player 6 or better Macintosh OS: OS X 10.2 or better or Mac OS 8.1or newer Browsers: Safari, Internet Explorer, Firefox, Mozilla CPU: 400Mhz or faster Other: Flash Player 6 or better Linux Although SitePal is not officially supported on Linux at this time, Oddcast is not aware of any of problems or issues with any of the system configurations that we have reviewed. Note: Some older or non-standard browsers, usually those released before 2001, may not be compatible. Specifically, Netscape browser versions prior to 4.7 and Internet Explorer versions prior to 5.0 are not officially supported. Oddcast Media Technologies 19