AnimationsEditor is a graphical tool for designing animations based on Animations-Core. Bring your morphs to life using six handpicked animations. Effortlessly create animations in Squeak. Code less and achieve more - with AnimationsEditor.
AnimationsEditor provides you with a broad toolset to bring your morphs to life. Select any visible morph in your Squeak image and use up to five animations for offering your users a fully animated Squeak experience:
positionLet your morph wander around the screen.colorMake your morphs chameleons: Change their color to any Hex coded color using a smooth transition effect.rotationRotate your morph up to 360 degrees.sizeLet your morphs grow and shrink their size according to your needs.image source(Only for ImageMorphs) Animate the image used as your morph with a smooth transition. Bongo cat approved!text(Only for TextMorphs) Change the displayed text in your morph, great for storytelling!
Add multiple keyframes for each property at different timestamps to see an ever-evolving animation!
Fear of creating too complex animations and losing sight of whats happening? Fear not, for the timeline is always shown at the bottom to tell you when you have set keyframes for every property!
Watch your animations whenever you want with Play Animations. Have a great animation that you want to use as a blueprint for future animations? Save it as a JSON to your disk, share it, and load it back into the animation editor by using Load JSON.
Ready for AnimationsEditor? Follow our lean setup guide to install AnimationsEditor.
Follow our step by step guide for using AnimationsEditor.
- Install and open a supported Squeak image (see setup guide).
- Open AnimationsEditor by executing
AnimationsEditor open. Now you should see the GUI of AnimationsEditor.
Pro Tip: Use 'Button for it' on this code snippet in order to have quick access to AnimationsEditor.
- Create a morph in your Squeak image - this is the morph we want to bring to life. In case you are just playing around, create a dummy Morph with
Morph new openInHand - Click on Add Morph
- Click on your previous created Morph using left mouse key with 'opt'/'alt' key pressed. With Windows OS you can also use the middle mouse key.
Your morph should have been added to the property inspector. The property inspector provides you up to five properties to animate, depending on the type of morph you added.
Enter a hex coded color into the text field or simply use the integrated color picker, add a keyframe and press Play animations.
Enter an integer value in the text field, add a keyframe and press Play animations.
Enter the desired x- and y position the morph should move to, add a keyframe and press Play animations.
Enter the desired height and width of the morph, add a keyframe and press Play animations.
Tell it where your image is saved, add a keyframe and press Play animations.
Enter the text you want to show, add a keyframe and press Play animations.
Adjust the duration of your playing field with start- and endtime; Keyframes outside of these boundaries will not be used (but still saved if you want to adjust later!)
Configure your animation with AnimationsEditor and save everything in a JSON by pressing Save animation.
Load in a previously saved animation by pressing Load JSON.
The timeline shows you your created keyframes of the properties of your selected object. Its bounds are the start- and endtime. You will never lose sight of your created animations!
The CI pipeline is implemented using GitHub actions, and push is executed on each piece of code. The AnimationsEditor package is therefor executed under mac, ubuntu and windows on Squeak 5.3, Squeak 5.2, Squeak 5.1 and Squeak Trunk. In addition, the codecoverage is monitored and the badges above are updated.
For our complete documentation, visit our wiki, which contains the following parts:
- Small overview to get into using the AnimationsEditor.
- See beyond the UI and learn how the AnimationsEditor is built and the code behind it.
Legacy: