Navigation blurs out/in background images

Question

Hi... At the risk of embarrassing myself, I'm adding my first post to this forum. Sorry, I'm a bit of a novice and what started out to be a simple background transition is proving to be a little harder than I first thought it would be. My problem is this:
I have a simple single main timeline for the website with 6 navigation buttons. Each button sending the playhead to a label keyframe (the site has 6 'pages'). I converted 6 photos to movie clips and added one to each of the 6 labels as a full page background. To each movieclip photo, I have added a fade in blur using one of the FLASHeff effects so when a nav button is clicked, the background fades/blurs in, I have given each background 20 frames to allow the blur to fully complete.
Now all that works as expected... but now the fun begins... what I would like to do is that when a navigation button is clicked, whichever of the 6 backgrounds is currently showing will fade/blur out first before the new background photo fades in. I could do this with 36 (the total combination of transitions with 6 photos and 6 buttons). A bit of an ugly solution!
Here is the code I have for the buttons:
teamBt.addEventListener(MouseEvent.MOUSE_DOWN, mouseTeamHandler);
function mouseTeamHandler(event:MouseEvent):void {
gotoAndPlay("team");
My question is: Is there a more elegant and dare I say, sexy actionscript 3 way to do all this and hopfully still be able to use flasheff for the blur effect?
I had better get up to speed using actionscript 3 to save myself further forum embarrassment.
Thanks in advance
Paul

Answer 1

Hi Craig
You are right, I had just pasted the code into the form. I've now selected the Insert/Syntax Highlighting/Plain button in the toolbar to paste in my code. As you can see, I've been beavering away with actionscript 3 with a little help from Greensock's TweenLight and TweenMax. Thanks so much for your advice on creating a tidier code. I was looking for just that as the lenght of my script is growing by the hour.
I'll put a link to the website but it's still very much a work in progress (have to DNS point the domain name to the hosting server soon). The timeline is still only one frame long. Wondering if that's the right way to go... all code on the first frame (some other code on other layers). I've checked the Bandwidth Profiler and that just sits solid at 1024 KB. If wondering about the video, I have used SlideShow Pro and thier Director so that my client can add videos through his browser. The current videos are just very short tests.
http://77.72.0.130/~everscom/test_5.html
Thanks again Craig. I'll take a closer look at your code suggestions.
Paul
import flash.media.SoundMixer;
import gs.*;
import gs.easing.*;
home_photo.alpha = 0;
what_photo.alpha = 0;
research_photo.alpha = 0;
team_photo.alpha = 0;
portfolio_photo.alpha = 0;
clients_photo.alpha = 0;
contact_photo.alpha = 0;
TweenLite.to(home_photo, 2, {autoAlpha:1});
TweenMax.from(home_photo, 2, {blurFilter:{blurX:80, blurY:80}, ease:Back.easeIn}); 
my_ssp.alpha = 0;
scroller_bk.alpha = 0;
intro_text.alpha = 0;
intro_bk.alpha = 0;
TweenLite.to(intro_text, 3, {autoAlpha:.7, delay:2});
TweenLite.to(intro_bk, 3, {autoAlpha:.7, delay:2});
scroller_what_we.alpha = 0;
bar_what_we.alpha = 0;
scroller_research.alpha = 0;
bar_research.alpha = 0;
scroller_team.alpha = 0;
bar_team.alpha = 0;
contact_text.alpha = 0;
contact_form.alpha = 0;
yousendit_btn.alpha = 0;
whatBt.addEventListener(MouseEvent.MOUSE_DOWN, mouseWhatHandler);
function mouseWhatHandler(event:MouseEvent):void {
  SoundMixer.stopAll();
  TweenLite.to(home_photo, 2, {autoAlpha:0});
  TweenLite.to(what_photo, 2, {autoAlpha:1});
  TweenLite.to(research_photo, 2, {autoAlpha:0});
  TweenLite.to(team_photo, 2, {autoAlpha:0});
  TweenLite.to(portfolio_photo, 2, {autoAlpha:0});
  TweenLite.to(clients_photo, 2, {autoAlpha:0});
  TweenLite.to(contact_photo, 2, {autoAlpha:0});
  TweenLite.to(scroller_bk, 1, {autoAlpha:0});
  TweenMax.from(what_photo, 2, {blurFilter:{blurX:80, blurY:80}, ease:Back.easeIn}); 
  TweenLite.to(scroller_bk, 3, {autoAlpha:.7, delay:2});
  TweenLite.to(scroller_what_we, 3, {autoAlpha:1, delay:2});
  TweenLite.to(bar_what_we, 3, {autoAlpha:1, delay:2});
  TweenLite.to(intro_text, 1, {autoAlpha:0});
  TweenLite.to(intro_bk, 1, {autoAlpha:0});
  TweenLite.to(scroller_research, 1, {autoAlpha:0});
  TweenLite.to(bar_research, 1, {autoAlpha:0});
  TweenLite.to(scroller_team, 1, {autoAlpha:0});
  TweenLite.to(bar_team, 1, {autoAlpha:0});
  TweenLite.to(my_ssp, 1, {autoAlpha:0});
  TweenLite.to(contact_text, 1, {autoAlpha:0});
  TweenLite.to(contact_form, 1, {autoAlpha:0});
  TweenLite.to(yousendit_btn, 1, {autoAlpha:0});
researchBt.addEventListener(MouseEvent.MOUSE_DOWN, mouseResearchHandler);
function mouseResearchHandler(event:MouseEvent):void {
  SoundMixer.stopAll();
  TweenLite.to(home_photo, 2, {autoAlpha:0});
  TweenLite.to(what_photo, 2, {autoAlpha:0});
  TweenLite.to(research_photo, 2, {autoAlpha:1});
  TweenLite.to(team_photo, 2, {autoAlpha:0});
  TweenLite.to(portfolio_photo, 2, {autoAlpha:0});
  TweenLite.to(clients_photo, 2, {autoAlpha:0});
  TweenLite.to(contact_photo, 2, {autoAlpha:0});
  TweenLite.to(scroller_bk, 1, {autoAlpha:0});
  TweenMax.from(research_photo, 2, {blurFilter:{blurX:80, blurY:80}, ease:Back.easeIn});
  TweenLite.to(intro_text, 1, {autoAlpha:0});
  TweenLite.to(intro_bk, 1, {autoAlpha:0});
  TweenLite.to(scroller_what_we, 1, {autoAlpha:0});
  TweenLite.to(bar_what_we, 1, {autoAlpha:0});
  TweenLite.to(scroller_bk, 3, {autoAlpha:.7, delay:2});
  TweenLite.to(scroller_research, 3, {autoAlpha:1, delay:2});
  TweenLite.to(bar_research, 3, {autoAlpha:1, delay:2});
  TweenLite.to(scroller_team, 1, {autoAlpha:0});
  TweenLite.to(bar_team, 1, {autoAlpha:0});
  TweenLite.to(my_ssp, 1, {autoAlpha:0});
  TweenLite.to(contact_text, 1, {autoAlpha:0});
  TweenLite.to(contact_form, 1, {autoAlpha:0});
  TweenLite.to(yousendit_btn, 1, {autoAlpha:0});
teamBt.addEventListener(MouseEvent.MOUSE_DOWN, mouseTeamHandler);
function mouseTeamHandler(event:MouseEvent):void {
  SoundMixer.stopAll();
  TweenLite.to(home_photo, 2, {autoAlpha:0});
  TweenLite.to(what_photo, 2, {autoAlpha:0});
  TweenLite.to(research_photo, 2, {autoAlpha:0});
  TweenLite.to(team_photo, 2, {autoAlpha:1});
  TweenLite.to(portfolio_photo, 2, {autoAlpha:0});
  TweenLite.to(clients_photo, 2, {autoAlpha:0});
  TweenLite.to(contact_photo, 2, {autoAlpha:0});
  TweenLite.to(scroller_bk, 1, {autoAlpha:0});
  TweenMax.from(team_photo, 2, {blurFilter:{blurX:80, blurY:80}, ease:Back.easeIn});
  TweenLite.to(intro_text, 1, {autoAlpha:0});
  TweenLite.to(intro_bk, 1, {autoAlpha:0});
  TweenLite.to(scroller_what_we, 1, {autoAlpha:0});
  TweenLite.to(bar_what_we, 1, {autoAlpha:0});
  TweenLite.to(scroller_research, 1, {autoAlpha:0});
  TweenLite.to(bar_research, 1, {autoAlpha:0});
  TweenLite.to(scroller_bk, 3, {autoAlpha:.7, delay:2});
  TweenLite.to(scroller_team, 3, {autoAlpha:1, delay:2});
  TweenLite.to(my_ssp, 1, {autoAlpha:0});
  TweenLite.to(contact_text, 1, {autoAlpha:0});
  TweenLite.to(contact_form, 1, {autoAlpha:0});
  TweenLite.to(yousendit_btn, 1, {autoAlpha:0});
portfolioBt.addEventListener(MouseEvent.MOUSE_DOWN, mousePortfolioHandler);
function mousePortfolioHandler(event:MouseEvent):void {
  SoundMixer.stopAll();
  TweenLite.to(home_photo, 2, {autoAlpha:0});
  TweenLite.to(what_photo, 2, {autoAlpha:0});
  TweenLite.to(research_photo, 2, {autoAlpha:0});
  TweenLite.to(team_photo, 2, {autoAlpha:0});
  TweenLite.to(portfolio_photo, 2, {autoAlpha:1});
  TweenLite.to(clients_photo, 2, {autoAlpha:0});
  TweenLite.to(contact_photo, 2, {autoAlpha:0});
  TweenLite.to(scroller_bk, 2, {autoAlpha:0});
  TweenMax.from(portfolio_photo, 2, {blurFilter:{blurX:80, blurY:80}, ease:Back.easeIn});
  TweenLite.to(intro_text, 1, {autoAlpha:0});
  TweenLite.to(intro_bk, 1, {autoAlpha:0});
  TweenLite.to(scroller_what_we, 1, {autoAlpha:0});
  TweenLite.to(bar_what_we, 1, {autoAlpha:0});
  TweenLite.to(scroller_research, 1, {autoAlpha:0});
  TweenLite.to(bar_research, 1, {autoAlpha:0});
  TweenLite.to(scroller_team, 1, {autoAlpha:0});
  TweenLite.to(bar_team, 1, {autoAlpha:0});
  TweenLite.to(my_ssp, 3, {autoAlpha:1, delay:2});
  TweenLite.to(contact_text, 1, {autoAlpha:0});
  TweenLite.to(contact_form, 1, {autoAlpha:0});
  TweenLite.to(yousendit_btn, 1, {autoAlpha:0});
clientsBt.addEventListener(MouseEvent.MOUSE_DOWN, mouseClientsHandler);
function mouseClientsHandler(event:MouseEvent):void {
  SoundMixer.stopAll();
  TweenLite.to(home_photo, 2, {autoAlpha:0});
  TweenLite.to(what_photo, 2, {autoAlpha:0});
  TweenLite.to(research_photo, 2, {autoAlpha:0});
  TweenLite.to(team_photo, 2, {autoAlpha:0});
  TweenLite.to(portfolio_photo, 2, {autoAlpha:0});
  TweenLite.to(clients_photo, 2, {autoAlpha:1});
  TweenLite.to(contact_photo, 2, {autoAlpha:0});
  TweenLite.to(scroller_bk, 2, {autoAlpha:0});
TweenMax.from(clients_photo, 2, {blurFilter:{blurX:80, blurY:80}, ease:Back.easeIn});
  TweenLite.to(intro_text, 1, {autoAlpha:0});
  TweenLite.to(intro_bk, 1, {autoAlpha:0});
  TweenLite.to(scroller_what_we, 1, {autoAlpha:0});
  TweenLite.to(bar_what_we, 1, {autoAlpha:0});
  TweenLite.to(scroller_research, 1, {autoAlpha:0});
  TweenLite.to(bar_research, 1, {autoAlpha:0});
  TweenLite.to(scroller_bk, 1, {autoAlpha:0});
  TweenLite.to(scroller_team, 1, {autoAlpha:0});
  TweenLite.to(my_ssp, 1, {autoAlpha:0});
  TweenLite.to(contact_text, 1, {autoAlpha:0});
  TweenLite.to(contact_form, 1, {autoAlpha:0});
  TweenLite.to(yousendit_btn, 1, {autoAlpha:0});
contactBt.addEventListener(MouseEvent.MOUSE_DOWN, mouseContactHandler);
function mouseContactHandler(event:MouseEvent):void {
  SoundMixer.stopAll();
  TweenLite.to(home_photo, 2, {autoAlpha:0});
  TweenLite.to(what_photo, 2, {autoAlpha:0});
  TweenLite.to(research_photo, 2, {autoAlpha:0});
  TweenLite.to(team_photo, 2, {autoAlpha:0});
  TweenLite.to(portfolio_photo, 2, {autoAlpha:0});
  TweenLite.to(clients_photo, 2, {autoAlpha:0});
  TweenLite.to(contact_photo, 2, {autoAlpha:1});
  TweenLite.to(scroller_bk, 2, {autoAlpha:0});
  TweenMax.from(contact_photo, 2, {blurFilter:{blurX:80, blurY:80}, ease:Back.easeIn});
  TweenLite.to(intro_text, 1, {autoAlpha:0});
  TweenLite.to(intro_bk, 1, {autoAlpha:0});
  TweenLite.to(scroller_what_we, 1, {autoAlpha:0});
  TweenLite.to(bar_what_we, 1, {autoAlpha:0});
  TweenLite.to(scroller_research, 1, {autoAlpha:0});
  TweenLite.to(bar_research, 1, {autoAlpha:0});
  TweenLite.to(scroller_bk, 3, {autoAlpha:.7, delay:2});
  TweenLite.to(scroller_team, 1, {autoAlpha:0});
  TweenLite.to(my_ssp, 1, {autoAlpha:0});
  TweenLite.to(contact_text, 3, {autoAlpha:1, delay:2});
  TweenLite.to(contact_form, 3, {autoAlpha:1, delay:2});
  TweenLite.to(yousendit_btn, 3, {autoAlpha:1, delay:2});