COMP126-2006: Practical 1 – Getting to know Flash
What is Flash?
Macromedia Flash is system that allows creation, communication and play of animated and interactive computer
graphics. Its main application is the creation of web pages, however, it can also be used to create cartoons and
computer games. In this document we will refer to anything created with Flash as a ‘Flash Movie’, whether it is
really a movie or not; because, as we will see shortly, the basic way of doing things in Flash is to create a series
of ‘frames’, to be played as though it were a movie. The program we will use to do this is ‘Macromedia Flash
MX 2004’. This is an ‘editor’, and test environment, in which we can make and test Flash Movies. To start
with, we will view our movies in Flash MX 2004 itself. However, once a movie is created it can be stored in a
file and made available across the internet. Flash has been designed explicitly for this style of use. Its movie
files are made as small as possible, with a goal of providing rich interactive web experiences even to people at
the end of slow network connections.
The need to store movies in very small files has influenced the style of graphics used, and thus the kinds of
projects that can be undertaken. The most noticeable feature is the use of ‘Vector’ graphics, rather than the use
of film like images (or ‘Raster’ graphics). To describe a green rectangle, for example, Flash just records the
coordinates of its corners, and the fact that it is coloured green – essentially 7 numbers (Question: Why 7?) In
contrast, a raster image is like a photograph, recording again and again, for each tiny piece (pixel) of the
rectangle that it is green (maybe thousands or tens of thousands of numbers). In a Flash web page, the numbers
representing the rectangle can be efficiently transmitted over the internet. There is a small catch however; there
must be software at the receiving end to interpret the numbers and display the rectangle on a screen.
Web browsers (like Internet Explorer or Mozilla Firefox), are not automatically capable of displaying Flash
Movies by themselves. For that, a ‘Plugin’, supplied by Macromedia (the Flash Viewer) is needed. (A ‘plugin’
is a program that will attach to a browser and enhance it.) Macromedia makes the Flash Viewer freely available
for anyone to download and install. This can be a difficulty for users, either because they may lack the
knowledge, or confidence, or because they may work on corporate (or university) computers on which they are
not allowed to install software.
So, the answer to ‘What is Flash’ is that it is a system consisting of: an Editor (Macromedia Flash MX 2004)
which enables us to create ‘movies’; a way of compactly storing those movies; and a viewer that is freely
available so that any internet user can watch them.
We should also note that Flash MX 2004 is copyrighted software, and a license fee must be paid in order to
install and use it. Only the viewer is free. Macromedia do make available a trial version which you can
download, and which will (at the time of writing) work for 30 days. After that time you have to pay for a
license in order to keep using it. Unfortunately, under the terms of the University’s license agreement with
Macromedia, this means that we cannot make the software available for you to use at home.
We can also say what Flash is not: It is not the only, or even the most common, way of making web pages.
Most web pages are written in a notation called HTML (HyperText Markup Language), which can be displayed
by all web browsers. Similarly, it is not the only way of making computer games or cartoons. However, it does
provide a useful set of facilities which makes it the tool of choice for web pages with animated graphics or a
high degree of interactive visual effects.
There are two different, but equally important, methods used for developing movies in Flash. The first is by
using Flash’s ‘Graphic User Interface’ – in other words to use the mouse to draw, selection options, etc, and
make up a movie by visual interaction with the system. The second is to program sequences of actions in the
built-in programming language called ‘Flash Action Script’. Both methods have their place, and both will be
introduced in this course. The first practical sessions will concentrate on the Graphic User Interface. Action
script will be added as needed.
We can let the marketing wing of Macromedia have the last word. They say you should use Flash because:
1. Flash movies load faster and save on download time because Flash is vector based whereas HTML is raster.
2. Flash intelligently ‘caches’ it’s movies so they don’t have to be reloaded.
3. Flash gives the users (the person viewing/using the Flash movie) a more responsive ‘rich-client’ experience.
Here are some websites that take advantage of Flash’s capabilities. Have a look at them.
www.happytreefriends.com
http://www.mypetskeleton.com/
http://www.2advanced.com/flashindex.htm
http://cmart.design.ru/
http://www.tokyoplastic.com/
www.flasharcade.com
1
This practical is partly designed to provide an overview of Flash MX 2004, so some ideas will be briefly
introduced, in order to illustrate the different parts of the Flash environment, and then elaborated later, or in
subsequent practicals. The goal is to get the ‘flavour’ of Flash.
1.
Open Flash MX 2004.
Mac Users: If this is not already on your dock go to “Applications”, then “Macromedia Flash MX 2004”,
and drag it onto your dock.
PC Users:
Click ‘start’ and explore from there.
It may take a minute or two to load. After a while you should see the program start, with some like this in the
middle:
Figure 1.1
Here you can open a movie you have worked on previously, or obtained from elsewhere; start a new movie
of your own; or use a partly built movie (template) provided by Macromedia, and finish it yourself. We
will start a new movie.
2.
Create a new flash movie – click ‘Create New’. You will name it later when you save it.
You should now see the Flash Editor, ready to go. It will look roughly as follows, although the exact layout
varies quite a lot. As you will see later, the Flash user interface is quite configurable. The important parts to
identify are labelled and discussed below.
Toolbar
Timeline
Frames
Playhead
Stage
Property
inspector
Figure 1.2
2
The Stage
The main work area for creating Flash Pro documents is the Stage (white area). It represents the visible portion
of a Flash movie. Objects can move on and off the Stage, but the viewer sees only what's in the Stage area.
You can adjust the size of the Stage (and thus the size of the Flash window onscreen when the animation is
complete) by using the Property Inspector. Click somewhere on the Stage area that is not occupied by an object
(at this point there shouldn’t be anything on the stage anyway) and then click the Size button which is located on
the Property Inspector (on Mac: apple + J). The Document Properties dialog box opens and allows you to enter
the width and height of the Stage in inches (''), decimal inches (''), points (pt), centimetres (cm), millimetres
(mm), or pixels (px). Figure 1.2 shows the Stage size being set in pixels. Flash provides several units of measure
so that designers can be comfortable with their favourite unit. In the Document Properties dialog box you are
also able to change the background colour of your flash document and the frame rate at which it plays.
Figure 1.3 The Stage size is set in the Document Properties dialog box.
(Windows Users) A feature in Flash MX 2004 are the document tabs just above the timeline. Each document
open, including movies (you can work on more than one movie at a time), and other kinds of document gets a
document tab. The tabs make it very easy to switch quickly between the various documents and files. Figure 1.1
shows only one Tab, with the text Untitled-1 – the name that our movie will have until we save it and give it a
proper name.
(Mac Users). Document tabs are not available on the Macintosh version of Flash MX 2004. However, you can
have multiple documents open. Each has its own window.
The Toolbar
The toolbar is usually to the left side of your screen. The basic way of adding or altering content in your movie
is to select a tool and use it. If you select the pen, you can draw; if you select the circle you can draw circle (or
ovals), etc. The bottom part of the toolbar has settings and options applying to the selected tool. If you have
selected the pen, there will be options to set pen colour and other attributes.
The Timeline and Frames
The Timeline in Flash represents a strip of "film" with frames. To understand how the Timeline works, imagine
a film editor with a movable playhead that displays the contents of the current frame on the Stage when the
playhead is moved over the frame. Figure 1.3 shows the Timeline. In this example, multiple Timelines (called
layers) are visible simultaneously. (Layers will be described shortly.)
Figure 1.4 The Timeline with three layers and the play-head at frame eighteen
3
Frames
The frames in the Timeline represent the frames or cels in an animated movie. To understand frames in Flash, it
helps to understand the process of traditional animation. Briefly, the traditional manual process of animating
requires a master animator and one or more assistants. The master animator draws two different images
representing changed characteristics of a scene. The frames in which the master animator draws the images are
called keyframes. Between the pair of keyframes, the assistant animators (known as in-betweeners) draw the
frames (or tweens) that change the image from one keyframe to the next. This process, called tweening, results
in a smooth transition between keyframes. In Flash, you draw the keyframes, and Flash does the tweening.
Keyframes in Flash are the frames used to introduce content in a movie. When you move the playhead to a
keyframe (or just click the keyframe), its content is shown on the Stage, and can be edited. Keyframes are
created by clicking a frame and pressing the F6 key or selecting Insert, Timeline, and Keyframe from the menu.
A blank keyframe is recognizable by a black circle on the frame. If content is placed in the keyframe, the black
circle is filled. The initial frame in a layer is always a keyframe.
The Flash playhead can be dragged to any frame or keyframe. When you select a frame by clicking it, the
playhead jumps to that frame. The content on the Stage changes as the playhead is dragged left or right along the
Timeline.
You can label keyframes to make your movie clearer and easier to debug. To add a label, select the keyframe
and enter the label in the Frame window in the Property Inspector, as shown in Figure 1.4.
Figure 1.5 Property Inspector and labelled keyframe
ActionScript in Keyframes
You can select a keyframe and add ActionScript 2.0 code that will be run when the playhead moves to the
frame. A keyframe with associated ActionScript code has a lowercase letter a next to the frame. (ActionScript is
discussed in later practicals.)
A regular frame (just called a frame) contains the same content as the keyframe to the left of it. If a frame is part
of a tween, it will contain uneditable content generated by Flash's automated tweening process. Tweened frames
contain the images equivalent to what the in-betweener artists do in a traditional animation process. However,
because the tweened frames contain images with shapes, positions, or some other in-between changes between
keyframes, they're "frozen" so that the animation process in the changes cannot be distorted. Tweened frames
are not stored, they are calculated when a movie is played. This is one of the ways in which Flash keeps its file
sizes small.
Keyframes with no content are blank. If a blank keyframe is inserted in a tween, all tweened frames are
destroyed. The best use of blank keyframes is to insert spaces in a layer; in other words, blank keyframes can act
as frame "spacers."
______________________________________________________________________________________
Drawing Shapes
In this section you will draw a number of circles. In terms of movies, think of this as drawing the first frame of
a movie – ie: you are just drawing a picture. Of course you can draw properly using the pen, but circles look
tidy and will illustrate many aspects of Flash quickly and easily. You will also find that the mouse is a clumsy
drawing tool. In flash we often work by starting with a simple shape, like a circle or rectangle, and then
modifying it. The mouse is a good tool for making modifications to shapes. This section is very experimental.
You are encouraged to find out how to do things. You should spend as much time as you need to become
confident with the tools and actions involved.
3.
You should have an empty Flash movie ready to edit from step 2. If not, start Flash and ‘create a new Flash
document. (You can also do this by selecting ‘New’ from the ‘File’ menu.. We will be using the Toolbar
4
(on the left of your screen). If it is not visible select the ‘Tools’ option from the ‘Windows’ menu, or press
Control + F2 / Command + F2 (PC/Mac).
Figure 1.6
4.
Figure 1.7
To create a circle: click the Oval tool (press O). Now click and drag to draw a circle in your work area.
The dimensions of your circle are not important, but make sure it is large enough so you can see what you
are doing.
Figure 1.8
5.
Experiment with the ‘Colors’ controls at the bottom of the toolbar. You will find that they alter the way
that Ovals are drawn. Note: You set colours and then draw – the controls do not change the last oval
drawn. The property inspector (below the stage) also shows settings for the Oval tool. What else can you
change about an oval?
6.
To alter an oval after it has been drawn you use the controls in the object inspector (below the stage).
Immediately after clicking on the Oval tool, the object inspector gives access to the tool settings – which
will effect the next Oval drawn. However, if you ‘select’ an oval that you have already drawn, then you can
alter it. ‘Selection’ is done with the ‘Selection Tool’. (The left of the two arrows at the top of the toolbar.)
You can select by clicking, or by dragging out a rectangle. If you hold down the shift key while selecting
you can ‘add’ to an existing selection. Draw several ovals, if you haven’t already done so, and experiment
with selecting and altering them. You should spend some time at this. At the end you should have worked
out answers to.
5
How do you know what is selected?
How do you know what the property inspector is currently referring to?
Can you select more than one oval at a time?
Do you have to completely enclose an oval when you are dragging out a selection area? What happens?
If you select an oval by clicking in it, can you change the outline colour? What is going on here? Think
about this again after trying question 7.
7.
When an object has been selected, still using the selection tool, you can move the object by click and drag.
Try it. What happens if you draw one oval over another, then select and move one of the ovals?
As you carry out these experiments you will find it helpful to be able to immediately undo an action. This is
often useful. For example, if you wonder what a small change would do to a picture, try it and decide you don’t
like it. In Flash, Undo and Redo commands are available on the Edit menu.
8.
Draw an oval and get rid of it by using the ‘Undo’ command. What is the keyboard shortcut for Undo?
This is worth learning now, as undo is so useful.
9.
Draw an oval with a thick outline (3 pixels thick). Try the following: Choose the ‘Select’ tool; click on
the outline of your oval to select it; release the mouse; click again on the outline and drag. That is your first
experiment. What happened? Now, undo the last action. Click outside the oval to unselect it; then click
and drag somewhere on the outline in one operation. What happens this time? (If it isn’t different then try
again carefully.)
Flash users have to choose tools from the toolbar very frequently. It can be inconvenient to move the mouse
away from your work point to click on a tool. Flash provides keyboard shortcuts for most tools. If you press
the letter ‘O’ on the keyboard the result is exactly the same as clicking on the Oval tool.
10. Move the mouse over the Oval tool icon. Pause for a moment, and notice that the name of the tool and the
shortcut key are shown in a popup window. What is the tool to the right of the Oval tool called and what is
its shortcut key? Try using it – what does it draw? Experiment with the shortcut keys and draw a number
of shapes.
11. When using the Oval tool there is an icon that looks like a magnet in
the ‘Options’ section at the bottom of the toolbar. This can be on, or
off. Try turning it on and off. What does it do? Hint: Try drawing
ovals with it on and with it off.. Drag out the oval shape slowly and
watch what happens with different shapes.
12. To remove an item you have drawn select it choose ‘Clear’ from the
‘Edit’ menu. What shortcuts are available? Note: Delete and
backspace should both work.
13. Using circles make the shape shown to the right.
14. Create a folder called 126Prac1, and save your picture (movie with on
frame) as Flash as prac1a in it.
______________________________________________________________________________________
Tweening an Animation
As noted earlier, tweening is the automated process of filling in the changes between keyframes. The following
exercise will help you to see and understand the process. Follow these steps to create a basic shape tween:
15. Open a new Flash document and click Frame 30 to in the row labelled ‘Layer 1’.
16. Choose Timeline, and Keyframe from the Insert menu to insert a frame. Frames are added from Frame 1–29
and a keyframe is inserted in Frame 30.
17. Click in Frame 1 and then use the Oval tool to draw a circle in the upper-left corner of the Stage, as shown
in Figure 1.10
6
Figure 1.10 Circle created with Oval tool
18. Click in Frame 30 and select the Rectangle tool in the Tools panel.
19. Draw a rectangle in the lower-right corner of the Stage, as shown in Figure 1.11.
20. Click in a frame, somewhere between Frame 1 and Frame 30; then in the Property Inspector, select Shape
from the Tween drop-down menu, as shown in Figure 1.12 An arrow with a green background appears in
the frames shown in Figure 1.13 to show in-betweening has been done.
Figure 1.11 Rectangle created with Rectangle tool
7
Figure 1.12 Setting a Shape tween
Figure 1.13 Shape tween arrow
21. Select Control, Enable Live Preview. (If Enable Live Preview is already checked, just leave it alone.)
22. Click in the first frame and press the Enter key to view the live preview. The circle morphs into a rectangle
and moves from the upper-left corner to the lower-right corner.
23. Save your movie as prac1b.
To understand the tweening process, drag the playhead from left to right to see the different stages of change
that the shape goes through. Each of the frames between the keyframes has a slightly different position and
shape. Figure 1.14 shows one of the shapes and positions between the keyframes. Animators call this way of
viewing an animation ‘scrubbing’ – it is often more useful than playing the animation.
Figure 1.14 Shape tween between keyframes
If you select any of the frames between the keyframes in the tween, the image cannot be edited. However, if you
select a tweened frame and insert a keyframe (F6), the image in the frame can be edited.
24. Try your own experiments to get a feel for what is happening. Hints and ideas: You will find it easiest to
start a new movie for each experiment.
What happens if you start with two circles in the first frame and two rectangles in the 30th?
What happens with two circles in the first frame and one rectangle in the 30th?
What happens if you put the circle into frame 1 before setting the keyframe in frame 30?
______________________________________________________________________________________
8
Getting to Know Flash Pro - Text and Static Text Fields
Flash has three types of text fields: static, dynamic, and input. In the next section we will experiment with static
text fields
Static Text Fields
Static text fields are used primarily as text labels in the main Timeline or in movie clips. This type of text can be
animated and changed dynamically, but only along certain dimensions. For example, a static text block can be
motion tweened from one side of the Stage to the other, rotating as it goes. However, a static text block cannot
have tweened colours.
Text blocks can be made into hot spots and linked to URLs (a website). Static blocks of text can also be broken
apart into graphics and reconstituted as virtually any kind of symbol and used exactly as a given symbol could
be used in any style.
Dynamic Text Fields and Video
Dynamic text fields are the "data output" fields of Flash. Everything from database data to simple calculation
output can be placed in dynamic text fields. Used with Flash Communication Server, for example, dynamic text
fields can display chat room outputs.
Input Text Fields
User-entered text is placed into input text fields. As part of rich Internet applications, the input text field is the
most interactive element in Flash because it allows the developer and designer to create environments that
change with the needs of the users who visit the site. Everything from usernames and passwords to large
descriptive blocks of text can be entered here.
______________________________________________________________________________________
Introducing text
To see an example of how you might use a static text field, this next exercise adds to the earlier exercise in this
practical where a ball was tweened into a square. Use the following steps to add text:
25. Add a layer by clicking the Insert layer icon. Name the layer Text by double-clicking on the Layer 2 label,
as shown in Figure 1.15.
Figure 1.15 Renaming layer
26. Click the Text layer in Frame 1 and select the Text tool (‘A’).
27. Click the Stage to the right of the circle, and in the Properties Inspector set the type to 24-point Arial (or
Helvetica on a Mac). Click the Align Centre icon near the right side of the Properties Inspector. Type in the
message “Amazing Magic Circle Transformed to Square”, as shown in Figure 1.16.
28. Save your Flash movie as prac1c in the folder called 126.
9
Figure 1.16 Adding text to the Stage
______________________________________________________________________________________
Two more ways of colouring
29. Start a new movie. Draw a large circle in the middle of the stage. Once the circle has been drawn, click the
Paint Bucket tool (press K)
Figure 1.17
Figure 1.18 Fill Colour icon
30. Select a fill colour for the paint bucket tool, just as you did for the Oval tool. You can use the paint bucket
tool change the colour of any area. Try changing the colour in the circle
31. The Colour Mixer Panel provides another way of setting colours. Select the centre of you circle. Display
the colour mixer panel by selecting if from ‘Design Panels’ in the ‘Windows’
[Figure 1.19 the fill colour icon in the colour mixer panel]
10
The Linear Gradient Fill
32. First, ensure that your Colour Mixer Panel is displayed, to ensure that it is, go to Window | Design Panels |
Colour Mixer. Make sure there is a checkmark next to the Colour Mixer option. Your Colour Mixer panel
should look like this:
[Figure 1.20 The Colour Mixer panel]
33. Once you have found your Colour Mixer panel, click the drop-down menu in the panel and select Linear:
[Figure 1.21 Select Linear]
34. After you have selected Linear, pick a different colour from the colour chooser to the left of your linear
drop-down menu.
35. Now that you have a new colour picked, click anywhere in the wide gradient colour bar directly below the
Linear drop-down menu. Notice that the old colour and the new colour you picked gradually blend into
each other as you move from left to right:
[Figure 1.22 Notice the changes in your colour]
36. I am sure you would rather see these colours on the circle you drew in the previous page. Click the Paint
Bucket tool and click on your circle. You will find that your circle's colours now gradually shift with the
colours you specified in your gradient mixer in the Colour Mixer panel.
37. To change the colour, select the appropriate slider and change the colour from the colour (Fill Colour)
picker. You can also add a new colour to your existing two colours by clicking anywhere in your gradient
rectangle.
[Figure 1.23 You can easily add more colours]
11
To remove colours you have added, click on the colour slider you want removed and drag the mouse pointer
down. You are basically plucking out the colour you don’t want from the rest of the colours.
You do not have to click the Paint Bucket tool and then click on your object each time you make a modification.
Similar to the Fill, you can simply select your object with your mouse cursor and make any changes you want in
the Colour Mixer. You will find that any changes you make are immediately updated in your object.
The Radial Fill
The radial fill is different from the linear gradient fill you used. Instead of horizontally changing the fill colour,
the radial fill changes the colour radically - in a circular fashion.
38. First, ensure that your Colour Mixer Panel is displayed. Select the drop-down menu in the Colour Mixer
panel and select Radial:
[Figure 1.24 The Colour Mixer panel]
39. Once you select Radial, you will find a gradient colour slider similar to that of the Linear Gradient Fill.
After you have selected your colours, make sure you apply this Fill Style to your circle. Your circle should
look similar to the following image.
[Figure 1.25 Notice the radial changes in the colour]
Changing and adding colours are very similar to the method used to change or add colours in the Linear
Gradient method. After adding and rearranging colours on the slider, the following image displays a section of
the circle along with a small portion of the Mixer Panel.
[Figure 1.26 colour mixer]
12
The Fill Transform Tool
Now would be a good time to introduce the important Fill Transform tool. While you learned how to add
different fill effects, Flash includes a method where you can modify the fill's properties.
40. Click the Fill Transform button from the toolbox:
[Figure 1.27 the fill transform tool]
41. After the Fill Transform tool has been clicked, click on your object (circle). You should see something
similar to what is displayed in the following image.
[Figure 1.28 the fill properties for the Radial Fill]
42 You can scale, resize, and move the fill property around. Notice that the fill colour shifts, rotates, scales,
and moves according to what you modify in the Fill Property.
[Figure 1.29 Notice how the original fill style has changed]
43.
The Fill Transform tool can be used on the Linear, Gradient, and Bitmap fill types. Of course, since Solid
fill cannot be modified, the Fill Transform tool is of no use there. Experiment!
13
Tip: If you don't see the various Fill Transform features when you select your object after pressing the Fill
Transform button, no need to worry. Simply set your zoom to something like 50% or 25% and scale the Fill
Transform circle or rectangle to a relatively appropriate size. You can zoom back to 100% after you have scaled
the Fill Transform handlers down!
The Bitmap Fill
All of the previous fill methods you have encountered involved applying a colour to your object. The Bitmap fill
is different, because, instead of filling your object with a colour, you will be filling your object with the contents
of a bitmap image.
First, in order to use a graphic, we must first find one. You can use the image at
PantherLib/BCGD/COMP126/sample1.jpg
44. Import the image into your Flash document (file menu | import | import to stage). You should see the image
on your stage somewhere. Select it. You can immediately delete it, to get rid of it from the work area.
Don’t Don't worry - the image should automatically be kept in within Flash.
45. Select your circle, go to the Colour Mixer, click the fill type drop-down menu, and select Bitmap. You will
see a miniature of your image in the box at the bottom of the Colour Mixer. Click on it to select as the
filling bitmap. In this example we have used a turntable image.
[Figure 1.30 Select the turntable graphic that is displayed]
Your circle should now have the turntable image as its background. If not, click the Paint Bucket Tool and apply
this Bitmap fill to your circle. Your circle should look similar to the following image.
[Figure 1.31 How your circle looks now]
If you want, you can adjust the fill's properties using the Fill Transform Tool. Yes - the Transform tool works
for images also! Click the Fill Transform tool and select your circle again. The following is how my image
looks after I adjusted the orientation of the turntable a little bit.
14
[Figure 1.32 The Free Transform Tool is Awesome]
6.
Save your movie as prac1d in you 126 folder.
15
COMP126-2006: Practical 1 – Getting to know Flash
Review Page.
Question 1:
What do the 7 numbers required to specify a coloured rectangle hold?
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
Question 2:
What are the three parts that comprise the Flash system
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
Question 3:
Demonstrate drawing a circle and a rectangle without clicking on the toolbar.
Question 4.
Demonstrate drawing a circle. Your demonstrator will specify the thickness
and form of the outline (if any) and the colour of the interior.
Question 5.
Answer any question from step 6.
Question 6.
What happened in step 9.
Question 7.
What is the ‘magnet’ icon under ‘options’ when using the Oval tool used for.
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
Question 8.
Answer any question from step 24.
Question 9.
What is meant by ‘scrubbing’ an animation?
VERIFICATION
Show the demonstrator your finished versions of the exercises in this practical. You may also be asked to
demonstrate how you performed a specific task from this practical.
Name:
ID:
________________________
_________________
0
1
2
3
4
(demo sign & date)
16