Total Pageviews

Friday, September 16, 2011

Pengertian tentang Flash

What is FLASH?
 
Flash 8 is a powerful tool created by Macromedia that has overcome the best expectations of its creators.
Macromedia Flash was originally created in an effort to realize colorful animations for the web as well as to create animated GIFs.
Designers, web professionals and amateurs have selected Flash 8 by many reasons. Further we will see why Flash 8 is interesting.
Why should I use FLASH 8?
 
The possibilities of Flash are extraordinary, each new version has outstripped the previous one, and the present Flash 8 is not an exception. Although its common usage is to create animations (during this tutorial we will see how easy it is) it has far more applications. They are so numerous that all web designers should learn how to use Flash.
Flash has been made up in order to fix the great lack in the Internet: that is, Dynamism. This dynamism does not imply only animations but rather interactive animations, which allow users to see the web as something attractive, not static (unlike most of the pages that are made by the use of the HTML language). With Flash we can easily and quickly create animations of all types.
It is easy to learn how to handle Flash, it has a friendly environment that invites us to sit down and spend hours making whatever our imagination suggests, but that is not sufficient to be preferred by professional designers. Then what is it?
From Flash MX 2004 to Flash 8
 
There are companies that improve their products just by the economic necessity. When it happens, users promptly notice this by the few improvements in the newer version. That is not the case of Flash 8, which continues considerably improving the new versions of its products following the Macromedia tradition.

If we thought that Flash 8 MX was already insuperable, do not miss the improvements that Flash 8 provides. These improvements consist in: easy handling, higher graphic potency and integration with programs of image edition, in having ability to import video, possibility to emulate your mobile devices video oriented, and for the begginers, the ActionScript wizard has come back. Let us analyze these advantages in more details:

Attractive Designs: Flash 8 allows the using of visual effects that will ease the creation of animations, presentations and forms more attractive and professional. Moreover, it supplies a new set of tools that will help you doing this easily and faster, such us filters and blend modes, added in this version.
Font Optimization: It also includes some readability options for small sized fonts, what makes our texts more comfortable to read. Also you can edit this optimization, allowing you to select the configuration preestablished for dynamic and static texts.
Consolidated Libraries: Now you can search any object existent in our movies faster, browsing our open libraries from a single panel.
More powerful animation: Flash 8 allows much more control of the interpolations setting a new edition mode form which you will edit the velocity the rotation, shape, color and movement are applied.
More powerful graphics: Avoid the unnecessary representation of vectorial objects setting an object as a bitmap. Although the object is converted to a bitmap, the vectorial data remains the same, so, in every moment, you can convert it again to a vectorial object.
Improvements in video importing: To ease the working with video formats, Flash 8 provides high-quality new independent codec, completely skinnable.
Metadata Compatibility: Include your SWF files in searching engines defining a title, description and/or keywords.
Mobile devices Emulator: Preview your Flash Lite compatible mobile devices movies oriented with the new emulator Flash 8 includes.
ActionScript Wizard: The ActionScript Wizard has come cack. Was deprecated in the last version, but now it has been retrieved and improved. Now ActionScript is at your reach.

The alternatives to Flash 8. Javascript
 
For a long time, the language HTML has shown important shortages in all the aspects. The HTML creates static web page, pages in which all the movement that we can find is due to the animated images (GIFS) or to videos inserted in them... This language, revolutionary then, quickly demonstrated its insufficiency in all the fields. Alternatives started to appear soon:
Javascript was created in an effort to create actions or short programs that could be inserted in the web to animate it. Javascript, is not a programming language in the strict sense, since only creates "actions" that will be executed later in the browser, we can never create a program in Javascript, but only complements to the web. This language presents various inconveniences; first, its execution can be dangerous for someone who accesses the web, so many people decide to deactivate "Javascript" from their browsers. If our web page contains many Javascript code, the browser simply does not see it. Secondly and as usual, there exist browsers (each time less, that is true) that do not support it and it will be useless to seek to execute a Javascript code if the browser does not recognize it. Moreover, Javascript does not fit to create web pages, only complements them, that is why its general use is usually focused on some small “helps” in the interactivity of the web, as for example to verifying in the formularies, effects in the state bar...)
We should also emphasize that Flash can work together with javascript and execute codes and Javascript functions without problems, because Javascript is converted in a help for all users of Flash 8.
Visit out Advanced Page to see some examples of Javascript usages and codes.
The alternatives to Flash 8. CSS
 
Although it is not widely noticed, HTML has a very limited power in the treatment of texts. In fact, the principal problem of HTML is the lack of precision rather than the incapability to show and distribute texts throughout screen (the possibilities that are usually more than sufficient for any ordinary user). So far, it is practically impossible to assure that the text is going to appear in the desirable form in the browser of another person, or for example, that HTML does not allow creating justified texts or just leave a margin to the left of the document... For this Cascading Style Sheets (CSS) were created.
CSS is very powerful, and has a number of advantages that have turned into a standard (although one will always not be able to visualize a content, which is used a style sheet). In addition, they allow to administrate texts and images for our web page in the desired way, "Style Sheets” is a magnificent form to simplify the code of the web page and to accelerate its creation, as its name indicates. Once the treatment to apply to one type of text (for example, to the titles) is created, then all the titles that we create and identify by it will have that treatment (color, font size, font type...). Thanks to the CSS we have gained control over our web pages, and perhaps in brightness and design, but these are not helpful for creating animations.
Why do not use the Style Sheets within Flash?
For it was not contemplated in previous versions of Flash. From the version 2004 (Flash MX 2004) the style sheets are perfectly compatible with Macromedia Flash, just because they can be associated with texts used in our movie by mere assigning the style sheet that we want to apply. Moreover, the CSS have ceased being an alternative to the use of Flash and have been integrated within it. That is one more reason to use Flash.
The alternatives to Flash 8.DHTML
 
