New Transition Effects added to Flash Banner Creator flash app

March 31st, 2013

Hello everyone,

Firstly, a happy Easter to all. There has been query many a times from customers as to the difference between the Flash Banner Creator flash app and the Flash Slideshow Maker flash app. Both these flash apps look identical in the way they work and the options they provide. It is true that is very little functional or visual differences between the two. Our development team is working to make improvements to these Flash Apps to make they largely unique. As a small step forward, we’ve added new Transition Effects to the Flash Banner Creator Flash App. The new effects are namely – TileFlip, CarWipe, Mosaic and Random. These effects are unique on their own and should lend better impact to your Flash Banner flash apps, specifically Mosaic and TileFlip that should be very suited to banner transitions.

Also, the Flash Banner Creator has a a filmstrip-type Navigation Bar option (called by the same name) which is not available in the Slideshow Maker (actually this should have been reverse – it makes better sense to have the FilmStrip in the Slideshow Maker).

I hope the information helps. We are looking at add more features to both these Flash Apps and I’ll keep the blog updated with the developments.

Share

Flash Tip: How to create effective Pan/Zoom flash movies

March 16th, 2013

Flash Pan/Zoom is an effective tool that can help showcase products, let customers do a quick drag and zoom preview and provide multiple viewing options to see and feel the product better. I’d like to discuss quick tips to produce effective Pan/Zoom flash movies that can be an effective value add to your product gallery.

The first requirement is to have a high resolution image of your product. This lets customers zoom and/or pan the image to explore better. I’ll start with a 800×635 image of a jewel (its not the ideal resolution but I didn’t get a better royalty-free image).  The first task is to set the flash canvas area to half the size  of the original image. The rule is necessarily not half the original, you can try 2/3 if you to start with a better sized-image. It all depends on your image resolution and how much zoom you wish to allow. The reason for a high-resolution (or a very high resolution) is two things – firstly, you don’t want to allow customers to zoom beyond its original size (otherwise the zoom will grain your image). Secondly, as already indicated, you’d want customers to allow enough zoom and pan to explore the product.

Step 1: Okay, so with the 800×635 image, I’ll set my Flash Pan/Zoom window size to 400×314. Once the canvas size is set, you’ll notice that the preview show only a portion of the image – there’s still work to do

First Step - Set the Canvas size

Before we move to the next step, you might quick want to set Base Opacityunder Tweaks menu to zero if you wish to have a transparent background.

Step 2: We’ve got to fix the image. Expand User Interaction menu, and make sure Show Navigation is enabled (it would, as a default but just a check).  Set the Positioning to Top Right (its most common and that’s where customers expect the zoom sliders).

Set Zoom Sliders position

Now click move over to the canvas and as you hover your mouse over the top right area, you should see the Slider and Zoom controls.

Zoom Reset

Click the Show All (Reset). This fits the image inside the canvas – now it looks much better

Image Fit within Canvas

Step 3: This is where we set the zoom options. Click Advanced Customizations (on the bottom left), Expand Pan Zoom Settings. I’d prefer setting Zoom Minimum to 1 so that doesn’t allow your image to go any less than its start size. For the Zoom Maximum I set it to 2, so that I zoom just 2x times the original size (so as to avoid a grained image at maximum zoom).

The Pan Speed controls the pan factor when the four-way direction keys are clicked to pan horizontally/vertically. I set it to a value of 3 as I found it strikes a nice balance with the amount of Pan area that it covers without missing any details.

 

And Here We Go

Below is the final flash movie created using the above settings.

I hope you liked the tutorial. Please feel free to post your comments. Should you have any queries, you may open a Support Ticket and I’d be more than happy to answer them.

Share

Flash Movie Tip: How to create thumbnails for your flash slideshow movies

January 12th, 2013

A happy new year to all. This is the first post this 2013 and here is a tip that comes straight out from a query asked by one of our customers. The query was how to create thumbnails for a Slideshow flash movie. The fact is, this option is not available in the Flash Slideshow Maker. However, the Flash Banner Creator does have this option. Here is where you find it.

In the main Flash Banner Creator settings panel on the left, expand Navigation Bar. In the dropdown list, select Filmstrip option.

Navigation Bar option

Click the Save Project button at the lower left portion of the screen to save the changes. The filmstrip option would look something like this in the resulting flash  movie.

The thumbnails are displayed at the bottom by default. When one hovers over any thumbnail, a larger preview of the slide is displayed as shown in the image below:

thumbnail_hover

For those who have not chosen Flash Banner Creator as your paid Flash App, you may request a swap of your Flash Apps to make it a paid app. I hope this tip was useful. Please feel free to share your comments or suggestions on any options that you’d like to use in your flash movies.

 

Share

How to create copies of your flash project

December 9th, 2012

There is a need when you have to create multiple versions of the same project. And you don’t see a “copy” option to simply create a copy – what do you do? Sometimes, you’re short of time and you end of redoing the same flash project, all over again. Gosh, that really sucks. Okay, here is somewhat better way to make life easy. Just pop in a support ticket mentioning the name of the project and the number of copies you’d like to create and we’d be happy to do so. I do however understand that it may not work when you’re short of time, but we’d get this arranged in less than a business day if that ETA would work for you.

