Jump to content
Search Community

AS3: Recurring Coding Problems. I'm So Green... :(

mhigley test
Moderator Tag

Recommended Posts

I've got two different version of some code I'm doing here, and I imagine there are far superior methods of writing these functions through loops and the such. But with my limited knowledge base... I can read and understand it, but actually writing it myself from scratch is still a little bit of a problem for me, so I unfortunately keep it simple.

 

So the issue I have is when I roll over the panels too quickly the code doesn't complete which is KILLING ME!!! What am I missing to complete the panel closing functions??

 

Here's two versions. The first using TimelineLite and then another stripped version that I thought fixed the problem but is still causing the same issues. Anyone have any ideas on what I'm missing here?

//---- PANEL ROLL_OVER FUNCTIONS ----\\
panel1.addEventListener(MouseEvent.ROLL_OVER, p1Open);
function p1Open(e:MouseEvent):void {
panel1Open();
panel2Closed();
panel3Closed();
panel4Closed();
}
panel2.addEventListener(MouseEvent.ROLL_OVER, p2Open);
function p2Open(e:MouseEvent):void {
panel1Closed();
panel2Open();
panel3Closed();
panel4Closed();

TweenLite.to(panel1, pnlSpd, {x:-1, ease:qeo});
}

//---- PANEL 01 ----\\
function panel1Closed():void {
var panelAnim:TimelineLite = new TimelineLite();
panelAnim.insertMultiple([
						 new TweenLite(panel1, pnlSpd, {x:264, ease:qeo}),
						 new TweenLite(panel1.panelMask, pnlSpd, {width:200, ease:qeo}),
						 new TweenMax(panel1.panelImg, pnlSpd, {x:-100, ease:qeo}),
						 new TweenLite(panel1.panelHdr, pnlSpd, {alpha:1, x:17, ease:qeo})
						 ], 0, TweenAlign.START, 0);
var panelOverlay:TimelineLite = new TimelineLite();
panelOverlay.insertMultiple([
							 new TweenLite(panel1.panelImg, pnlSpd, {colorTransform:{tint:0x000000, tintAmount:0.5}}),
							 new TweenLite(panel1.panelOverlay, pnlSpd, {alpha:0, ease:qeo})
							 ], 0, TweenAlign.START, 0);

var overlayAnim:TimelineLite = new TimelineLite();
overlayAnim.insertMultiple([
							new TweenLite(panel1.panelOverlay.panelOverlayHdr, pnlSpd, {alpha:0, x:7, ease:qeo}),
							new TweenLite(panel1.panelOverlay.panelOverlayTxt, pnlSpd, {alpha:0, ease:qeo}),
							new TweenLite(panel1.panelOverlay.panelOverlayBtn, pnlSpd, {alpha:0, ease:qeo})
							], 0, TweenAlign.START, 0);
}
function panel1Open():void {
var panelAnim:TimelineLite = new TimelineLite();
panelAnim.insertMultiple([
						 new TweenLite(panel1, pnlSpd, {x:-1, ease:qeo}),
						 new TweenLite(panel1.panelMask, pnlSpd, {width:500, ease:qeo}),
						 new TweenMax(panel1.panelImg, pnlSpd, {x:1, ease:qeo}),
						 new TweenLite(panel1.panelHdr, pnlSpd, {alpha:0, x:-150, ease:qeo})
						 ], 0, TweenAlign.START, 0);
var panelOverlay:TimelineLite = new TimelineLite();
panelOverlay.insertMultiple([
							 new TweenLite(panel1.panelImg, pnlSpd, {colorTransform:{tint:0x000000, tintAmount:0}}),
							 new TweenLite(panel1.panelOverlay, pnlSpd, {alpha:1, ease:qeo})
							 ], 0.25, TweenAlign.START, 0);

var overlayAnim:TimelineLite = new TimelineLite();
overlayAnim.insertMultiple([
							new TweenLite(panel1.panelOverlay.panelOverlayHdr, 0.75, {alpha:1, x:17, ease:qeo}),
							new TweenLite(panel1.panelOverlay.panelOverlayTxt, 0.5, {alpha:1, ease:qeo}),
							new TweenLite(panel1.panelOverlay.panelOverlayBtn, 0.5, {alpha:1, ease:qeo})
							], 1, TweenAlign.START, 0.2);
}

