Flash Fluid Website Template Tutorial and Download

• anonymous

  Your links are bad. Archive doesnt load, demo doesnt open.
  But i’ve seen your hosters mascot, who was eating some letter or smthng.
  Fix it please.

• http:/www.dlocc.com Devin Walker

  Thanks for telling me, I’ve fixed them. Sorry bout’ that! Enjoy.

• t.c

  Hey cool extension to the original tutorial! Nevertheless, I’m having difficulty going through your coding process when the original FLA document doesn’t open and I can’t take a closer look at your library! Why is that? I would love to be able to open the original FLA file! Otherwise nice coding!

• http:/www.dlocc.com Devin Walker

  Hey there, what version of Flash are you using? I just tested and made sure I can open it with CS4, please make sure you have at least CS3+

• t.c

  yes I’ve tried opening it in three different computers! All three of them have flash CS3….it keeps popping out “Failed to Open Document”….!!

  what do you think is the problem?

• http:/www.dlocc.com Devin Walker

  Hmm, I have to admit I have not opened it with CS3. You are downloading the Fluid.zip and unzipping all the contents correctly?

• t.c

  hey!!! I’ve downloaded the trial version of Flash CS4 from adobe and it worked! I guess you do have to open it with CS4!

  The source file is great! Thanks for sharing!

• http://-- digiman

  hello..

  can you please save the .fla as a lower version (cs3) so we can open them with CS3?

  Much appreciated.

  digi

• http://-- digiman

  hi, can someone please save these files from CS4 to CS3 and email to me?
  shanerein@gmail.com

  Cheers.

• Ernie

  Thanks so much!!!

  Makes more senses to me now.

  One thing, how can I get the elements to come in through say some from the bottom and some from the right and left instead of all of them coming it from the top left when the page loads up?

  I got you on my RSS and Favorites THANKS!

  Ernie-

• Andrew

  Hey thank you!!!It’s really cool and useful!

• http:/www.dlocc.com Devin Walker

  Yes you just need to change the coding of the x and y axis in the AS3

• Luka

  I cant unzip the files, it says they´re corrupted.
  please help!

• Jeff

  Thanks Devin. Great add to the original tutorial. I’m still quite new to AS3 and trying to figure out how to add the functionality to have some scrolling (preferably in the browser) functionality. There are probably some direct conflicts with this and the existing code but thought maybe there was a way that you could think of. It would really be a great addition. Primarily I want to load other swf files into the site which will be larger than the screen and I want the user to be able to scroll down. Currently if content in the “middle” is too large its un-viewable due to the fluid design. Any thoughts??
  Thanks again.

• http://www.hmconlinedev.info/bluesky/index.html Kraig

  I can,t figure out how to load & unload a movieclip with a Button (LOGO BUTTON IMAGE ON THE PLANE) within my Main MC using Mouse_OVER & Mouse_OUT. I would like to load the MC at bottom center of my fluid layout that Tweens upward from the footer. A similar effect I have for the Right side Sub Menu. I guess I need to figure out how to Target the MC?

  Here is my Dev Site:

  http://www.hmconlinedev.info/bluesky/index.html

  Any suggestions would be great!

• KJoe

  When I upload the files everything loads squashed into the top left hand corner, only when I click on the green browser button does the site open correctly to fill the browser window. Has anyone else had this issue and how can I resolve it? Is there something in the actionscript file which needs to be removed??

  Otherwise, a great set of source files and really helpful as template to work with.

• http:/www.dlocc.com Devin Walker

  Yeah, the file is kinda old now and I have not updated it in about a year… sorry about that but I just dont have time to support this anymore. If you figure it out, please let me know and I will update the file on the site.

  Thanks!

