Scratch-like cursor

I made a modified version of Wick’s cursor! It has some actions I thought would be useful, like resizing from the edge, or skewing. Or skewing with resizing, because it was used in Alan Becker’s stick figure tutorial. Also, this contains some more easing styles, like cubic, quartic, exponential, and bounce.

You can check out the modifications at https://stickmanred.github.io/wick-editor/. Let me know what you think!

Corner resizing changes

Shift to keep original ratio.
I found it a bit confusing how you have to hold Shift before you drag the corner to retain the original dimensions. Do you like this behavior or the normal one better?

Alt to scale from the opposite corner.

Edge resizing changes

Shift no longer does anything.
Locking the scale when pressing Shift seemed pretty useless to me.

Ctrl/Cmd to skew.
In the middle of coding this, I found out that in Adobe Animate you drag the sides of the box instead. Maybe I’ll change this when I know how to set up the website?

Ctrl/Cmd + Shift to skew + scale.

Alt to scale or skew from the opposite edge.

These combine, so if you held down all the modifier keys, you’d scale and skew from the opposite edge.

Rotation changes

Shift to rotate in 45-degree increments.

Translation changes

Shift to move objects in a straight line. It snaps to the closest 45-degree angle.

Future changes?

I want to work on shape tweens for now, but the next thing I’ll do for the cursor is bring back the original scaling behavior. After that would be making straight lines, and maybe adding in some of the new easing styles.

(oh cool, I can edit this post again)

A new addition to the fork would be a “Toggle Frame Picker” button that works similar to Adobe Animate’s frame picker! (Recommended by charm)

4 Likes

cool its nice to know im not the only one who uses scratch

I’m not able to edit my post anymore… Anyways, I finally got the fork set up! You can test the cursor tool easier now at https://stickmanred.github.io/wick-editor/. I’m planning to add in the extra easing styles and more tool upgrades soon.
oh yeah also I added the moving in a line thing and rotate perfectly 90 degrees, I hope it helps!

2 Likes

Maybe you can add something to show how much you can skew an object.

I still think there should be a way to keep the original ratio using another key.

1 Like

Thank you for the feedback!

Good point, I’ll add back the original scaling behavior, that’s what most Wick Editor users would be used to. Maybe I’ll assign the new one to Ctrl, just for me :P

For the skew inspector, I think it requires adding a skew option here and here and here (hopefully I got all of them) and for clip skewing here. After this, I want to work on the GUI, because it doesn’t show that it’s skewing… what do you think about an Adobe Animate-style tool?

Edit: So… the skew inspector will require a lot more work than I expected. I think I’ll restart and regroup, later

1 Like

Its okay you can take your time.

For this question, I think you should make it work both ways.

ok I officially give up trying to make the skew inspector work
Now I understand why the Wick Editor devs didn’t add it. :(

To-do list: Shift for normal behavior, Control for original ratio
Modify line tool to draw flat lines or 45/90 degrees
Add in new easing styles

1 Like

Its okay you didn’t have to add it, you’re already have done enough.

And I can’t wait for the new updates:D

1 Like

over winter break i spent a solid couple days just trying to add something in the inspector for our fork and had no luck, so yeah this checks out :\

i’ll let you know if i find a way…

2 Likes

mmmmmm~ aliiiigggn~

1 Like

I like your fork! It’s better for animation, because of those new tween options! But i didn’t know it had scratch-like cursors! Note: I found out that buttons have a special option: pointer! You can possibly make any pointer button.

1 Like

vercel: IT’S FREE!

1 Like

Woah, this fork is cool

3 Likes

ong all this needs is tween skewing

I was thinking? what about some bezier tweens and stuff, you also need to update the logos and brands, as Wick Editor, the ghost mascot and their text logo are restricted. Wick Editor logo guidelines.

Bezier tweens are a good idea! There might be a way to make it interactive, maybe.

I don’t think it needs to be changed… If it was a bigger project, like working on the base code and stuff, then probably, but this fork is just small patches and features.

I was reading a lil’ bit of tween.js docs and, for custom beziers, we need our own calculator, which has to get k (the time in tween) and return a number (using math). I think that we should make it class-based, since we can comply 100% with tween.js's tweening functions.

// example on how it should be implemented.
var myCustomTween = Wick.CustomTween(myObj)

myCustomTween.add(50 /*the time in k (x100)*/, 10 /*the tween value*/, 10, 50 /*tween point 1/2*/, 50, 10 /*tween point 2/2*/)
1 Like