//---- PANEL 02 ----\\
function panel2Closed():void {
var panelAnim:TimelineLite = new TimelineLite();
panelAnim.insertMultiple([
						 new TweenLite(panel2, pnlSpd, {x:443, ease:qeo}),
						 new TweenLite(panel2.panelMask, pnlSpd, {width:200, ease:qeo}),
						 new TweenMax(panel2.panelImg, pnlSpd, {x:-100, ease:qeo}),
						 new TweenLite(panel2.panelHdr, pnlSpd, {alpha:1, x:17, ease:qeo})
						 ], 0, TweenAlign.START, 0);
var panelOverlay:TimelineLite = new TimelineLite();
panelOverlay.insertMultiple([
							 new TweenLite(panel2.panelImg, pnlSpd, {colorTransform:{tint:0x000000, tintAmount:0.5}}),
							 new TweenLite(panel2.panelOverlay, pnlSpd, {alpha:0, ease:qeo})
							 ], 0, TweenAlign.START, 0);

var overlayAnim:TimelineLite = new TimelineLite();
overlayAnim.insertMultiple([
							new TweenLite(panel2.panelOverlay.panelOverlayHdr, pnlSpd, {alpha:0, x:7, ease:qeo}),
							new TweenLite(panel2.panelOverlay.panelOverlayTxt, pnlSpd, {alpha:0, ease:qeo}),
							new TweenLite(panel2.panelOverlay.panelOverlayBtn, pnlSpd, {alpha:0, ease:qeo})
							], 0, TweenAlign.START, 0);
}
function panel2Open():void {
var panelAnim:TimelineLite = new TimelineLite();
panelAnim.insertMultiple([
						 new TweenLite(panel2, pnlSpd, {x:178, ease:qeo}),
						 new TweenLite(panel2.panelMask, pnlSpd, {width:500, ease:qeo}),
						 new TweenMax(panel2.panelImg, pnlSpd, {x:1, ease:qeo}),
						 new TweenLite(panel2.panelHdr, pnlSpd, {alpha:0, x:-150, ease:qeo})
						 ], 0, TweenAlign.START, 0);
var panelOverlay:TimelineLite = new TimelineLite();
panelOverlay.insertMultiple([
							 new TweenLite(panel2.panelImg, pnlSpd, {colorTransform:{tint:0x000000, tintAmount:0}}),
							 new TweenLite(panel2.panelOverlay, pnlSpd, {alpha:1, ease:qeo})
							 ], 0.5, TweenAlign.START, 0);

var overlayAnim:TimelineLite = new TimelineLite();
overlayAnim.insertMultiple([
							new TweenLite(panel2.panelOverlay.panelOverlayHdr, 0.75, {alpha:1, x:17, ease:qeo}),
							new TweenLite(panel2.panelOverlay.panelOverlayTxt, 0.5, {alpha:1, ease:qeo}),
							new TweenLite(panel2.panelOverlay.panelOverlayBtn, 0.5, {alpha:1, ease:qeo})
							], 1, TweenAlign.START, 0.2);

panel2.panelOverlay.panelOverlayBtn.addEventListener(MouseEvent.ROLL_OVER, overlayBtnOn);
panel2.panelOverlay.panelOverlayBtn.addEventListener(MouseEvent.ROLL_OUT, overlayBtnOff);
function overlayBtnOn(e:MouseEvent):void {
	TweenLite.to(panel2.panelOverlay.panelOverlayBtnHilite, 0.25, {alpha:0.2, ease:qeo});
}
function overlayBtnOff(e:MouseEvent):void {
	TweenLite.to(panel2.panelOverlay.panelOverlayBtnHilite, 0.25, {alpha:0, ease:qeo});
}
}

ETC...

 

 

