Merge pull request #60 from hpi-swa-teaching/HerzogVonWiesel-patch-1

Update README.md

README.md

@@ -7,19 +7,26 @@
 ![GitHub All Releases](https://img.shields.io/github/downloads/hpi-swa-teaching/AnimationsEditor/total)
 [![Coverage Status](https://coveralls.io/repos/github/hpi-swa-teaching/AnimationsEditor/badge.svg?branch=master)](https://coveralls.io/github/hpi-swa-teaching/AnimationsEditor?branch=master)
 
-AnimationsEditor is a graphical tool for designing animations based on [Animations-Core](https://github.com/hpi-swa/animations). Bring your morphs to life using up to four handpicked animations. Effortlessly add generated code to your squeak project. Code less and achieve more - with AnimationsEditor.
+AnimationsEditor is a graphical tool for designing animations based on [Animations-Core](https://github.com/hpi-swa/animations). Bring your morphs to life using six handpicked animations. Effortlessly create animations in Squeak. Code less and achieve more - with AnimationsEditor.
 
-![start](https://user-images.githubusercontent.com/44775014/89678706-f48ebd00-d8ef-11ea-9fc5-85e578b52a51.gif)
+![start](https://i.vgy.me/H0hUs9.gif)
 
 ## Features
 *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 four animations for offering your users a fully animated Squeak experience:
+Select any visible morph in your Squeak image and use up to five animations for offering your users a fully animated Squeak experience:
 - `position` Let your morph wander around the screen.
-- `color` Make your morphs chameleons: Change their color to any Squeak-supported color using a smooth transition effect.
+- `color` Make your morphs chameleons: Change their color to any Hex coded color using a smooth transition effect.
 - `rotation` Rotate your morph up to 360 degrees.
 - `size` Let 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!
 
-Watch your animations evolve whenever you want with *Play Animations*. Take advantage of your work with AnimationsEditor and use the code generation feature: *Copy to Clipboard* transforms your animation to bare smalltalk - instantly use it in your Squeak project. 
+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*.
 
 ## Installation
 
@@ -35,50 +42,67 @@ Follow our step by step guide for using AnimationsEditor.
 
 *Pro Tip: Use 'Button for it' on this code snippet in order to have quick access to AnimationsEditor.*
 
-![AnimationsEditor open.](https://user-images.githubusercontent.com/44775014/89674752-f5702080-d8e8-11ea-84b9-fefdee98dd1c.gif)
+![AnimationsEditor open.](https://i.vgy.me/emJzQ9.gif)
 
 ### Select morph
 3. 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`
 5. Click on *Add Morph*
 6. 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 four animations.
+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.
 
-![add-morph](https://user-images.githubusercontent.com/44775014/89675633-898eb780-d8ea-11ea-94bb-516f56e32fd8.gif)
+![add-morph](https://i.vgy.me/6wXBL7.gif)
 
 ### Supported animations
 
 #### Morph color 
-Enter a color into the text field and press *Play animations*. If a non-supported Color is entered, Squeak uses `Color white` as a default value.
+Enter a hex coded color into the text field or simply use the integrated color picker, add a keyframe and press *Play animations*.
 
-![color](https://user-images.githubusercontent.com/44775014/89675836-e7bb9a80-d8ea-11ea-9e6a-58975dbdc97a.gif)
+![color](https://i.vgy.me/0F0GsL.gif)
 
 #### Morph rotation
 
-Enter an integer value in the text field and press *Play animations*.
+Enter an integer value in the text field, add a keyframe and press *Play animations*.
 
-![rotation](https://user-images.githubusercontent.com/44775014/89676840-9f04e100-d8ec-11ea-8d69-3dfc3cfdb655.gif)
+![rotation](https://i.vgy.me/Hr4GuV.gif)
 
 #### Morph position
-Enter the desired x- and y position the morph should move to and press *Play animations*.
+Enter the desired x- and y position the morph should move to, add a keyframe and press *Play animations*.
 
-![position](https://user-images.githubusercontent.com/44775014/89677492-d4f69500-d8ed-11ea-9b57-56cee7050f4c.gif)
+![position](https://i.vgy.me/pBoaEQ.gif)
 
 #### Morph size
-Enter the desired height and width of the morph and press *Play animations*.
+Enter the desired height and width of the morph, add a keyframe and press *Play animations*.
+
+![size](https://i.vgy.me/MsY9wK.gif)
+
+#### ImageMorph image source
+Tell it where your image is saved, add a keyframe and press *Play animations*.
+
+![image source](https://i.vgy.me/SsbYno.gif)
+
+#### TextMorph text
+Enter the text you want to show, add a keyframe and press *Play animations*.
 
-![size](https://user-images.githubusercontent.com/44775014/89677873-767de680-d8ee-11ea-8102-f89cbbc27891.gif)
+![text](https://i.vgy.me/YJ1ccz.gif)
 
-#### start- & endtime
-Adjust the duration of the animation with start- and endtime.
+#### Start- & Endtime
+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!)
 
-![duration](https://user-images.githubusercontent.com/44775014/89679426-5a2f7900-d8f1-11ea-8956-82c0c713c254.gif)
+![duration](https://i.vgy.me/CVo01i.gif)
 
-### Save animation
-Configure your animation with AnimationsEditor and get the bare code copied into your clipboard with *Save animations*.
+#### Save animation
+Configure your animation with AnimationsEditor and save everything in a JSON by pressing *Save animation*.
 
-![clipboard](https://user-images.githubusercontent.com/44775014/89681241-d5def500-d8f4-11ea-8f92-2d9bdabecb0a.gif)
+![saving](https://i.vgy.me/ioddhw.gif)
 
+#### Load animation
+Load in a previously saved animation by pressing *Load JSON*.
+
+![loading](https://i.vgy.me/0lvlyv.gif)
+
+#### The Timeline
+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!
 
 ## Development
 ### CI Pipeline and coverage
@@ -87,15 +111,25 @@ The CI pipeline is implemented using GitHub actions, and push is executed on eac
 
 ### Documentation
 For our complete documentation, visit our [wiki](https://github.com/hpi-swa-teaching/AnimationsEditor/wiki), which contains the following parts: 
-- [Architecture of AnimationsEditor](https://github.com/hpi-swa-teaching/AnimationsEditor/wiki/Architecture-of-AnimationsEditor)
-- [Coding conventions](https://github.com/hpi-swa-teaching/AnimationsEditor/wiki/Coding-conventions)
-- [Features](https://github.com/hpi-swa-teaching/AnimationsEditor/wiki/Features)
-- [Meaning of technical terms](https://github.com/hpi-swa-teaching/AnimationsEditor/wiki/Meaning-of-technical-terms)
-- [Presentation Slides](https://github.com/hpi-swa-teaching/AnimationsEditor/wiki/Presentation-Slides)
-- [Setup Guide](https://github.com/hpi-swa-teaching/AnimationsEditor/wiki/Setup-Guide)
+
+- Small overview to get into using the AnimationsEditor.
+
+1. [Introduction to the AnimationsEditor](https://github.com/hpi-swa-teaching/AnimationsEditor/wiki/1-Introduction)
+
+- See beyond the UI and learn how the AnimationsEditor is built and the code behind it.
+
+2. [In-depth look](https://github.com/hpi-swa-teaching/AnimationsEditor/wiki/2-In-Depth)
 
 
 ## Contributors
+- [Nick Bessin](https://github.com/SinNeax)
+- [Max Hoffmann](https://github.com/Max784)
+- [Franziska Hradilak](https://github.com/fhradilak)
+- [Cedric Lorenz](https://github.com/cedric-lorenz)
+- [Jerome Stephan](https://github.com/HerzogVonWiesel)
+- [Lukas Wenner](https://github.com/lwenner)
+
+Legacy:
 - [Joana Bergsiek](https://github.com/JoeAtHPI)
 - [Lukas Hüller](https://github.com/lukashueller)
 - [Tim Kuffner](https://github.com/1T1m)