I know you’re asking as to why not have the option on the Members Area. We heard it and it will be available soon in the next release.

Share

Toufee Flash Tip: Workaround to fix audio mismatch in the FLV video

September 30th, 2012

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:

http://apps.toufee.com/support/index.php?page=kb_view&id=145

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:

http://www.softpedia.com/get/Multimedia/Video/Other-VIDEO-Tools/DubIt.shtml

The following page has tutorials on how to use DubIt to add a sound track:

http://www.edflix.org/dubit.htm

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.

Share

Toufee Flash Tip: How to create effective 3D Carousel flash movies

September 23rd, 2012

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.

Share

Inside Toufee: “Video Processing” message in the Flash Builder – things to know

August 16th, 2012

Some users may have noted that for some videos that they upload into the Flash Builder, they’re greeted with a “Video is processing” message. The problem was that users find the message continues to persists even hours after the actual upload. At times, they don’t get to see the video at all. I’d thought I’d give some background as to what exactly happens. When you upload a video and try to drag it to the Flash Builder stage the first time, Toufee puts a “Video Processing” banner. This banner is actually an image. When you open your project the next time, this banner would be replaced with the actual video that was processed. What we’ve noted is that the browser tends to cache this banner image even after the video is successfully processed. Users thus tend to see this image everytime leading to think that the video is still under process. To fix the problem, one has to clear the browser cache. The following page has instructions on how to clear the browser cache

http://wiki.answers.com/Q/How_do_you_clear_browser_cache

Why does Toufee processes uploaded video files? Toufee requries that the video files be converted to the FLV format so that it is compatible to work with. When you upload a MOV or WMV file to your account, Toufee tries to convert this file to the FLV format. When it does, you see the video processing message. So the next time you have to upload a video, prefer the FLV format if its available.

It is also possible to bypass the video processing completely. If you see any issues with upload, please let me know by opening a Support Ticket and I could upload the video bypassing the video processing.

I hope the information helps.

Share

Flash Movie Tip: How to create a replay button for your Toufee flash movies

July 4th, 2012

First of all, to all our US customers, wish you all a happy July 4th! Now, if you’ve been using the Toufee flash player skin for your flash movies, you’d have noticed that there isn’t a replay button. If you have to replay the flash movie, then one has to drag the slider all over to the back to be able to play again. This quite annoying not to mention that many end users of your flash movie may not necessarily be aware how to replay. So here is a quick tip to let add a button item that will act as a replay button for your flash movie. Below are quick steps:

1) On the left panel, click the ‘Text &Items’ option

2) Click Add Button to expand the available list of buttons.

3) Drag a button of your choice to your flash movie. Make sure that the button is placed at the very end in terms of its timing, i.e. when appears in the flash movie

4) Single-click the button so that the left panel options shows up

5) For the On Click dropdown list, select Jump to Time option. Then set a value of 0 seconds in the To Time field.

This should make your button act as a Replay option for your flash movie. I hope the tip was useful. Please feel free to let us know your comments via our Support Desk (http://www.toufee.com/support) and click Submit a Support Ticket option.

Share

Toufee Flash Apps: How to use the enlarge image option

June 22nd, 2012

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

Enlarge Image option

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.

Share

Toufee Update – No more popup windows on hyperlinks in flash movies

June 9th, 2012

For those of your Toufee flash movie users who’ve created a hyperlink in your flash movie, you’ve noticed a popup window show up when the link is clicked. It was a bit of nagging problem and particularly annoying when our customers are creating flash movies for their customers.

However, after quite some time of wait for our customers, there is good news. We have actually updated our code so that you turn off the popup window for good. All you have to do is modify the HTML embed code of the flash movie to turn off the popup window.

If you look at the EMBED code that is generated from Toufee, you’ll see this code section

?appID=4&userID=56&projID=prj_test_link&hidePopup=false

Where it says

hidePopup=false

simply change the value to true, which would  be

hidePopup=true

So it should be

?appID=4&userID=56&projID=prj_test_link&hidePopup=true

Note that the hidePopup=false appears twice in the code, so remember to update both occurrences.

Please remember to clear your browser cache before you preview the flash movie. You should now the see the popup window go off.

I am pasting a complete EMBED code of one of my flash movies just as a reference

<object width="640" height="365">
<param name="movie" value="http://apps.toufee.com/apps/1/slideshow_player.swf?appID=4&userID=56&projID=prj_test_link&hidePopup=true"></param>
<param name="allowFullScreen" value="true"></param>
<param name="wmode" value="transparent"></param>
<param name="allowscriptaccess" value="always"></param>
<embed type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="365" src="http://apps.toufee.com/apps/1/slideshow_player.swf?appID=4&userID=56&projID=prj_test_link&hidePopup=true" wmode="transparent">
</embed>
</object>

Btw, if you like to know the steps to get the HTML code, then you may refer the following KB article:

http://apps.toufee.com/support/index.php?page=kb_view&id=134

I hope you guys can now breathe a sigh of relief. We’re glad as well as this was a high priority fix for us and we’re happy we’ve delivered it now.

Share