Problems with tween [SOLVED]

[joakimhoegset 0 Likes (Newbie)]

Hi I am trying to tween a few images and am getting two problems.

After using ENTER_FRAME on event listener I cannot use any buttons to start tweens? Why is this?

Second the tweens are flickering in on the first frames. All the tweens with omMove. Is there something else wrong here?

 

Thanks,

 

Joakim

 

import com.greensock.*;

//Visibility of the buttons
bpublishApps_btn.visible			= false;
bplayerApps_btn.visible				= false;
bpublishWork_btn.visible			= false;
infernoWork_btn.visible				= false;
twinkWork_btn.visible				= false;
svenskWork_btn.visible				= false;
farrutxWork_btn.visible				= false;

addEventListener(Event.ENTER_FRAME, omMove);

menu_mc.jobb_btn.addEventListener(MouseEvent.CLICK,jobbMove);

function jobbMove(e:Event):void {
TweenMax.to(pic.content_mc, 1, {y:-324.5});
bpublishApps_btn.visible			= false;
bplayerApps_btn.visible				= false;
bpublishWork_btn.visible			= true;
infernoWork_btn.visible				= true;
twinkWork_btn.visible				= true;
svenskWork_btn.visible				= true;
farrutxWork_btn.visible				= true;
}

menu_mc.app_btn.addEventListener(MouseEvent.CLICK,appMove);

function appMove(e:Event):void {
TweenMax.to(pic.content_mc, 1, {y:324.5});
bpublishApps_btn.visible			= true;
bplayerApps_btn.visible				= true;
bpublishWork_btn.visible			= false;
infernoWork_btn.visible				= false;
twinkWork_btn.visible				= false;
svenskWork_btn.visible				= false;
farrutxWork_btn.visible				= false;
}

menu_mc.om_btn.addEventListener(MouseEvent.CLICK,omMove);

function omMove(e:Event):void {
TweenMax.to(pic.content_mc, 1, {y:-973});
bpublishApps_btn.visible			= false;
bplayerApps_btn.visible				= false;
bpublishWork_btn.visible			= false;
infernoWork_btn.visible				= false;
twinkWork_btn.visible				= false;
svenskWork_btn.visible				= false;
farrutxWork_btn.visible				= false;
}

menu_mc.kontakt_btn.addEventListener(MouseEvent.CLICK, goUrl);

function goUrl(e:MouseEvent):void {
navigateToURL(new URLRequest("mailTo:info@joakimhogset.com"));
}
//Event listener for Application buttons
bpublishApps_btn.addEventListener(MouseEvent.CLICK,bpublishAppsMove);
bplayerApps_btn.addEventListener(MouseEvent.CLICK,bplayerAppsMove);
//Event listener for Work buttons
bpublishWork_btn.addEventListener(MouseEvent.CLICK,bpublishWorkMove);
infernoWork_btn.addEventListener(MouseEvent.CLICK,infernoWorkMove);
twinkWork_btn.addEventListener(MouseEvent.CLICK,twinkWorkMove);
svenskWork_btn.addEventListener(MouseEvent.CLICK,svenskWorkMove);
farrutxWork_btn.addEventListener(MouseEvent.CLICK,farrutxWorkMove);

//Functions for applications
function bpublishAppsMove(e:Event):void {
TweenMax.to(pic.content_mc.app_mc, 1, {x:0});
}
function bplayerAppsMove(e:Event):void {
TweenMax.to(pic.content_mc.app_mc, 1, {x:-1280});
}

//Functions for work
function bpublishWorkMove(e:Event):void {
TweenMax.to(pic.content_mc.flash_mc, 1, {x:0});
}
function infernoWorkMove(e:Event):void {
TweenMax.to(pic.content_mc.flash_mc, 1, {x:-1280});
}
function twinkWorkMove(e:Event):void {
TweenMax.to(pic.content_mc.flash_mc, 1, {x:-2560});
}
function svenskWorkMove(e:Event):void {
TweenMax.to(pic.content_mc.flash_mc, 1, {x:-3840});
}
function farrutxWorkMove(e:Event):void {
TweenMax.to(pic.content_mc.flash_mc, 1, {x:-5120});
}

[GreenSock 16,949 Likes (Superhero)]

