Tweens Not Appearing As Programmed.

[ej23]

For starters here is a link to the page that demonstrates my concern.

 

http://www.erickjurado.com/pages/demopage.html

 

If you notice, and the bottom right of the grid, there are two arrow buttons which are suppose to be the same size, but for some reason which I can't seem to figure out they are not appearing like they should.......One is smaller and another is squeezed.

 

Now I've gone over my code, and I can't seem to figure out exactly what the issue is.

 

I am using TimelineMax, which may or may not have to do with the issue.

 

I also thought that perhaps it could be an Overwrite issue, but I have the Overwrite feature set to automatically overwrite anything.

 

Here is the code. I've highlighted the code where the issue is appearing.

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


stop();

OverwriteManager.init(2);

/////////////////LINES START////////////////////////////////LINES START////////////////////////////////LINES START///////////////

var thevertline:vertline = new vertline();
addChild(thevertline);

thevertline.height = 1.0;
thevertline.width = 1.25;
thevertline.x = 23.5;
thevertline.y = 193.5;
thevertline.alpha = 0;









/////////////MAIN SQUARES START////////////MAIN SQUARES START////////////MAIN SQUARES START////////////MAIN SQUARES START////////////



var felasquare:fela = new fela();
addChild(felasquare);
felasquare.width = 0;
felasquare.height = 0;
felasquare.x = 59.2;
felasquare.y = 164.8;
felasquare.alpha = 0;



felasquare.addEventListener(MouseEvent.ROLL_OVER, felaexpander);
felasquare.addEventListener(MouseEvent.ROLL_OUT, defelaexpander);



var selectasquare:selecta = new selecta();
addChild(selectasquare);
selectasquare.width = 0;
selectasquare.height = 0;
selectasquare.x = 148.7;
selectasquare.y = 164.8;
selectasquare.alpha = 0;



selectasquare.addEventListener(MouseEvent.ROLL_OVER, selectaexpander);
selectasquare.addEventListener(MouseEvent.ROLL_OUT, deselectaexpander);


var eddiesquare:eddie = new eddie();
addChild(eddiesquare);
eddiesquare.width = 0;
eddiesquare.height = 0;
eddiesquare.x = 238.2;
eddiesquare.y = 164.8;
eddiesquare.alpha = 0;



eddiesquare.addEventListener(MouseEvent.ROLL_OVER, eddieexpander);
eddiesquare.addEventListener(MouseEvent.ROLL_OUT, deeddieexpander);



var ebirdsquare:ebird = new ebird();
addChild(ebirdsquare);
ebirdsquare.width = 0;
ebirdsquare.height = 0;
ebirdsquare.x = 327.6;
ebirdsquare.y = 164.8;
ebirdsquare.alpha = 0;



ebirdsquare.addEventListener(MouseEvent.ROLL_OVER, ebirdexpander);
ebirdsquare.addEventListener(MouseEvent.ROLL_OUT, deebirdexpander);


var ss:sssquare = new sssquare();
addChild(ss);
ss.width = 0;
ss.height = 0;
ss.x = 417.1;
ss.y = 164.8;
ss.alpha = 0;



ss.addEventListener(MouseEvent.ROLL_OVER, ssexpander);
ss.addEventListener(MouseEvent.ROLL_OUT, dessexpander);

var ecuadorsquare:ecuador = new ecuador();
addChild(ecuadorsquare);
ecuadorsquare.width = 0;
ecuadorsquare.height = 0;
ecuadorsquare.x = 506.5;
ecuadorsquare.y = 164.8;
ecuadorsquare.alpha = 0;

ecuadorsquare.addEventListener(MouseEvent.ROLL_OVER, ecuadorsquareexpander);
ecuadorsquare.addEventListener(MouseEvent.ROLL_OUT, deecuadorsquareexpander);



var sevensquare:seveninch = new seveninch();
addChild(sevensquare);
sevensquare.width = 0;
sevensquare.height = 0;
sevensquare.x = 59.2;
sevensquare.y = 253.9;
sevensquare.alpha = 0;

sevensquare.addEventListener(MouseEvent.ROLL_OVER, sevensquareexpander);
sevensquare.addEventListener(MouseEvent.ROLL_OUT, desevensquareexpander);



var ejcardsquare:ejcard = new ejcard();
addChild(ejcardsquare);
ejcardsquare.width = 0;
ejcardsquare.height = 0;
ejcardsquare.x = 148.7;
ejcardsquare.y = 253.9;
ejcardsquare.alpha = 0;