We have seen how the main problems of HTML are solved, but it is still unknown how to eliminate this "static" feature of the HTML pages. The first solution comes from HTML itself. It is called DHTML (or Dynamic HTML) and as its name indicates that it was made to create contents in movement in the web pages. Its functionality brings up to moving objects through the web, and moreover, it is useed to create animated menus. For sure, that you had seen a lot without noticing. It usually appears as:

In fact the DHTML is nothing but, a combination of HTML and Javascript (so that, we will leave this to the end), although it is a good solution to create bright menus without extraordinary animations.
What is about its inconveniency? There are too many browsers that have problems with the DHTML and its download can be slow or delayed...
The Eternal Deal
 
First and foremost. What does Flash offer to us? Since Flash is the most powerful tool of the market to create multimedia content for the web, but it presents two important inconveniencies.
The first problem is the compatibility with FLASH. Along with some browsers that do not support javascript or cannot see contents of DHTML (or including CSS), in order to see, FLASH has to have an special PLUGIN of Macromedia. A PLUGIN is an special program that let's your browser identify the FLASH movies, download and visualize them correctly. This PLUGIN is free. You can download it HERE. Fortunately, each time more browsers have incorporated it and each time more people know what it is and are not afraid when it is offered to them. So far, each time more people have this PLUGIN.
The second problem is the size of the movies and their download time. Whereas an HTML page can size about 10 KB on the average, a FLASH animation sizes much more. Evidently it depends on the contents, but usually it easily exceeds the 100 KB, and in addition if it incorporates sounds it is obvious that the number drastically increases. So the time that it takes to make the Flash contents visible is still greater and not all the visitors are ready to wait ... they just go to another page.
On the other hand, the wide bandwidth connections each time become more numerous. That eliminates the problem of the downloading time. But the day when all the people are connected to the high-speed internet is still far away so the debate will continue being open for a long time.
Here you have some interesting pages made with FLASH

You can make really astonishing web pages with Flash.
To resume, nowadays it can be questionable: to insert or not Flash contents in a web page, although it depends on many things, for example, just like to insert DHTML. Still, keep in mind that Flash has much more features (the fact that has made other companies try to get "clones" of Flash). For example, the creation of interactive CDs (as those that are included in the informatics journals, for example), the creation of advertising banners or the creation of animated cartoon using Flash 8 (you will be surprised to learn the quantity of well known animated cartoons created or animated by Flash). Moreover, Flash has an industrial use, since it is useed for optimizing plans, creating designs of interiors and working with vectored images in general. Do not fail to learn handling the perspective program ... (at least with respect to web design)My first Flash Animation
Starting
 
One of the main characteristics of Flash 8 is its simplicity, the straightforwardness in its use allows to create animations in a effective and quick way.
Let's suppose you want to create an animation in which a globe goes up and down. It may seem a job for long hours, but it is not as bad. Let's see how easy is to handle it with Flash.
Making the Animation
In this chapter we do not try to teach you how you can realize a Flash animation (you will see it later), the objective is to understand how Flash creates animations and how it makes our work easier.
At first glance, it seems logical to draw the globe at each moment, so that growing number of moments makes the movement more real: the more drawn instants, the more realistic movement. Nevertheless, with Flash it is sufficient to create only 3 frames: firstly we will draw the globe at the initial instance (above all), secondly, we willl draw the globe at the moment when it touches the ground and then the globe will come back to its inicial position (actually you can create this frame by making a copy of the first one). So far as we see now, most part of the work (drawing objects) is already done.


Now, the duration of each movement is determined by setting the time between the moments when the globe is at the top and at the bottom, and finally Flash is pointed out to create an animation of movement between those two frames. It is easy, isn't it? The working environment (I)
Flash 8 Interface
 
Flash 8 counts with the most handy and intuitive environment or working interface. Moreover it has an advantage because it is similar to other Macromedia programs (Dreamweaver, Freehand, Director), it makes easier to assuming Flash, and faster its management and control. We will see this after opening Flash 8 for the first time:
During the course we will work with the trial version of Flash 8. You can download this free version from here.
In the image you can see the interface, we can see it just opening the Flash program. Flash will remember your preferences and will open the program just as you left it last time when you used it.
There is a lack of some menus in this image. We will see all of them during this tutorial even if some of them do not appear in the image above, that shows only the main parts of the Flash interface. Let's see them:
Menu Bar

