Flash AS2 - flipping object while maintaining center

A place for tutorials on how to get the most out of Flash

Flash AS2 - flipping object while maintaining center

Postby Ivan-Aedler » Thu Jun 27, 2013 7:23 am

Hello there,

I am into an interesting problem. I had to interrupt my progress in two games because of this.
I have these blocks (each one must be a MC with code inside). (+) Is the registration point of them. The red circle is the center where all blocks should flip around (using _xscale).

block1.jpg
block1.jpg (5.25 KiB) Viewed 2575 times

I know it flips around its center only if the registration point is in the center.
When I put _xscale*=-1, they flip, but like this.

block2.jpg
block2.jpg (24.67 KiB) Viewed 2573 times

I cant use x_scale=-100 and +100 because they stretch a transformed MC (e.g. a smaller size). And they dont flip in the same center as well. So a given enemy is walking in a given corridor. When it changes direction, they...become tiny as a paper or huge like the fattest thing of the world. I cant just reset the transformation because I use those enemies in different sizes according to levels. They can also be really tiny if shrunk by a gun.

I know I only have those variables to calculate horizontal distances in a movie clip:
- _x
- _width

I dont know how to calculate this space (I will call _xdistance).

block3.jpg
block3.jpg (4.47 KiB) Viewed 2575 times

I've searched through google and I've found a 'FlipHorizontal' code, but it involves a Matrix in AS3 only. http://www.actionscript.org/forums/show ... 3?t=215445
And this one only works for bitmaps http://board.flashkit.com/board/showthr ... ith-Matrix

Is there a way to do that in AS2?
I know its easier to put all of them in the middle because , when flipped, it does correctly without any further code. I also know that, putting the reg. point in the left corner (or right corner) only needs to sum up with _width when flipped, but those current registration point placements are required.

Thank you in advance.
User avatar
Ivan-Aedler
 
Joined: Fri Jun 03, 2011 6:34 am
Location: GMT -3

Re: Flash AS2 - flipping object while maintaining center

Postby KaTsuO_O » Fri Jun 28, 2013 12:45 pm

What I did was that I created a symbol that is 400 pixels wide, and placed the registration point between the left side and the middle of it. Then I added this code to flip it.

flippystick._x -= flippystickA*flippystick._xscale/100;
flippystick._xscale -= flippystick._xscale*2;

For that to work properly, you need to figure out what value flippystickA should be, in this case it is -220. So you need a different variable for each enemy.
Last edited by KaTsuO_O on Fri Jun 28, 2013 1:38 pm, edited 1 time in total.
Don't create a porn game if you're only interested in porn.
Wise words regarding criticism http://www.youtube.com/watch?v=-98ZFl1sKt4
User avatar
KaTsuO_O
 
Joined: Tue Nov 02, 2010 6:03 pm

Re: Flash AS2 - flipping object while maintaining center

Postby Ivan-Aedler » Fri Jun 28, 2013 1:34 pm

KaTsuO_O Wrote:What I did was that I created a symbol that is 400 pixels wide, and placed the registration point between the left side and the middle of it. Then I added this code to flip it.

Thank you, KatSuoo! Only a question, do I need to create an inner MC 400 pixels wide for this? Or did you use just an example (an object who is 400 pixels wide?) So, in that 400 pixel object, 220 was the value, so if I use in a 300 pixel wide enemy, do I just need to play with some flippystickA values until finding a good one, like Newton approach? (but without the complexity)
User avatar
Ivan-Aedler
 
Joined: Fri Jun 03, 2011 6:34 am
Location: GMT -3

Re: Flash AS2 - flipping object while maintaining center

Postby KaTsuO_O » Fri Jun 28, 2013 1:49 pm

I haven't tried this before, so thank you as well for making me learn another thing.

Actually, I just did a few tests, and noticed that the pixel width of the symbol and the position of the registration point can tell us how much that variable should be. So I just used it as an example at first, but now I see that you need to make it 400 pixels in order for 220 to work.

If you check my post again, you'll see that I have changed _x +=, to _x -=, as well as flippystickA to -220. That makes it easier to figure out the variable. As you know, the symbol is 400 pixels wide with the registration point between the left side and the middle. 220 happens to be about half of the pixel width of the symbol, the variable is -220 and that is because the registration point is on the left side. If the registration point would be on the right side, then it would be 220. If it would be in the middle, then the variable would be 0, far right would be 400 and far left would be -400.
Don't create a porn game if you're only interested in porn.
Wise words regarding criticism http://www.youtube.com/watch?v=-98ZFl1sKt4
User avatar
KaTsuO_O
 
Joined: Tue Nov 02, 2010 6:03 pm

Re: Flash AS2 - flipping object while maintaining center

Postby Ivan-Aedler » Fri Jun 28, 2013 1:57 pm

KaTsuO_O Wrote:I haven't tried this before, so thank you as well for making me learn another thing.

Interesting! This function might vary in a parabolical / logarithm way, where the limit reaches 400. We might be able to calculate flippstickA that way.

And how to return to the initial position (re-flip?)
I have a ragdoll program (that one) who plays with the FLIP thing. Right now, it justs 'invert' the horizontal based on registration point placement, so when you click in an object (e.g. a skirt) and press SPACE, you see it moves because of the uneven reg point.

Click to Play
(Javascript Required)

peach ragdoll4.swf [ 323.37 KiB | Viewed 2538 times ]


I'll try out the function, seeing how it works. Thanks ;)
User avatar
Ivan-Aedler
 
Joined: Fri Jun 03, 2011 6:34 am
Location: GMT -3

Re: Flash AS2 - flipping object while maintaining center

Postby KaTsuO_O » Fri Jun 28, 2013 3:27 pm

The code flips it both ways. You may think that, flippystick._x -= flippystickA*flippystick._xscale/100;, would cause the symbol to move when you flip it back. But since flippystick._xscale is -100 when you have flipped it once, so it doesn't move anywhere.

To make it calculate the variable you need to use flippystick._width, other than that, I don't know how it could be calculated.

Another way you could get this to work, is if you placed each symbol inside another symbol. You really just need to convert each symbol on the stage in to a symbol. So let's say that I have the flippystick on the stage, I would convert it to a symbol and call it flippystickoutside. Then i would go inside the new symbol and drag flippystick where i want it. Now it could calculate flippystickA with this,

flippystickA = flippystickoutside.flippystick._x*2;

The flip code would now look like this,

flippystickoutside.flippystick._x -= flippystickA*flippystickoutside.flippystick._xscale/100;
flippystickoutside.flippystick._xscale -= flippystickoutside.flippystick._xscale*2;

Which works, but it is not a very good setup.

So I would give the symbol inside, the instance name symbol, or any other simple name.

When a symbol is selected, it would change this,

flipvariable = this.symbol._x*2;

and then flip it with this,

this.symbol._x -= flipvariable*this.symbol._xscale/100;
this.symbol._xscale -= this.symbol._xscale*2;

or this,

this.symbol._x -= (this.symbol._x*2)*this.symbol._xscale/100;
this.symbol._xscale -= this.symbol._xscale*2;
Don't create a porn game if you're only interested in porn.
Wise words regarding criticism http://www.youtube.com/watch?v=-98ZFl1sKt4
User avatar
KaTsuO_O
 
Joined: Tue Nov 02, 2010 6:03 pm

Re: Flash AS2 - flipping object while maintaining center

Postby Ivan-Aedler » Sat Jun 29, 2013 6:53 am

Thank you for your help ;)
As for creating a symbol outside, I think it defeats the purpose of the 'all in one' approach, because I can create a outside symbol with a centered reg point. So its just a matter to use _xcale*=-1 directly.
I'll do some experiments with the first approach (the current code), using flippystick._width.

KaTSuO_O Wrote:Which works, but it is not a very good setup. So I would give the symbol inside, the instance name symbol, or any other simple name.

But this one also requires a symbol inside another symbol, doesnt it?
User avatar
Ivan-Aedler
 
Joined: Fri Jun 03, 2011 6:34 am
Location: GMT -3

Re: Flash AS2 - flipping object while maintaining center

Postby IrrelevantComment » Mon Jul 01, 2013 8:46 pm

object.transform.pixelBounds gives the rectangle of an mc on the stage.
object.globalToLocal(pt) converts a point from stage co-ords to local co-ords

so
var rect = object.transform.pixelBounds;
var local = object.globalToLocal({x: rect.x, y: rect.y});
var offset = local+object.width/2;

gives offset as the horizontal distance between the geometric centre and the origin.

