Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
dada78

Simple AS3 Accordion Menu with TweenMax?

Recommended Posts

Hi,

I have been searching for a good example of creating a simple accordion menu, but everything I have come across seems over engineered.

 

1_I really like the simplicity of this menu:

See the Pen agfqA by ewe1991 (@ewe1991) on CodePen

but can't figure out how I could convert the jQuery code to AS3?

Does anyone have any ideas?

 

2_ Could this be accomplished using the blitMask plugin?

For example:

Set up: 3 mcs that each contain a tab panel portion and a content portion.

Have the blitMask to be 1/3 th size of each mc and then when the user hovers over, have the height of the blitMask itself animate top down to reveal the content.

--> So based on which mcs is targeted, I would set up a function that would animate the height of the mask and position of the mcs.

 

For example, if user rolls over mc1, blitMask1 would expand down and whatever previously hovered over mc was open would collapse - the blitMask of that mc contracting in height, while the other one is expanding.

I have been losing hair over this...

 

Thanks guys!

Link to post
Share on other sites

Hi

 

Building an accordion with HTML / JavaScript is much easier because when you tween the height of one element (to reveal it), the items below it naturally move out of the way. Most JS accordions basically just tween the width or height of the item you are opening and closing.

 

In the world of Flash, elements aren't positioned with this type of flexible / fluid layout. You have to manually update x/y positions of all the accordion elements.

 

There are lots of tutorials out there for building an AS3 accordion. I would suggest you get familiar with the basic concepts and then replace their animation control with TweenLite. However, in all honesty if you find an accordion that works for you, I doubt you will see much difference by adding TweenLite. The simple accordion mechanics of animating width, height, or position of a few elements isn't any sort of huge performance drain.

 

https://www.google.com/search?q=as3+accordion+menu+tutorial&oq=as3+accordion+menu+tutorial

 

The best and simplest advice I have found on building an accordion are from the first comment from Mike here:

http://code.tutsplus.com/tutorials/build-a-dynamic-flash-game-menu-the-accordion--active-10217

Do NOT follow all the code in that tutorial. It is overkill. In order for Mike's solution to work, you probably need to familiarize yourself with how the assets are arranged in the fla from that tutorial.

 

Concerning using BlitMask, I really don't think it is necessary for an accordion and it will probably be more work with very little payoff.

Link to post
Share on other sites

Thanks Carl,

this is exactly the tutorial I settled on (mainly the response from Mike) which works great, however it is defining the most left and most right x position as so for example:

panel1.props = {lx:0, rx:570, ind:1};

 

I however need to adjust this for a vertical version, what would the properties be for top y and bottom y? panel1.props = {ty:0, by:570, ind:1}; doesn't seem to do anything...

 

---------------------------------------------------------------------------------------

Nevermind it did work! Just needed to edit the Tweenlite properties to0 :-):

 

TweenLite.to(mc, .5, {y:mc.props.ty}); and TweenLite.to(mc, .5, {y:mc.props.by}
 

Link to post
Share on other sites

Ok, I was following that tutorial and had everything working until it all broke:

Every time I add another movieclip manually to the stage like a background for example or text mc it throws errors such as this one and the accordion stops working:

 

ERROR: TypeError: Error #1010: A term is undefined and has no properties.
    at Accordion_Test_fla::MainTimeline/onMouseOver()[Accordion_Test_fla.MainTimeline::frame1:57]

 

wich is pointing to this line: if(mc.props.ind <= mousedOver.props.ind){

----------------------------------------------------------------------------------------------------------------

 

 

Here is the code portion:

import com.greensock.*;
import com.greensock.easing.*;

//Start top position(ty) and bottom position (by) of expanded panel

-- I thought using ty and by would not work but it did animate as it's supposed to until it broke

panel1.props = {ty:266, by:516, ind:1};
panel2.props = {ty:400, by:650, ind:2};
panel3.props = {ty:534, by:784, ind:3};

panel1.addEventListener(MouseEvent.ROLL_OVER, onMouseOver);
panel2.addEventListener(MouseEvent.ROLL_OVER, onMouseOver);
panel3.addEventListener(MouseEvent.ROLL_OVER, onMouseOver);

function onMouseOver(e:MouseEvent):void
{
    //Determine the panel which was moused over
    var mousedOver:MovieClip = MovieClip(e.target);
    
    //Loop through all of the panels and animate them to the correct position.
    for(var i:int=0; i<numChildren; i++)
    {
        
        //Inside the loop I created a new variable named "mc"
    
        var mc:MovieClip = MovieClip(getChildAt(i));
        
        //check whether the index of the current clip is less than or equal to the index of the clip that was clicked/mouseover on.
        if(mc.props.ind <= mousedOver.props.ind){
  
        //if it is we need to animate to the top
            TweenLite.to(mc, .5, {y:mc.props.ty});
        }
            
            //if not animate to the bottom
        else {
            TweenLite.to(mc, .5, {y:mc.props.by});
    }
    }
    }
 
    stop();

Any idea how I could make this work? Thanks in advance!

Link to post
Share on other sites

I figured it out:

 

I just created a container called panelHolder and added the 3 panel movieclips in there, then referenced them accordingly in the code like for example:

panelHolder.panel1.props = {ty:266, by:516, ind:1};

panelHolder.panel1.addEventListener(MouseEvent.ROLL_OVER, onMouseOver);

for(var i:int=0; i<panelHolder.numChildren; i++)

var mc:MovieClip = MovieClip(panelHolder.getChildAt(i));
Link to post
Share on other sites

Excellent. Glad to hear you figured it out.

Been swamped today.

Link to post
Share on other sites

In order to add a color Tween to the tab area I did this:
Inside the onMouseOver function I added the following:
This will animate the background tab color:

TweenMax.to(mousedOver.tab.bgrColor, .5, {colorTransform:{tint:0x2ea0dd, tintAmount:1}});

and then in an if else statement to reset:

if(mc.props.ind != mousedOver.props.ind ){
		TweenMax.to(mc.tab.bgrColor, .5, {colorTransform:{tint:0x2ea0dd, tintAmount:0}});
		}
  • Like 1
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×