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 generally 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.
How do represent graphics?
Probably you have seen multiple graphics with many different extensions: JPG, GIF, FLA, SWF, FH7... The extensions indicate the file type or format in which the graphics are saved.
There exist many programs in the market that allow us to display, to create and to modify graphics, and each manufacturer decides to represent the graphics as it's more convenient to him, or simply gives a certain extension to the graphics created with his own program to restrict its use to programs of the same company.
In spite of all, the multiple formats, in which it's possible to find saved graphics, can be classified in two basic types: vector graphics and bitmaps.
Difference between Vector Graphics and Bitmap
Bitmaps and Vector Graphics are mainly differentiated in the size. Vector Graphics has an advantage of great importance: it takes much less disk space or in memory; and, therefore, it needs much less time to download it from an application or Web page.
The explanation of this fact can be seen in the format in which they are created and represented:
The bitmaps or maps of bits are composed by huge "data rectangles" (matrix) that contain information about each one of the points (pixels) which form the graphics, and that roughly corresponds to the perception of what we see on our screen.
At a glance we don't discern pixels due to their small size, but if we extend a Bitmap largely we can see them like color squares (see the left image).
The information stored in these matrices is the characteristics of each pixel. The characteristics stored on pixels are their coordinates within the graphics and its color.
So, our PC processes this information, and generates the image on the monitor or another output device, indicating what color must be applied to each coordinate of the image.
At a first glance pixels or smaller units that compose an image aren't noticeable on a quality image, but they are distinguished when extending the image.
Pixels not always have the same size and there is no reason to find the equal number of pixels in images of equal dimensions. The quality of an image depends on the number of pixels in which we divide an image (normally it's measured in DPI or dpi) and the greater number of colors it can have.
Evidently, the higher the quality of the image, the more disc space it will take. As a result, it will be much more difficult to handle the graphics of higher quality and number of pixels.
Among the bitmap file formats the more common are: JPG, PCX, PNG, TIFF, GIF, BMP, ...
As we've seen, to generate a bitmap graphic, our PC must store and work with a great amount of information due to the need of maintaining the data of each pixel.
To represent a vector image it's assumed that the graphics are formed by a set of vectors or lines.
This is a great advantage, since a line, which would be composed by many pixels in the case of a bitmap format, in a vector image will only needed to store information on its starting and ending points, its direction and its length.
In this way it also reduces any figure to a basic set of vectors, which is more complex. For example, we could represent a circle simply keeping the information about its center and its radius, besides the outline color and the background color. The secret of greatly reduced size of this type graphics resides here.
How does Flash 8 work?
Although Flash 8 allows us to also work with bitmaps, it uses vector graphics to make its animations. This allows one to generate animations of very high quality and dimensions, reducing significantly its load time in attempt to display them on our Web navigator. In addition, there is no need in complete downloading the Flash 8 files to display them. As soon as exists a minimum information, the file can be shown while its downloading continues.
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 the 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.
