Create a Full Screen, Scalable Flash Website: Part 1
Tutorial Details
- Difficulty: Intermediate
- Program: Flash CS3+
- Estimated Completion Time: 45 mins
- Create a Full Screen, Scalable Flash Website: Part 1
- Create a Full Screen, Scalable Flash Website: Part 2
- Create a Full Screen, Scalable Flash Website: Part 3
In this tutorial you’ll learn how to create Flash sites that intelligently fill all the available space in the viewport, moving or resizing certain assets to make the best use of the space.
Final Result Preview
Open the preview in a new window and resize the browser to see how the site scales.
Section 1: Navigation
Don’t like ads? Download the screencast.
Section 2: Header
Don’t like ads? Download the screencast.
Section 3: Main Content
Don’t like ads? Download the screencast.
Tune in again for Part 2, where we’ll be adding interactivity to our scalable website. Thanks for watching!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Franci Zidar
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Activetuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Good stuff
Thanks…
Nice stuff,
but the problem with scalable flash websites is that if you scale is smaller and smaller with your browser screen, everything turns into a mess.
I use SWF-Fit for all my websites.
Very easy to use with a simple js-script.
very usefull…. thanks
Excellent tutorials Franci. I like that you explain and demo your code as you go and not just say this is what it has to be. You give reasoning for it. Looking forward to part two.
Hey!
I’m really glad you like it.
@Treestar
Here is the demo with swffit:
http://proxima.si/tutspreview/
I provided the swf without the js and html for now so it lacks the minimum width and height settings. The link I’m attaching here however includes it, so you can see swffit in action. We’ll do all that and more in the last chapter when we publish the site.
Hi Franci.
Točno to sem potreboval v obliki tutoriala. :) Zakon. hvala.
LUka
for all english speaking i am just thrilled about this tutorial and i am thanking Franci in our native language. :)
looking forward to part 2.
Great just tutorial i was looking for. Looking forward to part 2.
Tnx Franci and this site for sharing knowledge.
Luka from Slovenia
:(
very bad sound is very low
and the size of the font in the actionpanel is very small
Is it quiet? Sorry, I don’t know what’s causing that. I can hear it OK on my PC :S
Hmm, try viewing it in fullscreen to see the actions panel’s font at a decent size. That better?
Sound should be fine, tried it on a couple of systems, no problems. As for the small font, the resolution is higher so if you have a small screen, you might have a problem, but in my experiance people working wih web have larger displays and I choose to do tutorials in higher resolution to not have problems with cluttered panels, it’s a double edged sword, I try to choose the option which is better for more people. Anyway you have the code in the fla so if you can’t solve the issue you can still load it up and see the code there.
Hey Franci, nice tutorial. Be good to see this built with classes and use SWF Address for the navigation.
Otherwise good start ;)
Excellent tutorial but i would really love to see this type of tutorial done with classes
can’t wait for part two Franci ( I’m not complaining :) I thank you and all the brilliant people at
active tuts + thanks guys and keep up the awesome work. :)
I would love to show you how to build a class that will do all that for you. You already have one at greensock though that does the job very well, but you do have to be a member($).
I’ve really tried to make this tutorial as straight forward as possible for someone who doesn’t know much OOP(object oriented programming) and explaining classes along with all the programming that goes into creating a site would make it hard to keep things “digestible”.
Do keep suggesting though, will give me an idea of what you would like to know.
Wow, bright clear and straight to the point. Nice Tuts!
Very nice. Good Tut more of that would be great.
Franci, Thanks for the Nice tut, when will part 2 & 3 be posted??? :) Can’t wait!
Love this tutorial straight to the point… easy to follow… When will part 2 & 3 come out. Btw i would like to see the same tutorial (same website but build with classes or a framework) then people can choose what they like to work with. Again great tutorial. Could be made a whole series of tutorials, i think this gives a great starting point.
I love you deep from my heart.
Looking forward to part two >.<!!
will you be teaching us on how to make the preloader as well? i would love the learn that
Just a nice Tutorial ! Good explanations ! Nothing to claim.
Looking forward to part two >.<!!
Hi, I can’t open the source file in Flash CS3. Is it only for CS4 ?
Hi,
very nice screencast, finally some good tutorials how te make a website in Flash, looking forward to Part 2.
Greetz
Painless
Thank you, Franci; You Are the Best!
Keep the good stuff coming!
F. R. A.
Thank you very very much for this tutorial Franci!
I’ve been waiting soooo long for something like this, Thank you again.
I’m looking forward for part 2!!!
the .fla wont open!! WHY?? Great tut tho’
I think its a great tutorial im a newbie, I cant get the file to run fully, comes up with error ‘Fonts should be embedded for any text that may be edited at runtime, other than text with the “Use Device Fonts” setting. Use the Text > Font Embedding command to embed fonts.’ any help please?
Thanks
Raz
Umm… Where are parts 2 & 3? Part 1 was posted over a week ago! Don’t leave us hanging here. :-/
Don’t worry, they’re coming :)
@Raz
I used some font’s that are not attached with the file. It’s really not an error so much as a warning, that your font’s are not available and therefor won’t be displayed at runtime(in player). But you still get some default font usually Times New Roman. Feel free to change the fonts to any you might like.
Most likely the problem are the fonts in the navigation. So just change those to something you have and the warning will be gone. Otherwise the fonts I used can be found here.
http://mplus-fonts.sourceforge.jp/mplus-outline-fonts/design/index-en.html#fonts
@feverdog
It’s CS4. I will include the CS3 version with the 2nd part which also has all the positioning in there, so that should help you.
brilliant! you are a star!
Love the tutorial, can’t wait for part 2!
Ok in my opinion Part 2 can come now (: i check this site everyday because of the Series. Nice work so far !!
WOW this is one of the best tuts on this site. When are we going to see part 2. great JOB dude.
Part 2 should be published sometime soon. I delayed it a bit because, after reading the comments, I wanted to add the SWFAdress and some other improvements into the site that I didn’t initially plan to do with this part.
Anyway it’s coming soon, and hopefully, it will meet your expectations. :)
Part 2 should have been posted at least the same week as part 1. how can someone learn from this?
learn a few things then wait weeks, and learn some more? I love this site, but timing is off at times.
No bad words though from me. just a logical step in my eyes.
Point taken. Sometimes scheduling doesn’t run as smoothly as we’d all like, but multi-parters should definitely follow each other pretty quickly (as is usually the case).. Part two coming tomorrow.
And loving it! i consider this tutorial mandatory for aspiring flashers!
Heck even I learned once again a few different approaches which makes me love actionscript / flash even more.
Nice work!
Very educative tut. Wanted to find out how it’s done for quite some time now ;)
Keep up the gr8 job.
Can’t w8 for part 2. Bet it’ll be equally clear and fluent
(no pressure ;) just do it :)
TY
hi, where is part 2? i saw him before but i cant find him now…
thx
It’s coming! We regretfully scrambled up the second part by missing off the initial sections. They’re currently being converted so the whole lot will be re-posted as soon as possible. Sorry and thanks for your patience :)
Hey thanks for the time you spent on the tutorial! However, I can only view the first part, and I cannot see the video for the rest, is there a way you can send me a link to the videos?
Hi .thana,
Try these links:
http://blip.tv/file/get/Activetuts-fullScreen2629.flv (Part 2)
http://blip.tv/file/get/Activetuts-fullScreen3113.flv (Part 3)
Thanks alot for this great and very useful tutorial.
I’m done with the first one, but couldn’t watched the second because it stopped at around the 3 min mark. Then I tried downloading the screen cast, and it stops downloading 14mb mark out of the 82mb :(
Thanks Michael! I think the problem is totally of my part, because I think China has blocked the website hosting the videos. :(
Wow,
thanks a lot.
watching the next part right now.
Hope to secced full-flashing my new portfolio :)
I love this tutorial. It is just what I have been looking for.
I have a problem I am having trouble figuring out. I have been constructing the code myself, and when I run the for loop in the navigation actions section, I only get three buttons with a frame and names. The fourth is there, but no frame or name. When I change the for loop i<5 I get all the buttons, but of course I get a null error.
Can you help find out what I am doing wrong?
Thanks
Mike
I have a problem )) a newbish one .. sitting on it for an hour :D
for ( var i:Number=0 ; i<4; i++ ) {
var navItem:navItem = new navItem;
navContainer.addChild(NavItem);
}
i'm writing this .. and it tells me there is a cyntaxys error .. need to put a rightbrace .. and if not that then says that there is no such method as navItem O_o
what am i doin wrong? O_O
ow yeah , and also getting this ” access of undefined property onFrame” and same for NavItem O_O although i have done everything that is in tutorial .. maybe i’m too noody and just don’t know something
Hi Enok,
According to the tutorial , the navitem should be capital “NavItem”
var navItem:NavItem = new NavItem;
NavItem movie clip have to export it.
right click the NavItem movieclip on the library,
choose “Linkage “,select “Export for Action Script”
Click OK. The window appears saying that since a class ‘Shuttle’ was not found, Flash will automatically generate such a class. Click OK. And you are all set.
Seriously man, these are GREAT. Relatively new to Flash and Actionscript, but you make these so easy and so simple I’ve just gone through the first series in 30mins and understood it straight off. Really good work mate,
Cheers
But one more thing, and I might be being newbie thick here, but why the two functions?
stage.addEventListener(Event.RESIZE, onStageResize);
addEventListener(Event.ENTER_FRAME, onFrame); ??
Have commented out the onStageResize function and it all works still as it refreshes 30 times a second on the ENTER_FRAME function?
If you can let me know if this is best practice or something, that would be great, as I’m happy to have both if it is.
Cheers
I am using CS5 and I can’t get the welcome_content text to flow as it does in your movie, the font is scaling, but i get a distorsion of the text (the font is actually growing wider).
It does the same with your source file.
Is there an option I miss, in a strange hidden property panel?
thanks in advance
Great tutorial by the way
Can anybody help me :)
I’m stuck on the second VIDEO . . . I’ve done all the coding but i cant see my NavItems.
(I’m using SC5)
THANKS
LOL – sorry its CS5 – well you know what i mean
where is the second part of the tutorial ? the functionality for the buttons? please post it !!! thank you
Hey Loredana,
It’s here: http://active.tutsplus.com/tutorials/web-design/create-a-full-screen-scalable-flash-website-part-2/
Enjoy :)
thank you once again , it is very usefull . thanks for the tutorial .
thanx a lot Mister Master Franci for this very good tuto ! very helpfull!
Franci, can you drop me an email?
pucknell@fitc dot ca
Hi there, as I was watching this tutorial.. I was like.. Wauw. But the problem with my current knowledge about Flash to have succes in following this tutorial is that it is.. nothing :(,’ofcourse i’ve gotten some lessons at school, but don’t me start about the quality of that :S.
The thing is, I really want to get the this level on creating these websites. But i’m already stuck at what actionscript or whatever I need to use with my CS5 program.
Perhaps there is a easy way to explain this to a “newb” like me or perhaps a link to a good tutorial that helps understanding your tutorial more..
(When I want to do some coding… it says I can’t ?)
Much friendly handshakings,
Josco
p.s. I’ll try to discover it myself ofcourse, but all help is appreciated!