Report on Flash: Interactive Buttons
.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..
. 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 10
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”.
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
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.
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”.
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.
. 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!