By Scott Trudeau

Created

September 28, 2007

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.
box.jpg
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
snag67.jpg
The Other Project Types dialogue box will open. Select the Image Project radio button.
snag68.jpg
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.
snag69.jpg
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.
snag70.jpg
Preview the project by clicking Preview > Project. Hey…it works! But my plan didn’t call for a control bar with the Captivate logo.
snag72.jpg
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.
snag75.jpg
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.
snag76.jpg
Click Preview > Project.
snag71.jpg
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.
snag78.jpg
Now to remove the control bar and Captivate pre-loader. Click the text-link located next to the Skin preferences.
snag79.jpg
Uncheck the Show Playback control checkbox. Click the Border tab.
snag80.jpg
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.
snag81.jpg
Time to hide the pre-loader. Click the Preferences button.
snag82.jpg
Make sure that the Start and End preferences are being displayed (under Project). Uncheck the Loading screen checkbox.
snag83.jpg
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.
snag84.jpg
Click the Publish button.
snag85.jpg
Captivate will generate the files needed to display the banner. It will also open up your web browser and let you preview the project.
snag86.jpg
I imported the swf files into Dreamweaver and used them to complete my web page.
snag87.jpg
View the history grant website.

COMMENTS

  • By Sara - 11:53 AM on October 8, 2007  

    well its a little difficult of a process but I will say your history site is absolutely wonderfully done and impressive

  • By Richard Osborne - 7:26 AM on December 5, 2007  

    Great stuff Scott. I’d developed a Flash file to do this sort of thing for me, but it’s going in the bin now!

  • By Chris Armour - 10:22 AM on January 31, 2008  

    Cheers Scott, You just put that wow factor to my new website and saved me a lot of time and expense trying to get my head around FLASH. Thanks a million.

  • By Chris Armour - 10:23 AM on January 31, 2008  

    Cheers Scott, You just put that wow factor to my new website and saved me a lot of time and expense trying to get my head around FLASH. Thanks a million.

  • By David - 3:33 AM on March 11, 2008  

    Hello, Scott. I’ve tried to make a 168X60 size web banner, but it won’t let me go below 100 px height? How can I make a 68px height size banner. Thank you for your answer.