Why are you using an ENTER_FRAME that's creating a duplicate tween constantly? This is a huge waste of resources. Did you realize that if your swf is running at 30fps, for example, your code is creating a new tween 30 times per second of the same object to the same destination? It's also setting the visible properties on a bunch of buttons again and again.

[joakimhoegset 0 Likes (Newbie)]

I don't know this is the only way I know. What do you suggest?

 

Joakim

[GreenSock 16,949 Likes (Superhero)]

My question wasn't meant to criticize - I was just trying to understand what you're attempting to do. If you tell me your objective, I could better advise you as to what would be more appropriate.

 

You should be able to simply eliminate the ENTER_FRAME stuff in your code. TweenLite/Max take care of all that internally to make sure the object tweens for whatever duration you set.

 

http://blog.greensock.com/get-started-tweening/

[joakimhoegset 0 Likes (Newbie)]

This is my objective. The true - false is the buttons under jobb. I wanted them to be inside the mc but I couldn't get them to work from within.

I removed the enter frame and just used a tweenMax like such.

TweenMax.to(pic.content_mc, 1, {y:-973});

 

I also wanted the image to scale proportionally but I can get it to work at all. The movieclip is a big image it is sliding over and positioning itself in the right places when clicking a button. Well you get the drift. Any help would be great.

Thx.

 

Joakim

[GreenSock 16,949 Likes (Superhero)]

I also wanted the image to scale proportionally but I can get it to work at all.

 

Have you tried this (assuming you want content_mc to scale to 200% its normal size)?:

 

TweenMax.to(pic.content_mc, 1, {y:-973, scaleX:2, scaleY:2});

 