object.scaleX *= -1;
object._x += 2*offset.

flips the object and moves it to the correct place.
maybe.
or some shit like that, working this out in my head without checking. the point is, use transform

hope that helps
IrrelevantComment
 
Joined: Tue Mar 15, 2011 7:46 pm

Re: Flash AS2 - flipping object while maintaining center

Postby IrrelevantComment » Mon Jul 01, 2013 9:10 pm

btn.onPress = function(){
var rect = object.transform.pixelBounds;
object.globalToLocal(rect);
var offset = (object._xscale > 0 ? rect.x : -rect.x)+object._width/2;
object._xscale *= -1;
object._x += 2*offset;
}

does this:
Click to Play
(Javascript Required)

as2iscrap.swf [ 27.36 KiB | Viewed 2470 times ]



green line is geometric centre, red line is object origin
IrrelevantComment
 
Joined: Tue Mar 15, 2011 7:46 pm

Re: Flash AS2 - flipping object while maintaining center

Postby Ivan-Aedler » Wed Jul 03, 2013 10:38 pm

IrrelevantComment Wrote:object.transform.pixelBounds gives the rectangle of an mc on the stage.
object.globalToLocal(pt) converts a point from stage co-ords to local co-ords...flips the object and moves it to the correct place. maybe. or some shit like that, working this out in my head without checking. the point is, use transform

THANK YOU!! You and Katsuoo! I'll test this approach, analysing the function.
This is better because it avoids the creation of an outer MC. ;)

PS: As2 might be crap, but I dont have time to change more than 9,000 lines to AS3 just yet.
PS2: when I zoomed your example, and tried to click a bit bigger button, the object disappeared altogether, and clicking many times didnt take it back.
I think you need to put a localToGLobal line before globalToLocal or I think we need to refresh the pixelBounds because its coordinates changes with zoom.
User avatar
Ivan-Aedler
 
Joined: Fri Jun 03, 2011 6:34 am
Location: GMT -3

Re: Flash AS2 - flipping object while maintaining center

Postby GoRepeat » Tue Jul 23, 2013 12:51 pm

This might be over simplifying, but why don't you just wrap the object in another container that revolves around the center? That way you can flip and rotate around the new "center" but still place or locate around the original _x/_y values of the object? Unless I am misunderstanding your goal.
Picarto LiveStream: https://picarto.tv/GoRepeat
Other Stuff: Click Here
User avatar
GoRepeat
Moderator
 
Joined: Wed Jul 21, 2010 2:26 am
Location: Behind the Looking Glass

Re: Flash AS2 - flipping object while maintaining center

Postby Ivan-Aedler » Thu Jul 25, 2013 6:13 pm

Gorepete Wrote:This might be over simplifying, but why don't you just wrap the object in another container that revolves around the center? That way you can flip and rotate around the new "center" but still place or locate around the original _x/_y values of the object? Unless I am misunderstanding your goal.

The problem is that this will create more complexity (making the level slower too), because there are times I have up to 200 different objects scattered there. So I would need +200 containers.
Also, this will create ambiguity, because I will need to use the raw objects (with different reg points) to check for collisions and such, and the container ones, with a centered reg point, to check for other properties. I would just transform all reg points in all objects to the center (it will work too and it will make them compliant) but I have to do that to more than 2,000 samples scattered through the game. So the getRects worked even better because I have full control of xMin, xMax, yMin and yMax ;)

Code: Select All Code
function checkDistance(obj)
{
if (!obj.once)
    {
     obj.once=true; //it just initializes it
     //set center
      obj.rect = obj.getRect(_root.Level); //'_root.Level' parameter already acts like localToGlobal.
      obj.center= new flash.geom.Point(obj.rect.xMin+(obj.rect.xMax-obj.rect.xMin)/2,obj.rect.yMin+(obj.rect.yMax-obj.rect.yMin)/2);
      }

 //loop to check distance
 obj.dist_x = _root.Level.PLAYER._x-obj.center.x;
 obj.dist_y= _root.Level.PLAYER._y-obj.center.y;

 if (obj.dist_x>-550 and obj.dist_x<550)
   //do something
}
User avatar
Ivan-Aedler
 
Joined: Fri Jun 03, 2011 6:34 am
Location: GMT -3


Return to Tutorials



Who is online

Users browsing this forum: No registered users