Sketsa SVG Editor 5.0 just released, Now by popular request we are going to develop SVG animation plugins module for the Sketsa. We are stuck at how the UI will flow, do you like the way Adobe Flash Editor, Jasc Webdraw, or you prefer new ways for doing animation editor, etc ?
So we are looking for feedback regarding how the SVG animation plugins will behave (UI Flow), do you have any preferences how things should be done.
Things to consider:
- Since SVG allows deep nested <g> element, how does it will look when you select multiple elements which under different <g> and try to use the timeline editor ?
- Same as above, how do you expect the timeline to behave when you try to re edit the timeline when there are multiple selections with different timing.
- Which one you prefer the SVG animation editor as a plugin for Sketsa or totally different product (because the UI flow is different) ?
- What do you think of proprietary namespace to help the editor ? Currently we are not adding any proprietary namespace at all
- Timeline based or no timeline based ?
- etc, anything to add here ?
Note: UI Flow means editor UI (workflow UI), not the resulting SVG output.
Note: If you like to show screen cast of your favorite features of the existing animation editor, you could use Wink (Free), camtamsia, or screenshots, etc, so we could see it better, sometimes is hard to express things in writing right
If you like to write the feedback in your own blog or webpages, please add the link to the comment section, so we could easily find about it.
Any feedbacks are very appreciated and help us a lot in developing this SVG animation editor.
We just relased pre alpha (prototype) of SVG Animation Editor. It is pre alpha, many things still not working, a lot of bugs, and not feature complete. It is intented to encourage feedback whether or not we are in the correct track.
Because of existing customers feedback, currently it is a plugins for Sketsa rather than standalone products. If you believe it is the wrong approach (prefer standalone products due to UI workflow), please do not hesitate to drop us a note.
It is licensed under Apache License version 2.0
How to download:
- Important: Animation Editor 0.4 or higher require Sketsa SVG Editor trunk build, thanks to the new introduced public API in Apache Batik for Timing Model
- Binary plugins modules for Sketsa SVG Editor. Please see Sketsa Plugins installation page, especially the manual install instruction.
- kiyut-sketsa-modules-animation-0_3.nbm (old)
- kiyut-sketsa-modules-animation-0_2.nbm (old)
- kiyut-sketsa-modules-animation-0_1_1.nbm (old)
- kiyut-sketsa-modules-animation-0_1.nbm (old)
- Source code for SVG Animation Editor under Apache License version 2.0
- animation-0_3-src.tgz (old)
- animation-0_2-src.tgz (old)
- animation-0_1_1-src.tgz (old)
- animation-0_1-src.tgz (old)
How to use:
- Install the Sketsa SVG Editor trunk build as above
- Install the binary plugins as above
- Run Sketsa SVG Editor
- In the Menu File – Windows, there should be Animation
- Currently, it is only accepting single element (not multiple element)
- Select element which have animation child element using either DOM Editor or Selection Tools
Below is the changelogs and draft planned feature
Animation 0.4 - Better Timing Model, thanks to Apache Batik exposed new public API - Improved Sketsa integration Animation 0.3 - Timeline could distinguish indefinite timing value by using different handle - Improved Sketsa integration Animation 0.2 - Improved Timeline * Able to move/update timeline start and duration (UI only) * But still not updating DOM Animation 0.1.1 - Improved animation editor GUI - Remove [debug] text Animation 0.1 - Add Menu - Windows - Animation - Add Timeline (static UI) - Add read only animation elements and attributes Planned -------------------------------------------------- Animation 0.5 - Animation Editor able to update DOM - Animation Editor still not able to create new animation element Animation 0.8 - Animation Editor able to create or add new animation element Animation 1.0 - Final Release - Animation Editor expected to work (create, update, and read) - Minor bug allowed, major bug should be fixed
Please click on the image to make it larger and see the whole context.
Note: sample svg file that we use in this screenshot is anim01.svg from SVG 1.1 Specification.
How to represent SVG/SMIL timing model ?
The problem we are facing currently is how to represent the timing model and UI flow for the Animation which sensible and intuitive for the users. For example: since there are many ways to define timing model in SVG/SMIL (aka begin and dur) eg:
for begin attribute, it accepts
- begin-value-list ::= begin-value (S? “;” S? begin-value-list )?
- begin-value : ( offset-value | syncbase-value | …
- offset-value ::= ( S? “+” | “-” S? )? ( Clock-value )
- event-value ::= ( Id-value “.” )? ( event-ref ) ( S? (“+”|”-”) S? Clock-value )?
Given the above screenshots, do you have any idea how to represent all those (timing model) in the timeline UI ? How the UI will look like when the value is eg: click, indefinite, etc ? How to represent value restart, repeat count, fill (freeze|remove), etc ? Is it just using different color is enough ? And how the UI will behave, when you want to edit the eg: begin=0s to begin=click ?
Or timeline UI is not suitable to represent SVG/SMIL timing model ? Any idea on what/how is the best ways to represent SVG/SMIL timing model in UI (animation editor application) ?