1

Report on Flash: Interactive Buttons ----Tong Xu

Ⅰ .The Significance of Flash for Me

Flash is quite useful in adding interactive features to websites and

providing flexible windows to introduce something to users. In my

dissertation proposal, flash means a great deal as most 3D chatting will be

realized in flash website.

Ⅱ . The Introduction to this Flash Project

This project was designed to offer brief introductions of core modules

that I learnt during 2nd semester for iMedia Workshop. Four pictures were

placed on corners to signify the modules. Besides pictures, there were

buttons ready to help users to know what the picture referred to. When

users clicked the button, related brief introduction appeared in the central

square. I paid more attention to make buttons more interactive, such as

how to change colors of the buttons and created effects of jumping text..

2

Ⅲ . The Process to make the Flash Project

1. Prepare pictures in Photoshop. I found four pictures that were

representatives of workshop modules, ie, Pure Data, Arduino, 3D Max,

Processing, and modified them in Photoshop to ensure that the size of

each picture was 100×100pixels.

2. Set the Stage in Flash. As I needed to insert the flash file into

Dreamweaver, it was necessary to calculate the size so that the project

would transform into the website properly and keep the consistence of

the web. Through searching, I set the stage as 607×450pixels and

chose the same background color (#C0DFFD) as it was in the website.

3. Import modified pictures to the library, drag them to the

stage, and place them on four corners.

4. Make interactive buttons.

● When clicked “New Symbols” on the left bottom corner of library

panel, a dialogue box popped up. Then I used “Pure Data” as its

“Name”, and ticked “Button” for its “Type”.

3

● On the backstage to make the button, I adopted “Rectangle Tool”

to draw a rectangle, and defined its color as grey.

● On the timeline, there were four options, “Up”, “Over”, “Down”

and “Hit”, and they were used to show the movements of the

mouse. On the layer of “Button1”, I set color to grey when the

mouse was “Up”, and yellow when the mouse was on other status.

● I added a new layer called “Title”. When the mouse was “Up”, the

text was “What is it?”, and when it was on other status, the text

was “Pure Data”. The colors when mouse was “Over” and

“Down” were different, the former was pink and the latter was

blue.

● To make the button showed effects of jumping texts, I moved the

position of text. When the mouse was “Down”, I moved the text a

little right than it was on “Over”. In the final project, when

clicking, you would play with the button.

● In this way, the button of “Pure Data” was finished, and other

three buttons were done in the same method.

4

5. Drag buttons into the stage and match each button with

its related picture. To clearly signify the relation between pictures

and buttons, I added four more layers, and used “Line Tool” to

connect pictures and buttons.

6. Provide brief introductions when clicking the button.

● On the stage, I added a new layer called “Template”, which was

used to make sure the introductions of each module appeared at

the same place. Then I drew a square in the centre of the stage. To

prevent the texts from being covered by the template, I dragged

the layer “Template” to the bottom of timeline.

● I clicked the button “Pure Data” twice, and entered the backstage

to modify the button again. What was interesting here was that I

was able to see (rather than modify) other objects on the stage at

the button backstage. Then I added a new layer called “Intro”.

5

● On the layer “Intro”, I “Insert keyframe” when the mouse was

“Down”, and input introduction text, and then put it at appropriate

place inside the template square.

7. Back to the Stage and test movie.

8. After checking everything, I clicked “FilePublish” and

the flash was saved as swf. File.

6

Ⅳ . The image of the final project is as follow, and if

you are interested in this flash project, browse the

website and play with buttons! http://richie.idc.ul.ie/~xut/1workshop2.html