Rollover elastic bounce rezise

    By Evan Mullins | Published: July 26, 2007

    Flash experiment that could be used for navigation. Rollover each area and watch them all resize themself to accomodate the growing box. It’s pretty fun to play with.

    Example

    Get Adobe Flash player


    I’m sure there is a way to simplify the code, but this worked so there was no need.

    Actionscript

    import mx.transitions.easing.*;
    import mx.transitions.Tween;
    var normWidth:Number = mc_1._width;
    mc1x = mc_1._x;
    mc2x = mc_2._x;
    mc3x = mc_3._x;
    mc4x = mc_4._x;
    mc_1.onRollOver = function ():Void  {
    //Tween( obj:Object, prop:String, func:Function, begin:Number, finish:Number, duration:Number, useSeconds:Boolean )
    //Double in size
    var mc1Width:Tween = new Tween (mc_1, "_width", Elastic.easeOut, normWidth, normWidth * 2, 1, true);
    mc_1.gotoAndPlay("over");
    //Shrink by 33% and move 66% along using width
    var mc2Width:Tween = new Tween (mc_2, "_width", Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
    var mc2X:Tween = new Tween (mc_2, "_x", Elastic.easeOut, mc2x, (mc2x) + (normWidth * 2 / 3), 1, true);
    //Shrink by 33% and move 33% along using width
    var mc3Width:Tween = new Tween (mc_3, "_width", Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
    var mc3X:Tween = new Tween (mc_3, "_x", Elastic.easeOut, mc3x, (mc3x) + (normWidth * 1 / 3), 1, true);
    //Shrink by 33%, no need to move as already in position
    var mc4Width:Tween = new Tween (mc_4, "_width", Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
    //trace("rollOver 1");
    };
    mc_1.onRollOut = function ():Void  {
    //Return to normal width
    var mc1Move:Tween = new Tween (this, "_width", Elastic.easeOut, normWidth * 2, normWidth, 1, true);
    mc_1.gotoAndStop("up");
    //Return to normal width and use mc_1 as basis for x
    var mc2Width:Tween = new Tween (mc_2, "_width", Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
    var mc2X:Tween = new Tween (mc_2, "_x", Elastic.easeOut, (mc2x) + (normWidth * 2 / 3), mc2x, 1, true);
    //var mc2X:Tween = new Tween (mc_2, "_x", Elastic.easeOut, mc_2._x, mc_1._x + (normWidth*2), 1, true);
    //Return to normal width and use mc_4 as basis for x
    var mc3Width:Tween = new Tween (mc_3, "_width", Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
    var mc3X:Tween = new Tween (mc_3, "_x", Elastic.easeOut, (mc3x) + (normWidth * 1 / 3), mc3x, 1, true);
    //Return to normal width
    var mc4Width:Tween = new Tween (mc_4, "_width", Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
    //trace("rollOut 1");
    };
    mc_2.onRollOver = function ():Void  {
    //Double in size and move left 33%
    var mc2Width:Tween = new Tween (mc_2, "_width", Elastic.easeOut, normWidth, normWidth * 2, 1, true);
    var mc2X:Tween = new Tween (mc_2, "_x", Elastic.easeOut, mc2x, (mc2x) + (normWidth * 2 / 3), 1, true);
    mc_2.gotoAndPlay("over");
    //Tween( obj:Object, prop:String, func:Function, begin:Number, finish:Number, duration:Number, useSeconds:Boolean )
    //shrink by 33% mc1
    var mc1Width:Tween = new Tween (mc_1, "_width", Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
    //var mc2X:Tween = new Tween (mc_2, "_x", Elastic.easeOut, mc_2._x, (mc_2._x) + (mc_2._width*2/3), 1, true);
    //Shrink by 33% and move 33% along using width
    var mc3Width:Tween = new Tween (mc_3, "_width", Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
    var mc3X:Tween = new Tween (mc_3, "_x", Elastic.easeOut, mc3x, (mc3x) + (normWidth * 1 / 3), 1, true);
    //Shrink by 33%, no need to move as already in position
    var mc4Width:Tween = new Tween (mc_4, "_width", Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
    //trace("rollOver 2");
    };
    mc_2.onRollOut = function ():Void  {
    //Return to normal width and position
    var mc2Move:Tween = new Tween (this, "_width", Elastic.easeOut, normWidth * 2, normWidth, 1, true);
    var mc2X:Tween = new Tween (mc_2, "_x", Elastic.easeOut, (mc2x) + (normWidth * 2 / 3), mc2x, 1, true);
    mc_2.gotoAndStop("up");
    //Return to normal width and use mc_1 as basis for x
    var mc1Width:Tween = new Tween (mc_1, "_width", Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
    //var mc2X:Tween = new Tween (mc_2, "_x", Elastic.easeOut, mc_2._x, mc_1._x + (normWidth*2), 1, true);
    //Return to normal width and use mc_4 as basis for x
    var mc3Width:Tween = new Tween (mc_3, "_width", Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
    var mc3X:Tween = new Tween (mc_3, "_x", Elastic.easeOut, (mc3x) + (normWidth * 1 / 3), mc3x, 1, true);
    //Return to normal width
    var mc4Width:Tween = new Tween (mc_4, "_width", Elastic.easeOut,normWidth * 2 / 3, normWidth, 1, true);
    //trace("rollOut 2");
    };
    mc_3.onRollOver = function ():Void  {
    //Double in size and move left 33%
    var mc3Width:Tween = new Tween (mc_3, "_width", Elastic.easeOut, normWidth, normWidth * 2, 1, true);
    var mc3X:Tween = new Tween (mc_3, "_x", Elastic.easeOut, mc3x, (mc3x) + (normWidth * 1 / 3), 1, true);
    mc_3.gotoAndPlay("over");
    //Tween( obj:Object, prop:String, func:Function, begin:Number, finish:Number, duration:Number, useSeconds:Boolean )
    //shrink by 33% mc1
    var mc1Width:Tween = new Tween (mc_1, "_width", Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
    //var mc2X:Tween = new Tween (mc_2, "_x", Elastic.easeOut, mc_2._x, (mc_2._x) + (mc_2._width*2/3), 1, true);
    //Shrink by 33% and move 33% along using width
    var mc2Width:Tween = new Tween (mc_2, "_width", Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
    var mc2X:Tween = new Tween (mc_2, "_x", Elastic.easeOut, mc2x, (mc2x) + (normWidth * -2 / 3), 1, true);
    //Shrink by 33%, no need to move as already in position
    var mc4Width:Tween = new Tween (mc_4, "_width", Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
    //trace("rollOver 3");
    };
    mc_3.onRollOut = function ():Void  {
    //Return to normal width and position
    var mc3Move:Tween = new Tween (this, "_width", Elastic.easeOut, normWidth * 2, normWidth, 1, true);
    var mc3X:Tween = new Tween (mc_3, "_x", Elastic.easeOut, (mc3x) + (normWidth * 1 / 3), mc3x, 1, true);
    mc_3.gotoAndStop("up");
    //Return to normal width and use mc_1 as basis for x
    var mc1Width:Tween = new Tween (mc_1, "_width", Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
    //var mc2X:Tween = new Tween (mc_2, "_x", Elastic.easeOut, mc_2._x, mc_1._x + (normWidth*2), 1, true);
    //Return to normal width and use mc_4 as basis for x
    var mc2Width:Tween = new Tween (mc_2, "_width", Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
    var mc2X:Tween = new Tween (mc_2, "_x", Elastic.easeOut, (mc2x) + (normWidth * -2 / 3), mc2x, 1, true);
    //Return to normal width
    var mc4Width:Tween = new Tween (mc_4, "_width", Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
    //trace("rollOut 3");
    };
    mc_4.onRollOver = function ():Void  {
    //shrink in size and move left 33%
    var mc3Width:Tween = new Tween (mc_3, "_width", Elastic.easeOut, normWidth, normWidth * 2/3, 1, true);
    var mc3X:Tween = new Tween (mc_3, "_x", Elastic.easeOut, mc3x, (mc3x) + (normWidth * - 3 / 3), 1, true);
    //Tween( obj:Object, prop:String, func:Function, begin:Number, finish:Number, duration:Number, useSeconds:Boolean )
    //shrink by 33% mc1
    var mc1Width:Tween = new Tween (mc_1, "_width", Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
    //var mc2X:Tween = new Tween (mc_2, "_x", Elastic.easeOut, mc_2._x, (mc_2._x) + (mc_2._width*2/3), 1, true);
    //Shrink by 33% and move 33% along using width
    var mc2Width:Tween = new Tween (mc_2, "_width", Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
    var mc2X:Tween = new Tween (mc_2, "_x", Elastic.easeOut, mc2x, (mc2x) + (normWidth * -2 / 3), 1, true);
    //double in size, no need to move as already in position
    var mc4Width:Tween = new Tween (mc_4, "_width", Elastic.easeOut, normWidth, normWidth * 2, 1, true);
    mc_4.gotoAndPlay("over");
    //trace("rollOver 4");
    };
    mc_4.onRollOut = function ():Void  {
    //Return to normal width and position
    var mc3Move:Tween = new Tween (mc_3, "_width", Elastic.easeOut, normWidth * 2/3, normWidth, 1, true);
    var mc3X:Tween = new Tween (mc_3, "_x", Elastic.easeOut, (mc3x) + (normWidth * - 3 / 3), mc3x, 1, true);
    //Return to normal width and use mc_1 as basis for x
    var mc1Width:Tween = new Tween (mc_1, "_width", Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
    //var mc2X:Tween = new Tween (mc_2, "_x", Elastic.easeOut, mc_2._x, mc_1._x + (normWidth*2), 1, true);
    //Return to normal width and use mc_4 as basis for x
    var mc2Width:Tween = new Tween (mc_2, "_width", Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
    var mc2X:Tween = new Tween (mc_2, "_x", Elastic.easeOut, (mc2x) + (normWidth * -2 / 3), mc2x, 1, true);
    //Return to normal width
    var mc4Width:Tween = new Tween (mc_4, "_width", Elastic.easeOut, normWidth * 2, normWidth, 1, true);
    mc_4.gotoAndStop("up");
    //trace("rollOut 4");
    };

    Download

    Here is the source file: rolloverResizeEvan.fla for those who want.

    This entry was posted in portfolio and tagged , , , , , , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

    4 Comments

    1. marco
      Posted September 5, 2008 at 12:32 pm | Permalink

      nice.. but how to expand the sections to 6 ?

      Reply
    2. Evan Mullins
      Posted September 5, 2008 at 12:40 pm | Permalink

      That would definitely benefit from some code simplification! One day I’ll get around to it. =) And you can bet I’ll let you know right here!

      Reply
    3. tyler boddy
      Posted January 14, 2009 at 6:36 pm | Permalink

      I really like this. I was wondering if you could send me the .fla to rework, as I’m not good at coding from scratch yet. nice work!

      Reply
      • Evan Mullins
        Posted January 16, 2009 at 11:01 pm | Permalink

        .fla is already available for download, enjoy! Let me know what you make with it…

        Reply

    Post a Comment

    Your email is never published nor shared. Required fields are marked *

    *
    *

    You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

    • Recent Posts

      WordPress updates plugin directory

      By Evan Mullins on May 21, 2012

      New additions to the plugin directory include: favorites, incorporating support forums into it's own tab for each plugin as well as support stats being displayed! Great! I think we also need the ability to give plugins ratings and reviews (bonus points if it can be done from within a wordpress admin dashboard when installing plugins). [...]

      Category:

      Short Head

      By Evan Mullins on May 17, 2012

      Use zipf's short head to tune your website rather than redesign the whole thing. To make a website successful it needs to meet the needs of the users. Find out what those needs are by using the short head philosophy to equate most searched things as the biggest needs of the users. Use personas to [...]

      Category:

      Img Set?

      By Evan Mullins on May 16, 2012

      Great article at a list apart discusing the state of the industry regarding responsive images. This picks apart the set attribute of the img element from a surprisingly objective view coming from someone so close to the picture element. Insightful discussion about the principle behind the proposals than the actual solution too. If the working [...]

      Category:

      Triudo

      By Evan Mullins on May 16, 2012

      A mesmerizing animated triangle-ish shape form. Embedded Link triduo triduo Tweet

      Category:

      Git – the paradigm shift

      By Evan Mullins on May 16, 2012

      A great developer story about the differences on what Git is vs other version control and what Git is not. This is how we should learn it. I heard over and over that it was distributed, but never grasped what that meant, so here are a few links and explanations that will help unlearn version [...]

      Category:

      Tweening Lib comes to Javascript!

      By Evan Mullins on May 16, 2012

      I'm very excited to share the news that the tween library from GreenSock (hands down the best tweening library I used in flash) is not ported for use in javascript! This will be great! I missed that simple syntax from as3 when animating javascript, and now I can have my cake and eat it too. [...]

      Category:

      Responsive CSS Tricks

      By Evan Mullins on May 16, 2012

      Here are a few useful css tricks to remember when building responsive design sites from web designer wall Embedded Link 5 Useful CSS Tricks for Responsive Design Making the design to be responsive is very easy as shown in my Responsive Design in 3 Steps tutorial, but maintaining the elements to look aesthetically balanced on [...]

      Category:

      Picture element of srcset attribute?

      By Evan Mullins on May 16, 2012

      Bruce details the reasons and story behind the srcset attribute which is now introduced as an alternative to the picture element. Some aspects of the attribute are nice (like the fact that it's an attribute and not a new element, so it's creating up new elements with for problems. It's adapting currently used elements to [...]

      Category:

      SVG Preloader with Raphael JS

      By Evan Mullins on May 16, 2012

      Here's a very creative use of using a newly available technology. Using svg graphics which are very lightweight, for a website preloader. I like the animation used as well. Embedded Link Make a stylish preloader with SVG | Tutorial | .net magazine Many sites neglect users with slow connections. Ian Culshaw explains how to use [...]

      Category:

      CSS3 Button/Icon set

      By Evan Mullins on May 15, 2012

      I've been secretly hoping to see a few of these pop up once the whole icon font idea spread through the nets. I really like this idea and it's a very nice implementation too! I only see some quality issues on a couple of the icons (such as youtube), but it's awesome and I hope [...]

      Category:

    • Recent Comments

      Bruce Brownlee

      Bruce Brownlee

      Ah IE6. I'd have 2 more years of sleep without IE6. Margin doubling, no properties,...
      versaena

      versaena

      how to give color at runtime…… thank you
      Mobile Websites

      Mobile Websites

      I disagree, mobile websites are the future – desktop websites and mobile websites...
      Matt Fasick

      Matt Fasick

      That's cool. I like the ripple effect as well.
      Nico

      Nico

      hi! really great job guy! very impressive.. just a question… do u have a solution to do a refresh...
      Evan Mullins

      Evan Mullins

      Agreed! I've just seen some people get pretty heated about separating all functionality...