Creation of Flash animations. Introduction to Macromedia Flash. Creation of Flash - animations Macromedia flash creation
I. S. Sakovich,
Head of the highest qualification category of the Informatics and Computer Science circle at the Gomel City Station for Young Technicians, Belarus
CREATING TESTS IN MACROMEDIA FLASH ENVIRONMENT
It is well known that the regularity and level of students’ preparation for each lesson are directly dependent on the availability and depth of control activities carried out. Of all the diagnostic methods existing today, testing is considered the most promising and effective.
Testing as a form of control and objective assessment of students' knowledge and skills is increasingly attracting the attention of practicing teachers. However, many teachers are not satisfied with “ready-made” tests: their design, content, level of complexity, and inconsistency with the program material. The Macromedia Flash program provides unique opportunities for creating “author’s” tests - colorful, animated, interactive, designed for different age groups of students.
The development of tests can be carried out not only by teachers, but also by students during elective and club classes. Students themselves come up with questions on a topic that interests them and compose short, unambiguous answers to them. This type of activity enables students to better understand the general and distinctive qualities of the objects being studied, to more easily classify various phenomena, and to more fully assimilate educational material. Test production is a painstaking and time-consuming process, but it is also incredibly creative and fun.
The process of creating tests for computer testing is no different from the traditional one: questions are entered into the appropriate form along with answer options. The test taker makes a choice, and the program compares the entered data with the correct answers and analyzes the results.
Standard rules for preparing materials for test control:
the main text of the assignment contains no more than 8-10 words;
each test should express one idea, one thought;
assignments should be short, clear, and easy to read;
incorrect answers must be constructed on the basis of typical errors and be plausible;
correct answers should be placed in random order among all proposed answers;
the formulation of tasks should not contain ambiguity and “traps”;
tests should be arranged in order of increasing difficulty;
The answers to one question should not depend on the answers to other questions.
The test should include tasks that are varied in form, content, and degree of difficulty, and should sufficiently fully cover the material of the topic being tested. It is considered good form to have instructions explaining the features and testing algorithm. The instructions must be clear and easy to follow.
The most suitable methods for constructing test tasks are:
a) choice of option (alternative);
b) pair selection;
c) input field;
d) eliminating unnecessary things.
Testing becomes much more interesting when the questions are not presented in a standard form, for example: voice response (suitable for learning foreign languages), Drag -and -drop (the ability to build or move objects on the screen), an area in the picture (to select the correct answer, you must mark area in the presented figure) and others.
We offer you various test options, developed in the Macromedia Flash environment, in the computer club classes. Age of test authors: 12 – 16 years.
Test type "Rule"
In each frame of the fla document we place the text of the task “Correct errors in words”, a text field of the Static type with the text of the question, a text field of the Input type with the name answer to enter an answer, a button to move to the next question.
Each frame with questions must be given a name (for example, vopros1, vopros2,...) and a script placed on itstop();
There are two possible scenarios if you answer the question incorrectly:
Waiting for the correct answer, i.e. the transition to the next question is carried out only if the task is completed correctly;
Move to the next question and count the correct answers.
In the first case, the following code is written to the button:
on (release) (
if (otvet==”chicken”)
( gotoAndPlay(”vopros2”))
else
{text =”you didn’t fix the error”;)
}
In the second case, write the following code to the button:
on (release) (
gotoAndPlay (” questions 2”); // go to new frame
if (answer ==”chick”)// check the response
{n =n +1);
}
Where n – variable for counting correct answers.
Note. The following script should be written to the first frame:n =0;
At the end of testing for the second version of the scenario, it is necessary to display the information: “Number of correct answers: …”. To do this, the value of the variable n is placed in a text field of type Dynamic.
Multiple Choice Test
A question and 3-4 possible answers to it are offered. Each option has a button that, when clicked, moves to the next question.
For each frame with questions you need to place a scriptstop();
The following code is written to one button with the correct answer:
on (release) (
gotoAndPlay(“questions2”);
n =n +1;
//n – number of correct answers
}
The remaining buttons contain the following code:
on (release) (
gotoAndPlay("questions 2");
}
In the last frame of the flash movie, you should place the static text “Number of correct answers:” and display the value of the variable n in a text field of the Dynamic type.
Sometimes, to select an answer option, it is more convenient to use not button objects, but to convert the text entries of the answers themselves into buttons.
Note. The conditional statement is not used in this type of test.
Test with entering the number of the correct answer
A question and 3-4 numbered answer options are presented. A field of type Input is created with the name answer to enter the number of the correct answer.
To go to the next question, use a button on which the following code is placed:
on (release) (
if (answer ==”...")
(n=n+1);
gotoAndPlay("questions 2");
}
The test result in the form of the number of correct answers is displayed in the last frame of the flash video. You can remember the numbers of questions with the correct answer options and additionally display information: “Correct answers were received for questions with the following numbers: ....”
Match test
Example. The numbers written on tubes of paints of different colors must be matched with the word in English indicating that color.
To check the result on the button, write the following code:
on (release) (
if (kk 1=="3" && kk 2=="5"&& kk 3=="2"
&& kk 4=="4" && kk5=="1" && kk6=="6")
{otvet = "Correct")
else (answer = "Not correct";)
}
Crossword
The crossword puzzle grid is drawn. Each crossword cell contains a text field of type Input , which is given a name. To check the solution to the crossword puzzle, write the following code:
on (release)
{
if (s 1=="m " && s 2=="i " && s 3=="l "
&& s4=="k" && s5=="b" && s6=="
&& s7=="e" && s8=="a" && s9=="d"
&& s10=="c" && s11=="a" && s12=="r" && s13=="r" && s14=="o" && s15=="t"
&& s16=="t" && s17=="e" && s18=="a")
(answer = "Very true")
else
{otvet ="Not all words have been guessed" )
}
Note. Set all text fields to center alignment.
Test with moving objects (Drag -and -Drop method)
As an example, we use an English test on the topic “Pronunciation of sounds”: the words located on the field must be moved to the desired place in the carousel in accordance with their sound pronunciation.
We create text fields, convert them into buttons, and write the code to move each button:
on (press) (
startDrag("ka1",false);
}
on (release) (
stopDrag();
}
Where ka1– button name.
To carry out the check, you need to write the following conditional statement, taking into account the coordinates of the rectangular areas:
on (release) (
if (ka 6._x >-60 && ka 6._x<30 && ka 5._x >-60 && ka 5._x<30 && ka 4._x >-60 && ka 4._x<30 && ka 7._x >-160 && ka 7._x<-110 && ka 8._x >-160 && ka 8._x<-110 && ka 9._x >-160 && ka 9._x<-110 && ka 1._x >100 && ka 1._x<140 && ka 2._x >90 && ka 2._x<150 && ka 3._x >90 && ka 3._x<150 && ka 1._y <100 && ka 2._y <100 && ka 3._y <100 && ka 4._y <100 && ka 5._y <100 && ka 6._y <100 && ka 7._y <100 && ka 8._y <100 && ka 9._y <100 && ka 1._y >-10 && ka 2._y >-10 && ka 3._y >-10 && ka 4._y >-10 && ka 5._y >-10 && ka 6._y >-10 && ka 7._y >-10 && ka 8._y >-10 && ka 9._y >-10)
{otvet = "Correct")
Else
{otvet = "Not correct, try again";)
}
Test "Labyrinth"
A labyrinth is drawn through which you need to navigate an object, for example, a ball. At each passage of the maze, another test question appears.
The movement of the ball is set automatically usingMotiontweening. Key frames are created in the right places in the labyrinth, on which the script is placedstop(). An object
stops and further moves through the maze only when the correct answer is entered into the cell.
on (release) (
if (The following script is written to the check button: ==11) // check the response
{ gotoAndPlay (11);} ot
// ball movement
{ gotoAndPlay (4);} else
}
Note.// roll back the ball to the beginning
For more details, see the journal “IiO” No. 10-2008.
Balloons are drawn, the number of which is equal to the number of questions in the task. If the answers are incorrect, the balls “pop” (disappear). As a result, how many balls were left, there were so many correct answers.
An example is the text of a poem with missing letters. In place of the gaps, text fields for input are created (it is better not to leave them empty, but to place the “.” symbol in them).
For clarity, change the font color in the input fields.
on (release) (
The verification button corresponds to the following code:
if(x1!=" and") (q1._alpha=0;)
if(x2!="o") (q2._alpha=0;)
if(x3!=" yu") (q3._alpha=0;)
if(x4!="o") (q4._alpha=0;)
}
Where if(x5!="dandelions") (q5._alpha=0;)
q 1, …, q 5 – names of ball clips;
Note. x 1, …, x 5 – names of text input fields. Property alphacharacterizes the transparency of an object. Alternatively, you can use the visibility property, for example, 1._ q = visible ;
false
An option for children with artistic abilities: making the “balloon” clip invisible, turn on the visibility property for the pre-drawn clip with an animation depicting the balloon popping.
Test “Building a house”
To implement this test, preliminary work is required: create a colorful drawing of a house, each element of which will be converted into a clip. Give the clips names.
On the first frame, place a code that makes each of their clips invisible: q = visible ;
clip name. _
on (release) (
On the button// door
gotoAndPlay(“questions2”);
}
clip name. _ With an incorrect answer we write the code:
on (release) (
text1=’doors’;
gotoAndPlay(“questions2”);
}
If you answer the test questions correctly, the house is gradually “built” (its individual fragments become visible). Otherwise, under the line “The house is missing:” the names of the missing parts of the house are sequentially displayed in prepared text fields of the Dynamic type.
Test "Color the drawing"
A black and white picture is drawn, each fragment of which is designed as a separate clip (for example, a ball divided into sectors). We assign a name to each clip. If the test taker answers the questions correctly, the picture is gradually filled in.
clip name. _ With the correct answer we write the code:
on (release) (
gotoAndPlay("questions 2");
col=newColor(q1);
col.setRGB(0xFFcc33);// fill color
}
Where q 1 – name of the clip-fragment of the picture.
Note. You can use this idea to make the results of any testing more visual. For example, draw a rectangle divided into as many parts as there are questions in the test. If the answers are correct, the corresponding rectangular fragments should be colored accordingly.
Test joke “Riddle”
When you hover the mouse over the desired object, it becomes visible. You can “hide” all objects and search for them by moving your mouse across the screen. You must use the hitTest method.
The example shows a map of Belarus, on which cities are marked with dots. When the mouse points to a regional center, its name appears and the dot changes color to red.
onClipEvent(enterFrame)(
if (this.hitTest
(_root._xmouse,_root._ymouse,true))
{_ root . dd 1._ q = true ; //city name
col = new Color(_root.kr1);
col . setRGB (0 xFF 6600); //color red
}
Test using CheckBox components
To format the answers to the test questions, drag the required number of CheckBox components into the working frame of the main scene. In the Label property for each component, enter the text of the answer to the question. We assign names to the components.
The test results are presented in the form of a table. Arrow (clip with name strelka) indicates the current question number.
We write the following code on the check button:
on (release) (
gotoAndPlay(“questions2”); //next question
strelka ._ y +=17; //move the arrow down
//checking the correctness of the answer
if (k3.getValue() && !k1.getValue()
&& !k2.getValue())
{ o 2="+";} //entering the “+” symbol into the table
// ball movement
{ o 2="-";} //entering the symbol “-” into the table
}
Where k1, k 2, k 3 – names of CheckBox components,
o1,…, o 5 – names of Dynanic type text fields located in the second row of the table,
getValue – checkbox state property (true or false).
Obviously, tests are not the only form of knowledge control. However, the combination of the capabilities of computer technology and the advantages of testing generates great interest in using them in the educational process.
Working on creating tests in the Macromedia Flash environment develops design and research skills of active creativity, promotes the development of creative thinking, and provides an opportunity to realize the child’s design and artistic abilities.
I wish everyone good luck, inspiration and creative thought when developing new exciting tests!
The “Ivan Tsarevich and Vasilisa the Beautiful” simulator is designed to practice the skills of finding a point on a coordinate plane according to given coordinates. In our case, the coordinates are not explicitly specified. They need to be found by calculating the value of the expression. Thus, this simulator also helps to develop computing skills. The essence of the task is as follows: the student, having calculated the coordinates of a point, must drag the corresponding “amulet” to this point. In each task, you need to put seven “amulets” in their places, and then press the “Finish” button. If the task is completed correctly, a message will appear stating that the trap has been passed; if at least one “amulet” is in the wrong place, an error message will appear: “Ivan Tsarevich has fallen into a trap.”
Stages of creating a simulator:
1) create a statistical text field (Statik Text) on the first frame and write the task text in it (Fig. 13). In our case it is a fairy tale;
2) on the first frame we write the code: stop();
3) add a button to move to the next frame. To do this you need:
- draw a button of any shape (for example an arrow);
- highlight it;
- right-click on it;
- in the window that appears, select the commands: Convert to Symbol -> Button;
- Select the resulting button and write the code:
- on (release) (nextFrame();) – when pressed, go to the next frame.
The code for any symbol in Macromedia Flash is written in the Action Frame panel (Fig. 14):
4) the design of the first frame is optional. If you want to insert some kind of picture, you can do this using the usual commands – “Copy” - “Paste” or select the command File -> Import.
5) the second frame contains the task itself. To create the second (and all subsequent) frames, you need to select the corresponding frame on the timeline, right-click on it and select the Insert Keyframe command (Fig. 15).
After this operation, the entire contents of the first frame will be copied to the second frame. We can remove everything unnecessary from the second frame and place the information we need there. If you do not perform the described operation, then the changes made on the second frame will automatically occur on the first frame.
So, on the second frame we place the coordinate plane, and we draw it on the second layer (the creation of layers is described in the previous paragraph).
The coordinate plane, in our case, is drawn using the tool “straight” (LineTools)(Figure 16), draw one line with the Shift key held down, copy it (Ctrl+C) and paste it (Ctrl+V) at the required distance. Then you can copy two straight lines, etc. Having received the required number of lines, copy them all, paste them and, selecting the command “free transformation” (Free Transform Tool)(Fig. 16), rotate our straight lines by 90 degrees. Thus, we obtain a mesh of the size we need (Fig. 17).
The mesh can be obtained in another way, but it was more convenient for us to use a hand-drawn mesh, since it is easier to work with it in the future.
6) coordinate axes are depicted on layer 3;
7) we write down the coordinates of the points using the already familiar text field - Statik Text, we draw “amulets” using drawing tools. We do all this on layer 1;
8) copy the image of the amulets from the first layer and place it on the third (Fig. 18);
9) convert each amulet into a clip:
- select the desired amulet;
- right-click on it;
- in the window that pops up, select the commands: Convert to Symbol -> Movie Clip;
- Give each clip a name: Оbereg1, Оbereg2,…, Оbereg7 (Fig. 19).
10) for each clip we write the following code:
on (press) ( x0=this._x; y0=this._y;
this.startDrag(false);)
on (release) (this.stopDrag();
if (x0==this._x and y0==this._y)( this._rotation+=45; ))
11) on layer 1, at the points corresponding to the recorded coordinates, place small circles (the color matches the background color so that the student does not see where the amulet needs to be moved);
12) convert each drawing into a clip (Fig. 20).
13) give each clip a name: Lov1, Lov2,…, Lov7 (from the word “trap”). The number of the trap must correspond to the number of the amulet, which the student will use the mouse to move to the point with the required coordinates.
14) add a Dynamik Text text field to any of the layers and give it a name: text1 (Fig. 21).
14) place the “Done” button on the form (Fig. 22). We add the button in the same way as in step 2;
15) for this button we write the following code:
if ((ober1.hitTest(lov1)) and (ober2.hitTest(lov2))
and (ober3.hitTest(lov3))and (ober4.hitTest(lov4))
and (ober5.hitTest(lov5))and (ober6.hitTest(lov6))
and (ober7.hitTest(lov7))) (
text1.text = "Ivan Tsarevich fell into a trap"; ))
16) on the next frame we create a message about the passage of the trap (Fig. 23). You can add some drawing.
Rice. 23 Fig. 24
18) for the “Menu” button - on(release) (loadMovie (" file name.swf", _level0);)
If the student clicks the “Next” button, he goes to the next frame (Fig. 24). On this frame you need to move, in accordance with the new coordinates, the clips: Lov1, Ljv2,…, Lov7. If the student passes all the traps (in our case there are 7), then the final frame appears on the screen (Fig. 25).
19) for the “Again” button write the code: on (press) (gotoAndPlay(1);)
20) so that when the program starts, the picture opens in full screen on the first frame, you need to write the code: fscommand("fullscreen",true);
21) program compilation – keys: Ctrl + Enter;
22) add pictures as desired to any frame - the program is ready.
“Determining coordinates” is a test to test the ability to find coordinates from a point on the coordinate plane. From a given point on the plane, you need to determine its coordinates and write them down in the appropriate boxes (Fig. 26).
Test creation steps:
1) on the first layer, which can be named “grid”, draw a coordinate grid (you can copy the grid from the previous task);
2) on the second “axis” layer, draw the coordinate axes, add axes designations and the point whose coordinates you need to find (in our case, this is point A). The point designation will change on each layer;
3) on the second layer add two text fields (Statik Text). In one write down “Abscissa of point A”, in the other – “Ordinate of point A”;
4) create layer 3 and name it “coordinates”;
5) on this layer create two text fields (Input Text) and name them korx (x coordinate) and kory (y coordinate);
6) place these fields opposite the corresponding “abscissa” and “ordinate” fields;
7) create a dynamic text field (Dynamik Text), and name it “rez” (result) (Fig. 27);
8) create a button to go to the next frame, write the code for it: on (release) (_root.nextFrame(); )
9) create a “done” or “check” button. When you press this button, the program checks the correctness of the coordinates entered by the student. If the coordinates are indicated correctly, the program displays the message “Correct”; if not, “Incorrect”. The code for this button will change depending on the location of the point on the coordinate plane.
if ((krx.text == "5") and (kry.text == "4")) (sum++;
rez.text = "Correct"; ) else ( rez.text = "Wrong"; ))
10) to summarize the test results on the first frame of any layer, you need to write the following code:
var n = 10; // number of questions
var sum = 0; // number of correct answers
function tiktak() (time++;)
timer = setInterval(tiktak, 1000); // timer
- location and designation of a point on the coordinate plane;
- designation of a point in the field “abscissa of point_” and “ordinate of point_”;
- In the code of the “ready” button, indicate the new coordinates of the point.
12) repeat all the described steps the required number of times (depending on the number of questions in the test, in our case – 10 times);
13) after the last question, you need to create another key frame (frame with test results):
- create a text field (Statik Text) on this frame with the inscription “Results:” or “Evaluation:” (Fig. 29);
- create a dynamic text field and name it text;
- On the final frame write the following code:
clearInterval(timer);
(if (sum==10) ( ozenka.text="Excellent";)
if ((sum==9) or (sum==8)) ( ozenka.text="Okay";)
if ((sum==7) or (sum==6)) ( ozenka.text="Troika";)
if ((sum==5) or (sum==4) or (sum==3)
or (sum==2) or (sum==1) or (sum==0)) ( ozenka.text="Two";))
14) in order to be able to perform this test again (if you want to provide students with such an opportunity), create a button “Again”;
15) write the code for this button: on (press) (gotoAndPlay(1);)
Algorithm for creating a presentation “ Constructing figures ”
This presentation is intended to explain the progress of constructing a figure on a coordinate plane according to the given coordinates of its key points. It discusses two ways to construct a figure using points:
- first we mark all the points, then connect them sequentially;
- Each subsequent point is immediately connected to the previous one.
Creation stages:
- create two keyframes;
- On each frame, place an image of the coordinate plane and the text of the task;
- on the first frame write the code: stop();
- fscommand("fullscreen",true);
- in the clip editing mode (to open it, double-click on the clip) create a second layer on which the dots will appear;
- so that the dots do not start appearing immediately when you start the clip, leave the first 30 frames unchanged (Fig. 30):
- then, every seven frames, create a key one and add one point of the shape to it (Fig. 31):
- after that, also after 7 frames, we begin to add connecting lines (Fig. 32):
- on the last frame write the code: stop();
- go to scene editing mode (double click past the clip) and on the first frame create a button to move to the next frame: on (release) (nextFrame(););
- On the second frame, in the clip editing mode, we create the second and third layers. Points will appear on the second layer, segments on the third;
- create a sequence of frames (Fig. 33):
- on the last frame we write the code: stop();
- We return to the scene editing mode and add a button to go to the previous frame.
I wish you success in creating your own works!
Laboratory work
Introduction to the program Macromedia Flash . Creation Flash - animations.
Work plan:
Read the text below.
Create the “Bomb Explosion” animation according to the instructions.
Write down the answers to the control questions from the text.
Create your own Ball animation
Introduction to the program
Along the left border of the window there is Editing toolbar. It provides access to tools that are used to create and edit graphic objects. Many of these tools are familiar to you from working with a graphics editor.
For ease of use, the toolbar is divided into 4 parts:
TOOLS(tools)- this part contains buttons for selecting a specific tool; These tools are divided into two types: selection tools and drawing tools;
View(view)- - contains controls for viewing the image available on the table; there are two buttons in this field:
Hand Toll (hand) – clicking on the button enables a mode in which the work area can be moved in any direction using the mouse without using scroll bars;
Zoom Toll – clicking on the button turns on the mode for quickly zooming the image in the work area; when this mode is enabled, two additional buttons appear in the Options field, allowing you to select the scaling direction (increase or decrease);
Colors(colors)- buttons in this part provide separate selection of the color of the outline and fill of objects
Options(options)– here are elements for setting additional parameters of the selected tool; for instruments that do not have additional parameters, the Options field remains empty
Workspace occupies the entire central part of the window. In the center of the work area there is the so-called Editing table (Stage), which we will henceforth simply call “table” for brevity.
The size of the table and its color determine, respectively, the size and color of the screen when watching a movie. When playing a movie, only those objects that are located within the table will appear on the screen. At any given time, only one scene related to a given film can be located on the table.
The rest of the workspace is needed for:
performing “rough” work;
to implement the effect of a gradual entry (exit) of an object into the frame.
Located above the work area timing panel (Timeline). A timeline, like a table, belongs to a specific scene in a film. It allows you to describe the relative position of layers on the scene, the sequence of changes in the state of objects presented on the scene, and perform some other operations. The timing diagram is a fundamental tool in creating animation and in describing the behavior of interactive elements in a film.
In general, the following elements can be presented in the timing diagram panel:
description of the layers of the current film scene; the description is presented in the form of a kind of table containing several columns; they indicate the names of the layers and their attributes. This part of the timing diagram panel will be discussed in more detail in the lesson “ Creating Animation»;
the timing diagram itself, containing a frame scale, an image of the “reading head” and timing diagrams for each scene layer
drop-down menu that allows you to select the format for representing frames on the time diagram;
status bar of the time diagram window, which displays information about some movie parameters, and also has buttons for controlling the display of animation frames on the table.
Below the working area (in the initial state) is located Property inspector panel. If no or no objects are selected in the workspace, the Property Inspector displays the general movie options. When you select an object, the Property Inspector format automatically changes and the panel displays the properties of the selected object.
So, let's create a small film - “a bomb explosion”. We will create this film using frame-by-frame animation.
A cartoon created using frame-by-frame animation is a sequence of key frames, each of which is associated with an image (picture) on the table.
When playing a cartoon, the animation effect is achieved due to the fact that the pictures on the table replace each other. Each frame-by-frame cartoon is characterized by two main parameters:
number of key frames (Keyframe);
frame rate (in Flash it is measured as the number of frames shown in 1 second - frame per second)
In general, both of these parameters affect the created visual effect (the smoothness or discreteness of movement, transformation, etc.). But still, the leading role here belongs to the first parameter, as well as to how much the subsequent key frame differs from the previous one.
On the timing diagram, keyframes are displayed as gray rectangles with a black dot inside. As a movie plays, the reading bar moves from one frame to the next, marking the current frame. To see the image associated with a specific frame, you must click on that frame's icon in the timeline.
Algorithm for creating the “Bomb Explosion” animation
Let's draw Fig. 1 on the table
|
|
| ……… |
| Picture 1 | Figure 2 | Figure 3 |
Control questions
Basic objects of the Macromedia Flash program window
What areas is the Toolbar divided into?
What is an artboard
Which tool is used to select objects?
What is a Keyframe and how does it stand out on the timeline?
What determines the smoothness of an object’s movement?
What extension are documents created in Macromedia Flash saved with?
Independent work
Create a movie of a ball falling and breaking into pieces. The figure shows a sample consisting of combining all steps
So far, we've looked at Flash movies that play without viewer intervention from start to finish. However, Flash also allows you to create interactive applications in which the user can control the display of content. In this lesson, we'll begin to explore the elements of the Action Script scripting language and look at how it can be used to create interactive applications.
As an example, let's create a photo album with interactive interface elements.
The button is a four-frame interactive movie clip. When we assign a Button type to a symbol, Flash creates a four-frame timeline for the new symbol:
Up-state is a frame corresponding to the situation when the button is not pressed and the mouse pointer is not located above the button;
Over-state frame illustrating the appearance of the button when the mouse pointer is positioned over the button, but the button is not pressed;
Down state this frame shows the appearance of the button when it is pressed;
Hit state defines the area in which the button responds to a mouse click;
this area is not visible in the clip.
To create a button, run the command Insert => New Symbol (you can type the keyboard shortcut Control+F8). In the Create New Symbol dialog box that appears, enter a name for the button symbol (for example, but1) and select the symbol type Button.
Flash will switch to character editing mode, providing Up, Over, Down, and Hit frames. The first frame, Up, becomes an empty keyframe. Let's draw an unpressed view of the button in this frame (Fig. 1).
Rice. 1. UP-frame button
Let's select the second frame, marked as Over and corresponding to the state when the cursor is above the button. Let's insert a key frame in this frame (using the Insert => Keyframe command), as a result of which a key frame will appear that completely repeats the content of the Up-frame. Let's change the color of the button, as shown in Fig. 2.
Fig 2. Over-frame button
Similarly, add the next frame (Down frame) and draw the pressed state of the button (Fig. 3).
Rice. 3. Down-frame button
We won’t draw anything in the Hit frame for now, but will return to this frame a little later.
Let's go to the main scene, call the library using the Window => Library command and create an instance of the button symbol by dragging it onto the stage (Fig. 4.)
Rice. 4. Create a button instance by dragging it from the library
As a result, we get the following film. As can be seen from this film, pressing a button occurs not only when we click with the mouse on the central (working) area of the button, but also when we click on the frame around it. This is due to the fact that if the Hit frame is not drawn, then the working area of the button will correspond to the Up frame.
In order for the button to be pressed only in the working area, it is necessary to define this zone in the Hit frame, that is, draw the button without a frame (see Fig. 5)
Rice. 5. Hit-frame buttons
To make a button interactive, you need to associate the fact of pressing the button with the execution of certain commands, that is, describe a certain scenario. To create scripts in Flash, there is a special language called Action Script. In this lesson we will touch on only a small part of the capabilities of this language, and in the future we will return to the structure and syntax of Action Script as the examples of creating interactive films in Flash become more complex.
Understanding Action Script
Action Script is a scripting language - a set of instructions that control the elements of a Flash movie. Action Scripts can be embedded in a movie or stored in an external text file with an AS extension.
When embedding a script into a film, it can be embedded in different parts of the film. More specifically, Action Scripts can contain keyframes, button instances, and movie clip instances. Accordingly, the scripts are called Frame Actions, Button Actions, and MovieClip Actions.
Action Scripts run when certain user- or system-initiated events occur. The mechanism that tells Flash what statement to execute when an event occurs is called an event handler.
Action Script has its own syntax, much like JavaScript.
Flash MX 2004 supports Action Script from all previous versions of Flash.
One of the main concepts of Action Script are Actions - commands that issue instructions during execution of a SWF file. For example, gotoAndStop() sends the playhead to a specific frame or cue. From the word Actions comes the name of the language - Action Script (literally - action script).
We will become familiar with most of the concepts of this language using specific examples.
Interactive photo album
Let's demonstrate the use of buttons to manage a photo album - create a set of photos and add two buttons that will scroll through the photos forward and backward.
As a result of executing this command, a panel will appear containing a large set of pre-drawn buttons of various types. Let's select, for example, Key Buttons (buttons similar to keyboard keys), open the corresponding folder, select the key-left button (Fig. 7) and create an instance of this button (by dragging it onto the stage).
Rice. 7. Elements of the Key Buttons folder
Note that when you place a second button (key-right) on the stage and move it to align with the first button, the program provides a hint (a dotted line) that allows you to accurately position the button (Figure 8).
Rice. 8. Automatic alignment of buttons on the same level
In order to add a script, you need to call the Action Script editor using the Window => Development Panels => Actions command or by pressing the F9 key.
If you plan to write scripts frequently, this is a keyboard command worth remembering. As a result, the Action Script editor will appear (Fig. 9).
Rice. 9. Action Script Editor Panels
If you experiment with highlighting various elements in the scene while monitoring the messages in the Action Script editor panels, you will find that the program will tell you which element you can "hang" code on. If you select a frame on the stage, the inscription Actions - Frame appears in the upper left corner of the editor panel; if you click on the button, the inscription Actions - Button appears, that is, the program prompts that the entered code will relate to the button script. And if you select a photo, a message will appear in the field intended for entering a script: Current selection cannot have actions applied to it (a script cannot be applied to this selected object).
We will assign a script to a button. Recent versions of ActionScript offer the ability to write centralized code, that is, code that is located in one place, and this ability allows you to better understand large programs.
However, in simple examples (which is what we're looking at), assigning a script to a button is perfectly acceptable.
Now let's add several key frames so that the buttons created in the first frame are copied into them, and place the necessary photographs in the newly created frames.
If we run the created movie for execution, the frames will be continuously played one after another, and therefore, first of all, we need to give the “Stop” command on the first frame. To do this, add the corresponding command to the first frame (Fig. 11).
Rice. 11. Script assigned to the first frame
Please note: the command is no longer assigned to the button, but to the frame. The fact that a frame is assigned a script is noted on the main editing line - a lowercase letter “a” appears above the bold dot in the frame designation.
As a result, we got the next film.
If we have only a few frames in the photo album, then two buttons - “Forward” and “Back” - are quite enough, but if the set of photos is large, then it is advisable to also have buttons that link to the beginning and end of the film. In the following example, we will add the corresponding buttons: “To the first frame” and “To the last frame”. You can select buttons of a suitable mnemonic from the standard library of buttons from the Circle Buttons folder (Fig. 12).
Using the proposed example, we will familiarize ourselves with another command, gotoAndStop(), which allows you to go to the desired frame and then stop.
Rice. 12. Buttons from the Circle Buttons folder
We'll put a code on the button to go to the first frame (third from the left in Fig. 13), as shown in Fig. 13.
Rice. 13. Script for the “In the first frame” button
In the case of a photo album of five frames, add the transition script “To the last frame” to the last button:
Automated script writing
Until now, we've typed all the commands manually, but the ActionScript editor panels provide a number of services for automated script writing.
Let's consider these possibilities.
Rice. 14. Automated scripting tools
The Action Script editor panel allows you to select, drag, rearrange, and delete commands.
Let's show how you can write the same script for the "Forward" button in an automated manner. By selecting the Movie Clip Control folder (top left window in Fig. 14), you can access the on event handler, and then you need to either double-click on the corresponding item or drag the expression onto the script writing field in Drag and Drop mode.
As a result, the required expression and a hint like this will appear on the work field (Fig. 15): you select the desired command from the menu and the expression is completed automatically.
”, which corresponds to pressing the keyboard keys (left arrow, right arrow), that is, it is possible to create a photo album that will be “flipped through” using the keyboard keys.
Rice. 16. Keyboard button calls
” (Fig. 16), then go to the Timeline Control folder, select the nextFrame command and drag it to the work field (Fig. 17).
Rice. 17. The nextFrame command can be found in the Timeline Control folder
For a button that takes the movie to the beginning of the photo album, you can select pressing the Home key from the menu as an event, and then (Fig. 18) drag the gotoAndStop command onto the field, as a result of which another hint will appear on the possible syntax of this command.
The arrows in the tooltip allow you to view different syntax options. The program provides two options (Fig. 18 and 19), that is, it offers to set a scene and a frame or only a frame. In our case, it is enough to specify only the Frame.
If the scene name is omitted, the default is to jump to the frame of the current scene.
Rice. 18. Hint on possible command syntax
Rice. 19. The triangle arrow allows you to view syntax options
After we assign the corresponding keyboard buttons to all the buttons, we will get the following movie, where flipping through photos will take place from the keyboard, and clicking on the on-screen buttons with the mouse will not cause any consequences.
Is it possible to provide a scenario in which different events will lead to the same actions? It turns out that you can - to do this, you need to list a list of event names in the on event handler. If you put a comma in the list of events after the first event, the program itself will offer you a menu (Fig. 20).
Rice. 20. When you enter a comma in the event list, a menu of additional commands automatically appears |
Let's repeat the procedure for the remaining buttons and as a result we will get a photo album in which photos will be scrolled using both the mouse and the keyboard (the original FLA file can be obtained from the link).
In the example considered, we used the transition by frame number, but this method is not always convenient: if the frame numbering changes during the film editing process, the logic may break down. It is more convenient to use the transition by frame mark.
Let's look at an example that requires not only flipping through the album, but also moving to different sections, that is, more complex navigation.
Let the album consist of drawings, computer graphics and photographs.
Let's label the first frame of the "drawings" section Pictures; similarly, we'll assign the labels "graphics" and "photo" to the first frames of other sections.
Let's create a layer for placing labels and call it Lables. In order to label a frame, in the Properties panel you need to select the label type Name and write down its name. In our case, Pictures (Fig. 21). Similarly, we will place markers in frames 5 and 10 (Fig. 22).
Rice. 21. Example of assigning a label to a frame
Now let's add a new layer and call it Actions. In the first key frame of the Actions layer, call the Actions Frame panel (by pressing the F9 button) and enter the command stop () (see Fig. 22)
Rice. 22. First frame script
Let's add another layer called Subjects (subjects), in which we will give titles to the corresponding frames: “Drawings” (Fig. 23), “Graphics” and “Photos”.
Rice. 23. Title for the frames of the “Drawings” section
Now let's add menu buttons with similar names to the side, which we will place on a new layer called Menu.
Let's print the first item of the "Pictures" menu from the left edge and convert it into a button symbol. Using the Arrow tool, select the text block “Pictures” and execute the command Modify => Convert to Symbol (this command can also be executed using the F8 key), in the Convert to Symbol panel, set the symbol type Button and define its name as pictureButton (Fig. 24 ).
Rice. 24. Assign the name pictureButton to the button for going to the pictures section
Let's create four frames for the "Drawings" button: the first will simply represent the original text (Fig. 25), the second will represent the same text only in blue, we will skip the third frame (in this case, the Down frame will be the same as the Over frame ), and in the Hit frame we will draw a rectangular area that will define the area where the button is pressed (Fig. 26).
Rice. 25. Up-frame of the pictureButton
Now we need to attach the script to the newly created button. To do this, select the button in Scene 1 and, by pressing F9, call the Actions panel, and then enter the code shown in Fig. 27.
Rice. 27. Script for moving to a frame with a label
