Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Interactive Buttons (Flash Report1)


Published on

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

Interactive Buttons (Flash Report1)

  1. 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.. 1
  2. 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 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”. 2
  3. 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. 3
  4. 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”. 4
  5. 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 “FilePublish” and the flash was saved as swf. File. 5
  6. 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! 6