SVG Animation Editor Feedback ?

December 6th, 2007 | by Tonny Kohar |

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.


Update

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:

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


Screenshots

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.

Sketsa SVG Animation Editor


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 )?
- etc

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) ?

Tags: , ,

  1. 22 Responses to “SVG Animation Editor Feedback ?”

  2. By peepo on Dec 6, 2007 | Reply

    What an exciting initiative! please consider open-sourcing Sketsa.

    whilst there is a natural relation between the editor and SVG, it need not be transparent to the user. However the code should be precise and minimal.

    it would be very nice if CSS was used throughout as far as possible.

    rather than start from the perspective of SVG forget all about it ~:” and consider what an animator wants to do. then provide SVG to do that.

    Sprite, keyframe, tween, onion-skin and timeline are all in common use.

    publish an alpha as soon as possible, and ask for feedback.

    It’s a separate tool, you should not be drawing and animating at the same time, that’s bad workflow.
    create sprites and then animate them.
    could possibly be two modes, but the uis should be totally different.

    no special namespace, this would only create problems.

  3. By David Entwistle on Dec 7, 2007 | Reply

    Great – delighted to hear about this! I have two thoughts:

    I think the SVG animation program should be separate product – would have bigger potential market than if a Sketsa module. (There are lots of Illustrator users who (sadly) may not switch drawing programs but who need something easier than Flash and Ikivo Animator.)

    And I’d like your SVG Animator to look and work as far as possible like Adobe’s late, lamented Livemotion. It was far more intuitive and easier to use than Flash – in particular, the time-based rather than frame-based animation model.

    You can probably guess I use Adobe programs a lot (sorry) – but I’m sure there are many like me who would prefer not to use Flash but to support open standards instead.

  4. By Tonny Kohar on Dec 9, 2007 | Reply

    @peepo

    > What an exciting initiative! please consider open-sourcing Sketsa.

    Open Source is always a topic in our internal meeting, however up till now, we could not find a way to generate revenue model by open source Sketsa. We are always looking for idea for open source but still generate revenue model. If you have any idea regarding this area, pleased do not hesitate to drop us note.

    note: there is already open source SVG Editor called GLIPSGraffiti hosted at sourceforge.net

    @peepo and David
    Thank you for the feedback, it looks like separate application is the way to go.

    If you have more feedback, please do not hesitate to drop a note.

  5. By Marek on Dec 10, 2007 | Reply

    Flash one is definitely better, allowing thousands of Flash graphics to migrate smoothly…

  6. By Joe on Jan 13, 2008 | Reply

    As Peepo said above, this is a interesting concept. Are there any plans to open up the source?

  7. By Frederik on Jan 20, 2008 | Reply

    Ah, cool to see SVG animation being actually supported. Inkscape has similar plans. I once wrote a mockup for animation support in Inkscape, maybe you find some of the ideas interesting for your work:

    http://www-user.uni-bremen.de/~felwert/inkscape/Animation01.html

  8. By Tonny Kohar on Jan 21, 2008 | Reply

    @Frederik

    Thanks for the mockup for Inkscape animation, It is very interesting approach especially the non frame based but a scale timeline based instead.

    One questions, how do you handle multiple selection of Objects (since the editor allow to select more than 1 object at the time) ?

  9. By Frederik on Jan 21, 2008 | Reply

    @Tonny:

    Hm, that’s a good question, didn’t think about that, yet. SVG itself doesn’t allow to apply one animation to several objects. So the animation performed (e.g., move) should be applied to all objects seperately.

    Maybe it would make sense to dynamically show one single timeline for all selected objects in the animation dialog (e.g., “selected items”), so one could edit the properties for all animations at once. But this would of course be difficult for objects that only have parts of their timeline in common. Don’t really know how to solve that.

  10. By david dailey on Mar 5, 2008 | Reply

    I have always had the sense that the interface associated with VideoWorks/Director was wrong from the beginning. The concept of a central timing staff (as in music or labanotation) for the choreography of events (that ultimately happen in 2-space) gives a one-D interface to a 3-D phenomenon. Better to give a 2-D (namely x-y) interface to the 3-D phenomenon. Such, I think, is far more consistent with the SMIL approach in which animations are associated with individual entitities (or groups) than with a time line (reminiscent of a procedural rather than declarative approach). Please rethink the whole conceptual approach. Long time animators may resist a new interface (having a few decades of the other one to congeal their cognitive styles), but in the long run, the model would be much more effective if rethought from an alternative perspective. Consider choreographing a dance: where people are in x,y (with flavoring to represent the time axis) is a better analysis (in the principle components/factor analytic sense) than the one factor solution represented by the time line. Please holler if this needs further elucidation.

  11. By Tonny Kohar on Mar 6, 2008 | Reply

    @david dailey

    You have very interesting concept regarding alternate UI for describing animation (Choreographing vs Timeline concept).

    If you do not mind, could you elaborate in more detail. If your post is going to be long and want to add images to explain the step better, you could write in your blogs/web pages, just do not forget to drop the url in this blog comments as well.

  12. By rasindh on Mar 12, 2008 | Reply

    please visit http://www.xstreamsoftware.com/rapidsvg_featuretour1.htm

    See how nicely it has been created. Though Now am in another company, I feel proud that I worked in this product team for 3 years.(after executing your evaluation copy!!!)

  13. By Frederik on Mar 12, 2008 | Reply

    @rasindh:

    “the new Scalable Vector Graphics (SVG) browser standard (which will soon have default support across all major browsers including Internet Explorer and Netscape)”

    Is there something I have missed? Default SVG support in IE?

  14. By rasindh on Jun 26, 2008 | Reply

    Hi, I don’t know who wrote that!!”some Default SVG support in IE” that was a wild speculation about SVG as it was growing so rapidly so that IE will provide such support.

    just see the product demo.
    sorry for such a long delay!!!

    u can mail me back to my id hope u can see it for any comments & any fast response. (I told u I left that company 3 years back)

  15. By John on Nov 3, 2009 | Reply

    excellent!

  16. By web design template on Jan 4, 2010 | Reply

    Wow nice blog .. good tutorial .. thanks a lot buddy

  17. By NFA Trust Texas on Jan 4, 2013 | Reply

    Thanks guys! This was very helpful. I hope this is useful for others as well.

  18. By Gun Trust Lawyer on Aug 12, 2013 | Reply

    The SVG use that have impressed me the most is Interactive SVG on the iPad. If you’ve played around with in-browser object movement on iOS devices a lot of this will look familiar to you, but it’s a useful demo for those who haven’t had a chance to look into it just yet!

  19. By San Antonio Debt Relief on Oct 9, 2013 | Reply

    Well done! I learned a lot from this. You explained really well.

  20. By Megan on Apr 26, 2014 | Reply

    What I like about this drawing software is that it has the ability to edit source code to create exactly the effects you intend.

  21. By Jenna on May 13, 2014 | Reply

    This is great. Does anyone know how these actually compare to Illustrator?

  22. By www.basratuna.net on Oct 3, 2014 | Reply

    Contactos con mujeres, hombres y parejas masaje erotico villena en Alicante.
    MASAJE SENSITIVO.

  23. By Nauka jazdy Wrocław on Oct 3, 2014 | Reply

    I really like it when people get together and share ideas.
    Great blog, continue the good work!

You must be logged in to post a comment.