If you had ever downloaded your flash movie that has a background music attached, as a FLV or a AVI video file, you’d have noticed that the audio is out of sync with the video. When the rendering engine converts the raw Flex flash movie to a video file, there always seems to be a differential delay in matching the video to the audio track. The differential delay is caused by various factors such as the current load on the server, pending requests, etc. We are still trying to figure out how to normalize the delay factor so that audio mismatch effectively be nullified. However, a workaround to the problem, though a bit lengthy, is this:
1) Remove the sound track from the flash movie. The following KB article provides instructions:
2) Download the flash movie as a video file (this renders the video without the sound track)
3) Use a third-party software such as Windows Movie Maker, DubIt to add the sound track back again to the video file. DubIt can be downloaded from the following link:
I hope that helps. We still do apologize for the inconvenience caused by the audio timing mismatch. Our engineers are working to see if there is an alternate fix that they could implement to resolve the problem. Note that the issue happens only when the flash movie has a background music attached to it.
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 340×200 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.
