|
Learn Step-by-step how to write the
Flash Slide Presentation - Eyes Girl Game
application
Demo
/ Animation |
|
|
1. |
- Run the
Macromedia Flash Profesxional
8
- From
File menu, click
New, the New document dialog box
appears(see the following figure), from General
page select Flash Slide Presentation Icon
and click Ok
- System create
New Flash Slide Presentation (see the following
figure)
- Add 17 slides to this Flash Slide Presentation
:
- Add slide to
your presentation using the context menu in
the Screen Outline pane:
In the Screen
Outline pane, select the presentation
thumbnail. Right-click and select Insert Screen
from the context menu. The new slide automatically inherits
media from the presentation slide .(see the following
figure)
Note: Repeat this
step to add other slides
- The Flash Slide
Presentation with all slides added ...(see
the following figure)
Note From
File menu, click Save and The Name the
file - eyesgirl_game.fla ( Into
the folder - C:\EyesGirl_Game application)
| |
|
|
2. |
- From
File menu, select Import and click Import to Library - to import an image into the current
document.
The Import
to Library dialog box appears,
select all images to be import. (see the
following figure),
From this dialog
box, open the folder eyes_pic (
\EyesGirl_Game application\eyes_pic
) Select the following graphic file:
"0.JPG" "1.JPG"
"2.JPG" "3.JPG" "4.JPG" "5.JPG" "6.JPG"
"7.JPG" "8.JPG" "9.JPG" "10.JPG" "11.JPG" "12.JPG"
"13.JPG" "14.JPG" 4.gif", "15.JPG" "16.JPG" "17.JPG"
"Button.JPG" "operation.bmp" and click
Open
These images are imported to be storecd in
library: Library - eyesgirl_game
(see the following figure)
| |
|
|
3. |
- Select the
presentation
- From the
Library panel, drag these
graphics in the Document
window:
1- 0.jpg
2- Button.bmp (see the following figure)

Pic presentation |
- From
Window menu, select
Proprieties and then check
Proprieties. In the Component inspector - Proprieties panel do
the following:
enter 0
in the X text box and 0 in the X text box (see
the following figure)
- Configuring
the Document Properties:
In the Document window,
Right-click and select Document Properties from the context
menu. The Document Properties dialog box appears,
In this dialog box, select Contents -
(Width - 580 and height - 621) and then click OK. (see the following
figure)
1
- From the
Library panel, drag the following graphics:
("bt_plan.bmp", "bt_plan.bmp" ) in the Document
window. (in
Pic presentation)
Note From
File menu, click Save
- Add 2
Dynamic text boxes :
From Window menu,
select
Tools, Tools panel
dialog box appears ,
Tools

