Toufee Flash Tip: How to create effective 3D Carousel flash movies
This is an Archived Article
This is an archived Blog Article referencing an earlier version of Toufee. These articles are maintained for the sake of posterierity. Information presented on these pages mat not apply to this new version of Toufee.
Flash Carousel is an effective flash tool when you have to showcase items interactively, for example, a flash movie intro of latest collections in an online gift shop, a slideshow of kitchenware items, a cool list of masterpieces in your art gallery or simply the best photos in your photography site. Whatever the application, a Flash 3D Carousel looks cool when its on your website and is an effective tool to showcase products. In this blog, I'll try to address the basic elements of a 3D Carousel that could turn a flash Carousel into a great looking flash movie. Use transparent images This is most important rule and can have a marked improvement of the flash in the final output. Flash Carousel needs transparent images to look the best, period. Using transparent images has its benefits. It enables items (or flash objects) that are behind to be visible (either partial or in full). Secondly, it completes the full illusion of "float", which may not be appealing if your images are not transparent. Thirdly, it helps to create compact-sized flash carousel that uses very less screen area, i.e. the flash area is utilized effectively. Just to give you an example, have a look at the carousel flash created using Toufee's 3D Carousel tool: The above flash is 340x200 pixels but still looks effective because of the use of transparent images (I've used PNG format). Note that all flash items are either fully or partially visible even if they are not the current focus item. Set the flash background to transparent Now that you've set your images to transparent, its time to repeat it to your flash movie. Setting the flash background to transparent is easy and straightforward. By default Toufee sets a black gradient background to the Carousel. You'd have to remove this background so that it reverts to a transparent background setting. Expand the Carousel Size option, click the Set Background button. In the window that opens up, click Remove Picture and then click Save Background Settings button. Setting a transparent background is crucial as this will allow the flash movie to blend with the background used on the webpage. The end result is just as exquisite. 3D Carousel Settings Ah these are just as important. In fact, these are the most important settings once you become familiar enough to start using transparent images and background for your Carousel flash movies. The Radius property determines the radius of the arc of the rotation. Simply put, a smaller radius keeps the objects closer. In the example flash above, I've used a radius of 110 pixels. The screenshot on the left is the exact settings used for the example Carousel flash used above. Using a smaller radius also reduces the overall flash movie area that is used. You should be careful in choosing the Radius, it has to be just right so that all objects are visible (and not behind one other) as well as the over flash area is tighter without affecting the rotation. The second setting that you wish to consider is the Slant Angle. The default is 0, which means the items are in a perpendicular plane. In the example flash movie above, I've used a value of 10 pixels so that it gets an elliptical arc. Note that the Slant Angle and Radius are inter-related. You will notice that you will have to use a slightly bigger Radius when the Slant Angle is set. Below is a version of the above flash with the Slant Angle set to zero but the the Radius kept at 110 pixels. Notice the visible spacing at the time of rotation between the flash items is slightly larger than the earlier flash movie. It is a result of the angle that tend to create a lesser "visible" spacing between the flash items. Navigation and Info Text I've disabled the Navigation buttons (at the top right of the flash movie) and the Info Text (displayed at the bottom) in the examples shown above. I did this to achieve a cleaner flash and to focus on the settings covered in this article. However, you might want to consider turning on the Info Text option. This enables users to view detailed textual information about the item as it comes on focus. I've not covered many other settings such as Zoom, Item Reflection in this article. I've not used in the examples shown above, but I'll cover them in a separate blog with a better example that would effectively illustrate its applications. I hope this article was a useful read. Please feel free to drop your comments.