Flash layout tutorial

[SimplyTech]

How to make a flash layout
For this tutorial I will be using Flash 8 but it should work on almost all flash versions.
Please note: This is VERY basic and if successful at a later date i will be showing you how to create preloaders etc

I am assuming you already have a layout created in photoshop etc
http://img291.imageshack.us/img291/4227/1tp2.png (http://imageshack.us)
Copy everything except for the navigator onto flash and it should look something like this
http://img137.imageshack.us/img137/5043/2yd6.png (http://imageshack.us)
Rename where it says layer one content boxes.
Copy over one button of the navigator now
http://img139.imageshack.us/img139/3824/3nz1.png (http://imageshack.us)
Have it highlighted and push F8 Name it Nav button and make sure button is selected and push ok
http://img111.imageshack.us/img111/8681/4gl3.png (http://imageshack.us)
The double click on the flash button and on the timeline at the top right click underneath over and click insert keyframe and it should look like this
http://img111.imageshack.us/img111/8681/4gl3.png (http://imageshack.us)
Make sure you are in the ‘over’ frame and the button is selected and go to the top and click Modify>Bitmap>Trace bitmap
http://img291.imageshack.us/img291/9059/6bu1.png (http://imageshack.us)
Color threshold: 1
Minimum area: 1
Curve fit: Pixels
Corner threshold: Many corners
Then it should be editable in flash and look like this
http://img62.imageshack.us/img62/2782/7wh0.png (http://imageshack.us)
Click of it and make the colour of the centre whatever colour of the button you want it to go when you rollover it.
So your layout should look roughly like this
http://img145.imageshack.us/img145/3070/8rp6.png (http://imageshack.us)
Double click anywhere except the button to get out of ‘button mode’ and push Ctrl + Enter to test it so far
Now for the more difficult part
Check at the bottom if theres an actions bar if there is open it by clicking the arrow and if theres not push F9 to open one
http://img291.imageshack.us/img291/2427/9ao4.png (http://imageshack.us)
Select frame 1 by clicking on it on the timeline and in the actions panel at the bottom copy and paste this stop();
http://img231.imageshack.us/img231/7686/10ux9.png (http://imageshack.us)
Then click anywhere on the page to deselect the frame and then click on the button and copy and paste gotoAndStop(1); into the actions bar

Now copy down the button down to make the full navigator. On the second button change the action to gotoAndStop(2); on the third gotoAndStop(3); on the forth gotoAndStop(4); etc until they are all changed

Then draw a text box where you want the text to go on your layout and write in them content goes here
http://img138.imageshack.us/img138/5288/11hg9.png (http://imageshack.us)
Now on the top timeline right click and push instert keyframe and make as many frames as you want pages
http://img138.imageshack.us/img138/7072/12wb4.png (http://imageshack.us)
Your now nearly done but first create another layer using the piece of paper with a + sign over it and call it button text and add text over the buttons eg home etc
http://img291.imageshack.us/img291/876/13qr7.png (http://imageshack.us)
Finally change the content in each frame to whatever you want it to be for that page

[:Blob]

Nice. Live Preview?

[SimplyTech]

Nice. Live Preview?
i deleted it lol but it basically does this without the moving text
http://img96.imageshack.us/my.php?image=templatesw3.swf
moving text will be added in the next tutorial

[Josh-H]

Wow :D

Wrong section but fantastic +REP

[SimplyTech]

Wow :D

Wrong section but fantastic +REP
I think it should be here lol because the people that would follow it are in this section

[ColyTom]

If you use a flash layout, can you still have radio stats and a radio etc ?

[ADAM:]

Hey

Great little tutorial + Rep

[Nick14]

Adam you unblock me on msn pleas

[Catchetat]

Moving text is easy lol, but then I don't really like this tutorial.

what does "Trace bitmap" do? I think you should explain the process step by step.

[SimplyTech]

it lets you edit the picture on flash

[ColyTom]

Can you put a radio onto your site if you use a flash layout ?

[SimplyTech]

Can you put a radio onto your site if you use a flash layout ?
yes in the next tutorial ill show you how to export it into html

[ADAM:]

Hey

Cool. I will try these tutorials out in a minute. I want to become good at flash.

[ColyTom]

yes in the next tutorial ill show you how to export it into html
Ok, cool

[The Voice]

I've always wanted to know how to do this however, all the tutorials are complicated and aren't easy to understand. Thanks Lite because this is really good and easy to understand. :eusa_danc

+Rep :eusa_clap

In your next tutorial, will show us how to get text from a text file (.txt) in a flash webpage, I know you can do it but dont know how lol. :p

Anyway, Nice Tutorial. :D

[SimplyTech]

ty all much appreciated
pm me with what u want me to cover in the next one so far i have
Html
Preloaders
Txt intergration
Possibly how to make a game for your site
All my templates free

[ColyTom]

Cool, I can't wait for the next one

[[Oli]]

http://users.telenet.be/olivierp/
flash :)

[SimplyTech]

ty oli ill show how 2 make scroll bars 2 next time

[ColyTom]

Cool, I forgot about scroll bars

[Catchetat]

I know how XD

You can add action to it or by inserting this scroll bar component.

Btw Oli please reply back with your email. I need help with flash and stuff :P

[ebay]

yaya- first good tutorial

[SimplyTech]

Yay my tutorial was a success

[ColyTom]

A big success

[Luckyrare]

Alot of tutorials you are requesting can be found on pixel2life.com :->

Also moving text is so simple, if people have payed for the Macromedia Flash they should know how to do it...

If you don't, google it...

Anyway its a tutorial and its nice to help people, rep+ because I am so nice...

thanks,
Danny

[ColyTom]

I don't like that site much. I prefer Lite's tutorials

[SimplyTech]

when i first started flash sevral years ago i couldnt understand and tutorial cause they said things like now create a button and add stop(); onto the first frames action panel and i just never got it so this is simple and u never repped me danny rofl

[Evasion]

That's a heaps good tutorial. Mabey add a demo and it could be moved to the Tutorial section.