Problem with following objects and fuzzy positioning.

[jaytmurphy]

Hello all! - Please let me start off by saying I love you and please don't TL:DR me

 

I am new to the forum here and just began using TweenMax. So far I am loving it but I have run into a few issues with my specific program. I am sure they are issues with my program and not tweenLight, but I was curious if anyone would be able to point me in the right direction.

 

My goal is to have a floor plan on the stage which has little groups of 3 squares walk through in around 4-6 steps each. (X,Y coords provided by XML file) To put it in context, thess groups are representations of colleges at a school. Each college is its own object (WalkerXML) and contains 3 square shapes which can be individually controlled. The reason for the XML input is because every semester there may be changes to order and color and I will not be working here, so I want them to be able to easily edit the excel sheet to change these things.

 

The current scene can be viewed here: http://onebrownshoe.com/array_test.html . (please don't laugh - it is very rough right now and I don't think I could take it ). And ignore the buttons they were just there for testing out different functions.

 

My problem is a few-fold - with one major issue (#4).

1. 
   [*:309jbxri]I have not worked with flash or actionscript in quite a while (and never was very good at it).
   [*:309jbxri]I would like to move the registration point of all the square shapes to be the center right of the shape, so when they expand they do so directly to the left, not down and left. I have done this in the original creation of the shapes, but it seems that tweenLight overrides that to register at the top right.
   [*:309jbxri]For some reason when expanding the size/alpha of the squares they get very fuzzy and do not line up with others that have the same intended X or Y location. (this may be due to the positioning issue noted below).
   [*:309jbxri]My primary concern is the ability to queue up the timelines within each object for each member (shape), but not start them walking right when student.getMoves() is called. Since there are three shapes being assigned timelines through a loop - it seems like the positioning of their locations is off by a tiny bit from each other - maybe due to the slowness of processing the loop and math inside of it so the shape #1 object has already started moving when shape #2 gets its timeline which is based on shape #1's current location? My code is VERY cumbersome and I am sure full of bad practices, but as problem #1 states I am basically hacking my way through this.

A brief rundown of objects:

WalkerXML:MovieClip - this is the primary container for each college. It holds an array "members" of 3 shapes and their starting properties (read from XMLList passed into the constructor ("input"). WalkerXML is also passed and XMLList "input_moves" which contains all of the steps each college is supposed to take - this includes absolute and relative coords, durations, delays, height, width, etc.

public function WalkerXML.GetWalker() returns the array of shapes, "members", to the main program which then addChilds() each of them to the stage in their starting positions.

public function WalkerXML.GetMoves() returns a TimelineMax object that has been filled using the following code:

//.GetMoves()
myTimeline = new TimelineMax();
for each (var item in input_moves) { //input_moves contains X,Y,W,H,A, and delay
myTimeline.appendMultiple( TweenMax.allTo(members, item.duration, { x:Number(item.abs_x), y:Number(item.abs_y), width:Number(item.dw), height:Number(item.dh), alpha:Number(item.Alpha), overwrite:false, ease:Linear.easeNone}, .3), item.wait );
}

The main program basically starts a loop that goes through the number of student groups (arrays of 3 shapes) that will exist, adds them to the scene, and then calls .GetMoves() at which point the scene begins without any interaction. Ideally I would like the scene to start when a button is pressed.

 

Main Program Function:

var group_hold:WalkerXML;// WalkerXML to send array to 'students[i]'
// Loop through # groups and fill 'students[x][n]' x=array, n=shape
for (var i:uint = 0; i < num_students; i++) {
students[i] = group_hold.GetWalker();// Returns array of shapes
moves = group_hold.GetMoves();
outputStudent(students[i]);// Send array to add shapes to stage
}
...
function outputStudent(array:Array) {
for (var i:uint = 0; i < array.length; i++) { addChild(array[i]);}
}

As I said, it isn't pretty but it's what I have...

 

IF there was an easier way to make 1 shape and have 2 clones of it follow @ around 5 pixels apart - that would be the BEST help ever. The only thing different with the followers is that they have a delay of ~ .2 seconds from the shape in front of it (which also causes an undesired pause at every turn - that I can live with for now)

 

I am very sorry for the long winded post, but I would appreciate any help there is out there. I have poured over the manuals and just keep messing myself up. It just seems like there should be a very easy way to create a trail of shapes (an I'm sure there is) without having to do each one individually on a flash timeline.

 

Complete source files can be downloaded here: http://onebrownshoe.com/student_walkers_jay_murphy.zip All using Using CS5 and AS3.

 

Thank you so much for the great tool and, hopefully, I will eventually understand how to use more than 2% of its features.

 

(Edit: changed "center middle" to "Center Right" RE: Desired registration point)

[Carl]

Hi Jaytmurphy,

 

First I would like to congratulate you on providing one of the clearest descriptions of a problem I have seen on this board. I appreciate the time you put into explaining it.

 

Second, I don't think I would have any idea of really where to begin to help you without investing hours in going through your source and experimenting quite a bit.

 

BUT

 

Have you use the LinePath2D tools at all?

 

visit this: http://www.greensock.com/as/docs/tween/ ... ath2D.html

 

and copy paste the code into an fla with access to the greensock classes. I think you will be mildly astonished with what is available to you.

 

-----

 

To answer a few of your questions. If you truly did edit the squares to have their registration points in the center, that is exactly the point TweenLite/Max will use for any transformations. If you go into symbol edit mode on any of your squares the the little cross should be in the center of your square. in your post you mentioned it should be center middle although you went on to say that the animation should be directly left... perhaps your reg point should be to the right then.

 

If you are club greensock member the TransformAroundPoint plugin would do this for you.

 

----

 

 

I wish you luck on this project. its one of the more ambitious undertakings I've seen and I'm very impressed with how much of it you have gotten to work. Perhaps someone else on the board will be able to help you. I regret that I don't have the experience or time to figure it all out.

 

Carl

 

[edit] I looked at your fla and it appears your reg points are correct, but I also see a ton of stuff in WalkerXML that makes me think you are programmatically drawing your walkers

 

function DrawWalker(walker_in:XMLList):Shape {
		var shape_stu:Shape = new Shape();
		shape_stu.graphics.lineStyle();
		if (walker_in.col_grad == 1) {
			var grad_colors:Array = new Array(walker_in.col0,walker_in.col0,walker_in.col1,walker_in.col1);
			shape_stu.graphics.beginGradientFill(GradientType.LINEAR , grad_colors, grad_alphas, grad_ratios, grad_matrix, "repeat");
		}
		else {
			shape_stu.graphics.beginFill(walker_in.col0);
		}
		shape_stu.graphics.drawRect(0, 0, walker_in.w_start, walker_in.h_start);
		shape_stu.graphics.endFill();
		shape_stu.x = Number(walker_in.x_start) + Number(walker_in.w_start);
		trace(Number(walker_in.x_start) + Number(walker_in.w_start));
		shape_stu.y = walker_in.y_start;
		shape_stu.width = walker_in.w_start;
		shape_stu.height = walker_in.h_start;
		return shape_stu;
	}

 

it doesn't appear that the symbols in your library that "look like the walkers" have any linkages set, so I don't even know if they are being used by the code.

I really don't know what is going on.

[jaytmurphy]

Carl,

 

Thanks for your reply. I corrected the typo saying middle center, to center right (where I intended my reg point to be so they could expand left). I am a stickler for detailed accounts having worked in IT for 16 years and being driven crazy by people says "An error pops up" with no detail of what the error said.

 

Yes I know my code is atrocious and actually none of the symbols are used, except the floor plan maybe. The shapes are all created programmatically because I thought it would be easier to do gradients that way and let people who had no idea what a gradient was to edit the Excel file and make something have "two colors".

 

I would have removed all of the unused stuff and comments before uploading but I was scared I would accidentally overwrite my previous work when I was distracted so I left all the comments/unused parts in the FLA. I have slept about three hours in the last two days and accidents happen.

 

I will check out the linePath2D tools ASAP. As for the TransformAroundPoint I needed a greensock "membership" for that. Honestly, I don't have the money to get the package until my student loans come in - and this assignment is due before then. I can try to convince my employer to get a membership but I imagine they will not realize the future time savings and say do it by hand.

 

I am surprised to hear it is an ambitious undertaking, all I really want is an object to move to some coordinates and then have 2 clones follow it (like a weird motion blur) a certain amount of pixels behind it. It kind of seems like something that should be built into flash from the get go - follower...

 

Thanks Carl for your input, I appreciate it and will look into your suggestions. IF you/or anyone wanted to go through that source or completely re-write it and make the thing work pretty - we maybe able to work out a deal. I think for someone who knows what they are doing it shouldn't be too difficult. Only parameters are keeping the ability to read in positions/ sizes, colors dynamic so non programmers can edit the paths in the future. I would like to learn how to do it myself, but I am not opposed to hiring a tutor/scripter.

 

Jay