The Menu Bar is aimed to make easier the access to different program features. It is similar to any other web or graphic designer program, although it has some particularities. Let's see the main Submenus you can access to:
File: It allows creating, opening and saving archives… Import has exceptional power; it inserts to the current movie nearly all types of archives (sounds, videos, images and even Flash movies) or the Publication Settings option from which you can modify the characteristics of the publications. It also enables to configure the printing pages, print them, etc…
Edit: It is a classic menu that allows you to Cut, Copy, Paste… objects or as well images or frames; it also allows you to customize some of the most common options of the program.
View: Apart from, typical Zooms, it allows you to move the frames and scenes. It also includes the possibility to create a grid and some guides. These ones can be selected from submenu Grid and Guides from where you can configure its options.
Insert: It permits you to insert objects into the movie, as well as new frames, layers, actions, scenes…
Modify: The option Transform permits one to modify the graphics existing in the movie, and the option Draw Bitmap allows to modify current graphics in vector maps (this theme will be studied further). Other options allows you to modify characteristics of the animation elements Smooth, Optimize or of the same movie (Layer, Scene…).
Text: Its contents affect the edition of text. It will be further handled in more details
Commands: Allows administrating the Commands (group of saved sentences that allows to emulate what user can introduce to the edition environment) that we had saved in our animation, to obtain other news from the Macromedia page or execute what we already have.
Control: From here you modify the properties of the movie reproduction Play, Rewind, Test Movie ....
Window: In addition to the classical options of distributing the windows, this menu includes shortcuts to ALL the Panels.
The Working Environment (II)
Timeline
 
The Timeline represents a simple mode of visualization. It consists of two parts:
1) The Frames that are limited by vertical lines (forming rectangles)
2) The Numbers of frames that allow us to know the assigned number of each frame, its duration and when it will appear in the movie.
Moreover, there are some tools on the bottom to work with Onion paper and its information about the Number of current frame (1 in the image), the frame Speed Time of the movie (0.0 in the image). (12.0 in the image) and the
On the definition level, the Timeline represents the succession of frames in the Time. The Flash movie will not be only the frames that appear on the Timeline one after another in the order established by the same Timeline
In order to know more about the Timeline and the different types of frames that exist visit our Advanced Page
The Layers
 
The concept of the Layer is basic to manage Flash efficiently. Because of its importance we will dedicate an entire unit to it. Even so, let's see a great characteristics of the layers.
A Layer could be defined as one independent movie of only one level. That is to say, one layer contains its own Timeline (with endless frames)
The objects that are at one Layer share a frame and due to this fact they can "get mixed up" among themselves. Frequently it could be interesting, but other times it is convenient to separate the objects in order that they do not interfere among them. For this, we will create as many layers as necessary. Furthermore the use of many layers gives place to a good-ordered movie and of easy use (for example, it is convenient to fix the sounds at one independent layer called "Sounds"). We will see the advantages and disadvantages of using layers in the Unit 8.
The Working Area

The Working Area consists of numerous parts, let's see them:
The most important part is the Stage, we will draw and fix different elements of our movie. The Stage has very important properties, due to the fact that they coincide with Document Properties, in order to access them, right-click on anywhere on the Stage with no objects and then on Document Properties:
Add metadata to your files so they can be indexed in the search engines. For this fill the Title and Description fields.
Dimensions: They fix the size of the movie. The smallest size is of 1 x 1 px (pixels) and the biggest one is of 2880 x 2880 px.
Match: It causes the coincidence of the movie with the selected size
Background Color: The color selected here will be the one of the entire movie.
Frame Rate: Or the number of frames per second that appear at the movie.
Ruler units: Unit used to measure the quantities.
Make Default: Allows to store the properties of the current document and to apply them to all the new created documents from this moment. These properties could be changed from this panel whenever you wish them to.
The Views or Zooms
The Zoom Tool is used to approach or move away the object view, allowing to include more or less zone of the Work Area. Every time we click in the Zoom Tool we duplicate the percentage indicated in the Zooms Panel.
Zooms Panel: It is a set of direct accesses to the View's submenus. They are very useful and help to accelerate the work when they are used correctly.
In order to know more about the Zooms visit our Basic Page
The Panels
 
The Panels are command sets grouped according their function (for example, all that makes references to the actions, will be in the "Actions" Panel). It's mission is to simplify and facilitate the commands use.
All of them will be studied deeply during the course. Even so, we'll name them and summarize the functions of most of them.
Align Panel: It places the objects like we indicate to it. It is very useful.
Color Mixer Panel: Using this panel we'll create the colors that we like more.
Color Swatches Panel: It allows us to select a color quickly and graphically. (Including our creations).
Info Panel: It shows the size and the coordinates of the selected objects, with the possibility of modification. It is very useful for exact alignments.
Scene Panel: It modifies the attributes of the scenes that we use.
If you still do not know what are the Scenes, we explain it to you in our basic theme
Transform Panel: It scales, shrinks, rotates... the selected objects
Actions Panel: It is very helpful when you use Action Script and associate actions to our movie.
Behaviors Panel: They allow one to assign to certain objects a series of characteristics (behaviors) that later could be stored to be applied to other objects fastly and efficiently.
Components Panel: It allows us to access to the already constructed and ready to be used Components that Flash provides. The components are "intelligent" objects with characteristic properties and many utilities (calendars, scrolls etc...)
Strings Panel: Flash 8 contributes multi-language base to our movie through this panel.
Help Panel: Macromedia gives us help and accessible advises from this panel.
Properties Panel: With no doubt it is the most used panel and the most important. It shows us the properties of the object selected at this moment: border, background color, line type, characters size, typography, objects properties (if there are interpolations...), coordinates, size etc... It is fundamental, you must never forget about it.
Movies Explorer Panel: It allows us to access to all the movie contents easily and quickly
  Drawing and Working with Color (I)