ejcardsquare.addEventListener(MouseEvent.ROLL_OVER, ejcardsquareexpander);
ejcardsquare.addEventListener(MouseEvent.ROLL_OUT, deejcardsquareexpander);



var la:lasquare = new lasquare();
addChild(la);
la.width = 0;
la.height = 0;
la.x = 238.2;
la.y = 253.9;
la.alpha = 0;

la.addEventListener(MouseEvent.ROLL_OVER, laexpander);
la.addEventListener(MouseEvent.ROLL_OUT, delaexpander);



var garysquare:gary = new gary();
addChild(garysquare);
garysquare.width = 0;
garysquare.height = 0;
garysquare.x = 327.6;
garysquare.y = 253.9;
garysquare.alpha = 0;

garysquare.addEventListener(MouseEvent.ROLL_OVER, garysquareexpander);
garysquare.addEventListener(MouseEvent.ROLL_OUT, degarysquareexpander);



var corneliussquare:cornelius = new cornelius();
addChild(corneliussquare);
corneliussquare.width = 0;
corneliussquare.height = 0;
corneliussquare.x = 417.1;
corneliussquare.y = 253.9;
corneliussquare.alpha = 0;

corneliussquare.addEventListener(MouseEvent.ROLL_OVER,corneliussquareexpander);
corneliussquare.addEventListener(MouseEvent.ROLL_OUT, decorneliussquareexpander);


var bbooksquare:bbook = new bbook();
addChild(bbooksquare);
bbooksquare.width = 0;
bbooksquare.height = 0;
bbooksquare.x = 506.5;
bbooksquare.y = 253.9;
bbooksquare.alpha = 0;

bbooksquare.addEventListener(MouseEvent.ROLL_OVER,bbooksquareexpander);
bbooksquare.addEventListener(MouseEvent.ROLL_OUT, debbooksquareexpander);




var creative:creativetitlewords = new creativetitlewords();
addChild(creative);
creative.alpha = 0;
creative.width = 0;
creative.height = 0;
creative.x = 93.6;
creative.y = 370.8;




var nexter:nextbutton = new nextbutton();
addChild(nexter);
nexter.height = 0;
nexter.width = 0;
nexter.x = 555.6;
nexter.y = 367.9;
nexter.alpha = 0;






var mainmenu:mainmenubutton = new mainmenubutton();
addChild(mainmenu);
mainmenu.height = 0;
mainmenu.width = 0;
mainmenu.x = 500;
mainmenu.y = 367.9;
mainmenu.alpha = 0;

mainmenu.addEventListener(MouseEvent.CLICK, elclosing);



var TheSquares:TimelineMax = new TimelineMax({delay:1,yoyo:false});


TheSquares.insert( new TweenMax (thevertline, .5,{alpha:1, height:80,ease:Cubic.easeOut}));

TheSquares.insert( new TweenMax (thevertline, .95,{delay:.55, x:595.5,ease:Cubic.easeInOut}));

TheSquares.insert( new TweenMax (felasquare, .75,{delay:1.25, alpha:1, width:85.2, height:85.2,ease:Back.easeOut}));

TheSquares.insert( new TweenMax (selectasquare, .75,{delay:1.30, alpha:1, width:85.2, height:85.2,ease:Back.easeOut}));

TheSquares.insert( new TweenMax (eddiesquare, .75,{delay:1.35, alpha:1, width:85.2, height:85.2,ease:Back.easeOut}));

TheSquares.insert( new TweenMax (ebirdsquare, .75,{delay:1.40, alpha:1, width:85.2, height:85.2,ease:Back.easeOut}));

TheSquares.insert( new TweenMax (ss, .75,{delay:1.45, alpha:1, width:85.2, height:85.2,ease:Back.easeOut}));

TheSquares.insert( new TweenMax (ecuadorsquare, .75,{delay:1.5, alpha:1, width:85.2, height:85.2,ease:Back.easeOut}));

TheSquares.insert( new TweenMax (thevertline, .75,{delay:2, y:245.8, height:183.5,ease:Cubic.easeOut}));

TheSquares.insert( new TweenMax (thevertline, .75,{delay:2.30, y:279.8, height:80,ease:Cubic.easeOut}));

