Adding or subtracting values

[kromek]

Hi

 

I'm using your engine, it's so easy and powerful to work with.

 

I have a question though, Since I was playing only with sequencing and with fixed values, I have realized It would help me a lot, if there was any way of adding or subtracting values from the actual _width or _height.

 

Let's say I have 2 buttons and 1 MC

 

button1 adds 10px to the actual width of the mc1 let's say 100, that gives us 110px in width

button2 subtracts 5px from it, giving us 105 in width

pressing button1 again gives us 115width.

 

are these types of formulas available with tweenlite or twenmax?

 

like currentwidth + value

 

thank you

[Carl]

yes, if you pass in a value in quotes it will be a relative value

 

TweenLite.to(mc, 1, {x:"100"});

 

this will move an object called mc 100 pixels to the right of where it is.

 

see tip #4 http://www.greensock.com/tweening-tips/

 

enjoy

 

Carl

[kromek]

oh wow, lol, so easy, SO EASY, don't think I havent looked at the tips and tricks, just didn't had any idea that would be called "absolute" and "relative".

 

 

 

thank you, that was a great one

[Carl]

you're welcome!

[kromek]

I don't want to cause any annoyance, someone said "give a finger, he'll take the whole hand", because the following topic isn't directly related to any of your products, but I would like an advice, or a direction where to look for a solution to this kind of problem.

 

Basically, the buttons, has different categories, buttonA1, buttonA2, buttonA3 (..), buttonB1, buttonB2, buttonB3

 

each of the buttons refers to 3 Movieclips which represents a basic column graph,

 

each of the button categories alters the graph's elements (et's call each element GE1, GE2 ...)

 

let's say

buttonA1 gives 80 to GE1. 100 to GE2 and 150 to GE1

buttonA2 gives 40 to GE1. 170 to GE2 and 100 to GE2.

(they serve as a base for further modifications)

 

buttonB1 would add 5 to GE1. 10 to GE2 and subtract 30 from GE3

and so on, switching between buttonA1 and A2 etc. would respect the choices made on other category.

 

 

 

I have probably an idea how it would work, giving each of the buttons a value, GE's max width is 200px so giving buttonA1 value of (respectively) 80, 100, 150

giving ButtonB1 a 5, 10 and -30.

 

Then writing a formula like

GE1 width = ButtonA1 valueforGE1 + ButtonB1 valueforGE1 (...)

is this even possible?

I'm having a hard time switching from jQuery to AS2, at first glance I was surprised how similar the structure is to jQuery's, but in the practical way they're quite different...

[Carl]

buttonA1 gives 80 to GE1. 100 to GE2 and 150 to GE1

buttonA2 gives 40 to GE1. 170 to GE2 and 100 to GE2.

 

i don't understand why buttonA1 modifies GE1 twice or why button A2 modifies GE2 twice.

 

you could probably write one function that would allow any button to modify any bars in any graph.

 

import com.greensock.*;

function modifyGraph(graph, value1, value2, value3){
TweenLite.to(graph.bar1, .5, {_height:value1});	
TweenLite.to(graph.bar2, .5, {_height:value2});	
TweenLite.to(graph.bar3, .5, {_height:value3});	

} 


button1.onRelease = function(){
  modifyGraph(calciumDeposits, 80, 90, 30);
}

button1b.onRelease = function(){
   modifyGraph(calciumDeposits, 45, 20, 90);
}

button2.onRelease = function(){
  modifyGraph(frogs, 80, 30, 60);
}

button2b.onRelease = function(){
   modifyGraph(frogs, 10, 80, 20);
}

 

 

all your graphs should contain a generic bar1, bar2, bar3 movie clips.

each new graph just needs to have its own unique instance name for this to work.

 

attached is an example.

 

there are a dozen other ways to do this, but this will work for getting started.

[kromek]

i don't understand why buttonA1 modifies GE1 twice or why button A2 modifies GE2 twice.

ugh, my bad, It should be

buttonA1 gives 80 to GE1. 100 to GE2 and 150 to GE3

buttonA2 gives 40 to GE1. 170 to GE2 and 100 to GE3.

 

 

Here is how I understand this:

 

There are 5 groups of buttons, for each of them I'd need a separate function like group1 group2 (...), and then make a Tweening with graph.bar1 { _height:group1value1+group2value1+group3value1} ?

 

import com.greensock.*;

function group1(graph, value1, value2, value3)

{
TweenLite.to(graph.bar1, .5, {_height:value1});	
TweenLite.to(graph.bar2, .5, {_height:value2});	
TweenLite.to(graph.bar3, .5, {_height:value3});	

} 

function group2(graph, value1, value2, value3)