Drawing in Flash 8
 
Design passes through many phases when designing web page or an animation. After the phase of "What do I want to create and how is it going to look", normally, the phase of graphic design comes up. Realize what your imagination has produced on the paper (in this case on the paper of Flash).
It isn't desirable to mislead us, Flash isn't a program of graphic design, but its power in this field is almost as great as these programs. We are going to see how use every drawing tool effectively.
Tools Bar. Basic Tools.

The Tools Bar contains all necesary Tools for the drawing. Let's see which of them are the most important and how they are used:
Selection (arrow) Tool : It is the most used tool among all. Its main use is to select objects, it allows selecting the borders of the objects, the fillings (with only one click), the borders (with double click), zones on our choice... Moreover, its adequate use can save time of our work.
Line Tool: It allows creating straight lines in a quick way. The lines are created as in any program of drawing. Click and drag to show up a straight line until the desired end point. Once created, the line can be modified just by placing the cursor near the line: above of the extremes for dragging them, and in any other part near the straight line to curve it.
Text Tool: It creates a text in the place where we click. Its properties will be shown in the next theme.
Oval Tool: The Oval Tool enables drawing circles or ellipses in a fast and simple way.
To practice the handling this Tool, we recommend to do the Exercise of Creating Oval
To practice the handling this Tool, we recommend to do the Exercise of Filling Color Oval
Rectangle Tool: Its handling is identical to the Oval Tool, they only differ in the objects they create.
Pencil Tool: It allows drawing lines, after being drawn you will be able to edit its shape as you like. The color applied by this Tool can be modified from the Color Mixer Panel or from the subpanel Colors that is in the Tool Bar.
Brush Tool: Its functionality is equivalent to the pencil, but its stroke is much more thicker. It is usually useed for fills. We can modify its thickness and stroke shape.
Paint Bucket Tool: It lets you apply fillings to the created objects. Many other programs of drawing don't allow to apply fillings if a border doesn’t limit the zone, it does. The color applied by this Tool can be modified from the Colors Mixer Panel or from the subpanel Colors that are in the Tool Bar.
Eraser Tool: It works like the Brush Tool. Nevertheless its function is to erase everything what "it draws".
Tools Bar. Advanced Tools.
 
Lasso Tool: Its function is complementary to the Arrow Tool, since it can select any object in a free way (the Arrow Tool can only select objects or rectangular or square zones). In counterpart, the Lasso Tool can't select fillings nor objects (if we don’t make the selection by hand).
By selecting this Tool, the following images appear on the Options Panel : This is the Magic Wand Tool, which is so popular in other programs. It lets you make selections according to the objects color. The third option you have is the following: It allows you to select polygon shapes.
Pen Tool: creates polygons (and moreover straight lines, rectangles...) in a simple way. Many people find this tool to be complicated, although it's one of the most powerful tools that Flash provides. Its use consists in clicking on the places that we want to define as vertices of the polygons. In order to create curves, indicate the anchor points, which limit curvature, and then drag the tangent on them.
Drawing and Working with Color (II)
Tools Bar. Options

Some Tools have special options that eases and strengthens their use. In order to access these utilities, sometimes it is not enough to click on the corresponding Tool. The way to access to this Submenus consists in clicking on the line or on the drawn object.
Then a submenu will appear (or it will highlight if it is already present) as:
Adjusting Objects : It is used to make objects to "fit" with others, i.e. if it is possible, to intersect its borders, then objects seem to be "grouped".
Smoothening: It softens the straight segments in less rigid lines.
Straightening: It does the inverse work. It converts the rounded segments in more straight ones.
Color Mixer Panel:
The Color Mixer Panel as its name indicates is used to create our own colors and to select colors that we like.
In order to select a color, just click on the tabs that are close to the icons of the Pen Tools or Paint Bucket. (If we want to modify the color of a border, we press on the tab that is closer to the icon of the Pencil Tool and if we want to modify a filling, we click on the tab that is closer to the Paint Bucket Tool). By doing this, a Panel with many colors will appear. Select one of them. It also allows to introduce the code of the color according to the standard established by HTML.
The filling type that we'll apply to the created objects also can be determined.
We can create differentes types of Fills
Solid Fill: It consists in a filling formed by a single color.
Linear Gradient: It is a special filling type, a color does a gradient until it converts into another one. It can shade from top to bottom or from one side to the other.
Radial Gradient: It is identical to the previous one, but the gradient shade performs a circular pattern.
Bitmap: It lets you put an image existing in the movie as filling (you can even import it in that precise moment).
To learn how to create a transparent (or semi-transparent) color, do the Exercise Create Transparent Color
Color Swatches Panel
 