TheSquares.insert( new TweenMax (thevertline, .89,{delay:2.78, x:24.5, ease:Cubic.easeInOut}));

TheSquares.insert( new TweenMax (bbooksquare, .75,{delay:3, width:85.2, height:85.2, alpha:1,ease:Back.easeOut}));

TheSquares.insert( new TweenMax (corneliussquare, .75,{delay:3.05, width:85.2, height:85.2, alpha:1,ease:Back.easeOut}));

TheSquares.insert( new TweenMax (garysquare, .75,{delay:3.10, width:85.2, height:85.2, alpha:1,ease:Back.easeOut}));

TheSquares.insert( new TweenMax (la, .75,{delay:3.15, width:85.2, height:85.2, alpha:1,ease:Back.easeOut}));

TheSquares.insert( new TweenMax (ejcardsquare, .75,{delay:3.20, width:85.2, height:85.2, alpha:1,ease:Back.easeOut}));

TheSquares.insert( new TweenMax (sevensquare, .75,{delay:3.25, width:85.2, height:85.2, alpha:1,ease:Back.easeOut}));

TheSquares.insert( new TweenMax (thevertline, 1,{delay:4, height:0, alpha:0, ease:Cubic.easeOut}));

TheSquares.insert( new TweenMax (creative, .75,{delay:4.05,alpha:1, width:113.8, height:24, ease:Back.easeOut}));

TheSquares.insert( new TweenMax (mainmenu, .75,{delay:4.15, height:33.85, width:33.85, alpha:1, ease:Back.easeOut}));

TheSquares.insert( new TweenMax (nexter, .75,{delay:4.15, height:33.85, width:35.85, alpha:1, ease:Back.easeOut}));



function felaexpander(event:MouseEvent):void
{
TweenMax.to(felasquare, .25, {width:92.2,height:92.2, x:53.2, y:159.8, ease:Sine.easeInOut});
TweenMax.to(felasquare, .5, {bevelFilter:{blurX:10, blurY:10, strength:.5, angle:150, highlightcolor:5, highlightAlpha:1, shadowAlpha:.5,distance:2}});
}

function defelaexpander(event:MouseEvent):void
{
TweenMax.to(felasquare, 4, {width:85.2,height:85.2, x:59.2, y:164.8, rotation:0,ease:Elastic.easeOut});
   TweenMax.to(felasquare, .25, {bevelFilter:{blurX:10, blurY:10, strength:.5, angle:150, highlightcolor:5, highlightAlpha:1, shadowAlpha:.5,distance:2}});
}


function selectaexpander(event:MouseEvent):void
{
TweenMax.to(selectasquare, .25, {width:92.2,height:92.2, x:142.5, y:159.8, ease:Sine.easeInOut});
TweenMax.to(selectasquare, .5, {bevelFilter:{blurX:20, blurY:20, strength:2, angle:-300, highlightcolor: 10, highlightAlpha:.15, shadowAlpha:.15,distance:3}})
}

function deselectaexpander(event:MouseEvent):void
{
TweenMax.to(selectasquare, 4, {width:85.2,height:85.2, x:148.7, y:164.8, rotation:0,ease:Elastic.easeOut});
   TweenMax.to(selectasquare, .25, {bevelFilter:{blurX:10, blurY:10, strength:.5, angle:150, highlightcolor:5, highlightAlpha:1, shadowAlpha:.5,distance:2}});
}


function eddieexpander(event:MouseEvent):void
{
TweenMax.to(eddiesquare, .25, {width:92.2,height:92.2, x:233, y:159, ease:Sine.easeInOut});
TweenMax.to(eddiesquare, .5, {bevelFilter:{blurX:20, blurY:20, strength:2, angle:-300, highlightcolor: 10, highlightAlpha:.15, shadowAlpha:.15,distance:3}})
}

function deeddieexpander(event:MouseEvent):void
{
TweenMax.to(eddiesquare, 4, {width:85.2,height:85.2, x:238.2, y:164.8, rotation:0,ease:Elastic.easeOut});
   TweenMax.to(eddiesquare, .25, {bevelFilter:{blurX:10, blurY:10, strength:.5, angle:150, highlightcolor:5, highlightAlpha:1, shadowAlpha:.5,distance:2}});
}

