In this post, we’ll discuss about the concept of layers and how you could utilize layers to arrange the image and text items the way you want in your flash movie. One may think Layers as stacks (or a pile of books), that lets you customize (arrange), flash movie items such as text and images. An item in the topmost layer has full visibility or is shown completely. Items that are lower in the Layer ordering may have other flash items displayed (partially or fully) over it.
Why need Layers?
Let’s take a simple example where you want to display a text item directly over an image in your flash movie. If you added the text item first and then the image, then in the normal case, the image would be placed directly over the image causing the text to be not viewable. To overcome the problem, you’d have to add the image first and then add the text item to your flash movie. This approach however may not be feasible when you have to work with a number of text or image items. This is where Layers are useful. With the Layers concept, you may re-arrange the layer order/stack order of the items such that one is shown over the other or vice-versa.
Where is the Layers Option in Flash Builder?
If you open the flash movie and go to the Timeline bar at the bottom you will notice that the images and text item labels will be listed. This is actually the ordering of the layers of the flash movie. To clarify, each item (text, button, image or video) that you place in your flash movie is created in its own layer. In the Timing bar where you see all the items listed vertically, you will notice a big horizontal bar over which you will find each item label (such as “Text1″ or “Image4″, or “Button1″).
This horizontal bar represents the layer, one for each item. To move the item’s layer, simply click on the empty area in the big horizontal bar of each item. Do not click over the item label or inside the item label area as this select the item…one has to click outside of the Item label text. Once you click it, the layer will be selected and you could then move the item layer up or down by drag it to move up or move down. So when you have images that take up the entire flash movie area and you wish to have text items show over or on the image, then you move the Text Items higher up the order in the Timeline and move down the image items below the text items.
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.
First of all, wish all our Toufee customers and readers of this blog a very Happy and a Prosperous New Year 2012. As I start to think about the first blog entry for the new year, I decided to cover aspects of the Toufee Flash Builder as well as the Flash Apps that are often overlooked. The items discussed below are those that are frequently asked at the Support Desk but do not have any documentation elsewhere on the site. I hope this blog should add more clarity to customers for now.
Watch out for the filename
When saving your flash movie project, make sure you don’t use an existing project name to save a new project. Toufee simply overwrites any existing project file that exists by the same name without any warning. This applies to Flash Builder-type projects as well as any of the other Flash Apps. This does look awkward and we’re fully aware of this glitch. The technical team is working on putting a warning note very soon.
Popup Blocker message keeps popping up
If you happen to use hyperlinks in your flash movie, then you may noticed that every time that you click on the link, Toufee opens a popup blocker warning window. This happens even if you had turned off the popup blocker setting for your browser. Weird? Well Toufee actually displays this warning regardless of your popup blocker setting, i.e. Toufee displays the warning all times. However, many customers have reported that it doesn’t look any good on their flash movies. We’re coming up with a fix to this very soon.
Clicked the SWF or YouTube download option but no effect
When using the SWF download option, you may have noticed that clicking the SWF icon in the Publish Project window results in nothing happening…you don’t seem to get the SWF download prompt. The same may hold true when using the YouTube download option…absolutely nothing. The gotcha here is that Toufee happens to open a new browser window (that initiates the SWF file download or YouTube video queued message) and this new window gets opened in the background, i.e. you may notice this visually when you have multiple browser tabs or windows opens. So the next time this happens, please do check all open browser windows for the SWF download prompt or the Video Queued message.
No option to delete Image, Audio or Video?
This might be a bomber. The reason that this option was turned off is due to the fact that when you add an image or an audio to your flash movie, Toufee only maintains a reference to the uploaded content and does not embed the image or audio unless to export the flash movie as a SWF file. When we did have the option to delete the uploaded content, users started to delete images that were still in use with other projects and some users deleted the image after adding it to a project thinking it would be saved along with the project file. This resulted in many customer movies going and we had to temporarily turn off the delete option to avoid data loss.
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.
I hope the last post on setting the Flipbook flash movie size helped to clarify on the most basic setting of a Flipbook flash movie. Continuing from where we left off, I’ll cover the most important settings of a Flipbook flash movie. These settings determine how your Flipbook functions as well as directly affects the look and feel of your Flipbook.
Page Properties
The first setting that we’ll look at is the Book Cover option. When you turn this on, you get a “closed” book, otherwise its a open flash flipbook. Pretty basic, but there is one gotcha that you might want to keep note of. When you happen to change only the width of your Flipbook flash movie with the Book Cover setting on, you may not notice the change visually until the Flipbook opens. To better illustrate, say the initial width is 300px and you increased your width to 600px. If you have a perfect 300px image on the cover, and because the flash movie background is transparent, you would have to wait till the book cover opens or manually flip the page to notice that the Flipbook indeed resized. This may not be a big deal as it sounds and you may very rarely run into such a situation but though I’d keep you posted on this as well.
Page Size and Page Background
The Page Size option lets you switch the page style between the conventional book style (where each side is a page) and using a single image per slide (not sure how better to put it). The Half Page setting puts your images on both the left and right sides. The Full Page setting puts just one image on the left page while leaving the right page blank. Below is a sample flash movie that illustrates this.
Since the Half Page setting is obvious I preferred to illustrate the Full Page setting. Note that when you set a Page Background color, the blank page takes the chosen background color. The Page Background color may not be of any use unless you use the Full Page setting. While we see most customers tend to use the Half Page setting, there maybe instances when the Full Page setting might actually come in handy. This was the reason we preferred to have it, as you may never know
Page Turning
This is a cute setting…If you would like to have the page turn just like how you’d do it when you’re holding a real book, then remove the checkbox on the Hard Pages option. Turning it on makes the turning of pages rigid, something that you’d want to have if you are trying to create an “album” style Flipbook flash movie.
Note that when you have the Book Cover setting turned on, the first and the last pages (typically the cover images) would always take a hard page turn even if you had turned off Hard Pages.
Automatic Page Flip
While the setting itself is obvious, if you set it to auto-flip the Flipbook continuous to loop the pages and when it reaches the end, it flips the book and then starts all over again. Also be prudent when setting the time interval based on the content that is displayed on each page. On most occasions, we’ve seen customers let it to manual flip as most would prefer to flip the page at their own convenience.
I hope that this article was useful and I hope it would help you when creating your next Flash Flipbook project.
The Flipbook is a very popular flash application widely used by customers and many flash web designers who use Toufee. We’ve seen many queries regarding the Flipbook and the intent of this blog article is to cover in detail the basic settings of the flash Flipbook.
Getting the Flipbook Size Right
The first setting that you must decide well before creating the Flipbook is its size. The Flipbook Size is the size when the Flipbook is in the open position, i.e with pages on both sides.
You will notice that there is no separate setting to set the size a Flipbook page. The width of a page is 1/2 of the overall width of a Flipbook. The height of a Flipbook page is the same as the height of the overall Flipbook flash movie size. So if your Flipbook Size is 640 (width) and 365 (height), then the size of your page would be exactly 320×365.
What should be the size of the images used for the individual pages? The recommendation is to use your images as your point of reference when setting the Flipbook size. If a majority of the images are say, 200×500, then we recommend setting your overall Flipbook Size to 400×500. It is easier to set the flash movie to the size of your images than resizing your images to suit your flash movie. This recommendation applies to all the Toufee Flash Apps – your images should always be your point of reference when deciding the overall flash movie size.
What if the images are not the same size? f you couldn’t manage the same size images, then try images that are proportionate in size. For example, if your images are 200×500, then the width to height ratio is 1:2.5. If one of your images is 300×750 then it should work as Toufee tries to automatically adjust the image to the Flipbook page size (which is 200×500). Using an image that is out of proportion from the rest will still render the Flipbook but only that it would look odd.
Hello everyone. In this article, I’d like to quickly introduce the concept of timing in the new Flash Builder. I’ll discuss on how to work with the Timing bar to adjust object timings and explain how it has changed the frame-based approach from the older version to the newer time-line based approach which also for more fluid flash effects.
Before I go ahead with the article, I would request that you take a moment to have a look at the video tutorial that explains about how the new Timing works. Since the tutorial explains most of the stuff, I’ll try to focus more on topics not covered in the video tutorial.
The newer Timing structure
If you were a user of the older Toufee version (Toufee Pro Flash Maker), then you would be aware that a Toufee movie is a collection of frames. With the newer Flash Builder, the frame-based approach has been retired and we’ve now moved to a Timeline-based approach where objects are arranged in a timing sequence via the Timing section available at the bottom of the Flash Builder.
When a new flash movie item is added to the Flash Builder, the item is position at the end of the flash movie in terms of its “timing”, i.e. if your flash movie’s total playing length is 01:30mins and you add a new item, then the item is placed (or is displayed) at 01:31min. This is the default behavior. Changing the item’s timing position is very easy ofcourse using the Timing bar – simply click and drag the item to the left in the Timing and its position is adjust immediately. It is that easy with the new Timing section.
Using the Timing Properties
The Timing Properties is displayed in the left panel when you click on an item in the main stage or the Timing section at the bottom. Using the Start Time field to manually enter the start position has the exact same effect as dragging the item around in the Timing section. The Duration field controls the length in time the item is displayed on screen.
What if I need a frame?
You may run into instances where you need to have a frame-like convenience where you could set portions of the flash movie to a certain background image or a background color. With the new frameless approach, you may hit a road block here. There is ofcourse a workaround – let says you want a background image to show at a certain point in time. You would just add the image to your flash movie as you normally would when adding a regular image, set the Duration to the length of time if it were a frame. Finally, here is the most important setting – you would need to set the image’s z-index is lower than all other items which fall in the duration of the supposedly image to be used as the frame background. But how to set the z-index? Read on.
Layering/Item Order
If you open the flash movie and go to the Timeline bar at the bottom you will notice this – all the images would be ordered first and then you would see the text items listed after the images. This is actually the ordering of the layers of the flash movie. To clarify, each item (text, button, image or video) that you place in your flash movie is created in its own layer.
If you look at the Timing section on the left, Text3 has the highest z-index value, i.e. it is the highest in item order in the flash movie.
In the same way, Image3 has the lowest z-index. If one would require to create a frame-like effect, then order the item in the Timing section such that it is at the bottom of all other items that falls within this duration. In the Timing bar where you see all the items listed vertically, you will notice a big horizontal bar over which you will find each item label (such as “Text1″ or “Image4″). This horizontal bar represents the layer, one for each item. To move the item’s layer, simply click on the empty area in the big horizontal bar of each item. Do not click over the item label or inside the item label area as this select the item…one has to click outside of the Item label text. Once you click it, the layer will be selected and you could then move the item layer up or down based on your preference. So when you have images that take up the entire flash movie area and you wish to have text items show over or on the image, then you move the Text Items higher up the order in the Timeline section at the bottom and move down the image items below the text items.
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.
For more than four years now, Toufee has seen three major releases of the flash movie maker application, each being architecturally different while we try to keep the core application simpler and easier to use, yet create flash movies that are powerful and functional. The Flash Builder, the latest in the line of Toufee Flash Movie Maker application, follows the same suit. For a start, one may notice that the new Flash Builder is far simpler by it looks as well as the options/controls in the User Interface (you don’t find menus or lots of panels as with the previous version).
The Flash Builder, by far has the best tools to create highly professional flash movies, thanks largely to the re-designed architecture that shifts from a frame-based approach to creating flash movies to the more fluid Timeline or Timing bar that is feature in advanced tools like Adobe Flash. The new Flash Builder allows transitions of the multiple items as smooth as ever, something that was not seen in previous version of the Toufee Flash Movie Maker. The second influential factor that lends the professional touch to creating flash movies is the fail-proof transition effects, devoid of any occasional jerks or jumps that was a noted bug in the older version.
So what happened to the old version, especially if you’re a customer of the Toufee Pro Flash Maker? Well, no worries at all as all existing customers of Toufee Pro Flash Maker will still have access to the old version. When you login to your Toufee account, you will notice a tab called Old Toufee on the top right. Click this to be taken to the old Members Area from where you could launch the old Toufee Pro Flash Maker.
Till the next time, hope you create great looking flash movies for your business and websites using the new Flash Builder.
Hello everyone. This post comes after more than a year, quite uncharacteristic of us to have kept the blog silent as still water. While you may already know that we had launched an all new version of Toufee called the Flash Builder and a whole set of additional Flash App tools to go with it, let me try to give a new primer on the Flash Builder just in case you already haven’t had a chance to check out.
Its a new core
The new Flash Builder and the Flash Apps have been built from scratch. This allowed us to fix many of the issues in the older Flash Pro Movie Maker. Before I go into any details, you might want to quick have a look at the following video tutorial that introduces the new Flash Builder as well as many of its features:
One of the biggest improvements in the Toufee Flash Builder has been the Timing feature that makes it complex timing arrangement extremely easy to achieve and the process is completely transparent. By using simply drag and move actions to move items in the Timing bar, one could achieve amazingly precise timing that leads to smooth flow of the flash effects added to the flash movie objects. To get an understanding of how the whole thing works, please refer the following video tutorial:
The Effects engine has also been completely re-engineered as well. Effects are now applied to an object’s In and Out phases. This provides two benefits – firstly, there is a clear distinction to the object’s duration with respect to the effect duration…you will notice this distinction in the Timing bar where every object’s item label will have two triangle-shaped markers at both ends which represent the In and the Out effects respectively. The second benefit is the easy management of the effect, in terms of adjusting the effect duration via the Timing bar.
Faster, Easier and Compact
If you have been using the new Flash Builder for a while, you may have noticed that it loads much faster than the older version, processes videos and audio uploads better. The user interface is more compact and we’ve done away with the traditional menu-style options which sometimes confused users where there are scores of option to deal with. The new Flash Builder, without the menus, still manages to pack in all the features and options to achieve every bit that was possible with the old Toufee. I would recommend that you refer the following video tutorial that discusses useful tips for creating flash movies with the new Flash Builder
Some of the other improvements is in Buttons, though you may notice that you do not have the breadth of options/button styles that was available in the old Toufee. That said, you could still create very functional button items with the options currently available. The following video tutorial discusses this in detail:
In addition to the new Flash Builder, we have introduced eight Flash Apps which are wizard-driven applications that lets you create flash movies tailored to particular function – such as a flash banner, a slideshow, a flip book, a carousel etc. The eight Flash Apps are
Flash Banner Creator, Flash Accordion Maker, Flash Slideshow Builder, Flash Pan/Zoom Viewer, KenBurns Effect Maker, Instant Flas Flip-Book, 3D Flash Carousel Maker and the Flash CoverFlow Maker.
Creating a flash movie with the Flash Apps is very quick and highly efficient, as you end up flash movies that are precisely created since the wizard takes care of putting together pieces in the background. How does the Flash Apps help? Assume that you want to put a quick slideshow of a new product or service on your corporate website. With the Flash Slideshow Maker Flash App, you may create a professional looking slideshow instantly, and publish to your website. The biggest benefit of the Flash Apps is its recurring capability…you can create consistent looking slideshows for your many products or services and more so you could create them pretty quickly. A end user with no knowledge of Flash can consistently deliver professional looking flash movies by using the Flash Apps tools.
We have detailed video tutorials on the eight Flash Apps which can be accessed from the links below:
We hope the video tutorials help. I’d be writing more on the features, usage, tips about the new Flash Builder as well as the Flash Apps in the coming weeks so there is lots of information on the way.
