Unit 9.

Symbols (II)

Modify an Instance
We've previously seen that we can modify an instance of a symbol without modifying the original symbol. However, since it is not a vector graphic (we'll see what this means further), we cannot modify the instances with the drawing tools of Flash MX 2004, but with the Properties Panel, that allows the "external" manipulation of the instance. So, this panel, as we've seen, results to be very useful, it does not allow us to modify the basic structure of the instance, but other properties, i.e. we can make the instance to be more bright, but we cannot transform a star into a circle.

Properties Panel of Instance

To access the properties panel of an instance, firstly, we have to select the instance that we want to modify and then open the Properties Panel . If we select a Flash object that isn't a symbol, the Properties Panel will show the properties of this object, but not the own characteristics of the symbols (changes of color, swaps etc...) At the moment when we select a symbol, a series of properties and options will appear: Instance Name and its corresponding icon: The name of the instance is very important, since it allows to identify it during the movie. At a quick glance, the associated icon lets us know what type of symbol is. Instance Type or Behavior of the instance. By default, it shows the type the original symbol belongs, but we can change it, so that it changes its behavior, though you can continue maintaining its initial structure (on the image it's a "Movie Clip"). Name of the Selected Instance (Instance of:) This option shows the root symbol from which the instance under our modification comes from. This symbol exists in the library and every change on it affects all the instances which are derived from it. Swap: This option is worth of an especial attention, since it's very useful and will save many of our efforts whenever it will be necessary to use it. Its function consists in changing any symbol by another that we have in our Library. It might seem simple, but during development of a professional work the need of checking out situations quickly appears. Thanks to this option we can work quietly with an "outline" and substitute it in an effective way (the new symbol inherits the properties of the previous one, including the name of instance, the actions that will affect it, graphics effects etc...) when the moment comes. In the image you can see the dialog box of Swap Symbol.

In addition, this panel incorporates the button Duplicate Symbol don't want to loss it. We duplicate it and work with the copy.

. It is very useful when we want to probe a symbol and

Effects on Instances (I)

To access the effects, which are applicable to any instance, we have to go once more to the Properties Panel, from here we could access all the effects that Flash provides us. In the image to the right it can be seen the tab Color: of the Properties Panel.

There are various types of effects. If the symbol has been just created or if it hasn't assigned effect it will appear the tab None. In the next section we'll comment the different effects that are applicable to an instance.

Unit 9. Symbols (III)

Effects on Instances (II)

Now we'll show the types of effects. For this we'll start from the following original image:

Brightness. You can modify its value measured on a scale from -100% (black) to 100% (white), in other words, completely obscure (black) and completely bright (white). You can move the slider bar or introduce its value directly into the text box.

Brightness Effect of the 50 %

Tint. This option allows to change the color of the instance, but since, as we said, we cannot modify the instance internally, by varying the color in the tab Tint, the color of all the instance will be changed as we were coloring or setting an imaginary layer of a certain color. We can modify the percentage of the thickness or intensity of this "layer with the first slider, which is on the right.

Tint Effect of the 50 % with the green color (0 255 0)

Alpha. It represents the level of visibility or transparency that this instance will have. It can also be modified by direct value or with the slider bar. It is very useful for animations making objects appear and disappear. If we apply an effect alpha on an instance over another object, the object that before was covered could be seen through the instance.

Alpha Effect of the 65 % on the orange fish

Advanced. Here we can apply all the previous effects simultaneously in a more precise way, with the advantage that from here we can add a little bit from each one, giving rise to effects of great brightness.

We've applied an Alpha effect of the 65 % and have reduced the green color value to the 45 %

at the same time as we've multiplied the value of blue by 111, obtaining the shown red tint that is observed

While we modify the effects on the instances we could follow the result on the own stage.

Here you can see the way of applying an Alpha transformation to an instance.

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.

THIS IS A STATIC GRAPHIC

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.

THIS IS AN ANIMATED GRAPHIC

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.

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 color. We've already created our object; we are going to convert it into a graphic symbol. Do you remember this? 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 , give it a filling color, by selecting the background of the oval and apply a blue color to it with the tool Fill

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.

Unit 10. Graphics (II)

Introducing Bitmaps
A Bitmap file format image can be created with many programs. If you want bitmaps to be in your movies it's more likely that you prefer to create them and to make them more spectacular in another program, more appropriate than Flash for the handling of Bitmaps: Photoshop, Fireworks or Photopaint.

