1 person found this helpful
You should trim your graphics file to the bounding box of the icon : you waste resources with useless transparent pixels.
The icon images (they are highly pixelated) and backgrounds should be flattened in a unique image file to limit the number of elements to tween.
You need to structure with symbols. First convert the black rectangle, that will be instantiated four times, into a blackRect symbol (uncheck autoplay).
Each of the four symbols item1, item2, item3 and item4 wraps an instance of blackRect, a text and the icon image (GIF). They are laid out on stage and stacked correctly in the Elements panel (top : item4 ; bottom : item1).
We could then select the four symbols and convert them into a symbol accordion (uncheck autoplay). The timeline for this symbol would have four labels : expand1 (0 s), expand2 (1 s), expand3 (2 s), expand4 (3 s), each of these sequences (tweening the left property of one of the items) ending by a sym.stop(); trigger. Finally, we would add mouseover and mouseout event handlers with sym.play(); and sym.playReverse(); statements.
Such a timeline-based solution would only be possible with a linear state machine. Here, there are five states : S0 (collapsed), S1 (item1 expanded), S2 (item2 expanded), S3 (item3 expanded) and S4 (item4 expanded). By linear state machine, I mean a graph of possible state changes like the following :
S0 <==> S1 <==> S2 <==> S3 <==> S4
But that's not the case here : to the preceding changes, you must also add the possible state changes
S0 <==> S2, S0 <==> S3 and S0 <==> S4
For example :
S1 + mouseover item2 => S2
S2 + mouseout on the right (mouseover item3) => S3
S2 + mouseout on the left (mouseover item1) => S1
S2 + mouseout on the top or bottom => S0
So, you need to handle by code
- the complete state machine
- the tweening via animate()
PS : this is an horizontal variant of the accordion widget