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
Great job :)
Thank you so much for this tut i have been looking for something like this for some time.
Tutorials should teach not instruct. Why don’t you start from the beginning on how you get you were the tutorial actually starts?
Hi… I couldn’t view these video. It says “Sorry, we’re unable to play this episode.”
Hi Jeen – that’s strange. I can only suggest you try again as all 3 parts to this tut work flawlessly here. Failing that, you can also download the source .flv from the links under each section.
Good luck!
Hey Ian, Section 2: Header video doesn’t play. When the link to download the screencast is clicked, it’s throwing a 403 error.
YES, Please fix vid2 so I can move forward and learn vid3.
Thanks for vid1….a great lesson to learn.
Video 2 for this part of the tutorial is working fine – check it again..?
Vid2 is launching but then is stuck at 7’40 !
please fix it so we can finish this part !
Question what if i wanted more nav buttons than 4?
Say i needed 6. i thought i would need to change
—for (var i:Number=0; i<4; i++) to for (var i:Number=0; i<6; i++)—
but thats not quite doing it…
I’m only on Section 2 – header and I have a massive amount of errors.. I’ve went through and watched first and second section many times and went through what you have and what I have and it seems to be the same. My buttons do not show up. My errors are on Scene 1 on the positioning layer, there is an “access of undefined property navContainer.” Why is this? Am I just special? :)
Hello everyone!
This is a great tutorial and I want to thank Franci for the effort of enlightening us with this knowlege.
However (and Iam speaking of myself only) – As some martial arts teacher once told his apprentice – “One is taught in accordance to one’s fitness to learn.” I am progressing rather slowly with this lesson to say the least.
In my left-hand actionscript code I generate the following errors:
Scene 1 1046: Type was not found or was not a compile-time constant: NavItem.
while my code looks like that:
var navContainer:Sprite = new Sprite;
addChild(navContainer);
// NAMES OF THE BUTTONS
var navArray:Array = ["option 1","option 2","option 3","option 4"];
for (var i:Number=0; i<4; i++) {
var navItem:NavItem=new NavItem ;
navItem.x=navItem.width*i;
navItem.name=String(i);
navItem.nav_name.text=navArray[i];
navContainer.addChild(navItem);
}
My NavItem symbol in the library has been set to be exported for actionscript
with NavItem as a class name and base class flash.display.MovieClip.
I also dragged an instance of NavItem symbol onto the stage and asigned it an instance name NavItem,
tho I would'nt be able to explain why I've done so.
So is that a chi flow problem, improper breathing technique or too much internal dialogue happening that prevents the miracle from happening?
I get the same error as you. I’ve wasted an hour trying to fix it but failed. Maybe it has to do with the Flash version since the tutorial was made with CS4 and I work on CS 5.5 Trial… :/ I’m out of ideas…
Somebody HELP!!!
Hi, great series. But, video 2 on part 1 still doesn’t work. Can you please fix this?
Thanks! And keep up the great work.
Hi, H. Something missed up over at blip.tv. I’m currently re-uploading the video file, but it’ll take a while before it’s live. In the meantime, try this link. Hope that helps!
Hey everyone, Section 2 should be playing now! Post a comment if it’s still broken for you.
Great tutorial! I have been able to adjust the project with additional buttons, a different graphic, etc.
The one thing I have trouble with is the text box welcome_content.
When I scale the site, the text just stretches, instead of re-flowing in a larger text box.
I assume it has something to do with the text box properties, but I cannot figure it out.
Also, I embedded the font. Wasn’t sure if that had anything to do with it.
Any help is appreciated. Thanks
It is typical for me to answer my own questions ;-) Mostly that means that I am too impatient to solve my own problems and just start asking. Then while I am asking my question I think of the answer.
So in my case the problem was that my anti-alias was set to “Anti-alias for readability” by default.
That just stretches the font. When I switched the anti-alias to “Use Device Font” it lets the text re-flow as it is being scaled.
when i resize the site, the text in the menu items are scaled also, i cant fix it, please help!
It would be great to have an Actionscript 2.0 version of this tutorial?
Franci, first let me say thanks for sharing your knowledge. i took a pretty basic web design class in art school and the flash class i took was mainly animation (since that’s what i went for.) and still pretty basic.
i’m definitely not a programmer and i’m pretty bad at figuring out scripting. that said, i’m having a bit of a problem. in your first video i’ve done everything that you said. i created a movie symbol called “item” and the stage is to your specifications. my script looks like yours too, word for word. i checked it several times.
everything seems to work up until the
item.x = stage.stageWidth/2-item.width/2;
item.scaleX = stage.stageWidth/980;
item.y = stage.stageHeight;-item.height;
i get the “access of undefined property item” error and when i preview my movie clip symbol doesn’t move to the bottom.
this is what i had up to that point
// NO SCALE
stage.scaleMode = StageScaleMode.NO_SCALE;
// ALIGN TO TOP LEFT
stage.align = StageAlign.TOP_LEFT;
stage.addEventListener(Event.RESIZE, onStageResize);
function onStageResize(evt:Event):void{
item.x = stage.stageWidth/2-item.width/2;
item.scaleX = stage.stageWidth/980;
item.y = stage.stageHeight;-item.height
}
i dont really want ot move on with the tut untill i figure it out. any help would be great. or if anyone else figured it out please share haha.
oh, and the second video got me completely lost too. i didnt know where you were getting your assets or how you were previewing what you had done when you had a blank stage.
i need step by step instructions…i’m not too bright.
Wow, this is exactly what I’m looking for. Could someone pls publish the CS3 version of the fla.
Would appreciate it very much.
Thanks in advance
This is good, I’ve been working with a similar system but it was AS2, and have been looking for a version in AS3.
However, I detest video tutorials. I find them difficult to follow. A normal old fashioned text/image based tutorial would be fabulous.
Andrew, thats simply the object you have on the stage doesn’t have the instance “item” assigned to it. Simply selecting the object on the stage, and in the properties inspector, enter “item” (without quotations) into the “instance” box.
I don’t know if this is just me, but as soon as I open up the source file main.fla for editing, the whole thing stops working.
The navigation stops and the scaliing/position isn’t working correctly.
To all those having issues with both the tutorial and the source files and cs5.5…
I think it is the use of the .scaleX or .scaleY property.
Try using .width and .height instead.
EG:
title.scaleX = ***
Change to:
title.width = ***
Haven’t tried this myself but in using the technique described in the videos above for my own project I found that this worked where as scaleX etc seemed to break the movie with no reported errors.
hey i want to make the scale of the “welcome_content” but i’m righting from right-to-left so does anybody how it works ?!!
TypeError: Error #1006: removeListeners is not a function.
at Main_fla::MainTimeline/onNavClick()
i’m getting this error so what i’m doing wrong ?!!!