Flash MX 2004 allows us to import bitmaps from other programs, when they have been saved in graphic formats GIF, JPG, tiff and others. It also allows us to modify them in certain way. We can change the size and convert it into a symbol to take advantage of the options provided by Flash. Although, considering what a bitmap is, we will not be able to modify it "internally" but we will be able to use it like one more symbol.

Here you have an example of how to do it.

Importing a vector file

There are other programs that work with vector graphics, like the bitmaps, Flash MX 2004 also does. If we want to import a vector file created in another program, for example Freehand, we can do it easily. We just access the menu. File Import Import a stage. Next, we select the type of file format corresponding to the vector graphic that we want to import. For example, FH11 of the Freehand MX (11). We press Open, and we already have our vector file. We will be able to modify this file internally because Flash can handle with graphics of this file format.

Concretely, the Freehand belongs also to Macromedia, like Flash, so that the compatibility in this case is total.

Exporting a Flash object as bitmap

The interface of Flash turns out very comfortable for draw. So it could be interesting to use Flash MX 2004 to create a drawing and later to use it in other programs or for any other use. This is perfectly possible with Flash, since it allows us to export a Flash objects like bitmaps file. However, we must take into account, as we saw in the basic units, that most of the bitmaps doesn't allow animations, because of this, a Flash object must not contain animation because it will not be saved. In order to make it, select the object that we are going to export and access the menu File Export Export Image... Then, introduce in the field Name the name that we want to our new bitmap. We select the type of bitmap into which we want to convert our object and press Save.

Now we can already use our Flash object like a bitmap.

To understand better how to do this we advise you to do the Exercise Exporting Bitmap.

Exporting a Flash object as animation

As we saw in the basic theme there are types of bitmap files that support animations, as the GIF. So, with Flash we can also create an animation and export it like an animated GIF. Nevertheless, as we saw, the animated GIF consists in a sequence of images shown successively and that's why to export a Flash 8 objects like animated GIF it's necessary that all the frames of this animation to be a key frame, because otherwise the GIF will not recognize it and we will not see the desired effect. If you want to know how to do this you should just follow the steps of this clip (Note: it will be used as base of the animated graphics that we created in the paragraph of creating graphics, since the graphics are made frame by frame): On the right we see the Animated GIF that is result of exporting our Flash graphics.

Unit 11. Movie Clips (I)

What is a Movie Clip?

A Movie Clip is a movie, like any of which we can have created until now in this tutorial, but this one is included within another movie and at the same time it can contain movies inserted in itself. Like the other types of Flash symbols, movie clips have their own timeline. Nevertheless, and unlike the Graphics (as we will see later), this timeline is not bound to the timeline of the document that contains it, so that its execution is independent. This type of symbols can contain any other type of symbol: graphic, clip or button, as well as any object created in Flash, because a clip is actually a movie. Another one of the Clip advantages we find when we make movies of great complexity and size, is that it can be made up of many frames, this will allow us to have better vision of how our animation is developed, and with a clearer and "cleaner" timeline. The Clips are one of the tools that give greater power to Flash MX 2004, allowing us to create more complex movies and increasing the visual effects, since multiple and independent movements, and connections between different document Clips can be created. All those things that we couldn't do with a Graphic type symbol, we can do it with a clip. Because of this, usually the clips are used for any type of animation due to its great flexibility, leaving the graphics only for static images.

Verifying the Clips properties

