By Scott Trudeau
I recently designed a website for a history grant that our center received. The site plan included a 780 pixel by 150 pixel Flash banner that would rotate five images.
Normally I would have built the banner using Flash. However, I had just received a copy of Adobe Captivate 3 and wanted to take it for a test run.
Captivate is used for creating rapid e-learning solutions such as simulations, scenario-based training, and quizzes. But Captivate can also be used to create Flash animations in…well…a FLASH!
This is how it is done…
Prepare your images in Photoshop – My project required five images that were 780 x 150 pixels. Save the images in a folder.
Open Adobe Captivate 3 and click the Record or create a new project button
The Other Project Types dialogue box will open. Select the Image Project radio button.
The next step is to define the dimensions of the Flash project. You can select from user defined options or presets. I needed a custom size banner so I selected the User defined radio button and typed in the dimensions of my project.
Captivate will prompt you to find your images. Because I saved all the images for my project into a single folder I simply had to browse to the folder and select the images. Use Ctrl + click to select multiple images. Click the open button to import the images into Adobe Captivate.
Preview the project by clicking Preview > Project. Hey…it works! But my plan didn’t call for a control bar with the Captivate logo.
I also wanted the images to transition with a nice fade effect and I didn’t much care for the Captivate pre-loader. A magician doesn’t reveal his secrets and I wanted the history department to think I was a great Flash guru that labored throughout the day and into the wee-morning hours preparing the banner. Besides, for design purposes, I didn’t want my Flash banner branded with a product logo.
Click the Properties button found near the top. Select a transition effect and display time. My project uses a Fade effect and a display time of 4 seconds.
Check the Apply to all check box and click the Settings button found near the bottom left corner. Make sure the Apply only changed properties and the Apply to all radio buttons are selected. Click the Close button. Click the OK button.
Click Preview > Project.
Your pictures should now transition using a nice fade effect.
Click the Publish button found near the top. Name your project and select a location that the banner files will be stored by clicking the Browse button.
Now to remove the control bar and Captivate pre-loader. Click the text-link located next to the Skin preferences.
Uncheck the Show Playback control checkbox. Click the Border tab.
Uncheck the Show Borders checkbox. You should be able to preview the project using the same dialogue. Notice that the playback controls are gone and so is the border that housed them. Click the OK button.
Time to hide the pre-loader. Click the Preferences button.
Make sure that the Start and End preferences are being displayed (under Project). Uncheck the Loading screen checkbox.
Use the same dialogue as above to change the project end options to loop. This will allow your Flash banner to continually loop; otherwise your animation will simply stop once the last image is displayed. Click the OK button.
Click the Publish button.
Captivate will generate the files needed to display the banner. It will also open up your web browser and let you preview the project.
I imported the swf files into Dreamweaver and used them to complete my web page.
View the history grant website.