Hello everyone, its been a while since the last blog and it couldn’t be a good time to write a new post. I keep getting queries to our Support Desk about the use of the enlarge image option found in the Flash Apps ( 3D Carousel, CoverFlow etc). It seems that there is confusion as there is no clear documentation as to how to use this feature. I thought its right time to clarify this through this blog entry. The enlarge option is used to show images in a popup window (like a preview) when the smaller version of the image. The enlarge image option can be accessed by selecting an image in any of the Flash Apps initial upload screen
The the confusion arises with this question – how do I provide the smaller and the enlarged version of every image? There seems to be no option in the Flash Apps to be able to achieve this. This is the true and the other fact is that Toufee actually doesn’t show any enlarged version. The idea around the enlarge image is this – when one uses Flash Apps like 3D Carousel, Flash CoverFlow Maker, you’ll notice the initial images that are displayed are smaller or reduced by 1/4th in proportion to the original image size. This is the default setting to allow the 3D Carousel or the Flash CoverFlow to operate. When one clicks on the image, the original image is shown. This is what we refer as the enlarged image (note that we don’t enlarge the image).
As opposed to the meaning of enlarged, what exactly happens is the contrary – Toufee actually shows reduced sized images in the initial screen of the Carousel or a CoverFlow flash movie. The enlarge option actually initiates Toufee to show the actual size of the image.
The above CoverFlow flash movie show thumbnails or icons of the images. When one clicks an image, the original size of the image is shown. All the images used in the above flash movie are 640×480 pixels. The size of the thumbnails are 160×120. The important factor to consider is to set your Carousel flash movie size to 640×480. The idea is to set the canvas size of the flash movie to the same size (or higher) to those of your images. This allows the flash movie to show the entire image when the enlarged option is clicked.
The problem many customers seem to have is that they used very high resolution images but set the flash movie area to half its size. This caused the image to get cut-off when the enlarge image is shown.
When working with the Flash Builder, a frequent question that I see from customers is how to set a common background color or a background image for a flash movie. The following KB articles already address adding a background color as well as setting a background image respectively,
Just to clarify a basic question, the default background that is set for a Flash Builder flash movie is a transparent background. It means that the flash movie takes the background of its container, i.e. say you embed the flash movie in your webpage that has a red background, the flash movie takes the red color. If you place the flash movie over a webpage that has a gradient or textured background, then the same background comes through due to the background transparency.
Setting a Gradient background
What’s less obvious is how to set a gradient color for the background. To be able to do this, one has to have a solid color background set. With a backround color set, click the Background label in the Timing bar. This will reveal the Background Properties section in the left panel
Click the Change button to open the Edit Gradient window. You should now be able to set the two colors for the Gradient effect.
A quick tip to achieve sleek gradient effects is to avoid colors that have sparking color contrasts, i.e. don’t go for colors that are two opposite sides of the spectrum, instead choose the second color that is close but distinguishable from first color – this will result in professional looking gradients.
The other day, I had a support ticket from a customer named Charlotte who wanted to know if its possible to enter custom hex code into the color palette. She had to create a flash banner movie and wanted to match the exact color from her company logo. She wanted to know if there is an option to enter hex code. Looking at the color palette, one may notice that this option is not easy to locate, as a matter of fact its hard to recognize to say the least.
So where can one enter the hex code? If you look at the color palette, you’ll see the hex code displayed for the chosen color. The rectangular area is actually a text box that you can type into. This means you can enter your own hex code and the color palette will take it.
Block and Type, finally press Enter
You’ll notice that the text that you type in may not be visible. This is because the textbox and the font color are both white. You’ll have to block the region (i.e. select the code displayed) and then type in your hex code. Remember to press Enter key after you enter the color code. Simply entering the code won’t set it to the desired color.
I hope this tip helps when working with your flash movies. Thanks to Charlotte for bringing this up.
When working with flash movies, it is common to create hyperlinks in the form of buttons that when clicked takes users to external websites. However, there are instances when you don’t want a button, but instead have any text item clickable. If you’re not already aware, Toufee lets you add buttons to your flash movies. Buttons add the interactivity element to your flash movies in the sense that you may jump to a specific section, have the flash movie pause/play at specific times, or eventually open a website link when clicked. This video tutorial (http://www.youtube.com/watch?v=zN_FqGlBduA) actually discusses in detail on how to work with buttons in the Flash Builder.
Buttons as Text Items
What some customers have requested is the ability to add hyperlinks to regular text items. If you look at the current text item option available in the Flash Builder, there isn’t a direct option to hyperlinks text items.
The way around the issue is to use the NoSkin skin-type for the button. This turns the flash button into a regular text item. This virtually creates a text item with the hyperlink features of a button. While internally this item is treated as a button, you may use the regular editor options to change the font, text style, etc on the “NoSkin” -type button.
Note that the instructions/screenshots provided above applies only to the Flash Builder. In the next article, we’ll discuss how to create hyperlinks for flash movies created using the Flash Apps like Flash Slideshow Maker, Flash Accordion Maker, etc.
Recently when working with a customer on a video file issue with the Flash Builder, I noticed something interesting that is worth a mention. When you drag an item on to the Toufee Flash Builder movie maker stage, Toufee adds a default Fade In and Fade Out effects to the item. This goes applies to any item – text, image or video. There is no Fade In/Fade Out effects for Sound items as its logical the flash effects are visual in nature. And one day, one of the customers reported that his video file was not getting started immediately and usually takes a few seconds to start in. I initially didn’t realize the Fade In effect myself and found that it could be causing the problem. The Fade In effect duration is nearly 2 seconds so this was the delay customer was referring to. Turning off the setting made the video look much better.
Removing the Fade In effect
To remove the Fade In effect, simply drag the slider for the Fade In such that it is zero. Earlier, we did have an option where one could directly adjust the slanted triangle-like marker (that denotes the effect duration) in the Timing section to modify the flash effect duration. However, this was retired as it was sometimes difficult to work with when the flash effect duration was particularly small (such as a 1 second effect).
You would notice that once the Fade In effect is removed there wouldn’t be the this slanted triangle before the Video label in the Timing bar. This is a visual indication that the Fade In effect does not exist on the item.
The same steps apply to removing the Fade In or the Fade Out flash effect on any item such as text or images.Remember that the Fade In effect property only controls the timing of the “Fade In”. The actual effect, or the effect type is determined by the In Effect dropdown list under the General Properties section. The In Effect property is used to select the effect that would be applied as Fade In.
Toufee now retains the filename of the uploaded images, which earlier used to be a random name for every uploaded image. This we believe should have brought much relief to our customers who may have had some tough time managing the uploaded images. Why didn’t we do this earlier? Well, we should have but we’re glad that the issue is fixed for now. The reason that images were originally assigned random names was to prevent users from renaming the images on the UI causing the image references to be lost. However, we did find a better way of managing it while retaining the image file names.
The second big update is that the FLV videos now come up with much better video quality in the. Earlier, FLVs were passed through a video compression phase to ensure that the resulting FLV video size is small. This didn’t seem to go well with customers who though that the video quality was being compromised. We thus had removed the video compression for FLV files generated. All FLV files now exported are generated in HD quailty with no loss in the quality as the video compression has been disabled. Note that this is only for the Business Account. The Power Account still has the video compression feature turned ON.
