Toufee Banner Rotator User Guide

Size: px

Start display at page:

Download "Toufee Banner Rotator User Guide"

Gervais Wilcox
6 years ago
Views:

1 Toufee Banner Rotator User Guide Toufee Banner Rotator User Guide Page 1

2 Table of Contents Launching Banner Rotator 3 Adding Images 3 Customizing the Banner Rotator 5 Publishing the Video Publishing on Toufee 9 Publishing to YouTube 10 Downloading as SWF 12 Publishing using Embedded HTML code 13 Toufee Banner Rotator User Guide Page 2

3 Banner Rotator Step 1: Launching the Banner Rotator a) Login to your Toufee account b) Click the Banner Rotator option from the Member Area. Alternatively, you may select the Banner Rotator option from the Select Apps c) Click the Click here to create new Banner Rotator project! button d) The Banner Rotator application opens in a new window Step 2: Adding Images The Banner Rotator wizard opens in a new browser window as a popup window. The first step of the wizard shows a video on how to use the Banner Rotator wizard. Click Next to continue. The next screen lets you add images that you wish to the Banner Rotator. Click the Add/Upload New Images button to open the image upload window. Toufee Banner Rotator User Guide Page 3

4 The Add Image dialog box opens. Note that Toufee allows you to search popular photo sites like Flickr, ImageAfter, MorgueFile website. For example, simply click the Flickr Search tab, enter the search a term (e.g. internet marketing) and click Go! button Select an image and click OK to add the selected image to the Banner Rotator Toufee Banner Rotator User Guide Page 4

Step 3: Customizing the Banner Rotator After you add the images and click Next, you are taken to the Settings page where you could customize all the settings of the Banner Rotator.

5 Step 3: Customizing the Banner Rotator After you add the images and click Next, you are taken to the Settings page where you could customize all the settings of the Banner Rotator. On the left side, you would notice various option to customize the Banner Rotator. Any changes that you make is reflected immediately under the Live Preview window on the right Change Movie Size Use the Width and Height parameters under the Windows Size option to set the flash movie size. The default size is 640 pixels for Width and 480 pixels for Height. Tip: Make sure that you take the image s height/width ratio into consideration when resizing the flash movie size. A recommended suggestion is to set the movie size exactly the same as the image sizes used in the flash movie. Also, make sure all the images used in the movie are of the same size. Toufee Banner Rotator User Guide Page 5

Otherwise the transition would never change to the next image :) Modify Control Settings Use the Show Controls checkbox under the Controls section if you wish

6 Change Image Transition Settings Use the options under the Image Changes section to set the transition duration. Notice that the transition duration would be the same across all slides. Note Make sure that the Automatically Change checkbox is always checked. Otherwise the transition would never change to the next image :) Modify Control Settings Use the Show Controls checkbox under the Controls section if you wish to display controls over the image. When turned on, you would notice numbered control icons (like the one in the image below) which when clicked takes you to the corresponding images. Toufee Banner Rotator User Guide Page 6

To modify the text that is displayed, you would have to get back to the previous screen (where you added the images), select the image and click the

7 Modify Image Text The Banner Rotator allows you the option to add a text over each of the image. The text is display over the image with a blurred background (as the one show below). To modify the text that is displayed, you would have to get back to the previous screen (where you added the images), select the image and click the Change Selected Image Caption button as shown below Once you click the Change Selected Image Caption the Enter new label dialog window appears as shown below. Enter the heading and the description as show below and click OK to accept the changes. Toufee Banner Rotator User Guide Page 7

Tip: To create a hyperlink for any text that is displayed over the image, use the When this item is

Modifying Text Properties The options in the Text Background section allow you to modify the Text

Note that it is the correct level of the Opacity that determines the blurred background thereby

8 Tip: To create a hyperlink for any text that is displayed over the image, use the When this item is clicked dropdown list and select Open my website option. Modifying Text Properties The options in the Text Background section allow you to modify the Text Background Color of the text area as well as set the Opacity of the text area. Note that it is the correct level of the Opacity that determines the blurred background thereby resulting in a professional slideshow output. Use the Position option to set the position of the textarea that is displayed over the images. Toufee Banner Rotator User Guide Page 8

Step 4: Publishing the Video Publishing on Toufee 1. Once the customization is done, simply click Next and you should see the Your video is ready for production screen.

9 Step 4: Publishing the Video Publishing on Toufee 1. Once the customization is done, simply click Next and you should see the Your video is ready for production screen. To instantly get the movie link, click on the Toufee icon Publish Project window in the 2. In the new page, you should see the flash movie play on the Toufee page. Scroll down the page to find the Permalink text below the flash movie. The Permalink is the unique link to your flash movie hosted on Toufee. The Permalink can be shared via or posted on blogs or one can even Tweet the link Toufee Banner Rotator User Guide Page 9

icon. The YouTube publishing wizard opens in a new window.

window (if one exists). 2. The YouTube Express Publish Wizard opens in a new browser window 3.

10 Publishing to YouTube 1. In the the Your video is ready for production screen (the last step of the wizard), with the Publish Project dialog box open, click on the YouTube icon. The YouTube publishing wizard opens in a new window. If you do not see any window open, please check all your open browser windows for the wizard as Toufee opens the wizard in an existing browser window (if one exists). 2. The YouTube Express Publish Wizard opens in a new browser window 3. Select either the Automatic Publishing or Manual Publishing option and click Next Step >> button. If you selected Automatic Publishing option, then the wizard prompts the YouTube credentials. Click Next Step to automatically publish the video to your YouTube account. 4. If you had selected the Manual Publishing option, then you are redirected to a YouTube login page Toufee Banner Rotator User Guide Page 10

5. Once logged in to your YouTube account, you would be prompted to authorize Toufee to publish to your YouTube account. Click Allow Access button. This is a one-time action. 6.

11 5. Once logged in to your YouTube account, you would be prompted to authorize Toufee to publish to your YouTube account. Click Allow Access button. This is a one-time action. 6. Your video would now be published to YouTube. YouTube would process the video before it makes the video publicly accessible so wait for upto 20 minutes for YouTube to finish the video processsing. Toufee Banner Rotator User Guide Page 11

12 Downloading as SWF Toufee offers the option to download a flash movie as a SWF file. To download the SWF, please follow the steps below: 1. In the the Your video is ready for production screen (the last step of the wizard), with the Publish Project dialog box open, Click on the SWF icon and the file download should open in a new browse window. The SWF download is initiated Toufee Banner Rotator User Guide Page 12

13 Publishing using Embedded HTML code If you wish to just have the HTML code so that you could publish your movie yourself, Toufee lets you do that as well! You can directly copy the HTML code and paste it into your website or blog. 1. In the the Your video is ready for production screen (the last step of the wizard), with the Publish Project dialog box open, click on the Get HTML Code (expert users only) option. The Publish page opens in a new window 2. In the new page, click the Raw HTML Version (for experts) radio button to display the embed code. Double-click the HTML to copy the entire code Toufee Banner Rotator User Guide Page 13

Image Management Guideline Managing Your Site Images

Image Management Guideline Managing Your Site Images Managing Your Site Images Topics Covered Contents = Go to Topic 1. Free Resize/Image Editing Tools 2. Resize Images Using Picresize.com 3. Uploading Images Quick Guide 4. Image Gallery Management 5. Replacing