I'm a little unclear on exactly what you're asking here. (Sorry, I'm a bit sleep-deprived)

[joakimhoegset 0 Likes (Newbie)]

Well no not quite I didn't explain that proporly I see. I want the content to always be proportionally scaled to the screen resolution.

I tried:

//set stage for FBF
stage.align = "TL";
stage.scaleMode = "noScale";

//define dynamic aspect ratios
var picHeight = pic.height / pic.width;
var picWidth = pic.width / pic.height;

//add event listener to the stage
stage.addEventListener(Event.RESIZE, sizeListener);

//conditional statement to account for various initial browswer sizes and proportions
function scaleProportional():void {
if ((stage.stageHeight / stage.stageWidth) < picHeight) {
	pic.width = stage.stageWidth;
	pic.height = picHeight * pic.width;
} else {
	pic.height = stage.stageHeight;
	pic.width = picWidth * pic.height;
};	
}

//center picture on stage
function centerPic():void {
pic.x = stage.stageWidth / 2;
pic.y = stage.stageHeight / 2;
}

// make listener change picture size and center picture on browser resize
function sizeListener(e:Event):void {
scaleProportional();
centerPic();
}

//run initial locations and size
scaleProportional();
centerPic();

 

But that only works on one image and as my movieclip that I'm tweening contains 8 images next to each other it scales it down to fit all the images at the same time instead of just showing one and fullscreen.

 

If you have any idea that would be great.

 

Thx

 

Joakim

[GreenSock 16,949 Likes (Superhero)]

This thread may help: viewtopic.php?f=3&t=1961

[joakimhoegset 0 Likes (Newbie)]

Tell me if I'm wrong but that does more or less the same as the script I was using.

My problem though is that The image showing is only a fifth of the total movieClip.

Is there a way to mask inside the movieclip using the mask size as reference to the scaling?

 

Further it was talking about liquid scaling there. If I want to liquid position five different sized images to the stage evenly out. How do I go about this. I tried dividing the stage up like:

 

function setStage():void{

var WIDTH:Number = stage.stageWidth;

var HEIGHT:Number = stage.stageHeight;

bpublishWork_btn.x = 30;

bpublishWork_btn.y = HEIGHT - (bpublishWork_btn.height + 10);

infernoWork_btn.x = (WIDTH - (bpublishWork_btn.width + 30)) / 4;

infernoWork_btn.y = HEIGHT - (infernoWork_btn.height + 30);

}

 

But the infernoWork_btn doesn't position itself right. My idea was to fix the button on the left and on the right to 30 resp. WIDHT - (buttonName + 30) and then split the remaining into four and thus positioning evenly over that area.

Am I even thinking right?

How would I do this?

 

Thx,

 

Joakim

[joakimhoegset 0 Likes (Newbie)]

Any ideas?

Joakim

[GreenSock 16,949 Likes (Superhero)]

It's certainly possible - I just don't have time to do the math and write the code for you. Sorry. Maybe someone else can chime in.

[joakimhoegset 0 Likes (Newbie)]

Ok I understand. Can you have a look and see if Im on the right path?

 

function setStage():void{
var WIDTH:Number = stage.stageWidth;
var HEIGHT:Number = stage.stageHeight;
top_mc.x = 0;
top_mc.y = 0;
top_mc.width = WIDTH;
top_mc.height = 30;
date_txt.x = WIDTH - (date_txt.width + 10);
date_txt.y = 8;
menu_mc.x = logo_mc.width + 30;
menu_mc.y = 8;
logo_mc.x = 10;
logo_mc.y = 5;
bpublishWork_btn.x = 30;
bpublishWork_btn.y = HEIGHT - (bpublishApps_btn.height + 10);
infernoWork_btn.x = ((WIDTH - (bpublishWork_btn.width + 30)-(farrutx_btn.width + 30)) / 4)-infernoWork_btn / 2;
infernoWork_btn.y = HEIGHT - (infernoWork_btn.height + 30);
       twinkWork_btn.x = ((WIDTH - (bpublishWork_btn.width + 30)-(farrutx_btn.width + 30)) / 4)-twinkWork_btn / 2;
twinkWork_btn.y = HEIGHT - (infernoWork_btn.height + 30);
       svenskWork_btn.x = ((WIDTH - (bpublishWork_btn.width + 30)-(farrutx_btn.width + 30)) / 4)-svenskWork_btn / 2;
svenskWork_btn.y = HEIGHT - (infernoWork_btn.height + 30);
       farrutx_btn.x = WIDTH - (farrutx_btn.width + 30);
       farrutx_btn.y = Height - (farrutx_btn.height + 30);
}

[GreenSock 16,949 Likes (Superhero)]

Can you have a look and see if Im on the right path?

Sorry, but like I said, I don't have time to parse through all the logic and math right now. Analyzing your code would probably take me even longer than doing it myself

[joakimhoegset 0 Likes (Newbie)]

Just wanted to ley you know I made it work in probably kinda wierd way but still it works.

This floats the buttons over the stage. I had to center the graphics inside the button instead of align top left.

 

Thx,

 

Joakim

 

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

setStage();

stage.addEventListener(Event.RESIZE, stageResize);

function setStage():void{
var WIDTH:Number = stage.stageWidth;
var HEIGHT:Number = stage.stageHeight;
top_mc.x = 0;
top_mc.y = 0;
top_mc.width = WIDTH;
top_mc.height = 30;
date_txt.x = WIDTH - (date_txt.width + 10);
date_txt.y = 8;
menu_mc.x = logo_mc.width + 30;
menu_mc.y = 8;
logo_mc.x = 10;
logo_mc.y = 5;
bpublishWork_btn.x = (WIDTH / 7) * 1.15;
bpublishWork_btn.y = HEIGHT - (bpublishWork_btn.height + 10);
bpublishApps_btn.x = (WIDTH / 7) * 1.15;
bpublishApps_btn.y = HEIGHT - (bpublishWork_btn.height + 10);
bplayerApps_btn.x = (WIDTH / 7) * 2.6;
bplayerApps_btn.y = HEIGHT - (bplayerApps_btn.height + 30);
infernoWork_btn.x = (WIDTH / 7) * 2.6;
infernoWork_btn.y = HEIGHT - (infernoWork_btn.height + 25);
twinkWork_btn.x = (WIDTH / 7) * 3.75;
twinkWork_btn.y = HEIGHT - (infernoWork_btn.height + 20);
svenskWork_btn.x = (WIDTH / 7) * 4.75;
svenskWork_btn.y = HEIGHT - (infernoWork_btn.height + 40);
farrutxWork_btn.x = (WIDTH / 7) * 6;
farrutxWork_btn.y = HEIGHT - (farrutxWork_btn.height + 30);

}

function stageResize(e:Event):void{
setStage();
}