function ebirdexpander(event:MouseEvent):void
{
TweenMax.to(ebirdsquare, .25, {width:92.2,height:92.2, y:159, x:320.6, ease:Sine.easeInOut});
TweenMax.to(ebirdsquare, .5, {bevelFilter:{blurX:20, blurY:20, strength:2, angle:-300, highlightcolor: 10, highlightAlpha:.15, shadowAlpha:.15,distance:3}})
}

function deebirdexpander(event:MouseEvent):void
{
TweenMax.to(ebirdsquare, 4, {width:85.2,height:85.2, x:327.6, y:164.8, rotation:0,ease:Elastic.easeOut});
   TweenMax.to(ebirdsquare, .25, {bevelFilter:{blurX:10, blurY:10, strength:.5, angle:150, highlightcolor:5, highlightAlpha:1, shadowAlpha:.5,distance:2}});
}


function ssexpander(event:MouseEvent):void
{
TweenMax.to(ss, .25, {width:92.2,height:92.2, y:160, x:412, ease:Sine.easeInOut});
TweenMax.to(ss, .5, {bevelFilter:{blurX:20, blurY:20, strength:2, angle:-300, highlightcolor: 10, highlightAlpha:.15, shadowAlpha:.15,distance:3}})
}

function dessexpander(event:MouseEvent):void
{
TweenMax.to(ss, 4, {width:85.2,height:85.2, x:417.1, y:164.8, rotation:0,ease:Elastic.easeOut});
   TweenMax.to(ss, .25, {bevelFilter:{blurX:10, blurY:10, strength:.5, angle:150, highlightcolor:5, highlightAlpha:1, shadowAlpha:.5,distance:2}});
}


function ecuadorsquareexpander(event:MouseEvent):void
{
TweenMax.to(ecuadorsquare, .25, {width:92.2,height:92.2, y:159, x:501, ease:Sine.easeInOut});
TweenMax.to(ecuadorsquare, .5, {bevelFilter:{blurX:20, blurY:20, strength:2, angle:-300, highlightcolor: 10, highlightAlpha:.15, shadowAlpha:.15,distance:3}})
}

function deecuadorsquareexpander(event:MouseEvent):void
{
TweenMax.to(ecuadorsquare, 4, {width:85.2,height:85.2, x:506.5, y:164.8, ease:Elastic.easeOut});
   TweenMax.to(ecuadorsquare, .25, {bevelFilter:{blurX:10, blurY:10, strength:.5, angle:150, highlightcolor:5, highlightAlpha:1, shadowAlpha:.5,distance:2}});
}


function sevensquareexpander(event:MouseEvent):void
{
TweenMax.to(sevensquare, .25, {width:92.2,height:92.2, y:248.5, x:54, ease:Sine.easeInOut});
TweenMax.to(sevensquare, .5, {bevelFilter:{blurX:20, blurY:20, strength:2, angle:-300, highlightcolor: 10, highlightAlpha:.15, shadowAlpha:.15,distance:3}})
}

function desevensquareexpander(event:MouseEvent):void
{
TweenMax.to(sevensquare, 4, {width:85.2,height:85.2, x:59.2, y:253.9, ease:Elastic.easeOut});
   TweenMax.to(sevensquare, .25, {bevelFilter:{blurX:10, blurY:10, strength:.5, angle:150, highlightcolor:5, highlightAlpha:1, shadowAlpha:.5,distance:2}});
}


function ejcardsquareexpander(event:MouseEvent):void
{
TweenMax.to(ejcardsquare, .25, {width:92.2,height:92.2, y:248.5, x:143.9, ease:Sine.easeInOut});
TweenMax.to(ejcardsquare, .5, {bevelFilter:{blurX:20, blurY:20, strength:2, angle:-300, highlightcolor: 10, highlightAlpha:.15, shadowAlpha:.15,distance:3}})
}

function deejcardsquareexpander(event:MouseEvent):void
{
TweenMax.to(ejcardsquare, 4, {width:85.2,height:85.2, x:148.7, y:253.9, ease:Elastic.easeOut});
   TweenMax.to(ejcardsquare, .25, {bevelFilter:{blurX:10, blurY:10, strength:.5, angle:150, highlightcolor:5, highlightAlpha:1, shadowAlpha:.5,distance:2}});
}


function laexpander(event:MouseEvent):void
{
TweenMax.to(la, .25, {width:92.2,height:92.2, y:248.5, x:233.2, ease:Sine.easeInOut});
TweenMax.to(la, .5, {bevelFilter:{blurX:20, blurY:20, strength:2, angle:-300, highlightcolor: 10, highlightAlpha:.15, shadowAlpha:.15,distance:3}})
}