//---- PANEL ROLL_OVER FUNCTIONS ----\\
panel1.addEventListener(MouseEvent.ROLL_OVER, p1Open);
function p1Open(e:MouseEvent):void {
panel1Open();
panel2Closed();
panel3Closed();
panel4Closed();
}
panel2.addEventListener(MouseEvent.ROLL_OVER, p2Open);
function p2Open(e:MouseEvent):void {
panel1Closed();
panel2Open();
panel3Closed();
panel4Closed();

TweenLite.to(panel1, pnlSpd, {x:-1, ease:qeo});
}

function panel1Closed():void {
TweenLite.to(panel1, pnlSpd, {x:264, ease:qeo});
TweenLite.to(panel1.panelMask, pnlSpd, {width:200, ease:qeo});
TweenLite.to(panel1.panelImg, pnlSpd, {x:-100, ease:qeo});
TweenLite.to(panel1.panelHdr, pnlSpd, {alpha:1, x:17, ease:qeo});
TweenMax.to(panel1.panelImg, pnlSpd, {colorTransform:{tint:0x000000, tintAmount:0.5}});
TweenLite.to(panel1.panelOverlay, pnlSpd, {alpha:0, ease:qeo});
TweenLite.to(panel1.panelOverlay.panelOverlayHdr, pnlSpd, {alpha:0, x:7, ease:qeo});
TweenLite.to(panel1.panelOverlay.panelOverlayTxt, pnlSpd, {alpha:0, ease:qeo});
TweenLite.to(panel1.panelOverlay.panelOverlayBtn, pnlSpd, {alpha:0, ease:qeo});
}
function panel1Open():void {
TweenLite.to(panel1, pnlSpd, {x:-1, ease:qeo});
TweenLite.to(panel1.panelMask, pnlSpd, {width:500, ease:qeo});
TweenLite.to(panel1.panelImg, pnlSpd, {x:1, ease:qeo});
TweenLite.to(panel1.panelHdr, pnlSpd, {alpha:0, x:-150, ease:qeo});
TweenMax.to(panel1.panelImg, pnlSpd, {delay:pnlSpd/2, colorTransform:{tint:0x000000, tintAmount:0}});
TweenLite.to(panel1.panelOverlay, pnlSpd, {delay:pnlSpd/2, alpha:1, ease:qeo});
TweenLite.to(panel1.panelOverlay.panelOverlayHdr, pnlSpd, {delay:pnlSpd, alpha:1, x:17, ease:qeo});
TweenLite.to(panel1.panelOverlay.panelOverlayTxt, pnlSpd, {delay:pnlSpd, alpha:1, ease:qeo});
TweenLite.to(panel1.panelOverlay.panelOverlayBtn, pnlSpd, {delay:pnlSpd, alpha:1, ease:qeo});
}

//---- PANEL 02 ----\\
function panel2Closed():void {
TweenLite.to(panel2, pnlSpd, {x:443, ease:qeo});
TweenLite.to(panel2.panelMask, pnlSpd, {width:200, ease:qeo});
TweenLite.to(panel2.panelImg, pnlSpd, {x:-100, ease:qeo});
TweenLite.to(panel2.panelHdr, pnlSpd, {alpha:1, x:17, ease:qeo});
TweenMax.to(panel2.panelImg, pnlSpd, {colorTransform:{tint:0x000000, tintAmount:0.5}});
TweenLite.to(panel2.panelOverlay, pnlSpd, {alpha:0, ease:qeo});
TweenLite.to(panel2.panelOverlay.panelOverlayHdr, pnlSpd, {alpha:0, x:7, ease:qeo});
TweenLite.to(panel2.panelOverlay.panelOverlayTxt, pnlSpd, {alpha:0, ease:qeo});
TweenLite.to(panel2.panelOverlay.panelOverlayBtn, pnlSpd, {alpha:0, ease:qeo});
}
function panel2Open():void {
TweenLite.to(panel2, pnlSpd, {x:178, ease:qeo});
TweenLite.to(panel2.panelMask, pnlSpd, {width:500, ease:qeo});
TweenLite.to(panel2.panelImg, pnlSpd, {x:1, ease:qeo});
TweenLite.to(panel2.panelHdr, pnlSpd, {alpha:0, x:-150, ease:qeo});
TweenMax.to(panel2.panelImg, pnlSpd, {delay:pnlSpd/2, colorTransform:{tint:0x000000, tintAmount:0}});
TweenLite.to(panel2.panelOverlay, pnlSpd, {delay:pnlSpd/2, alpha:1, ease:qeo});
TweenLite.to(panel2.panelOverlay.panelOverlayHdr, pnlSpd, {delay:pnlSpd, alpha:1, x:17, ease:qeo});
TweenLite.to(panel2.panelOverlay.panelOverlayTxt, pnlSpd, {delay:pnlSpd, alpha:1, ease:qeo});
TweenLite.to(panel2.panelOverlay.panelOverlayBtn, pnlSpd, {delay:pnlSpd, alpha:1, ease:qeo});

panel2.panelOverlay.panelOverlayBtn.addEventListener(MouseEvent.ROLL_OVER, overlayBtnOn);
panel2.panelOverlay.panelOverlayBtn.addEventListener(MouseEvent.ROLL_OUT, overlayBtnOff);
function overlayBtnOn(e:MouseEvent):void {
	TweenLite.to(panel2.panelOverlay.panelOverlayBtnHilite, 0.25, {alpha:0.2, ease:qeo});
}
function overlayBtnOff(e:MouseEvent):void {
	TweenLite.to(panel2.panelOverlay.panelOverlayBtnHilite, 0.25, {alpha:0, ease:qeo});
}
}

