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.
Related
I have a p-dialog with a fixed position in the center of my screen. Inside the p-dialog I have an image on which should appear a small dot when clicked on the position of the click.
When I set the position of the dot as: positionX = $event.offsetX it works fine when the application is on fullscreen. However when I resize the window the offset value changes and the dot appears moved to the side.
I tried to do as follows:
const rect = $event.currentTarget.getBoundingClientRect()
positionX = $event.pageX - rect.left
or using $event.client.x but each time the position is extremely wrong reaching negative or too big values. I get really confused with all the values we can get from PointerEvent and none of them seem to let me calculate the correct position of the dot. I feel like I would need to get the current size of the image relative to the size of the screen so I can manage to calculate the value of the offset, but in the $event.target the width stays always the same, but the offset changes.
I need to get the relative position to the image so I can place the dot properly on any screen size. How to achieve this?
I am trying to write a simple GUI for editing key-value pairs in TCL+Tk. It is based on a vertical ttk::panedwindow widget containing an arbitrary number of horizontal ttk::panedwindow widgets, each with a ttk::entry on the left side and a text widget on the right side. Below the main ttk::panedwindow is a frame containing buttons to do things like saving and loading files and adding new rows. This works fine, with all widgets scaling as I expect them to, but when more rows are added they get squeezed together or stretch the window.
Trying to make the window vertically scrollable didn't work properly. Tk is unfortunately very picky about what it will let me attatch scrollbars to, so I couldn't just put one on the main ttk::panedwindow. I tried various hacks listed on wiki.tcl.tk, but most of them use a canvas widget and scroll in both directions. If I remove the horizontal scrollbar, it won't be there anymore but the widgets will still extend beyond the edge of the window or stop before the edge of the window.
I also tried BWidget, but I didn't understand the relationship between the ScrolledWindow and ScrollableFrame widgets that I was told to use together. When I followed the examples they had the same problem as the canvas version. I suspect that they actually use a canvas internally rather than implementing a true scrollable frame.
How can I make the main interface scale to the dimensions of the window while also allowing vertical scrolling? I'm using Linux, if that helps.
I made a GIF to show what I want:
dissapearing scrollbar is optional, it just happened like that. The changing scribbles represent the lines of text adjusting to the available space.
So… you want the content to be “natural” in the vertical direction, yet stretched in the horizontal direction? Tricksy.
Your basic approach is going to be to put a frame (or ttk::frame) inside a canvas, put your “interesting” content inside the frame and add a scrollbar to the canvas. However, that's not the tricky bit. The tricky part is that you need to notice changes to the dimensions of the canvas and to the dimensions of the frame; a change to the frame should cause the adjustment of the canvas's bounding box, and a change to the canvas should cause adjustment to the requested width of the frame.
To notice a change to the size of any widget, you bind to the <Configure> event sent to that widget and use the %w and %h to get the width and height that the widget is being set to. (Indeed, geometry managers like grid and pack work exactly like that internally, except they use C-level bindings and not script-level ones.)
bind $canvas <Configure> {adjustCanvasDimensions %W %w %h}
bind $frame <Configure {adjustFrameDimensions %W %w %h}
proc adjustCanvasDimensions {theCanvas width height} {
set theFrame $theCanvas.frame
set oldwidth [$theFrame cget -width]
if {$width != $oldwidth} {
$theFrame configure -width $width
}
# Consider adjusting the frame height if canvas height greater
}
proc adjustFrameDimensions {theFrame width height} {
set theCanvas [winfo parent $theFrame]
$theCanvas configure -bbox [list 0 0 $width $height]
}
Or something like that. This is untested code (and assumes you put the frame in the canvas, etc.) but ought to show you the way forward.
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.
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.
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.