• KJoe

  Hi Devin, I posted this issue on a forum and have found out the issue. Apparently all the code is correct but the issue with the site not scaling straight away was probably due to the time factor.

  So now a timer of just 200miliseconds has been added and it works fine for me.

  This is the amended code to be pasted into your actionscript file.

  —————–CODE GOES HERE——————–

  package

  {

  import flash.events.MouseEvent;

  import fl.transitions.Tween;

  import fl.transitions.TweenEvent;

  import fl.transitions.easing.*;

  import flash.display.*;

  import FluidLayout.*;

  import flash.events.Event;

  import flash.net.URLLoader;

  import flash.net.URLRequest;

  import Classes.Lights;

  import flash.utils.Timer;

  import flash.events.TimerEvent;

  public class Website extends MovieClip

  {

  public function Website()

  {

  this.addEventListener(Event.ADDED_TO_STAGE, init);

  }

  public function init(e:Event):void

  {

  /* Set the Scale Mode of the Stage */

  stage.scaleMode = StageScaleMode.NO_SCALE;

  stage.align = StageAlign.TOP_LEFT;

  /* Add the symbols to stage */

  var bg = new bgHome();

  addChild(bg);

  var menu = new Menu();

  addChild(menu);

  var title = new Title();

  addChild(title);

  var home = new Home();

  addChild(home);

  var subCategory = new homeCategory();

  //addChild(subCategory);

  var footer = new Footer();

  addChild(footer);

  var clock:Timer = new Timer(200,1);

  clock.addEventListener(TimerEvent.TIMER, align);

  clock.start();

  var bgParam = {

  x:0.5,

  y:0.5,

  offsetX: 0,

  offsetY: 0

  };

  var titleParam = {

  x:1,

  y:0,

  offsetX: -title.width + 10,

  offsetY: 20

  };

  var menuParam = {

  x:0,

  y:0,

  offsetX:10,

  offsetY:20

  };

  var middleParam = {

  x:0.5,

  y:0.5,

  offsetX: 0,

  offsetY: 0

  };

  var leftParam = {

  x:0.15,

  y:0.5,

  offsetX: 0,

  offsetY: 0

  };

  var footerParam = {

  x:0,

  y:1,

  offsetX: 0,

  offsetY: 0

  };

  function align(e:TimerEvent)

  {

  /* Apply the alignment to the background */

  new FluidObject(bg,bgParam);

  /* Apply the alignment to the title */

  new FluidObject(title,titleParam);

  /* Apply simple alignment to the title */

  /*var titleParam = {

  alignment: “TOP_LEFT”,

  margin: 0

  }

  new SimpleFluidObject(title,titleParam);*/

  /* Apply the alignment to the menu */

  new FluidObject(menu,menuParam);

  /* Apply the alignment to the content */

  new FluidObject(home,middleParam);

  //new FluidObject(subCategory,leftParam);

  /* Apply the alignment to the footer */

  new FluidObject(footer,footerParam);

  }

  //buttons

  eventListeners();//Turns on button event listeners

  handCursors();//Turns on Hand Cursors at site launch

  //remove home button event listeners since that’s the default

  menu.home_btn.removeEventListener(MouseEvent.MOUSE_OVER, btnOver);

  menu.homeHit_mc.removeEventListener(MouseEvent.MOUSE_OVER, btnOver);

  menu.home_btn.removeEventListener(MouseEvent.MOUSE_OUT, btnOut);

  menu.homeHit_mc.removeEventListener(MouseEvent.MOUSE_OUT, btnOut);

  menu.home_btn.removeEventListener(MouseEvent.CLICK, btnHome);

  menu.homeHit_mc.removeEventListener(MouseEvent.CLICK, btnHome);

  menu.home_btn.useHandCursor = false;//Turns off Hand Cursor for Home Button (that’s the first page)

  menu.homeHit_mc.useHandCursor = false;

  currentButton = menu.home_btn;// the current Button variable (declared below) ensures the buttons flip back once another page is selected

  menu.homeHit_mc.targetmc = menu.home_btn;// Creates the targetmc variable so the buttons can flip

  menu.aboutHit_mc.targetmc = menu.about_btn;

  menu.webHit_mc.targetmc = menu.web_btn;

  menu.home_btn.targetmc = menu.home_btn;// Creates the targetmc variable so the buttons can flip

  menu.about_btn.targetmc = menu.about_btn;

  menu.web_btn.targetmc = menu.web_btn;

  function eventListeners():void

  {

  menu.homeHit_mc.addEventListener(MouseEvent.MOUSE_OVER, btnOver);

  menu.aboutHit_mc.addEventListener(MouseEvent.MOUSE_OVER, btnOver);

  menu.webHit_mc.addEventListener(MouseEvent.MOUSE_OVER, btnOver);

  menu.home_btn.addEventListener(MouseEvent.MOUSE_OVER, btnOver);

  menu.about_btn.addEventListener(MouseEvent.MOUSE_OVER, btnOver);

  menu.web_btn.addEventListener(MouseEvent.MOUSE_OVER, btnOver);

  menu.homeHit_mc.addEventListener(MouseEvent.MOUSE_OUT, btnOut);

  menu.aboutHit_mc.addEventListener(MouseEvent.MOUSE_OUT, btnOut);

  menu.webHit_mc.addEventListener(MouseEvent.MOUSE_OUT, btnOut);

  menu.home_btn.addEventListener(MouseEvent.MOUSE_OUT, btnOut);

  menu.about_btn.addEventListener(MouseEvent.MOUSE_OUT, btnOut);

  menu.web_btn.addEventListener(MouseEvent.MOUSE_OUT, btnOut);

  menu.homeHit_mc.addEventListener(MouseEvent.CLICK, btnHome);

  menu.aboutHit_mc.addEventListener(MouseEvent.CLICK, btnAbout);

  menu.webHit_mc.addEventListener(MouseEvent.CLICK, btnWeb);

  menu.home_btn.addEventListener(MouseEvent.CLICK, btnHome);

  menu.about_btn.addEventListener(MouseEvent.CLICK, btnAbout);

  menu.web_btn.addEventListener(MouseEvent.CLICK, btnWeb);

  }

  function handCursors():void

  {

  menu.home_btn.buttonMode = true;// Must turn movieclips on buttonMode

  menu.homeHit_mc.buttonMode = true;

  menu.about_btn.buttonMode = true;

  menu.aboutHit_mc.buttonMode = true;

  menu.web_btn.buttonMode = true;

  menu.webHit_mc.buttonMode = true;

  menu.home_btn.useHandCursor = true;

  menu.homeHit_mc.useHandCursor = true;

  menu.about_btn.useHandCursor = true;

  menu.aboutHit_mc.useHandCursor = true;

  menu.web_btn.useHandCursor = true;

  menu.webHit_mc.useHandCursor = true;

  }

  function btnOver(e:MouseEvent):void

  {

  e.currentTarget.targetmc.gotoAndPlay(“over”);

  }

  function btnOut(e:MouseEvent):void

  {

  e.currentTarget.targetmc.gotoAndPlay(“out”);

  }

  //———–PAGE FUNCTIONS ———— \\;

  var exitTween:Tween;

  var bgTween:Tween;

  var currentBg:MovieClip = bg;

  var prevBg:MovieClip;

  var prevPage:MovieClip;

  var currentPage:MovieClip = home;

  var currentButton:MovieClip;

  function btnHome(e:MouseEvent):void

  {

  e.currentTarget.targetmc.gotoAndPlay(“click”);

  exitTween = new Tween(currentPage,”x”,Strong.easeInOut,currentPage.x,currentPage.x + 1000,30,false);//animate off old page

  prevPage = currentPage;

  currentPage = new Home();

  addChildAt(currentPage, 4);//adds the about page to the stage

  exitTween.addEventListener(TweenEvent.MOTION_STOP, animateOn);

  currentPage.x = stage.stageWidth / 2 – 1000;

  currentPage.y = stage.stageHeight / 2;

  bgTween = new Tween(currentBg,”alpha”,Regular.easeOut,1,0,30,false);// This calls on the bgTween variable and fades oyt the currentBg

  prevBg = currentBg;

  currentBg = new bgHome();

  bgTween.addEventListener(TweenEvent.MOTION_FINISH, bgOn);

  addChildAt(currentBg,0);

  currentBg.x = stage.stageWidth / 2;

  currentBg.y = stage.stageHeight / 2;

  eventListeners();

  menu.homeHit_mc.removeEventListener(MouseEvent.MOUSE_OUT, btnOut);

  menu.homeHit_mc.removeEventListener(MouseEvent.CLICK, btnHome);

  menu.homeHit_mc.removeEventListener(MouseEvent.MOUSE_OVER, btnOver);

  menu.home_btn.removeEventListener(MouseEvent.MOUSE_OUT, btnOut);

  //Disable Mouse Out functionality;

  menu.home_btn.removeEventListener(MouseEvent.CLICK, btnHome);

  //Disable Mouse Click functionality;

  menu.home_btn.removeEventListener(MouseEvent.MOUSE_OVER, btnOver);

  handCursors();

  menu.homeHit_mc.useHandCursor = false;

  menu.home_btn.useHandCursor = false;

  btnFlip();

  currentButton = menu.home_btn;

  }

  function btnAbout(e:MouseEvent):void

  {

  e.currentTarget.targetmc.gotoAndPlay(“click”);

  exitTween = new Tween(currentPage,”x”,Strong.easeInOut,currentPage.x,currentPage.x + 1000,30,false);//animate off old page

  prevPage = currentPage;

  currentPage = new About();

  addChildAt(currentPage, 4);//adds the about page to the stage

  exitTween.addEventListener(TweenEvent.MOTION_FINISH, animateOn);

  currentPage.x = stage.stageWidth / 2 – 1000;

  currentPage.y = stage.stageHeight / 2;

  bgTween = new Tween(currentBg,”alpha”,Regular.easeOut,1,0,30,false);// This calls on the bgTween variable and fades oyt the currentBg

  prevBg = currentBg;

  currentBg = new bgAbout();

  bgTween.addEventListener(TweenEvent.MOTION_FINISH, bgOn);

  addChildAt(currentBg,0);

  currentBg.x = stage.stageWidth / 2;

  currentBg.y = stage.stageHeight / 2;

  eventListeners();

  menu.aboutHit_mc.removeEventListener(MouseEvent.MOUSE_OUT, btnOut);

  menu.aboutHit_mc.removeEventListener(MouseEvent.CLICK, btnAbout);

  menu.aboutHit_mc.removeEventListener(MouseEvent.MOUSE_OVER, btnOver);

  menu.about_btn.removeEventListener(MouseEvent.MOUSE_OUT, btnOut);

  //Disable Mouse Out functionality;

  menu.about_btn.removeEventListener(MouseEvent.CLICK, btnAbout);

  //Disable Mouse Out functionality;

  menu.about_btn.removeEventListener(MouseEvent.MOUSE_OVER, btnOver);

  handCursors();

  menu.aboutHit_mc.useHandCursor = false;

  menu.about_btn.useHandCursor = false;

  btnFlip();

  currentButton = menu.about_btn;

  }

  function btnWeb(e:MouseEvent):void

  {

  e.currentTarget.targetmc.gotoAndPlay(“click”);

  exitTween = new Tween(currentPage,”x”,Strong.easeInOut,currentPage.x,currentPage.x + 1000,30,false);//animate off old page

  prevPage = currentPage;

  currentPage = new Web();

  addChildAt(currentPage, 4);//adds the about page to the stage

  exitTween.addEventListener(TweenEvent.MOTION_FINISH, animateOn);

  currentPage.x = stage.stageWidth / 2 – 1000;

  currentPage.y = stage.stageHeight / 2;

  bgTween = new Tween(currentBg,”alpha”,Regular.easeOut,1,0,30,false);// This calls on the bgTween variable and fades oyt the currentBg

  prevBg = currentBg;

  currentBg = new bgWeb();

  bgTween.addEventListener(TweenEvent.MOTION_FINISH, bgOn);

  addChildAt(currentBg,0);

  currentBg.x = stage.stageWidth / 2;

  currentBg.y = stage.stageHeight / 2;

  eventListeners();

  menu.webHit_mc.removeEventListener(MouseEvent.MOUSE_OUT, btnOut);

  menu.webHit_mc.removeEventListener(MouseEvent.CLICK, btnWeb);

  menu.webHit_mc.removeEventListener(MouseEvent.MOUSE_OVER, btnOver);

  menu.web_btn.removeEventListener(MouseEvent.MOUSE_OUT, btnOut);

  //Disable Mouse Out functionality;

  menu.web_btn.removeEventListener(MouseEvent.CLICK, btnWeb);

  //Disable Mouse Out functionality;

  menu.web_btn.removeEventListener(MouseEvent.MOUSE_OVER, btnOver);

  handCursors();

  menu.webHit_mc.useHandCursor = false;

  menu.web_btn.useHandCursor = false;

  btnFlip();

  currentButton = menu.web_btn;

  }

  function animateOn(e:TweenEvent):void

  {

  new FluidObject(currentPage,middleParam);

  removeChild(prevPage);

  }

  function bgOn(e:TweenEvent):void

  {

  new FluidObject(currentBg,bgParam);

  removeChild(prevBg);

  }

  function btnFlip():void

  {

  currentButton.gotoAndPlay(“out”);

  }

  }

  }

  }

• http:/www.dlocc.com Devin Walker

  Awesome, thanks for posting this!

Support

Topics

DLOCC Socials