Working with the new Flash Builder Timing section

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.

Share

Tags: , , , , , , , , ,

Leave a Reply

You must be logged in to post a comment.