Kukuh Farrizal Blog

This Tutorial will show you how to create a nice and Simple flash website using Adobe Photoshop and Macromedia Flash MX. Some knowledge is assumed in this article, but not, watch this video, it will show you how to use Macromedia flash.
 Edited by Kh2, Hanna.lucca, Teresa, BR and 9 others

Steps

1. 1
   Open your Macromedia Flash and click on Flash Document in Create new category.
2. 2
   Press "v" and click on the grey space , then in the Properties click on Size:550 x 400 pixels button on the top of the Publish: settings . If the Properties windows is not open, Press Ctrl + F3 or go to window\Properties\Properties and check it.
3. 3
   Change your workspace size to 800 X 600 and press OK.
4. 4
   Now We're gonna set a background for our Website:
   • Create a Layer and name it as background-image (the name is Optimal and you can any name you want) - check the tips if you don't know how.
   • Press Ctrl + R to insert your image or go to Files \ Import \ Import to library and the drag it to your stage.
   • Remember that your background image must be in 800 X 600.
   • Put your image's location on x=0 , y=0 to fit it on the stage.
   • As we have nothing to do with this layer from now... lock it. (Click on the dot which is under the lock image in the Timeline window.)
     • 
       Note that to change your image size, open it with Photoshop, Press Ctrl + Alt + I then disable the Constrain Proportions and change your image size to 800 X 600 Pixels.(more in Tips and warnings sections)
5. 5
   Create the button for your website's parts.
6. 6
   Open your Photoshop and do the following:
   • Create a new image in 120 X 120
   • Press "W" and click on stage.
   • Press click on Eraser, then Right click on it and choose "Background Eraser tool"
   • Erase the whole stage.
   • Choose the shape tool then right click on it and choose "Rounded Rectangle Tool".
   • Create a shape on your stage and change the color to black. (The color is Optimal).
7. 7
   Put highlights on the button open your Photoshop and do the following:
   • Click on the stage and OK the Massage.
   • Press "M" and make a rectangle which take the half of our button.
   • click on Gradient tool , if it's on Paint Bucket tool , right click on it and change it to Gradient tool.
   • Change the Opacity to 17%.
   • Choose the white color.( some color which is antonym with Black or color you have chosen)
   • Now color the rectangle with the Gradient tool for once or twice.
   • press "M" and click on stage to dis select the rectangle.
   • Press Ctrl + Shift + S and Save your file in .PNG format.
8. 8
   
   My Button: ( don't add text, we will add it in Macromedia Flash)
9. 9
   Add the buttons to your work:
   • Go back to Macromedia Flash
   • Create a Layer (top of the Background , other wise the content of the Layer will not show) and name it "button" ( The name is optimal)
   • Press Ctrl + R to import the button for the first time after that the image will be saved into your library and you can drag it from library to stage.
   • I have inserted 5 buttons
   • Set the location of buttons as : Y=18(for All buttons) and x= 137.0 - 244,0 - 351,0 - 458,0 -565,0
10. 10
    Now we have to add the text:
    • Press "t".
    • Choose your Font Face.(like Arial)
    • Choose your Font size as 20.
    • The Choices are optimal.Chosen by me (Home, Downloads, Wallpapers, About us, Contact us)
    • Set the location of each text as : y= 64 (for all) , x= 280 - 170,0 - 385,0 - 489,0 - 600
11. 
    11
    To test your work press Ctrl + Enter
12. 12
    We are gonna make these buttons change to anther color when we bring mouse over them.
    • First we need to create another button as pressed in Photoshop.
    • Open your button.
    • Press "M"
    • Select all your button.
    • choose the normal brush and change the Opacity to 80%.
    • Change the color of your brush to Black and color the whole button for twice.
    • Press Ctrl + Shift + S and save it as Pressed in .PNG format.
13. 13
    Go back to your Macromedia:
    • Create a new Layer in the top of the Button Layer.
    • Insert the Pressed buttons to your stage and give them the same location as buttons which you have inserted.
    • add the texts and give them the same locations as the texts which you have created. you can also cope & paste them too(only for text)
14. 14
    Make buttons useful:
    • Choose your pressed button.
    • Right click on it.
    • Choose "convert to Symbol"
    • Choose button and the name of symbol is up to you!
    • Press OK
    • double click on your symbol.
    • drag the Keyframe from "UP" to "Over".
    • double click on stage to get back.
    • Do this for all buttons.
15. 15
    Now we're gonna give this button links.
    • Open the "Behavior window" by pressing "Shift + F3"
    • Now click on your button ( pressed button which is in some kinda blue color).
    • As you have selected the button , click on the Blue Plus button in the Behavior window.
    • Choose "Web" from list and write your link.
    • You can also choose the window open in which window.(_blank, _same, ...)
    • Open the scripting windows and change release to press.
    • Do this for all the buttons.
16. 16
    Now let's make our website look better.
    • Go to your Photoshop
    • Create a new image in 548 X 320
    • Erase the background
    • Choose the paint bucket tool and set the Opacity as 44% and change the color to black.
    • Fill the background for twice or once.
    • Save it as .PNG
    • Create a new layer on the top of the all layers.
    • Now add it to your Work in this location: x=137 , y=138 px
    • Write your content on it.
17. 
    17
18. 18
    This Step is important.
    • Create a new Layer on the top of all layers. Whether if you want to add a new layer must be under the layer.
    • As you know you have to add a keyframe for each website page.
    • Add nothing to this layer and keep it empty
    • on this layer add empty keyframe on the keyframes which contains your pages.
    • Add this script to your empty keyframes: stop(); ( click on the keyframe , on the properties windows , clock on the arrow which is on the question mark)
19. 19
    Do the final designs:
    • In Macromedia flash
    • Choose rectangle tool.
    • delete the border.( Click on the pencil then click on no color)
    • set Fill color as Black.
    • Make your rectangle
    • Change w to 800 and h to 100.
    • set the position as [x=0,y=500]
20. 20
    You could also add some other images and website's logo and some texts like privacy, .... to your website.
21. 21
    Now it's time to publish our website.
    • Press "V" and click on the grey stage.
    • Choose "Publish settings".
    • On the window which appear choose "Formats" on the top of the window.
    • Check the ".HTML" .
    • Click on "Publish"
22. 22
    Now you have published your HTML page. We have to make this website to fit to any screen.
    • Open the Html Code with Notepad or Wordpad.
    • Find this code:
      • <object codeBase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="480" height="125"><embed class="misspell" type="application/x-shockwave-flash" src="flashmovie.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" ><="" object="">
23. 23
    Replace the red codes with the previous code:
    • 100%" height="100%"> 100%" height="100%" SCALE="exactfit" pluginspage="http://www.macromedia.com/go/getflashplayer" />
24. 
    24
    Finish