{
TweenLite.to(graph.bar1, .5, {_height:value1});	
TweenLite.to(graph.bar2, .5, {_height:value2});	
TweenLite.to(graph.bar3, .5, {_height:value3});	

} 

button1.onRelease = function(){
  group1(calciumDeposits, 80, 90, 30);
}

button1b.onRelease = function(){
   group1(calciumDeposits, 45, 20, 5);
}

button2.onRelease = function(){
  group2(calciumDeposits, 10, 20, 30);
}

button2b.onRelease = function(){
   group2(calciumDeposits, 10, 80, 20);
}

 

It's just that, I need all the buttons to react to the same graph. It's like having a group of processors, group of graphic cards, a group of memory cards etc., and then a graph that would ilustrate how the Performance, Power Consumption etc. changes upon changing any of the components.

 

in this case button1 could be intel's i7, button 1b - intel's i5, values are put manually using, group1(calciumDeposits, 80, 90, 30);, clicking on one of them changes only the group1value1, respecting the group2value1

 

 

thank you for your time

 

 

edit: another solution could be a dynamic variable probably?

 

var Bar1TotalWidth:Number = group1.value1+group2.value1;

 

and put the Bar1TotalWidth instead of value1

 

TweenLite.to(graph.bar1, .5, {_height:Bar1TotalWidth});

[Carl]

yeah, even though I don't understand all of it, what you want is totally possible. its just a matter of how you access and store your data.

 

Unfortunately I really can't dedicate any more time to this. Try to summarize your problem as concisely as possible and give it a shot in the adobe flash forums. http://forums.adobe.com/community/flash ... ns&start=0 where there are people who eat this stuff up.

 

Best,

 

Carl

[kromek]

thanks for everything

 

have a great day

[Chrysto]

hi;

 

I use another way of sizing my DisplayObjects, let me share it with you:

public function set _x(value:* ):void{
		if (this.parent) {
			if (value == "left"){
				super.x = 0;
			} else if ( value == "right" ){
				super.x = this.parent.width - this.width;
			} else if ( value == "center" ){
				super.x = NumberTools.center(this.parent.width, this.width);
			} else if ( value is String && value.match(/%$/)){
				super.x = (Number(value.match(/([0-9\.\-]+)%$/)[1]) / 100) * this.parent.width;
			} else if ( value is Function ){
				super.x = (value as Function).apply(this);
			} else{
				super.x = value;
			}

			this._delayed_params.remove("_x");
		}else {
			this._delayed_params._x = value;
		}
		_resize_params["_x"] = value;
	}

	/*
	easy "y" manipulation
	pass string (top/bottom/center) or "100%" , or function that returns number
	*/
	public function set _y(value:* ):void {
		if (this.parent) {
			if (value == "top"){
				super.y = 0
			} else if ( value == "bottom" ){
				super.y = this.parent.height - this.height;
			} else if ( value == "center" ){
				super.y = NumberTools.center(this.parent.height, this.height);
			} else if ( value is String && value.match(/%$/)){
				super.y = (Number(value.match(/([0-9\.\-]+)%$/)[1]) / 100) * this.parent.height;
			} else if ( value is Function ){
				super.y = (value as Function).apply(this);
			} else{
				super.y = value;
			}

			this._delayed_params.remove("_y");
		}else {
			this._delayed_params._y = value;
		}
		_resize_params["_y"] = value;
	}

	/*
	width manipulation --> pass string ("100%") or functon that returns number
	*/
	public function set _width(value:* ):void {
		if (this.parent) {
			if ( value is String && value.match(/%$/)){
				super.width = (Number(value.match(/([0-9\.\-]+)%$/)[1]) / 100) * this.parent.width;
			} else if (value is Function){
				super.width = (value as Function).apply(this);
			} else{
				super.width = value;
			}

			this._delayed_params.remove("_width");
		}else {
			this._delayed_params._width = value;
		}
		_resize_params["_width"] = value;
	}

	/*
	height manipulation --> pass string ("100%") or functon that returns number
	*/
	public function set _height(value:* ):void {
		if (this.parent) {
			if ( value is String && value.match(/%$/)){
				super.height = (Number(value.match(/([0-9\.\-]+)%$/)[1]) / 100) * this.parent.height;
			} else if ( value is Function ){
				super.height = (value as Function).apply(this);
			} else {
				super.height = value;
			}

			this._delayed_params.remove("_height");
		}else {
			this._delayed_params._height = value;
		}			
		_resize_params["_height"] = value;
	}

 

for example you can pass for "x" propert the values:

 

"100%" - will set it up 100% ot it's parent

"center" - will center it

function():Number{ return //some calculations }

etc...