function delaexpander(event:MouseEvent):void
{
TweenMax.to(la, 4, {width:85.2,height:85.2, x:238.2, y:253.9, ease:Elastic.easeOut});
   TweenMax.to(la, .25, {bevelFilter:{blurX:10, blurY:10, strength:.5, angle:150, highlightcolor:5, highlightAlpha:1, shadowAlpha:.5,distance:2}});
}


function garysquareexpander(event:MouseEvent):void
{
TweenMax.to(garysquare, .25, {width:92.2,height:92.2, y:248.5, x:322.2, ease:Sine.easeInOut});
TweenMax.to(garysquare, .5, {bevelFilter:{blurX:20, blurY:20, strength:2, angle:-300, highlightcolor: 10, highlightAlpha:.15, shadowAlpha:.15,distance:3}})
}

function degarysquareexpander(event:MouseEvent):void
{
TweenMax.to(garysquare, 4, {width:85.2,height:85.2, x:327.6, y:253.9, ease:Elastic.easeOut});
   TweenMax.to(garysquare, .25, {bevelFilter:{blurX:10, blurY:10, strength:.5, angle:150, highlightcolor:5, highlightAlpha:1, shadowAlpha:.5,distance:2}});
}


function corneliussquareexpander(event:MouseEvent):void
{
TweenMax.to(corneliussquare, .25, {width:92.2,height:92.2, y:248.5, x:412.1, ease:Sine.easeInOut});
TweenMax.to(corneliussquare, .5, {bevelFilter:{blurX:20, blurY:20, strength:2, angle:-300, highlightcolor: 10, highlightAlpha:.15, shadowAlpha:.15,distance:3}})
}

function decorneliussquareexpander(event:MouseEvent):void
{
TweenMax.to(corneliussquare, 4, {width:85.2,height:85.2, x:417.1, y:253.9, ease:Elastic.easeOut});
   TweenMax.to(corneliussquare, .25, {bevelFilter:{blurX:10, blurY:10, strength:.5, angle:150, highlightcolor:5, highlightAlpha:1, shadowAlpha:.5,distance:2}});
}

function bbooksquareexpander(event:MouseEvent):void
{
TweenMax.to(bbooksquare, .25, {width:92.2,height:92.2, y:248.5, x:501.1, ease:Sine.easeInOut});
TweenMax.to(bbooksquare, .5, {bevelFilter:{blurX:20, blurY:20, strength:2, angle:-300, highlightcolor: 10, highlightAlpha:.15, shadowAlpha:.15,distance:3}})
}

function debbooksquareexpander(event:MouseEvent):void
{
TweenMax.to(bbooksquare, 4, {width:85.2,height:85.2, x:506.5, y:253.9, ease:Elastic.easeOut});
   TweenMax.to(bbooksquare, .25, {bevelFilter:{blurX:10, blurY:10, strength:.5, angle:150, highlightcolor:5, highlightAlpha:1, shadowAlpha:.5,distance:2}});
}



function elclosing(event:MouseEvent):void {



this.parent.parent.removeChild(this.parent);

}

 

I am still relatively new to AS3 so there is probably something that I am overlooking here.

 

If a more "seasoned vet" could maybe have a look, and help me out that would help me out huge.

 

Thanks in advance for any sort of help!!

[GreenSock]

I have not looked through all your code (I don't have time right now), but with a quick glance, it sounds like you may be misunderstanding how width/height work in Flash. An object's width/height is determined by its bounding box. So let's say you have a box that's 100 pixels wide and 50 pixels tall. If you rotate it 90 degrees, it now has a width of 50 and a height of 100! And if you rotate it 45 degrees, it will have a width and height of 106.05. This has nothing to do with TweenLite/Max - it's just how Flash works. If you need consistency regardless of rotation, you can use scaleX/scaleY.

 

Does that help?

 

If someone else has time to look through all the code, please do.

[ej23]

Well for starters thanks for your attention and help.

 

I guess I am at a loss, because previously I've used the same elements without any problems, and when I access the movie individually or on my demo page sans the external preloader use, everything appears as normal. I am loading this SWF from another main movie or container, so I am guessing that my issue probably has to do with the way I am loading the SWF.

 

 

Anyway, thanks for any help thus far. I appreciate it very much.