Create a Full Screen, Scalable Flash Website: Part 3
Tutorial Details
- Difficulty: Intermediate
- Program: Flash CS3+
- Estimated Completion Time: 90 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 the final part of this tutorial, you’ll learn how to load Featured Work and News from XML files (keeping the site’s content easy to change), allow visitors to email you using a Contact form, add a preloader, and enable Full Screen mode.
Final Result Preview
Take a look at the final result we will be working towards. Try it in full screen mode by clicking the button in the top-right corner, and check out all the new changes!
Section 1: Overview, Understanding XML Structure, and Loading XML
The XMLLoader class is available in the Source download.
Section 2: Building the “Featured Work” Page
Section 3: Building the “News” Section
Section 4: Creating the Contact Form with PHP
The PHP file is called mailer.php and is in the Source zip file.
Section 5: Adding the Actual Full Screen Functionality
Section 6: Creating a Full Screen Preloader
The separate FLA used for the preloader SWF is called loader.fla and is in the Source zip file.
Conclusion
That’s the end of this tutorial. Thanks for reading!
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
Finally i am the first to Comment.
P.S. great tutorial.
WoooooooooooW this was well worth the wait really great tut dude swf links incredible
I really hope noone will create such peace of s***
create a better tutorial dude.
peace?
I love you Franci!
This is probably the best series of flash tutorials ever! You call it “full screen scalable flash website” but you cover almost everything a flash “developer” should know. I’ve attended flash courses that covered less than this…
Though it’s here I can’t believe envato made it free! I mean, I’m not a “Premium” user but I would probably pay to get these videocasts!
Still I have a question… Why don’t you use external classes? Time? Workflow? Videocast Purpose?
ps.: when will you get that translation done? at your webové stránky!
Hey!
@Joao
The main reason I’ve avoided classes is that this tutorial is really supposed to bring a Flash enthusiast or someone who is flirting with the idea of learning it to a level where he can understand what goes into creating a flash site ( or gallery, or basically any kind of dynamic flash app). I can remember how confusing it was for me, learning AS3 basics and at the same time trying to comprehend what classes even are, and what is their function in programming. Now I know, and I use classes for pretty much everything while working. But for learning and getting people interested while keeping their attention, things have to be kept as simple as possible at first. If you’re serious about programming in AS3 you’ll have to learn classes on the way, there are many resources here that give you plenty of material for learning. I wanted my first contribution to really be useful for everyone, one way or another.
ps. Hehe, that site is actually from one of my clients :), the translation is up to them, I do the design and coding :) I’m still developing my website, the hardest thing I’ve ever attempted, it’s hard to satisfy yourself :).
@anonymouse
“Peace” to you to. I think you missed the point.
I don’t personally agree with this style of flash development, but if this is aimed at designers then I’m sure there are some useful techniques to pick up here.
However, I don’t think sites like this need to be created in flash these days – there’s nothing here that couldn’t be achieved with javascript. Don’t get me wrong, I still think flash has a place on the web, but I think it’s use is going to move towards complex web applications and away from microsites.
@Rich
That I would completely agree with. Sites like specifically this one, can be done in HTML/JS ( not sure about the Full Screen, blurs, smoothness of all the animations…, but the basic structure and layout could be replicated with HTML/JS )
… The goal was to combine all the basic knowledge that a dynamic flash site or microsite would require and teach it in the most approachable way possible, so that readers without in depth knowledge of Flash can make their first step in designing crazy interactive motion graphic websites, portfolios etc. I love Flash for that specific reason, creating captivating experiences on the web, not processing data etc. And I’m jet to see a viable alternative in that respect. Checking out THEFWA will give you an idea of what I’m talking about.
Let’s please not make this into Flash vs The Web debate.
With that amount of animations the speed/smoothness would depend largely on the browser, but if this was a real site and not a demonstration then I think you could quite correctly argue that there shouldn’t be that many things going on. The articles scrolling for example is far from usable(again, i understand this is a demo but in the real world I think javascript is more than capable of creating what would actually be required).
I personally think the FWA is an embarrassment to the Flash community and just seems incredibly dated. In my experience the low-to-mid range Flash work has significantly dropped off over the last year or so, and I think this trend will continue. I still work on some more advanced Flash projects that couldn’t be sensibly achieved (yet at least) without it: 3d/physics, complex web apps, and… not much else. Like I said, I still think Flash has a place, but if this is the sort of work you want to get into then I don’t think Flash/actionscript is the right technology to learn anymore. I can’t see it being commercially viable in 1-2 years.
Then we mostly agree :) I was just pointing out that I’m aware this kind of site does not exactly have to be built with Flash and I hope people who learn with this, understand that you should use this knowledge to build sites that do require flash for all the above mentioned reasons.
Flash delivers content quite consistently across platforms and browsers including performance. Having to consider browsers for performance and taking in to account the disparity in performance between them is just too demanding(and confusing) right now to really be able to create anything slightly more complex with js for the masses.
It’s too time consuming for me to create a high end site design and animations that have a lot going on for the sake of this tutorial, just to show that you should only create sites like that with the knowledge gained here. It’s nonsense.
I love FWA for inspiration in a lot of fields, animation, video, design, layout techniques… though I do agree the quality of new content is slowly diminishing.
Anyway, we’re learning for the here and now, and Flash is here and now. Better things are coming sooner or later and if you’re smart you’ll research which technology gives you most options and reaches most people and start researching/learning that.
Hi,
@Rich
What do all those Flash Designers/Developers have to replace their skillset with then, if Flash is not going to be commericially viable in 1-2 years?
HTML 5 is open source; have you tried to create a custom video player using the damn thing?
Kind Regards,
Gerry
WOW – The three best tutorials EVER! thanks (:
just look at all the html/js haters! Cant appreciate a mans worth. never criticize ..it never solved anyone’s problems. Duh if it was an html/js tutorial THEN you would be seeing html/js and not actionscript. Franci you have done a wonderful job and for those of us that know how to extend what you have done…we are grateful. Thank you
K
merci franci !!
Great tutorial! Thank you. I am new to actionscript and tried to recreated the loader part of the tutorial. Unfortunately I got stuck and cannot check against the source file, as I am still on CS3. Could you please post the loader.fla as CS3 version.
Many Thanks,Thomas
Hey Thomas!
Here you go. Hope it helps :)
http://www.proxima.si/tutspreview/loader.zip
Hi Franci !
I have huge problem !
I have some errors – I whink You just changed something in code without recording it, and I have a big problems… I don’t know where is this mistake…. – Can You upload th FLA file but not this FINAL with some new transitions – I mean this one witch is finished with the Video Tutorial no this out of the movie :)
Really cool and complete tutorial
thank you Franci
Thanks a lot for this tutorial.
I have been wanting to learn advanced flash development and i have been having some difficult finding the tutorials related with the structure, best practices and that kind of stuff related with developing a flash website which is what i am interested. So i think this tutorial is great and i hope you guys bring a lot of more tutorials of this kind to activetuts, even if they are premium.
Again, thank you and congratulations.
Thanks for the upload, but I still can’t open it. Flash CS3 (Version 9.0) Sorry, but can you check again please.
Dear,
How can we make the link clickable?
Thanks,
Frank
Dear,
Can you please help me?
I want to have the link in featured work clickable.
Thx.
Frank
Hello I am trying to Build an 1 page News Page using this Tut. for some reason when i get to the Building the News section the
//var MT2:MovieClip = MovieClip(this.parent);
brings up this message
TypeError: Error #1034: Type Coercion failed: cannot convert flash.display::Stage@1e43bb51 to flash.display.MovieClip.
at News_fla::MainTimeline/frame1()
is this because i am doing everything in the 1st frame? Please Explain.
Great Tut btw it was very helpful.
i will host the file here.
ehoban.com/News.zip
Thanks.
hey GeNE, i have the same problem! Have you figured out?
@Thomas
I’ve saved it for CS3 again and reuploaded so just use the same link. Should work…
@GEne
I’ll check it out during the weekend. Will get back to you.
@Frank
var req:URLRequest = new URLRequest(‘http://www.domain.com’);
navigateToURL(req, ‘_self’);
put that in a CLICK MouseEvent listener with the textfield as target and that should do the trick.
Dear,
I want on that page a movieclip that is a button.
That goes to the link I put in the xml.
Thanks, Frank
Hi franci
Sorry to bother you again, i’m still having trouble with the text scaling incorrectly. If i start scaling the page it doesn’t actually adjust the textbox it adjusts the actual width of the characters squeezing them thinner and then making them smaller. Kinda like if you took an orange and squeezed it on the sides, it gets taller but doesn’t change lines. pls help any ideas would be fantastic.
Kind Regards
Remo
“Sorry to bother you again, i’m still having trouble with the text scaling incorrectly. If i start scaling the page it doesn’t actually adjust the textbox it adjusts the actual width of the characters squeezing them thinner and then making them smaller. Kinda like if you took an orange and squeezed it on the sides, it gets taller but doesn’t change lines. pls help any ideas would be fantastic.”
Remo, did you ever figure out how to fix this? His main.swf file works fine but none of the source files which I publish (using the same index.html file provided) match this functionality.
The text itself scales rather than adjusting the line lengths and/or wrap.
Any ideas?
This is so frustrating.
I removed the text from “Welcome_Content” and then made the original “Welcome_Title” into a movieclip.
Give the movieclip the instance name “welcome_title” and remove it from the text inside the movieclip, then put in a text text box inside the movieclip with your desired text.
That way the text performs the same was as the title. It does not stretch like before, it just moves and re-adjusts itself.
Hope this helped! :)
Thanks Nathan!
Hey, thanks for a great tutorial.
Im having trouble with the contact form – It wont type: z, x, @ and numbers.
Its really weird cous even the source files do the same thing, Im working on cs5 …could this be the reason ? If not all pointers would be much appreciated.
Thanks.
Ok I was being a tool, I didnt embed the $#*! properly. Again great tutorial.
Hi,
Yes great tut – but not a complete one ;)
What would have really enhanced it – a fullScreen toggle on the fulscreen button. This is vital, as it saves the User having to look for the Esc key ;)
Kind Regards,
Gerry
Hi,
Rather than just state what I thought was needed – I am also willing to share an idea of creating a really neat fullScreen button, the code is as follows:
fs_mc.buttonMode = true;
stage.addEventListener( FullScreenEvent.FULL_SCREEN, fullScreenHandler );
//listen for fullscreen events and change text
function fullScreenHandler(event:FullScreenEvent):void {
if(event.fullScreen){
fs_mc.cursorText_txt.text = “Exit Fullscreen”;
}else{
fs_mc.cursorText_txt.text = “Enter Fullscreen”;
}
}
fs_mc.addEventListener(MouseEvent.CLICK, goFullScreen);
//fullscreen toggle function
function goFullScreen(MouseEvent):void
{
if (stage.displayState == StageDisplayState.NORMAL) {
stage.displayState=StageDisplayState.FULL_SCREEN;
} else {
stage.displayState=StageDisplayState.NORMAL;
}
}
Kind Regards,
Gerry
Nice one Gerry, thanks for sharing :)
Hi,
Nearly forgot:
Place this line of code under fc_mc.buttonMode = true;
// This stop the iteration when mousing over your button ;)
fs_mc.cursorText_txt.mouseEnabled = false;
Simples…
Kind Regards,
Gerry
Hey Franci.
I have used your tutorial a lot for my website. Therefore i thought you could help me with a couple of problems and ideas.
The idea is a fullscreen scalable site, with a menu in the buttom of the site. The background should be a slideshow of pictures with a ‘mosaic’ look.
1. How do i make a rollover text menu instead of a rollover button menu like yours?
2. How do i make the dynamic background with a mosiac look?
The mosiac look can be seen here: http://www.vaai.nl/
Philippon
Hi Franci,
I have made a big progress with my site also I have one problem with the looping by Project Number.
The XML file is loaded ok.
I use this function:
function getXML(xmlData:XML):void {
projectInfo = xmlData.projects.project.info;
projectLink = xmlData.projects.project.link;
projectThumb = xmlData.projects.project.thumb_path;
projectImage = xmlData.projects.project.image_path;
projectsNum = projectThumb.length();
}
when I trace(projectsNum) inside the function its give me the correct projects number from the XML File but when I try to use this var information in other frame (my for loop) the var contain a value of NaN so the loop is not running.
Could you tell me where I ‘am wrong?
*Sorry for my bad English, Hope my point is clear.
Hi Franci
Thanks for some great tuts here, awesome! just one question. the text container is not actually adjusting properly. it’s resizing like it’s a bitmap rather than like the text box is changing size. Strange though because it does it here at home but not on my machine at work and i have cs5 at home and professional at work. any ideas?
thanks Remo
Hi !
Awsome tutorial !
But – I don’t know why – in 3.1 part You have ” projectArray ” and in 3.2 “panelArray”, and in the final FLA again “projectArray” – :)
You should put some comment on video ;)
peace !
And again… NICE WORK !!!
Oh-my-goodness! Where have you been hiding this guy?
Franci! Let me say that this tut was so flippin’ cool, m’man! I didn’t stumble onto it until recently and I gotta say man– “Wow! Thank you!”
Granted, it helps to come prepared with some knowledge of what AS3 syntax is supposed to look like, what classes are, etc., but you explained things so throroughly that it would be rare for someone to get lost.
Parts one, two, and three are so comprehensive in and of themselves that they’d be helpful to any user who has already completed the exercises.
I will concede that for my part I do not know how to utilize the PHP mail() function. So I then stumbled onto PHPMailer (which seems to be this all-purpose SMTP server facilitator for lack of a better phrase)– problem solved.
You see, I had finished processing parts one and two over a week ago. Then, when it came time for processing part three, I put this project on hold. What I did was located and processed two other tuts I found elsewhere so that I could get used to integrating PHPMailer in my PHP projects. When I finally got my technique down with PHPM I came back to part three and refactored the mailer.php document to work with PHPM and not mail().
Thank you so very much, Franci. You are one cool cat, man! I don’t want to jinx myself but I think I can die a happy man now! Peace be with ya, brother! Thanks to you other tutDudes, as well.
Maybe You can explain me ?
I don’t know why – in 3.1 part You have ” projectArray ” and in 3.2 “panelArray”, and in the final FLA again “projectArray” – :)
I know this is only the NAME, and it can be for example : someName, but I think there is some changes in code and Franci don’t comment it :(( or.. maybe I’m wrong ?
Nobody ??? Hellooooo ! :)
There’s a thing I don’t quite get. I think it’s the same error Gene get (or got).
If I cut/paste all the code from the frame 2 to the frame 1 in the main container, the first time I execute the swf it doesn’t display anything, but then when I click around and get back to frame 1 (by clicking on the home button) it seems to finally have loaded the xml and displays the project panels correctly.
I don’t understand why it works when in frame 2 and don’t when in frame 1. And how make it work, do I have to make it somehow wait for the whole xml to be loaded or is there something else…
Is there still anybody here that can help?
Hi Franci (and others)
first thanks for the in depth tut, really helped and all. I’m not going to waste too much time with praises, i’ll try to be brief;
My problem lies with being unable to unload an external swf i load in place of picture in the FullProjectPanel.
I use external swf that i input trough the xml (just like you do with ), i’ve just added another line and corresponding AS. Everything works fine, i can stop the video sound using the SoundMixer and make it seem like it’s not running anymore but the leak (is it a memory leak?) is huge. I tried using the unloadAndStop() as described on flashandmath.com but it persists in the memory. Is it possible that this is due to SWFObject and the javascript used to embedd flash into html?
pozdrav iz Hrvatske,
thnx,
meerkat
Okay, i have this one sovled:
Apparently AS 3.0 unload() does not actually unload the loaded movie (!). You need to use unloadAndStop() instead like so:
function unloadSWF(event:Event):void
{
_swfLoader.unloadAndStop();
removeChild(_swfContent);
_swfContent = null;
}
Is there anyone, who made it with this tut without problems ? Without problems like my ?
Heyyy I have to see this is one of the greatest tutorials I’ve seen, in addition to the well structured video Plan.
I did however encounter one problem if you could please help me with!….
When I try to add a (FLV) Flash Video Player Component in of the pages of the MainContent….the Video Player just keeps bouncing left and right without staying put in the center!
Any idea how to fix this problem? Anyone?
Thanks a million!
Hello!
First let me congratulate you for the awsome work you’ve! Helped me a lot! But I have a question. were it goes, when doing the horizontal scrolling of the projects panels (TweenLite.to(panelContainer, 0.3, { x:-(stage.mouseX/980)*panelContainer.width+stage.stageWidth/2});) how can I do the fix you did for multiple panels, I mean more then 10 panels. I tryied adding them on the XML file but I can’t reach the first and second panel. You’ve said that you would fix it later but you didn’t!
Please help me!
Hope I made myself clear. Sorry for bad spelling!
And again good work!
Andre
Did anyone made it with this tutorial ? I mean – is it works ? Because I made it step by step and I have a lot of problems with your code – there is more than You show in videos.
Am I right ?
Thanks for these tutorials.
These are a great series of tutorials and as you stated earlier in the comments it is an easier way of showing people how to create a flash project.
I can relate to you saying that you found it confusing when starting with classes. I even went on a Flash course in London and still didnt understand them when I came out. The teacher didnt explain how to plan out and structure your class files when building a project. This was the main thing I wanted to learn!
I dont know if you will or were planning to but it would be cool if you could do this same project again in tutorials but using classes. This would make it easy to see how it goes from ‘timeline coding’ to ‘class coding’.
Just my two cents.
Thanks again Franci,
Sean
Thans for the tut!!
I learn a lot
Hello again,
I solve the problem I had by making a page (frame) in the projects with different categories and from there the user can choose what kind of projects to see. Problem solved.
BUT… I’m having another problem now that I think is with the embedding of the swfobject on the html page, the problem is that on Internet Explorer the site runs perfectly with the fullscreen and everything but on firefox and chrome it doesn’t run that well. The thing is that it loads ok but when I go to news and projects they don’t show up, it’s a blank page with the menu header logo everything but the content.
What could this be? PLEASE HELP!
thanks in advance and sorry if I didn’t made myself clear
André Ferreira
Does anyone know where Secton2: “Building the featured work page” went? I tried to play it but it’s saying it can’t be played. So, I clicked on the download link and it’s throwing a 404 error – page not found. This is a crucial part of the tutorial.
That’s weird… I’ll look into it and get back to you Cris :)
Thanks, Ian. I really like this tut and don’t want to miss anything.
Any luck yet?
Sorry Cris, not yet :( I’m waiting on a support request from Blip.tv, they should have some idea why neither the download nor the streaming video are available any more. Sadly, I don’t have originals of the screencasts either (an irritating oversight as I have copies of every tut we’ve published since the beginning of 2009!)
I’ll get on to Franci and see if he still has an original which I can upload again.
Thanks Ian…really appreciate it! :)
The second video of 3rd part is not downloading. I believe the blip.tv site has an error. Could you please help with it?
Message to everyone: Apologies for any glitches with these videos at the moment, I’ve no idea why some of them should suddenly have stopped working and blip.tv can’t figure it out either. We’re working with Franci to try and get hold of backup copies and will update as soon as we know more!
Thanks for your patience.
This is painful to say, but we don’t yet have a solution to the missing video problem.. We regrettably don’t have a backup of the particular section in question (there really couldn’t have been a worse screencast to fail) and neither does Franci..
Blip have responded as follows: “Unfortunately this file appears to be missing from our servers” though no-one has the faintest idea why.
There’s an outside chance that someone somewhere has a copy, we’re still looking into it.
Huge apologies.
If anyone has a copy of the section in question (from having downloaded it, or grabbed it through iTunes) please let us know!
I seem to remember downloading all of the tutorials on to my old external hard-drive… which I have no idea where is. I will have a look around later tonight to see if I can find it, probably gathering dust under the couch, lol.
There is still a problem with video 2.1! It is not playing for me and I am stuck without it.
Can anyone help?
thank you.
thank so much.
If section 2 has 8 videos total, I’ve got them all. Where to send?
You are a gentleman and a scholar. I will email you.
Video 2.1 is now playing, but only the first few minutes. Then it crashes. I cannot download it either.
Hi to All !!!
can anyone tell me please if he has got the “Part 2 Section 1: Navigation” and if so can he upload it somewhere or send it to me plese! : )))
thanks alot
Evelin
Hi everyone, my problem is about loading XML. I am working with class and i cant manage to work XMLLoader into another class. My sample code like this;
public var xloader:XMLLoader = new XMLLoader(this, “data.xml”); // getting error because of “this”. And if i solve this problem (i dont know how), how can i use “getXml(xmlData:XML)”.
Could anybody explain me how can i use this XMLLoader in class structure, how can i parse xml like
var MT:MovieClip = MovieClip(this.parent);
projectPanel.title.text = MT.projectTitle[i];
Hey all, firstly great tut, I was able to follow it the whole way with no serious problems, so thank you.
I’m trying to add some further functionality but as I’m still trying to learn I’m having problems implementing it, I might be totally wrong with my approach but here goes.
I’m trying to add back and forward arrow key navigation to the full project panel, essentially so the user can navigate without having to hit close every time.
I noticed how projectPanel.name can be used to refer to each item in the projectArray but its a string, so I cant just make the button ++; to this value, so I need to define a number variable and pass projectPanel.name to it (if that’s even possible).
Then an EventListener for the keys that increments or decrements this variable and removes the current panel and adds the one before or after it in the array. I’m clutching at straws at this point.
Anyone reckon that approach would work? I’ve been staring at the screen trying to figure it out all day so any advice or help is welcome guys.
Please help,
When using the animate out and in script the mainContent movie clip does not animate back in the right place. Does anyone have any idea of what is going on.
Thank you
Thank´s for the learn.
It´s a better tutorial that i see it.