Hi:
I am playing around with Spritesheets and added a button, made character clickable and added a horizontal slider. However, I am struggling with getting the horizontal slider to move smoothly and aligned with the cursor and need the circular ball to not accelerate toward either end of the slider line if you release the ball while when moving left or right.
PigFlipTest.hype.zip (2.4 MB)
Any help much appreciated.
PM
A 100% speed means that drag movement of 100 pixels will move 1 second on the timeline.
Your element starts at 126px and ends at 426px, so it moves 300 pixels in a duration of 1 second 22/30 frames (1.7333s).
300 / 1.7333s = 173.08 pixels per second
100 / 173.08 = 57.777, which means 58% is the value to use.
(trial and error to find this is sometimes faster than doing the math!)
Got it! Thank you Max & Jonathan. I also wanted to mention that the Spritesheet feature works very well with exported animations in the form of sequenced png images from a program called Cartoon Animator 4. Very impressed with Hype yet again on how its unique features enable other creative opportunities. PM
Great - glad that is a good workflow for you!
though it's a bit of a pity that it does not play well with responsive sliders .... they lose sync when stretched. i feel like this dragging-feature for timelinecontrol should work better in Hype 
slider.hype.zip (468.1 KB)
so this kind of a responsive slider will only work perfect at one special width. all others widths narrower or wider will move to fast or to slow. i can not find a pure Hype-Setup solving this. But as it is such a nice feature, i feel like it should work more accurate out of the box. perhaps in the next update 
but anyway ... would really love if you could solve it in a pure Hype-Setup
dragTimeLineScaled.hype.zip (538,8 KB)
In this example, the knob also scales, but the coord space is kept equal using Hype scaling by putting it in a scale group. Meaning you would need to adjust the height of the container using auto height and to shrink the knob apply an inverse of the scale to it. So, there is a solution, but some script required if the knob shouldn't scale. Example has no script, though.
With script allowed, you can just write your own drag timeline handler. Under the hood, it's also "just" script with the benefit of an GUI and being bundled with the runtime.
i really want to avoid 'scale contents' here and yes it's easy to script the desired behavior ... thx for putting some effort. you've always a bunch of good ideas! 
it was more of a feature-request
Thanks for the feedback. We resolved some similar cases in past releases for managing flexible layout and dragging, but this is an interesting one in regards to flexible layout since really what is needed is for the speed value to be bound to the element's container resize percentage. I've added this to our tracker; it might be instead of having it always account for this, that having variables/forumulas in input fields is the ultimate solution.
For others who might need a workaround, @MaxZieb's response is my recommendation as well.
I also made a version with a special auto height that unscales object (keeps them at scale 100% = 1). You must assign the class scaleCorrection for nested objects. In this example, it is on the knob:
dragTimeLineScaled-AutoHeight-Unscale.hype.zip (540,8 KB)
PigFlipControl.hype.zip (2.4 MB)
Uploaded my file to show slider timing corrected for general reference. Have fun!
Patrick
I'd be afraid of blurring in some browsers when using the scalemethod. a simple Hypesolution would be to use a couple of layouts ... so the deviation would be negligible for each ...
In that case, make sure to uncheck WebKit Acceleration, as that options adds "rotateY(0deg)" to all elements to force them into a pre rendered state on WebKit that can lead to blurry text etc. as it caches the image at a resolution. Without it, current browsers keep it crisp.
I used ImageAlpha on your sprite and decreased it from 2,4mb to 312kb
PigFlipControl_ImageAlpha.hype.zip (339,7 KB)
A reminder to everybody: ImageAlpha and ImageOptim are Open-Source and maintained by the great Image compression tinkerer ⇨ https://twitter.com/kornelski
If these tools have made your life easier and or helped you finish a job and meet its restriction … in present day or in the past: Show the author and maintainer some love and support him with a …
Hi Max:
Thank you very much for the helpful hint.
Patrick McLean