ETC...

 

I can post the actual .fla if anyone needs them, but the code is pretty self explanitory. Thanks everyone.

 

 

// JR

Link to comment
Share on other sites

I'd highly recommend avoiding the use of nested functions - it looks like you're using two of them for your ROLL_OVER/ROLL_OUT stuff in panel2Open(). nested functions are deleted in Flash once the parent function finishes running. This has nothing to do with TweenLite/Max - it's just something that can trip developers up in general.

 

Could you post a simplified example FLA that demonstrates the issue? Have you tried simplifying and isolating the issue in a separate FLA? That technique can be very useful when troubleshooting.

 

And when you say "doesn't complete", can you describe exactly what happens?

Link to comment
Share on other sites

Thanks for helping me out Jack. I've seen huge improvements in my coding abilities (greatly attributed to the GS library and your help), but I hit an invisible wall during my projects that I just can't get over yet. Here's the fla you asked to see.

 

The problem lies in that if the user slides over the panels too quickly, the animation doesn't complete and even in a closed state, the open animation is still showing. Looking at the code from a layman's p.o.v it seems like it should work. Each panel has a very specific open state that it should be in when hovered over (which it complies to), while all other panels should be in a closed state. I'm happy to elaborate more if you need...

 

 

// JR

Link to comment
Share on other sites

I didn't have time to comb through all your code or rework it for you, but I noticed several problems:

 

1) You're creating overlapping tweens. For example, in p3Open() you call panel1Closed() which animates panel1.x to 264 but in then a few lines later (still inside p3Open()), you animate panel1.x to -1. There are several places where you do this. I strongly suspect most or all of your problems relate to overwritten tweens due to logic issues in the code.

 

2) (this is minor) You're using a String "Quint.easeOut" for your ease, but that won't do anything - the ease must be a function like Quint.easeOut (not the literal String "Quint.easeOut"). Remove the quotes and type it as a Function and you should be fine.

 

If you use relatively static animations to open/close panels, you might want to just create a TimelineLite for each (with paused:true initially) and then play() or reverse() whenever you need to. Like when panel1 is rolled over, you panel1Timeline.play() and panel2Timeline.reverse() (and reverse() the other panel animations too). I didn't analyze things closely to see if that sort of thing would work perfectly in your scenario, but I figured I'd at least put the idea out there.

 

I'd strongly recommend creating a separate FLA that ONLY has 2 panels and try to get simple opening/closing accomplished first. Once you do that perfectly, move on to adding more complexities. This will force you to work through the logic and it will also allow you to see exactly where in the process things start breaking for you. It's a great troubleshooting technique. If you posted a more simplified example, it would definitely increase the chances that I'd have time to look through it.

Link to comment
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.
×
×
  • Create New...