As we've done with the graphics, let's see how the clip timeline isn't bound to the timeline of the document that includes it and at the same time we'll see the difference between the clips and the Graphic symbols that supposes to be one of the reasons for the main use of the formers referring to the animation creations. For it we'll open a new Flash movie ( File New ). Later we'll import any image or create one. We convert it into Symbol (Insert New Symbol...) and we select inBehavior "Movie Clip" We drag it to the stage (if it's not already there) our movie clip. Now we have our Clip inserted in our new Flash document. In other words, we have two movies, each one with its timeline. Now let's see that they are independent, following a similar process to the one we use with the Graphic type symbols.

Observe the timeline of the main movie and verify that it has only one frame.

Let's publish the Clip that we inserted in the document (double click the plain) and examine its timeline. Only one movie clip will appear. We can make something similar to what we made with the graphics, if we are going to create a Movement Animation (that will be seen in Unit 13). It'll look like this

As we see, the duration of the clip that we have inserted is much greater than the new movie that contains it. If the fist were a graphic we already have seen that if we tried to play the movie nothing would happen. Let's see what happens if it is a Clip (this also is valid if the animation was created like the graphics). (Control + Enter). In this case we see the animation because at the moment at which the reproducer has crossed the frame that contained the clip, this one has begun to play and, since its timeline is independent, it has continued in reproducing although the main timeline has finished, and it'll continue in doing it until its own timeline finishes.

Unit 11. Movie Clips (II)

Creating a new Clip

As we've commented, we'll usually use Clips to make animations. What we havent said yet is that a Flash symbol can be created from nothing, saved in the library and publish when we want. *** It could be interesting in the clips, in distinction to graphics, because its purpose usually is the movement and the complicated animations, sometimes special actions have been assigned to them in which, either its not necessary its immediate creation or it's convenient to leave the clip empty. Thats why, it's interesting to learn how to create a symbol, in this case a MovieClip, of nothing to modify it later.

Look how to do it When we study the animations we'll see examples of them and we will see the real potential of this type of symbols.

Import and Export Movie Clips from Library

As for all the Clip symbols are stored in the document library when they are created. Its very important because clips are usually very reusable. In order to import movies clips first we must open the library where it is. We've seen in the Symbols unit, two types of libraries: those that are associated with documents or other movies; and the ones that have Flash. So, we can't only use symbols from the same document but also Import them from other documents from our hard disc, in the end it results to be very usefull. Its obvious that the exporting to the library is automatic, because Flash leaves created objects in the library in order to reuse them. To import a Clip from a file on the hard disk we must go to the menu File Import Open External Library, select Flash File (.fla) from which we want to import its library symbols and press Open. The Library will appear with its corresponding list of graphics, buttons and clips from the selected document. It's important to emphasize that when we insert a Clip from a library, all the symbols that it contains, including clips, will be imported as well.. Now we'll show an example in which we will see how to import clips in this way, apart from verifying the clips properties and its independent timelines by the simultaneous reproduction of two movies and creating a quite showy effect by using apparently only one frame.

See an animated example:

And the result of the previous process is the following:

In order to see how to export and to import a complete movie like one unique clip, and use this for the development in programs like Swish, review our advanced theme: Other uses of the Movie Clips

Unit 12. Buttons (I)

What's a Button?
The symbols of type Button contribute mostly in the interaction between Flash movies and the user. In Flash, a button is just as any button of any computer environment; Web or any other. They are elements that have to be pressed by the user for triggering a serie of actions. It's also usual to see how this type of elements responds when the mouse passes over them, or they are clicked, for example. Then, to obtain the mentioned interactive effects in other Web oriented languages we must create relatively large programs. This is a quite big disadvantage since the use of buttons is a very common practice in the Internet design. Nevertheless, in Flash it doesn't happen so. Its interface is designed in an special way for the buttons creation, which allows us to easily create all these effects. Similar to the other symbols of Flash MX 2004, the buttons have their own timeline. It is independent, but only four frames composes timeline, one for each possible state of the button.

Up. The aspect of the button by default, in other words, when the mouse pointer is not placed over it nor pressing it. Over. Aspect of the button when we place the pointer over it. Down. Appearance that we want our button to have while we are pressing it. Active area (Hit). Here we must indicate the entire area in which we want our button to respond. This is very important in the composition of buttons, as we will see further on. It seems that the limitation of frames could imply a limitation in the great hit capacity and utility of these symbols, but it isn't so. The buttons can contain in its turn other symbols, like clips or graphics (also of Bitmap type). The sum of the possibilities of all the symbols equips the buttons with great hit.

Creating a button
In the creation of a button we can consider two phases. First we are going to transform an object into a symbol of button type and then we will see how to complete it internally, which will help to us understand its structure better. First of all well create the object that will represent the aspect of our button by designing it with the tools that Flash MX offers us. We'll select the object and access to the menu Insert Convert to Symbol, we'll set the behavior Button and well assign a name to our new symbol.

In this way we've already transformed the object so that it behave like a button. Now well complete it internally. To determine how the button must response to the mouse actions, well edit it by right clicking our new button and selecting the option Edit. When we have the button timeline in front (notice that it has the aspect shown previously), well select each one of the frames (over, up, down and hit) and click F6 to create a keyframe in each one of them.

Now we can modify the initial aspect of the button for each position and set the area of the button action (Hit frame) in which we can just put down the same figure as the initial one (in this case only the object form is important, not the colors or other options) or draw with the Flash draw tools a new figure; our button "will be alluded" on this surface.

Here we can see a sample for creation of a oval shaped button.

As result we obtain the next button:

This one is a basic button, as well see it can become very complicated, but to start itll be useful. Once we've created the button, if we want to observe its different states without repeating everything, we can do it by accessing to the Library panel of our movie and dragging the button symbol. In order to see what we commented itll be enough to press the key located to the right of the preview of the symbol.

Shapes in the Buttons

The buttons are symbols that can have large number of shapes. Although we usually see buttons of rectangular, square and circular shape, which creation is immediate as we saw in the previous point, there are also many other types of buttons, which we normally see on multitude of Web pages, in spite of its seldom use. There are also several common shapes of button, such as the beveled button or the pill shape buttons. Since there exist many ways to obtain these effects, next you have an exercise step by step that shows a way to obtain a rectangular button with a bevel Exercise Beveled Button.

Unit 12. Buttons (II)

Text buttons. The importance of the active area

Since now, the buttons have a frame in which we indicate the active area. This seemed to be useless in the examples we saw up to now, since it's active area where we want to have our button is the area that includes the limits of this button.

Let's see that this isn't always so trivial. Here are two buttons created in Flash MX 2004. Let's verify what happens when the mouse moves over one an

Although they seem identical, the difference happens at the moment in which we locate the mouse on one of the spaces that exist between letter and l don't belong to the text itself.

In the left text the button is activated only when we place the mouse pointer over the letter. This can be uncomfortable and can bring to confusion, si pages simply would like to make use of the button and not have to aim concretely some letters that perhaps could be very narrow.

This is due to the poor use of the active area. In the right button this problem is solved as we can verify again. Here you have an example of how to do i

Including a clip in a button

The inclusion of movie clips in the buttons can make them more colorful. It is usual to place a clip in the Over frame to indicate some type of extra information or an animation to go beyond a change of color. It's also common to see a movieclip acting as a button. This can be done, for example, by inseting the clip in the Up frame. Let's see for example the following button:

Verify all the states of the mouse. From what the button tells us we can discern that something begins, but perhaps we dont know clearly what. If at certain moment we dont want this to happen on our Web pages, we can introduce a clip in the button, to explain a little more about what will happen if we click.

Here you can follow the process that we commented And that is the result.

Bitmaps and Buttons

In addition to clips, the buttons can also contain symbols of Graphic type. Since we've already seen, everything that is possible to do with a graphic can be done with a clip as well, let's focus in the Bitmaps that Flash allows us to import, since they are wide used as form of graphical expression all over the Network. If we consider the already known limitations on the bitmaps, then using of them in the creation of buttons can seem to be uninteresting, but it isn't the case. Basically we can make two things: 1) Including different bitmap in each one of button frames, obtaining an effect similar to the effect obtained with languages like Javascript (always in view of the larger ease of Flash). 2) Taking advantage of the Graphic properties in Flash. For this, first, we would have to import the Bitmap and convert it later into button symbol. Then we would publish it and, after inserting each keyframe, we would convert its content to Graphic symbol. Once we've done this, we will be able to obtain quite good effects by varying the effects of the instances in Flash (Alpha, Red, Brightness). Here is a small sample where we've only used a Bitmap of GIF type. We've converted it into a graphical button by applying an Alpha (Transparency) effect to the Up state. In the Over frame we have left the original GIF so that when passing over the button it seems to be switched on. Finally we have increased the intensity of red in the Pressing frame to make it seem to be incandescent.

Unit 12. Buttons (III)

Actions in the buttons

Since the existence of multitude of actions that can be applied to the buttons, as well as to other elements of Flash MX we are going to comment two of the most common ones: 1) Opening a Web page. With this well be able to open any Internet page (or a Flash movie), which will be used to browse through webs which contain more than one page, or to allow the user to download files among other things.

Here you have a sample of how to do it. And this is the result:

2) Controlling a movie *** under way. If we are reproducing a Flash movie and we want to allow the user to stop it, start it, play it, and play it back .... For example, to stop a movie we must make our button on the stage of the movie, select it, and open the actions panel, then activate the Stop() function.

After doing this, we would have to change, as we made in the previous animation, the moment at which the function must be executed, selecting the event on Press. We show above how the panel of the button actions would look like. Now whenever we press this button the movie will be stopped. In a similar way we would act doing so but with other control actions.

Adding sound to a button

If our pages are going to have sound, the sound in the buttons is a fundamental part. For example, we can make the sounds to become activated when pressing a button. For this, we must simply edit our button and select the frame Down. Now we must insert the sound. For example we could import one from our hard disk or take some that we already have in the library. The result could be something like this: