Graphics (I)

Unit 10. Graphics (I)

What's a graphic?

The Graphics are symbols that allow us to represent static objects and simple animations.

In the case we use a graphic symbol to make an animation, we should take into account that it will be bound to the timeline of the movie where it is. In other words, the animation will be played always if the original movie also is reproduced. This causes that, in spite of having its own timeline, it can't contain sounds, controls nor other graphic symbols.

So, as a rule we use the graphics for static images or when it's convenient that an animation is played only if determined frame of the movie timeline is under way.

Apart of the cases which we've previously commented, where a graphics is not handy, Flash provides us with another type of symbols as we'll see in next units.

Types of Graphics

The graphics can be:

a) Static: this graphic remains without changes. These graphics are typical on the background and on the objects that don't fulfill any special function. The size and consequently the load time of static graphics will be generaly reduced, although it will always depend on the resolution, on its dimensions and on the mode in which they are created.

b) Animated: this type of graphics varies its shape, position and others properties with time. Since to make the animation various graphics beyond the original one should be used or certain actions that can modify the initial state should be made, the size of animated graphics (for the same dimensions and form of creation) will be much more bigger than size of static one.

Because of this, although the animations provide our web more spectacular and attractive appearance, there are two inconveniences:

1) If it's about Bitmaps (now we'll see what it means) the web can arrive at an excessively large size in the end.

2) Although it isn't about bitmaps, for example, if there are typical Flash animations, which size isn't excessive, the setting of many animations can make the visitor a little bit "sick" of our site and therefore his attention from the really important issue: its content.

(*) The previous types of graphics can be, in its turn, of two types, according to the way in which they are created: Vector or Bitmap Graphics. To understand better these two types of graphics, have a look at our basic theme.

THIS IS A STATIC GRAPHIC

THIS IS AN ANIMATED GRAPHIC

Creating graphics and testing its properties

As far as theoretical explanation of the properties of graphics is so confusing, we are going to see in a practical way what we want to make clear. We are going to create a graphic in Flash and test the properties that we've commented in the first paragraph of the theme. For this, open a new Flash movie File → New).

Now we have to create the object that we want to convert into a Graphic symbol. Let's draw, for example, an oval in any place of the work area with the Oval tool , give it a filling color, by selecting the background of the oval and apply a blue color to it with the tool Fill color.

We've already created our object; we are going to convert it into a graphic symbol. Do you remember this?

Select the object and go to Menu Insert → Convert to Symbol and convert it to a symbol as we've already seen and given it the name "Animated Graphic" and selecting the Graphic Behavior

Since we've not yet seen the animations in details, we are going to make it in a way that might not be the most appropriate, but it will be very suitable to us for this example.

For this select our graphic and press the right button of the mouse. A menu will be opened, in which we'll select the option Edit to modify the graphic and access its timeline. Verify that you are on the timeline of the graphics (there is a sequence just over the stage that shows us in what level we are). On the lower image, it can be noticed that we are on "Scene1 – Animated Graphic" and, moreover we are INSIDE of the graphic (and the timeline which we see is the one of the graphic, and not from the main movie).

Let's create now new keyframes by selecting one by one the frames number 2, 3 y 4 and pressing F6 when we select them

Press on the frame 2 and change its background color for the oval as we did before. Repeat this in the two following frames.

Your timeline would have this appearance:

Press where says Scene 1, which is just above the Stage and we'll turn back to the initial level (Main Movie) and we'll be able to see our graphics "from the outside".

At last we already have our graphics completely animated. What do you think will happen if we play the movie? Let's see it by pressing Control + Enter, the movie will be displayed.

Do you like it? No, we don't at all. The oval continue being the same. But, why? The answer is in the characteristics of the graphics that we had explicated: the timeline of the graphics is bound to one of the movie.

In this case the timeline of the movie has only one frame, while the movie of the graphics had 4 frames, therefore, we've not given time for the graphics to develop its animation; it has reproduced only one frame, the first one.

How can we solve this?

It's very easy. That is enough to recall what we've commented. Close the window of the Flash player, select the frame 5 of the main movie and press F6. Now we have 5 frames in the main movie.

Press again Control + Enter.

Yes, now the animation is seen.

Save this file, because we'll use it further.

Legal warning: Authorised on-line use only. It is not allowed the use of these courses in companies or private teaching centres.