| |
1.
|
TextBox
- In the
Tools
panel, click the Text tool.
- Click
the text box you just drew to select it.
- In the
Component inspector - Proprieties
panel, do the following values:
| |
- Convert element to a
symbol,
Add Keyframe,
Add ActionScript
code -
List of elements on
the Stage to be convert:
("bt_plan.bmp", "bt_plan.bmp
1. |
"bt_plan.bmp" |
- Select this
element ("bt_plan.bmp") on the
Stage.
Right-click and select
Convert to Symbol from the
context menu. In the Convert to Symbol dialog box (see
Pic A) Click
OK.

Pic
A
|
- In the Component
inspector -
Properters
panel do the following (see the
following figure)
- Button
-
instance of: bt_plan
- name: btn_plan
- W
:
50.0
- H
:
19.3
- X
: 15.0
- Y
: 292.6
|

- Focus - Add
Keyframe to this button
- Select
the button ("btn_plan")
- Right-click and
select Edit in Place from the context
menu.
- In the
Timeline -
(see the following
figure)

Add to
Up Keyframe other Keyframe
Select
Up KeyFeame, Right-click and select
Insert Keyframe from the context
menu. New Keyframe name: Over appears
-
(see the following
figure)
- Select
Over KeyFeame. and add
2 Lines to the button ("btn_plan") on the
Stage
- In the
Tools
panel, select the Line tool,. near
the top of the button ("btn_plan") , draw
the 1st line
- In the
Tools
panel, select the Line tool,. near
the botton of the button ("btn_plan") , draw
the 2nd line
|
- add the ActionScript code:to this
button (symbol
converted)
Right-click
and select Action from the context
menu. In the Actions panel, type
the following ActionScript:
on (release) {
_root.presentation.txtVar_mouse.text= "0 , 0";
_root.presentation.txtstatus_A.text = " Girl Eyes -
www.puresoftwarecode.com";
// GoTo slide18 Screen behavior
this.gotoSlide(this.slide18);
} |
|
|
|
2. |
"Btn_Print.bmp" |
- Select this
element ("btn_print.bmp") on the
Stage.
Right-click and select
Convert to Symbol from the
context menu. In the Convert to Symbol dialog box (see
Pic A), type the name of the symbol:
btn_Print_F and select
Button Click OK.
- In the Component
inspector -
Properters
panel do the following (see the
following figure)
- Button
- name :
btn_Print_F
-
instance
of:
btn_Print
- W
:
59.0
- H
:
18.0
- X
: 96.3
- Y
: 293.9
-
|
- Focus - Add
Keyframe to this button
- Select
the button ("btn_Print_F")
- Right-click and
select Edit in Place from the context
menu.
- In the
Timeline, Add to
Up Keyframe other Keyframe
-
(see the following
figure)
Select Up
KeyFeame, Right-click and select Insert
Keyframe from the context menu. New
Keyframe name: Over appears
-
(see the following
figure)
- Select
Over KeyFeame. and add
2 Lines to the button
("btn_Print_F") on the Stage
- In the
Tools
panel, select the Line tool,. near
the top of the button ("btn_Print_F") ,
draw the 1st line
- In the
Tools
panel, select the Line tool,. near
the botton of the button ("btn_Print_F") ,
draw the 2nd line
|
- add the ActionScript code:to this
button (symbol
converted)
Right-click
and select Action from the context
menu. In the Actions panel, type
the following ActionScript:
on (release) {
printAsBitmap(0, "bframe");
} |
|
|
|
|
|
|
| | |
|
|
The presentation slide after all added
...
|
| |
4. |
- Select the
slide1
- From the
Library panel, Drag the graphic: ("1.jpg") in
the Document window - slide1
|
the
graphic Bitmap:
("1")
- Select
"1",
from Window menu, select
Proprieties and then check
Proprieties.
- In the
Component inspector - Parameters
panel do the following
- X
:
-290.0
- Y
: -308.4
- W :
580.0
- H :
599.0
see the following
figure
1
|
|
slide1 after 1st
added ... |
|
 Pic !S_1 | |
- add the ActionScript code:to this
button (symbol
converted)
Right-click
and select Action from the context
menu. In the Actions panel, type
the following ActionScrip
on (release) {
_root.presentation.txtVar_mouse.text= this._xmouse.toString()
+ " , " + this._ymouse.toString();
_root.presentation.txtstatus_A.text = " Girl Eyes -
www.puresoftwarecode.com";
_root.presentation.btn_Print.enabled = true;
if (((this._xmouse >=-46) && (this._xmouse <= -1)) && ((this._ymouse
>= -256) && (this._ymouse <= -206))) {
// GoTo slide1 Screen behavior
this.gotoSlide(this._parent.slide1);
break;
}
if (((this._xmouse >=-166) && (this._xmouse <= -119)) && ((this._ymouse
>= -256) && (this._ymouse <= -206))) {
// GoTo slide11 Screen behavior
this.gotoSlide(this._parent.slide11);
break;
}
if (((this._xmouse >= 73) && (this._xmouse <= 122)) && ((this._ymouse
>= -256) && (this._ymouse <= -206))) {
// GoTo slide13 Screen behavior
this.gotoSlide(this._parent.slide13);
break;
}
if (((this._xmouse >=-46) && (this._xmouse <= -1)) && ((this._ymouse
>= -196) && (this._ymouse <= -149))) {
// GoTo slide2 Screen behavior
this.gotoSlide(this._parent.slide2);
break;
}
if (((this._xmouse >= -106) && (this._xmouse <= -58)) && ((this._ymouse
>= -196) && (this._ymouse <= -149))) {
// GoTo slide10 Screen behavior
this.gotoSlide(this._parent.slide10);
break;
}
if (((this._xmouse >=14) && (this._xmouse <= 59)) && ((this._ymouse
>= -196) && (this._ymouse <= -149))) {
// GoTo slide12 Screen behavior
this.gotoSlide(this._parent.slide12);
break;
}
if (((this._xmouse >=-46) && (this._xmouse <= -1)) && ((this._ymouse
>= -135) && (this._ymouse <= -87))) {
// GoTo slide3 Screen behavior
this.gotoSlide(this._parent.slide3);
break;
}
if (((this._xmouse >=-106) && (this._xmouse <= -58)) && ((this._ymouse
>= -135) && (this._ymouse <= -87))) {
// GoTo slide8 Screen behavior
this.gotoSlide(this._parent.slide8);
break;
}
if (((this._xmouse >=-166) && (this._xmouse <= -119)) && ((this._ymouse
>= -135) && (this._ymouse <= -87))) {
// GoTo slide9 Screen behavior
this.gotoSlide(this._parent.slide9);
break;
}
if (((this._xmouse >=14) && (this._xmouse <= 59))&& ((this._ymouse
>= -135) && (this._ymouse <= -87))) {
// GoTo slide6 Screen behavior
this.gotoSlide(this._parent.slide6);
break;
}
if (((this._xmouse >= 73) && (this._xmouse <= 122)) && ((this._ymouse
>= -135) && (this._ymouse <= -87))) {
// GoTo slide7 Screen behavior
this.gotoSlide(this._parent.slide7);
break;
}
if (((this._xmouse >=-46) && (this._xmouse <= -1)) && ((this._ymouse
>= -75) && (this._ymouse <= -27))) {
// GoTo slide4 Screen behavior
this.gotoSlide(this._parent.slide4);
break;
}
if (((this._xmouse >=-106) && (this._xmouse <= -58)) && ((this._ymouse
>= -75) && (this._ymouse <= -27))) {
// GoTo slide16 Screen behavior
this.gotoSlide(this._parent.slide16);
break;
}
if (((this._xmouse >= 14) && (this._xmouse <= 59)) && ((this._ymouse
>= -75) && (this._ymouse <= -27))) {
// GoTo slide14 Screen behavior
this.gotoSlide(this._parent.slide14);
break;
}
if (((this._xmouse >=-46) && (this._xmouse <= -1)) && ((this._ymouse
>= -15) && (this._ymouse <= 33))) {
// GoTo slide5 Screen behavior
this.gotoSlide(this._parent.slide5);
break;
}
if (((this._xmouse >=-166) && (this._xmouse <= -119)) && ((this._ymouse
>= -15) && (this._ymouse <= 33))) {
// GoTo slide17 Screen behavior
this.gotoSlide(this._parent.slide17);
break;
}
if ( ((this._xmouse >= 73) && (this._xmouse <= 122)) && ((this._ymouse
>= -15) && (this._ymouse <= 33))) {
// GoTo slide15 Screen behavior
this.gotoSlide(this._parent.slide15);
break;
}
}
| |
|
|
5. |
List of Slides and the Graphics Cooresponding
from the
Library panel :
- Select the
slide2, From the
Library panel, Drag the
graphic:
("2.jpg") in the Document
window
- Select the
slide3, From the
Library panel, Drag the
graphic:
("3.jpg") in the Document
window
- Select the
slide4, From the
Library panel, Drag the
graphic:
("4.jpg") in the Document
window
- Select the
slide5, From the
Library panel, Drag the
graphic:
("5.jpg") in the Document
window
- Select the
slide6, From the
Library panel, Drag the
graphic:
("6.jpg") in the Document
window
- Select the
slide7, From the
Library panel, Drag the
graphic:
("7.jpg") in the Document
window
- Select the
slide8, From the
Library panel, Drag the
graphic:
("8.jpg") in the Document
window
- Select the
slide9, From the
Library panel, Drag the
graphic:
("9.jpg") in the Document
window
- Select the
slide10, From the
Library panel, Drag the
graphic:
("10.jpg") in the Document
window
- Select the
slide11, From the
Library panel, Drag the
graphic:
("11.jpg") in the Document
window
- Select the
slide12, From the
Library panel, Drag the
graphic:
("12.jpg") in the Document
window
- Select the
slide13, From the
Library panel, Drag the
graphic:
("13.jpg") in the Document
window
- Select the
slide14, From the
Library panel, Drag the
graphic:
("14.jpg") in the Document
window
- Select the
slide15, From the
Library panel, Drag the
graphic:
("15.jpg") in the Document
window
- Select the
slide16, From the
Library panel, Drag the
graphic:
("16.jpg") in the Document
window
- Select the
slide17, From the
Library panel, Drag the
graphic:
("17.jpg") in the Document
window
- Select the
slide18, From the
Library panel, Drag the
graphic:
("0.jpg") in the Document
window
| |
|
|