Building a Flash website
Author: Bill Trikojus
This basic Flash tutorial will show you how to structure a Flash website to ensure smooth transitions between sections and preloading of all external content. The website is broken up into multiple swfs which are loaded into a container swf using loadMovie(). This ensures that the user only has to download data that they wish to see.
|
|
Part one |
|
|
Part two |
|
|
Part three |
|
|
Bonus source files |
|
These 2 extra source files show how to set up basic website Flash structures. One shows how to achieve a smooth transition by covering the current content with a box, the other uses a similar method to that outlined in this tutorial but is a more solid structure that will not jump if the user clicks on multiple buttons in quick succession. These files require Flash CS3. |
|
Share
Like this? Click a link below to share it...
Subscribe and Download
Comments
2008-04-25: Ryan McGinn said:Thank you! This tutorial is simply amazing. Thank you for taking an hour (in what seemed to be the middle of a busy day for you while teaching classes) and putting this together. This single tutorial has answered all of my questions regarding loading separate sections of a flash-based page. I can't wait until I have time to follow your tutorial again, and build my page as I go.
Thanks again!
Ryan
2008-07-24: Rajkumar said:
Nice tutorials,
Perfect for beginners like me
2008-09-12: Martin Hunter said:
Hi enjoy that tutorial, I know flash has a major issue with SEO but i have read in many places that you can still get decent rankings using SWFobject. Could you produce a tutorial in the Flash SEO area?
2008-09-12: Bill Trikojus said:
Yes you can. It is far from an ideal SEO solution but it works OK. The basic concept is you embed the swf using the swf object and in the div that swf gets placed into you place all your plain text content. Google doesn't execute javascript so it just sees the text in the div and other users see the swf that replaces the text. There is a tute for the old version of the swfObject and I will make an updated version if I get time.
cheers
2008-09-27: rajat said:
hi, nice tutorial. can i use it with flash cs2?
2008-10-01: Diane Luu Ta said:
HI
Thanks for the tutorial. IT really help me alot.
But I have one question to ask. How can the swf file play itself with the preload before anyone click other button to load other swf file? Do u understand what I mean.
2008-10-01: Bill Trikojus said:
Hi Diane
The extra downloadable source files show how to detect if a button is clicked while a movie is downloading, and to switch to loading the new movie that the user has selected.
Check those out
cheers
2009-01-20: fay said:
Hi great tutorial, thanks! I'm kind of new at flash, and I followed the tutorial and understood it pretty well.
I'm creating a portfolio website and I'm trying to have on the folio page links to more pages for ex. retail, identity etc.
I just don't seem to know exactly how to load these swf. files into the folio page.
Please help!
thank you
2009-01-20: Bill Trikojus said:
Pretty sure this gallery tutorial shows how to do that. Also check out Online Galleries if you're interested in a template portfolio website.
cheers
2009-10-16: cmodesign said:
I enjoyed the tutorial. Everything works great. Now I just want to know how to detect if a button is clicked while a movie is loading. The 2 extra source files seemed to have a lot more code and I couldn't figure out exactly how to implement that specific IF statement.
2009-10-16: Bill Trikojus said:
I can't remember the specific code, but when the button is clicked you should be able to check the loading status of the holder.
eg
but.onRelease=function(){
if(holder.getBytesLoaded()==holder.getBytesTotal()){
//fully loaded
}else{
//loading something
}
}
cheers
2009-10-17: cmodesign said:
Thx for the quick response. My original code based on the tutorial already had an IF statement in it. I mashed the 2 together and here is what I came up with. Obviously it doesn't work.
ORIGINAL
nav_Contact.onRelease=function() {
if(nextMovie!='ContactUs.swf') {
nextMovie='ContactUs.swf';
container.gotoAndPlay('Outro');
}
};
NEW
nav_Contact.onRelease=function(){
if(container.getBytesLoaded()==container.getBytesTotal()){
//fully loaded
}else{
//loading something
if(nextMovie!='ContactUs.swf') {
nextMovie='ContactUs.swf';
container.gotoAndPlay('Outro');
}
};
}
2009-10-17: Bill Trikojus said:
Looks like you have the order of things mixed up. If you write it down on paper in plain English, exactly how you want it to behave, I'm sure you will be able to figure out what's wrong.
cheers
2009-10-21: cmodesign said:
Here's how I would describe it in plain English.
User selects home.swf to load into container by clicking on nav_Home. Outro from previous click is played and then movie stops while bytes for movie home.swf begin to load into container. While it's loading the user decides they want to go to Contact.swf. User clicks on nav_Contact.
If movie Home.swf is fully loaded play it, otherwise if movie Home.swf is not completely loaded, stop loading and start loading Contact.swf.
Sadly I don't know how I would translate this into actionscript.
2009-10-21: Bill Trikojus said:
nav_Contact.onRelease=function(){
if(nextMovie!='ContactUs.swf') {
nextMovie='ContactUs.swf';
if(container.getBytesLoaded()==container.getBytesTotal()){
container.gotoAndPlay('Outro');
}else{
container.loadMovie(nextMovie)
}
}
}
2009-10-24: cmodesign said:
Thx Bill. That worked like a charm. Now for the final piece of the puzzle. Within my Home.swf (which loads into the container from main.swf), I have some buttons in the middle of the screen that are images. They are supposed to act as an alternate navigation to my main navigation, and only appear on the homepage. I used the following for the button actions:
btn_Contact.onRelease=function() {
nextMovie='ContactUs.swf';
gotoAndPlay('Outro2');
};
Outro2 resides at the end of Home.swf and there is already an action in the last frame of my first Outro associated with the root nav buttons.
this.loadMovie(_root.nextMovie)
Within the Home.swf movie using the first Outro with any of the image buttons always reloaded the Home.swf.
I created a new Outro2 with the following action in last frame:
this.loadMovie(nextMovie)
The buttons work fine but once a new movie loads the Home.swf nav button inside main.swf doesn't work until I select another section first. I can also reload the same section (which shouldn't happen. I think the problem is the action at the end of the Outro2 or the IF statements in the buttons.
2009-10-31: cmodesign said:
Bill, have I used up all of my help points with you? Just trying to find a solution to this. Currently only my bottom nav works correctly. I can't navigate properly to other pages from within any of my container pages.
2010-06-25: MichaelC said:
Firstly, thank you for a great set of tutorials.
I have a strange problem. After setting up both the main.fla and home.fla as instructed all was working as expected until I moved on to part 3.
Once I added the onRelease commands to the buttons, home.swf failed to load although the pre loader was still working. After rewriting all the script this was still the case.
I managed to fix this by removing the stop() script from frame 1 of the home movie and all is functioning as expected. I'm sure this should not be the case.
What have I done wrong.
Thanks in advance.
2010-06-25: Bill Trikojus said:
Yes this is one of those annoying flash things. The stop on frame 1 of the mc is clashing with the gotoAndPlay on _root. It should not happen once the files are uploaded and there is a delay before the home.swf is fully loaded.
2010-11-10: seo tutorial said:
amazing tutorials. I watched 3 parts. they really taught me some good tips on flash. I have some tips regarding the seo with flash
seo tutorial
Post a comment
Garbage posts and SPAM will be deleted.