The Color Swatches Panel allows to see the arranged colors in a quick and easy way, solid colors (only one color) as well as linear gradients or radial gradients. Moreover, when we create a color with the Color Mixer Panel, we can add it to our set of swatches by Adding Swatch (that is in a menu, which is open in the right top of the Color Mixer Panel). Once the color is added, it will be in our set of swatches, and we can quickly access to it each time while working in our movie.
Starting
Flash provides everything that we might need to create an animation, and, hence, also all that is related to the texts. However, Flash was conceived to create graphic animations, in such a way that it will treat any text as if it were one more object, prepared to be animated if that's what you want it for. That allows us to animate texts afterwards and to easily create spectacular animations. Flash distinguishes among 3 types of text: static text or normal; dynamic text; and input text (in order the user to introduce the date, for example), it can also create text that supports HTML format, etc...
Text Properties

In order to write we have to click on the Text Tool and then on the point of the stage in which we want to start writing.
To learn more about How to write texts visit our Advanced Page
The Properties Panel contains the main properties of all the objects that we'll use during our movie. So if we select a text, we can see whatever we need to know about our text. If we have experience using Flash 5, we'll notice that all the properties met before in the Character Panels and Paragraph, are now grouped in the Properties Panel.

Properties Panel

Let's see inside out the Properties Panel:
Font: From here, as well as in the more common text editors, we can select the preferable type of letter or "font".
Height: It determines the space between the characters. It is used when the useed typography shows the letters together or to add specific effects to the text.
Text Orientation : It changes the orientation of the text from horizontal to vertical, as well as from right to left.
Automatic adjustment between characters: The activation of this square causes that the separation between characters is done automatically.
Position: It allows us to convert our text in subindices or in superindices (or leave it normal).
URL: If you want the text linked to a web page, enter the address here.
Destination: It determines where the URL will be loaded: in the same window of the browser, in a new one...
Line Type: If the text is dynamic (otherwise it appears deactivated), this option allows us to determine the type of lines (single line, multiple line or multiple line without adjusting).
Configuration: There are the classical options that allow to convert the text in Bold (B), Cursive (I), or to change the text color and size.
Other Properties: Given the fact that Flash handles the texts as objects, these also have width, height and coordinates. We can modify them.
A Paragraph is nothing more that a set of characters with common properties for all of them. These paragraphs admit certain options that allow us to work with text blocks. The Properties Panel provides us the following options to work with paragraphs (between others).
Align Left: All the lines will begin as far as possible to the left (within the defined text frame).
Center: The lines are distributed to the right and to the left from the middle Paragraph point.
Align right: All the lines will begin as far as possible to the right (within the box of defined text).
Justify: The text is widen if it is necessary in such a way that there cannot be spaces in any of its limits.
The rest of options allows us to determine the margins (left and right ones), the indentations of paragraph and the interlineal space.

Subselection Tool: This Tool complements the Pen Tool, as far as it lets us move or adjust the vertices that make up the objects created by the above mentioned tool.
Ink Bottle Tool: It is used to change quickly the color of a stroke. It is applied to objects with borders, changes the color of the boundary with one click in the Colors Mixer Panel.
Eyedroppers Tool: Its mission is to "Capture" colors to use them afterwards. To see how it works, we advice you to see the following animation:

Types of Texts
 
How we've already commented, Flash distinguishes between different types of texts and handles them specifically according to the type.
All the types of texts correspond to the properties commented in the previous items, and they differ just in the Text Type. We can modify the text type from the Properties Panel by nothing more than clicking on the tab "Text Type":
Static Text

The Static Text is characterized by not presenting any change during the animation. It is important that we do not confuse the word "static" with text not moving.
What we would like to say is that the contents of the text frame does not change. The text can be animated (rotated, changed of color...) and still be static. In this way, a text frame in which "Learn Flash 8 " is written during all the movie is static, although you can apply to it the above mentioned text changes: position, shape, color... However, if we go on and write "With this Tutorial” in the same text box, this text box is NOT static. At this point, we strongly recommend doing the course exercises.
The static texts have only 2 extra properties:
Use Device Fonts: This option let the movie Flash to use the Fonts installed by the user who watches the movie on his computer. If this user has the fonts that we used in the movie, one will see it exactly as we want to show, but if someone does not have them, Flash will use the most similar ones. This often causes that the final result (that the user sees) does not fit in the desired output, because of that it is usually convenient to maintain this option without selecting, though this entails a greater size of the final movie.
Selectable: With this option activated the user can select the texts that are in the movie (copy them...) Activate this option, if you find it is convenient.
Dynamic Text
 
The Dynamic Text, in contrast to the static one, can change its contents (besides of being animated as the later). Its use is rather more complex than the Static, since every frame of Dynamic text can be a variable, which is modified by ActionScript. Programming can modify the values and properties of this type of texts. A common use is to represent texts introduced by Input Text (see following item).
They have many properties, accessible from the Properties Panel, it is possible to set the number of lines that they going to take, to introduce HTML text, to add easily a border to the text or the one to give name to the variable that represents the Dynamic text.

Input Text
 
