Photoshop CS2 and Flash CS3 – A Perfect Combo

20 09 2008

I never knew designing a website, would be so easy in flash. Flash CS3 and Photoshop CS2, make a perfect combination when it comes to designing ‘SIMPLE’ Flash websites, with great looking pages. If you don’t know how to work with flash, then lets get started on how its done.

First design your website in photoshop, using all the intended graphics and the layout as you may want on your flash website. Write random text, just for referrence to be used in the flash (Note: This Text will not be editable, using the above mentioned version of photoshop, so it is just for referrence).

Once you are done with the PSD, simply import it, and check the option to maintain the PSD Resolution in flash at the bottom. Wola, you have just completed your very first step.

Coming to the next part of flash. Re-arrange the layers, if needed. Now lets get to rendering this design useful. Add flash text layers, on the referrence text layers, and delete the referrence text which is non-editable now in flash.

Navigation.

Designing Simple Buttons.
Go to Insert, create a ‘New Symbol’.
Choose Buttons from the menu and press Ok.
Once in the Symbol panel, write any text, say ‘Home’ in the center.
Navigate to the timeline, you’ll see 4 frames there.

Up – Instance when the mouse is not over the button.
Over – When mouse moves over the button.
Down – When mouse presses on the button.
Hit – When mouse is released, after being pressed, while on the button.

You may choose different colours for all these instances for your text. The button will not have the feel of an HTML button.
Move out of the symbol, by clicking on ‘Scene 1′ below the time line. Go to Windows Library, and add the button you just designed. Position it at your will.

Coding the button.
Right click on the button, and go to actions.
If you want the Button to navigate to another URL, then add this in the actions pane. 

on (release) {
 getURL(“”);
}

- “URL HERE”

Otherwise if you want it to move to some other instance of the movie, then type.

on (release) {
 gotoAndPlay(1);
}

The gotoAndPlay can be replaced by gotoAndStop depending on where the button will be navigating to.
The (1) Shows the frame number, to which the button will actually take you to.

Flash CS3 offers more options when you click on the Script Assist, and have the Mouse Selection on

on(release) – The release could be replaced by Press, Roll over etc. We use release to simplify things for us. Now that your button is ready, you can code other buttons in the similar way.

The actual website.
The actual website is recommended to be created on a single movie, reason being the user would not be interested in loading your content again and again. Make different pages on different frames. Then click on the frames and go to Actions. In Movie Clip control, Click on STOP. Repeat operations on all frames. This will allow you to design somewhat simple static pages in Flash. Use your buttons to navigate to the individual pages by selecting their frame number.

Depending on the design you made, the site could be very pleasing with Flash support, in no time!


Actions

Information

Leave a comment