I have a movieclip with the mesurements of a rectangle. When the application is launched the movieclip is being scaled before placed on the stage as following.
menu.width = 400;
menu.scaleY = menu.scaleX;
this is a smaller size than the original.
the position of the movieclip at this moment is in the middle on the x and top of the stage on the y.
when i click iti would like to do a tween with tweenlite wich scales it to its original(bigger) width and height and position it in the center of the stage on x and y.
the problem is when i position it with tweenlite, it gets done according to its old scale and not according to its new(bigger) scale so the movieclip isnt placed in the exact center of the stage.
Anyone know how i can resolve this?
I tried to compensate by adding a bigger number on the position so it gets positioned in the right way.
But when i click it again i would like it to rescale to its beginning scale and position so it would be very messy to compensate again. Is there any easier way to do this kind of tween?
I doubt that i'm being clear to what i want but i hope i am after all.
The easy and way of tween position and scale is probably to add the menu to a container.
You would then on one hand tween the position of the container, and on the other apply the scale to the menu it self without having to recalculate the proportional position if the scale changes.
This way you can even control the registration point of the menu within the container. e.g. to always scale from the middle...
This can be done with a matrix as well if you want to avoid to stack objects, but honestly it can get really tricky whereas the container method is bullet-proof.
Related
I am trying to get an effect like this:
http://www.welcomeanimations.com/welcome_animated_gifs_rotating_sign_orange_chrome_k_1.htm
I have tried all sorts of things:
Matrix translation/rotation - spins the text around the 'Z' axis, instead of 'Y'
Adding TextField to a sprite, and Sprite.rotationY++: reg. point is upper left corner
Adding to MovieClip - same as above (an article said MovieClip's reg. point was centered).
This should be trivial?!?! Help me stackoverflow, you're my only hope!
So you have to remember, Display objects scale and rotate around their local coordinate system. so when you put a textfield in a sprite, you need to center it in that sprite's coordinate system. And doing that for textfields is annoying because their width/height isn't always accurate but there is trick for that: get visual bounds, but normally you can take half of somethings width and height
I've created a prototype for you on wonderfl so you can see the solution working in action. Click on the blue square to see how the local coordinate system messes with the rotation
Finally as you use thing you might find things not rotating in 3D space quite right, this should be able to fix that.
does anybody know, how to drag the stage "behind" a certain shape or shape-group, so the shape doesn't get dragged around with all the other items on the stage and of course, the stage itself?
In my example I have a stage with many items outside of the visible part of the<canvas>-tag which can only be reached by dragging the stage to the left/right, but one of the shapes should be always on position (0, 0) of the <canvas>-element and shouldn't change its position while the stage is dragged.
I couldn't find a way to do this yet, so I would be very glad if anyone knows a way to get this working.
If the one shape left at (0,0) of the canvas is always the same shape and never changes, you can add all other elements to a group excluding the shape that is positioned at (0,0) and drag the group instead of dragging the stage.
If you must drag the stage, then you'll have to calculate the distance of x that the mouse has moved while dragging, and apply that to the position of the shape at (0,0).
I have this background that I'm using for a section, and it starts with a small arrow engraving at the top:
However I'm trying to get it when it repeats to clip out the top arrow part, just leaving the texture in the middle part. I was wondering if it was possible to do it with something like webkit? Thanks
You can't. You need to come up with another method of doing so. There are a number of ways to do this. Personally, I would use only the arrow, but use inner box-shadow for the shadows on everything else. This way you have smaller image being used, and it will always fit the size of the container.
Break up the background image from the pointer and make the two separate sprites. You can get tricky with the pointer and have it point in all 4 directions in the same image. This will allow you to pop up the bubble in all directions from the source.
You can't repeat both x and y on a usable sprite.
I have a maximum of three sprites in my projects.
One for non-repeating elements, another for repeat-x, another for repeat-y.
I find the clip property pretty much useless.
I have a MovieClip object, which is exported for actionscript (AS3) in an .swc file.
When I place an instance of the clip on the stage without any modifications, it appears in the upper left corner, about half off stage (i.e. only the lower right quadrant of the object is visible). I understand that this is because the clip has a registration point which is not the upper left corner.
If you call getBounds() on the movieclip you can get the bounds of the clip (presumably from the "point" that it's aligned on) which looks something like (left: -303, top: -100, right: 303, bottom: 100), you can subtract the left and top values from the clip x and y:
clip.x -= bounds.left;
clip.y -= bounds.top;
This seems to properly align the clip fully on stage with the top left of the clip squarely in the corner of the stage.
But! Following that logic doesn't seem to work when aligning it on the center of the stage!
clip.x = (stage.stageWidth / 2);
etc...
This creates the crazy parallel universe where the clip is now down in the lower right corner of the stage.
The only clue I have is that looking at:
clip.transform.matrix
and
clip.transform.concatenatedMatrix
matrix has a tx value of 748 (half of stage height) ty value of 426 (Half of stage height)
concatenatedMatrix has a tx value of 1699.5 and ty value of 967.75
That's also obviously where the movieclip is getting positioned, but why? Where is this additional translation coming from?
I believe that I have solved the problem.
It seems that when the stage is not set to specific dimensions, the scale of the items (or this particular vector object in my case) on the stage is relative to some preset scale/dimensions (The origin of which I'm not sure -- with some testing it looks like it is affected by the ratio and dimensions of the stage).
Increasing the size of the stage increases that scaling value, which through some set of concatenations of matrices results in the movieclip getting scaled and translated at that same percentage (as the stage), even if you explicitly set the x/y/width/height values.
(Note: not just resizing dynamically. Resizing the window, closing and re-opening the window at that new size produces the same behavior)
I suspect this only happens with vector objects?
Anyway, the fix is to set the stage to an explicit width and height. Then the translation and scaling of the object appear to use an identity parent matrix, and everything works like you'd expect.
How do I do this? I have a seekbar which I'm retrofitting to resize with the FLVPlayback. Right now it gets the mouseX when you click the seekbar, and divides that by the length of the seekbar in order to know what percentage it should seek to.
My problem is that now that I'm dynamically setting the width of the seek movieclip the width returns the width I set, while the mouse event returns the position as if it was still the original width it has in the library.
How do I get around this problem?
Just scale against the original width you had. Say that you've got a 100px wide bar, just go:
var seekTo:Number = seekbar.mouseX / 100;
This will give you the percentage clicked at regardless the current width of the seekbar.
Nice and easy and no funky coord space conversions needed.
The MouseEvent object has a stageX and stageY property - you just need to offset those values by the position of the clip and you should be set.