The Input Text basically has the same properties as the Dynamic Text, and some others of the kind of a data type introduction text oriented to the user, as for example the maximal number of lines that can be introduced the field or if we want that what is written appears as asterisks (for the passwords).
Obviously this type of text will be reflected in our movie as a text frame WITHOUT contents, since the user has to introduce it.
How we've mentioned before, this type of text can be combined with the Dynamic Text.
In this (advanced) animation you can see how:
And that is the final result:
To learn how to change the text type, we advice you to do Exercise Changing text type 
Importing Sounds
If you had once intended to add a sound to your animation probably Flash would have disappointed you a lot by not achieving it. This is due to the fact that it is not taken into account that to be able to use an object in our movie: either we create it ourselves (how we have done until now) or we get it in any other way, and then we insert it in our movie.
This last is called "Import" and it can be done with sound, graphics, and even with other Flash movies. Hence, to import, you just notify Flash to add a determined file to our movie for use it whenever you want. In fact, the file is added to our Library, that is the Panel in which are all the objects that contribute in the movie (we'll see this Panel further).
So then if we want to handle a sound in our movie, we have to import it beforehand.
Once it is imported, we'll be able to use it with total freedom.

To import a sound click on the menu File → Import → Import to Library.

The Import to Library dialog will open. There you will hace to select in Type All the sound formats.
Browse your folders until you find the sound file you want to add. Then select it and press Ok.
The sound will be ready to use, you could find it in the Library (menu Window → Library).

Sounds Properties

In Flash 8, as well as in Flash MX 2004, we can publish all referring to the sounds from the Properties Panel. Here we have all that is necessary to insert, modify and edit the sound that we terminate to import. If we have not imported any sound, we will notice that we cannot select anything in this panel, it's enough to insert it in order that it changes.
In order to work with sounds, we have to click in a frame of our movie. After doing this, the Properties Panel takes the following appearance:
Let's see the parts that this panel has.
Sound: In this tab the imported songs will be displayed. We have to select the song that we want to add to our movie (in the next item we will see how to insert it).
Effect: From here we will be able to add some effect to our sound, as for example that the sound passes from the left canal to the right one (this creates the sensation that the sound encircles you since you hear it from one place and then from the other, although it's very far of the true surrounding sounds), that the volume increases progressively etc... If we want to add complex sound effects, we might have to adequately handle the sound with some program created specifically for this aim before importing.
In the item "Editing Sounds" these effects will be treated in more details.
Sync: This option allows us to determine in what moment our sound will start acting; these are the options that we have:
  • Event: It synchronizes our sound with a determined event. This is the option by default and causes that the sound begins to reproduce when the frame, in which the sound is situated, passes through the movie. The sound can also be synchronized with buttons and other types of symbols.
  • Start: Its operation is equivalent to the "Event", they differ in that if Start is selected and the same or different sound is reproduced once more, it makes this "over" of the current sound. It can be a very attractive effect or can add some "noise" into our movie.
  • Stop: It stops the selected sound.
  • Stream: This option synchronizes the sound with stream or the objects associated with it, therefore, if the loading of the movie is slow and the images do not flow adequately, the sound will be stopped to synchronize with them. This effect can create the sensation that the movie is abruptly interrupted (it might be considered as normal that an image is slow in loading, but the stopping sound, meanwhile reproducing, causes a very negative reaction in whose are seeing our movie).
    On the other hand, it is a very appropriate effect for some situations, for example, the effect of that a personage speaks during a movie. In this situation, it's strongly recommended to synchronize the sound with the images.
Repeat: It specifies the number of times the sound is played. To play it indefinitely, calculate the possible time of the movie duration and the time of the sound, and then repeat it as many times as necessary (that is better than to set 99999 times).
For example: If your movie lasts 2 minutes (120 seconds) and your sound lasts 16 seconds, so far 120 / 16 = 7,5 times. You will have to write 8 times, since it is no sense to reproduce a sound 7 times and half.
We do not recommend insert sounds with the option Stream and at the same time Repeating, since on synchronizing the sounds with the images, we would cause that the images (and the frames which them contain) will be also duplicated, considerably increasing the size of the movie.
 
Now we already know how to import sound, what options we can modify and what for is used each of them. Let's see the most important one: how to insert them in our movie.
Let's suppose that we want to insert a sound in an specified frame, in such a way that when the Flash movie comes to this frame the sound starts. To play a sound when arriving to a frame, we have to select the frame in which we want the sound to start. We'll open the Properties Panel and import the sound that we want in a way described in the previous item. Another way which is further quick, would consist in selecting this sound in the Library and drag it to the frame in which we want the sound to start (to the Stage, not to the Timeline).

Flash represents the sounds inserted in Frames
In this way we insert a sound.
By default Flash realizes that you want to play the sound totally (if not why to insert the entire sound). So Flash will play the sound all the times as you indicate in Repeat and the sound will sound through the frame, which comprises it, is not executed in this moment.
We can add sounds in two different ways, both combining the 2 options that are offered by the Sound Panel.
The first of them is to select it in the Library and drag it directly over the Stage. The sound will be added to the frame we are at.
The other option will be to select the sound (already imported to the Library) from the Properties Panel of the selected frame.
In the Sound option we will select the audio file we want to add to the frame. Then we will edit the Sinc. option as follows:
  • If we select Stream, the sound will be played until reach the first frame that doesn't contain it.
  • We can select Stop in a frame so the sound will stop when reaching it.

In this animation, you'll see how:
Editing Sounds
 
Flash was not created as a sounds publisher; hence, its power in this field is limited. Still, the easy applicable typical effects are sufficient for any animation that we want to make. We have these effects:
Left Channel : The sound will be heard only just from the left loudspeaker.
Right Channel : The sound will be heard only just from the right loudspeaker.
Fading from left to right : The sound is reproduced initially in the left loudspeaker to pass afterward to the right.
Fading from right to left : The sound is reproduced initially in the right loudspeaker to pass afterward to the left.
Fade In: The volume of our sound increases progressively.
Fade Out: The volume of our sound decreases progressively.
Custom This option allows us "to edit" the sound in a quick and easy way. From this editor we can decide what volume will have our sound and in what loudspeaker. We can create more complex effects by our means.
This is the appearance of the Personalize Sound Panel. The top represents the left channel and the bottom, the right channel. There is a Timeline between the two parts that indicates the time of sound passed at each point.
The gray lines represent the volume of the sound and by clicking on them we can configure this volume.
In the example, the left channel is played normally (since the volume is maximum), but the right channel starts in silence, to reach bit by bit the normal volume (this effect will be equivalent to a Progressive Increase in the right channel). 
Aligning Objects. Align Panel
Now that we know how to select the objects or their parts, let's see how to align them to the Stage.
In order to align them precisely, Flash provides us with the Align Panel. We can find this Panel in the Menu Window → Align. It works this way:

The Align Panel allows us to align the objects just as we indicate. Before considering the possibilities, we must emphasize the option To Stage. This option allows us to indicate all the positions that must have each object at the stage
If this option is not selected, the objects will take the reference form the group of objects they are at, and they will align themselves taking into account those ones. The most usual selection is To Stage, to align the objects in the center of frame depending on the movies limits...
Let's learn in details the Align Panel and its possibilities
Align: It aligns the objects in a determined frame position (if Stage is selected). The different options affect all the selected elements and they are frequently used to align selected objects to the certain places. For example, if we want to align an object to the left bottom corner, it is enough to press the 1 and the 6 button one after another.
Distribute: It aligns the objects on the stage taking into account the imaginary axis that passes through their centers, so that the distribution become uniform. For example, if we have 2 squares and we press the first left button. Each one of the 2 squares will be situated on one of the movie edges (one on the top and another on the bottom).
Match Size: It makes the object's sizes match. If the "To Stage" is active it will stretch the objects up to make them match the movies width and length. If it is not active, the rest of objects will be the reference. For example, if we have 2 different squares and the option "To Stage" is not active, when you click the first "Match Size" button, the most narrow square will have the width of the biggest square. If "To Stage" were active, both squares would have the frame width.
Space: It spaces the objects uniformly.
To see the examples of these commands use, you can see the animation placed on the top at the beginning of the chapter.
Info Panel
Apart from controlling the object position from the Align Panel, we can also do this, more precisely (more mathematically) from another panel, the Info Panel.
You can access to this Panel from the Menu Window → Info. The possibilities of this Panel are limited, but if we are searching for precision or we don't trust Flash distribution, we might use it.
Object Sizes: Here we will introduce a number that represents the size of our object in the dimensions selected in the Document Properties dialog box. W: is the width H: is the height.
Object location: From here we control the location of the object on the stage. The XY represent the axis of coordinates (The X is the horizontal axis and the Y the vertical axis). The measures are also adapted to the movie size. and the
Current Color: Indicates the current color depending on the quantity of Red (R), Green (G), Blue (B) and Alpha effect (A) that it has.
Its sign could be deceitful, because it indicates the color of the object when we touch it with the mouse. So far, we can have selected object (by clicking it) and see in the Information Panel its size and position, but when the mouse is moved the value of color will change and will not indicate the color of selected object, but the color of the object that the arrow is touching now. In order to save time don't forget about this.
Cursor Position: It indicates the Cursor's position. It's usefull if we want something to occur in the movie after crossing with the determinated cursor position or to align object parts in specified places.
Groups
A Group is nothing more than a set of objects. However, not each set of objects forms a group, because to create a group, we must to indicate it to Flash. For that, select the enclosed objects that we want to be member of a group and then click the Menu. Modify → Group.
After doing this we'll observe that the texture disappear indicating selected objects and that the group happens to be a "whole", since it is impossible to choose one of its members without selecting others as well. In addition, by default, the blue rectangle occurs that encloses the group, outlining it.
Creation of groups is very useful, since it allows us to treat the set of objects like a single object and, therefore, we can apply effects for the set as whole without working with each object.
For example, we suppose that we have a drawing that represents a set of cars. After drawing them all, we realize that we want to increase the size of the cars. We increase one by one the size of the cars, running the risk of increasing some of them more than others and losing the proportions among them, or we can form a group of the cars and increase the size of the group, so that they simultaneously increase all their size and in the same proportion. Equally, we can move the group position, rotate it...
When creating a group, we provide a set of objects with common properties, and we don't lose our object. At any time we can undo the group by the Menu Modify → Ungroup.
In addition, Flash allows us to modify the elements of a group without having to ungroup it. For this we select the Group of elements and click the Menu Edit → Edit Selected. We’ll be able to edit the objects that compose the group affecting only a certain element. 
The Layers. Let's understand them

Everybody has seen sometimes how the sketchers of cartoons work. And all we've seen how they place a semitransparent leaf with drawings on others and the superposition of all composes the final drawing. Why do they not draw everything on a same leaf? Why do they work with several levels and several drawings if they are going to finish all together?
The reasons are many, and these levels that use the sketchers, are equivalent to the Layers, which Flash uses. Each layer is, therefore, a level in which we can draw, to insert sounds, texts... with INDEPENDENCE from the rest of layers. It is necessary to take into account that all the layers share the same Timeline and therefore, its different frames will be reproduced simultaneously.
Let's clarify this with an example:

Let's suppose that we have 2 layers. In one layer, the frames from the 1 to the 10 contain the drawing of soccer goal. In the other layer, the frames from the 1 to the 5 contain the drawing of a goalkeeper (they are empty from 5 and further).
Then, this movie will initially display (during the time that lasts the first 5 frames) the goal with the goalkeeper, to show afterward (during the frames from the 5 to the 10) the goal without goalkeeper.
In such a way the goal is independent from the goalkeeper, and we can handle these objects freely, since they do not interfere among themselves.
Another reason to separate the objects in layers is that Flash makes us place each different animation in a layer. Otherwise, all the objects that are in this layer will compose the animation. If we want that an object doesn't form part of an animation, we'll have to delete it from the layer in which this animation is produced.
To proceed further with the example of the goalkeeper, it’s easy if we want to create a motion of the goalkeeper towards a side, but if the goal were in the same layer that the goalkeeper, then BOTH objects would move towards this side, with which it would be impossible to have only the goalkeeper moved. The solution is to separate the objects in 2 layers, since we've already done.
In addition, the layers have other utilities, they allow us to order our movie rationally, and they help us in the editing drawings (avoiding that they "are based" on only one, or blocking the rest of layers so that we can only select the layer that is of interest).
Working with Layers
The standard View of a layer is the one that shows the image. Let's see for what the different buttons are used and how to use them.
Insert Layers : As its name indicates, it is used for Inserting layers in the present scene. It inserts normal layers (in the following point the different types from layers will be seen).
Add Guide Layer : Insert a kind of guide layer. It is discussed in detail the following point.
Erase Layer : Erase the selected layer.
Change Name: To change Name: of a layer, it is enough to double click the current name.
Layer Properties: If we double click the icon , we'll be able to access a panel with the properties of the layer we've clicked. We'll be able to modify all the options that we've previously commented and some more of lesser importance.
Here you can change different options about the layer, like its name or color. You can also lock or hide it.
We will see further more the Type option. (See Guide and Mask options in previous themes).
Working with Layers. Advanced Options.
Show /Hide Layers : This button allows us to show and hide all layers of the movie. It is very helpful when we have many layers and we want only to see one of them. In order to activate the view of a concrete layer (or to hide it) it is enough to click the corresponding layer in the point (or in the cross) that is under the icon "Show/Hide layers"
Block Layers : It blocks the edition of all the layers, so we'll not be able to edit them until unblocking them. In order to block or to unblock a concrete layer, we'll proceed like in the previous point, clicking on the point or icon "Lock" located in the current layer under the icon "Block Layers".
To block a layer is very useful when we have several objects together in different layers and want to make sure that we don't modify "without wanting" some of them. After blocking a layer we'll be able to work with the security of not modifying its objects, not even to select them, so we'll edit the desired object with greater easiness.
Show/Hide layers as outlines : This button show / hide the contents of all the layers as if they were composed only by borders. Facing numerous set of objects in this way, we'll be able to distinguish all of them easily and to see in what layer each of them is.
Every layer can be also activated or deactivated by using the above mentioned button in a similar manner.
Let's see how these activated and deactivated options are shown.
In the first image the current layer doesn't have any of the buttons activated, we can observe that a black point appears in the column "Show Layers”. This point means that this option isn't activated, the same happens to the button "Block layers". There are a FILLED square in the column "Show layers as outlines", which symbolizes that the objects will be completed and not only its outlines.
There appears a cross located under the column "Show Layers" in the second image, which indicates that this layer isn't visible on the stage. It appears a lock under the column "block layers", which symbolizes that the layer is blocked. And the fill does NOT appear in the column "Show layers as outlines". The layer is shown in this way and we'll not be able to see the fillings until we deactivate this option.
In addition, the color of the outlines will be different for each layer, so that we can distinguish them better. The color of the outline will coincide with the color indicated in each layer. In this example you can see the object depending on the outline option activated or not:
Reorganizing the Layers
We've dedicated a whole unit to how to place objects, we already known how to get an object over another one in a movie, how to group them and many other things. But we'll have realized that if we work with different layers, all this isn't very helpful...
As it has been already commented, the different layers have many features in common with others. The first and main feature is the Timeline, all the layers of a same scene share the same timeline and therefore, the objects of all frames from all the layers will be seen at the same time in the movie as superposed ones upon others.
But what object is over the others? The criteria is given by the Layers position in the movie. The objects that will appear ahead of all the others will be those that are on the top layer.
Pay attention to the previous example:
The goalkeeper appears in front of the goal, because the layer "Goalkeeper" is located upon the layer "Goal", so it can be seen in the image. If we want to change this distribution, it is enough to click the layer that we want to move and drag it upwards or downwards or to the desired position.
We'll see how the objects are placed ahead or behind those of the selected layer according to whether its layer is above or below this one.
In order to move an object from a layer to another one, we'll have to follow simple steps.
Learn to do it by doing the Exercise: Change Objects of Layer
In order to move a frame from a layer to another one, it is enough to select the frame to move and drag it up to the layer where we want to stick it. The frame can also be Copied and then pasted in the destiny layer.

1 comment:

Powered By Blogger