Inkscape Wiki - User contributions [en]

Extension repository

2015-01-14T17:56:17Z

Freedo: /* SWF output */ Add link to updated version

It would be very useful to have a central Internet repository for Inkscape extensions, in a similar manner to Firefox. This way, Inkscape could update installed extensions from the web site, with no need for the user to know if an extension was updated.

== Extensions ==

===[[ExtrudeEffect]]===
Extrude polygons to "3d", also make "string art".

===[http://wiki.colivre.net/Aurium/InkscapeCalendarShellScript InkscapeCalendarShellScript]===
Creating calendars sucks or is impractical if you do not have something that automates the process of putting the days organized in blocks of months for you. To format manually is easy, but this extension can help you on this too Bash script, works for Win32 with Cygwin.

===[http://wiki.colivre.net/Aurium/InkscapeAreaCuter InkscapeAreaCutter]===
For web designers. Slice your site design into .png images. (pt_BR)

===[http://www.julienvitard.eu/ EQTeXSVG]===
Convert an inline LATEX equation into SVG path using Python.

===[http://www.kono.cis.iwate-u.ac.jp/~arakit/inkscape/inklatex.html InkLaTeX]===
Insert LaTeX text or equations into Inkscape.

===[http://www.iki.fi/pav/software/textext/ TexText]===
Embed re-editable LaTeX objects into SVG drawings.

===[http://math.univ-lille1.fr/~barraud/Inkscape/pathdeform/ PathDeform]===
Bend a path according to another one.
N.B. This extension was added to Inkscape 0.45 as "Pattern along Path".

===[http://www.inkbar.lineaire.net/ InkBar]===
Create EAN13 bar codes.

===[http://technoargia.free.fr/swftools/ SWF output]===
Save drawings as SWF. Updated version (compatible with Inkscape 0.48) ist available on [https://gist.github.com/frederik-elwert/1a46f82fce5d3deb7842 GitHub].

===[http://wiki.colivre.net/Aurium/Puff Puff]===
Fluffs elements! :D

===[http://www.colivre.coop.br/Aurium/InkSudoku Sudoku Generator]===
Generates a Sudoku square with its solution (''in a small square if you want'').

===[[CalligraphedOutlineFill]]===
Helps to fill in the inside area of shapes drawn with the Calligraphy tool.

===[http://edlab.die.unipd.it/Site4.html SlotStar]===
Helps to draw the star of slot of a winding of an electrical machine

===[http://richard.henwood.googlepages.com/inkscapelatexextension inkscapeLatexExtension]===
Extract text in an SVG drawing to a LaTeX picture environment.

===[http://saws.googlecode.com s.a.w.s]===
Export an SVG as valid XHTML/CSS files.

===[http://www.colivre.coop.br/Aurium/InkscapeGenerator Generator]===
Replace text and data to automatically generate files (as PDF, PS, JPG, etc...), based on an SVG template and a data file. eg a CSV file

===[http://code.google.com/p/inkscape2tikz/ TikZ exporter]===
Export SVG paths as TikZ/PGF code for use with LaTeX.

===[[FindMatch]]===
Looks for paths that match the selected path and places all matches on the same layer.

===[http://emilien.tlapale.com/code/inksyntax InkSyntax]===
A source code syntax highlighter plugin for Inkscape (wrapping [http://pygments.org pygments] and [http://www.andre-simon.de/doku/highlight/en/highlight.html highlight]).

===[http://sites.google.com/site/placeonpath/ Place Objects on Path]===
Places objects on a curve. The curve is the object that has the lowest z-order (and which must be a path). Distances between objects remain the same as they were before placing. If objects can't be placed on the curve because of their distances they are left in place. Objects will not be modified; clones are allowed. Arrange distances between your objects manually first as curve position and direction.

===[http://code.google.com/p/jessyink/ JessyInk]===
A collection of Javascripts that can be embedded into an SVG file to produce slide shows on opening in a browser. Current releases of JessyInk include a number of inkscape extensions to assign effects, transitions and other aspects of the presentations.

===[http://svg2dxf.googlecode.com/files/svg2dxf_inkscape.zip svg2dxf]===
Updated version of [http://www.bobcookdev.com/inkscape/inkscape-dxf.html Better Better DXF output] which adds support for polylines and does not overwrite the default inkscape simpletransform.py. See README if getting lxml xpath errors.

===[http://code.google.com/p/pixelsnap/ PixelSnap]===
Tool for aligning object/paths onto the pixel grid for bitmap export.

===[http://code.google.com/p/inkscape-guides-creator/ Guide creator]===
Creates multiple guides at once, at set intervals.

===[http://code.google.com/p/inkscapescalegenerator/ Scale Generator]===
Create ruler scales / map scales.

===[http://code.google.com/p/scott-inkscape/wiki/SevenSegmentDigits Seven Segment Digits]===
Create calculator style digits.

===[http://www.cnc-club.ru/forum/viewtopic.php?f=15&t=37&p=92 Close curves]===
Closes all open paths in the selection.

===[http://www.cnc-club.ru/forum/viewtopic.php?f=15&p=101 Gcode tools]===
Generates Gcode program (used in CNC machinery) from given paths.

===[http://dp48069596.lolipop.jp/inkscape_script.html Closeoff, Scatterpath, Selection, Zigzag and Netting]===
See [http://dp48069596.lolipop.jp/inkscape_video.html] for how to use Zigzag and scater extensions.

===[http://wiki.xmoto.tuxfamily.org/index.php?title=How_to_create_smooth_levels_using_Inkscape Inksmoto]===
Level editor for the Xmoto game.

===[http://www.cnc-club.ru/forum/viewtopic.php?f=33&t=37 Close Curves]===
Extension to close the paths in the selection, useful for importing filled paths into openoffice.

===[http://kalyaev.com/2010/20100423/gcodetools.html gcodetools]===
Gcodetools is a plug-in for Inkscape. It prepares and converts paths from Inkscape to Gcode, using biarc interpolation. for use with CNC milling machines.

===[http://www.signcutpro.com/SignCut-Productivity-Pro/signcut-export-plugins.html SignCut Export]===
Set of extensions that come with SignCut to enable Inkscape users to use plotters / cutters via the SignCut software.

===[http://www.lysator.liu.se/~perni/iboardgameexts/ Boardgame extensions]===
Inkscape Extensions for Boardgame Developlemt [http://www.boardgamegeek.com/thread/299033/inkscape-extensions-for-boardgame-developlemt 1]. Includes a hexagonal board/hexmap creator and tools to sheets of tiles for counters ect.

===[http://camm-gl.dyndns.org/ Inkscape CAMM-GL Extension]===
... vinyl cutting utility for Inkscape

This program is basically just a cut manager. Create artwork in Inkscape, save with the supplied hpgl_output extension, and cut or plot with this program. The program does provide some useful functions, but it is by no means a fully featured solution. I do use it exclusivly, and it currently satisfies my needs.

===[http://salug.it/~fabioviola/inkscape/extensions Badge Renderer]===
... A little script to render a badge in a Inkscape document.
This is only a little python script used as example in an article for my GLUG (SaLUG!) journal. This can be used to quickly render a badge. It can be improved, for example, with shadow direction and reflex direction. As soon as possible I'll do it.

===[http://www.craigmarshall.org/archives/8 Guillotine]===
This is a mirror of the GIMP guillotine function, it allows you to drag guides onto the canvas, and then using Export->Guillotine, export those slices as pngs to the directory and filename of your choice. It also has an option for using export hints, if your drawing has previously been exported. [http://www.inkscapeforum.com/viewtopic.php?f=11&t=5832 Forum link]

===[http://code.google.com/p/inkscape-replace-font/ Replace Font]===
Allows mass replacement of the fonts in a document. Can list existing fonts. [http://www.inkscapeforum.com/viewtopic.php?f=11&t=5843 Forum link]

=== [http://sozi.baierouge.fr/wiki/doku.php?id=en:welcome Sozi] ===
A tool for presentations made using zooms and rotations, not just slides. Uses Javascript added to the .svg file to display in web-browsers

===[http://www.inkscapeforum.com/viewtopic.php?f=11&t=5943 CMYK pdf/tiff export]===
Extension to export to CYMK colourspaced PDFs / Tiffs. In development (september 2010)

===[http://sourceforge.net/projects/o-scape/ O-Scape; Orienteering map making tools]===
Extensions to help make Orienteering maps; see this [http://www.nopesport.com/news/1343-o-scape-free-orienteering-mapping-software interview] for more information

===[http://www.inkscapeforum.com/viewtopic.php?f=5&t=4729#p32019 Mirror]===
Mirror a path along any axis.

===[http://sourceforge.net/projects/inkscape-tables/ Tables in Inkscape]===
Adds (experimental?) table suport as an extension.

===[http://doctormo.org/2011/05/19/deviantart-plugins-released/ deviantArt uploaders]===
Upload artwork to deviantArt from the "publish to" menue item under extensions.

===[http://code.google.com/p/inkscape-music-scale-generator/ Musical scales]===
Extension for automatic generation schemes of musical scale and chords on piano.

===[http://www.inkscapeforum.com/viewtopic.php?f=11&t=9212 Text from CSV]===
Extension to enter text from a CSV file

===[http://luther.ceplovi.cz/git/inkscape-ungroup-deep.git/ Deep Ungroup]===
Ungroup all groups in the selected object.

===[http://www.pernsteiner.org/inkscape/layerclip/ Layer Clip]===
This is a a set of Inkscape extension scripts for setting and removing clip paths for entire layers. Inkscape has no trouble rendering or editing layers with clip paths, but it currently has no built-in method of setting the clip path for a layer, this is the purpose of these extensions.

Features include: Clip containing layer, Clip layer above, Clip layer below, Clip parent layer.

'''''Notes:'''
''You must select an object in the clipping layer before applying the extension, otherwise you will receive an error message.
It is a good idea to lock the layer after the extension has been applied. You may also require hiding the clipping layer when using "Clip layer below". This may be exploited to create a masking layer.
Tested on Inkscape 0.48.2 r98''19''

===[https://bitbucket.org/daviddamerell/inkscapesaveasicoextension Icon Generation]===
This is an Inkscape output extension that adds an option to the "save-as" dialog box to generate Windows Icon files (*.ico).

==Extensions for Programmers:==
===[http://wiki.colivre.net/Aurium/RubyInk RubyInk]===
Inkscape extension with Ruby

===[http://wiki.colivre.net/Aurium/InkBash Ink-Bash]===
<nowiki>ShellScript</nowiki> Forever!

===[http://wiki.colivre.net/Aurium/InkMoz InkMoz]===
The Bridge from Inkscape to Mozilla (Inkscape extension with Javascript and more)

== The Repository Specification ==

A website where programmers can publish their extensions, users can search by that, and an update program can access this updates.

=== The Website ===

Must Have:
* '''User Registration''': to allow upload, votes and comments
* '''Extension Validation''': when published, it is public, but the user must be notified that was not validated (the code must be viewed by an validator user). The software updater do not update non-validated versions.
** '''Validation Feedback''': the validator user must write why the extension was not validated.
** '''Extension Deletion''': the validator user can delete an extension or version when he found a malicious code. The upload user must be marked as a malicious user and the account must be blocked.
* '''Extension Search''': with filter, by any available data.
* '''User Votes and Comments for Extensions''': The user can vote and/or comment an extension version.
* '''Extension Bug-Tracker''': today, third part extensions are in simple web-pages. The site may have a Bug-Traker to help all little scripts.
* '''User Extensions Requests''': a lot of users have ideas. Here is a good place for programmers see and make that alive.
* '''Host a cool page for the extension''': allow introduction text, documenbtation, screenshots, examples, and '''i18n'''!
* '''Help the l10n of this extensions''': with a web interface, like pootle and provide the l10n file for the updater program.
* '''Provide Version Control''': A SVN account will be cool, but web uploads (by web-forms) can be transparently SVN commits.

=== The Extension Meta-Data ===

''The data in INX file and more some, like the OS and Inkscape version compatibility...''

The INX file will define the meta-data settable by that. If some extension uses multiples INX files to have more than one option in the menu, all INX files must be read to set the meta-data. The meta-data will be cached in a database to help the search. The DB only need the meta-data of the last validated version and the last non-validated (if that is newer).

=== The Update Program ===

* '''Search for New Extensions''': when the user request
* '''Update Extensions''': search for updates and install that
* '''Help the Code Validation''': for advanced users. Show the extension code and the diff if is that an update.
* '''Help the User Bug-Reporting''': that is not working! The user must say now! ''(When the Update Program be part of the Inkscape, the error window can have a button to submit a bug-report)''
* '''Must test the extension dependencies''': the user must know what is needed to install before try to use.

== Name Proposal ==

Propose a name for the Inkscape Extension Repository:

* '''The Factory'''
* '''Extension Factory'''
* '''INX Factory'''

''Why Factory? Because it is not only a repository. ;-)''

* '''The Furnace'''
''Because Fire & Coal (Passion & Knowledge) are your tools for creating the extensions''

[[Category:Developer Documentation]]
[[Category:Extensions]]

== Mockups ==

Here are some suggestions for what an extension repository might look like.

<gallery>
File:Extension_repository_-_homepage.png|The home page.
File:Extension_repository_-_extension_page.png|The page for an individual extension.
File:Extension_repository_-_request_page.png|The page for an individual request.
File:Extension_repository_-_search_page.png|The search form page.
File:Extension_repository_-_search_results.png|The search results page.
File:Extension_repository_-_submit_extension.png|The extension submission page.
File:Extension_repository_-_submit_request.png|The request submission page.
File:Extension_repository_-_requests.png|The main requests page.
</gallery>

I have no idea of the detail of this project; I don't currently have the skills necessary to try implementing it. I'm also not sure whether it's a good idea for Inkscape to offer hosted repositories (using [http://www.redmine.org/projects/redmine Redmine] or [http://trac.edgewall.org/ Trac]?) or whether it would be better to just leave it to the developer to use somewhere like [http://github.com/ GitHub] or [http://bitbucket.org/ BitBucket] and then use their APIs to pull some basic data onto the site. [[User:Legio noctis|Legio noctis]] 10:19, 23 May 2010 (UTC)

Animation-(Timeline)

2007-10-14T15:59:51Z

Freedo: Proposal of priciples for an animation ui.

[[Animation|Back to main page for animation]]

=== User interface for timeline-based animation ===

==== Existing animation programs (Free & non-Free) ====

* [[MacromediaFlash]] is a good non-Free example.
* [[Ajax Animator]] is a FUNCTIONAL web-based (ajax) free-software clone of the flash interface, and uses a SVG based format for saving and compiling animations (http://osflash.org/ajaxanimator)
* Ikivo Animator is a good non-Free example producing SVG Tiny animations (http://www.ikivo.com/animator/index.html)
* Macromedia Director prior to version MX had a different interface (http://www.rice.edu/fondren/erc/howto/director.html) which I prefer(ed) over Flash
* QFlash is a FUNCTIONAL free-software mock-up of the Flash 4 interface, which can import SVG files but not edit them. (http://qflash.sourceforge.net)
* F4l is a non-functional free-software mock-up of the Flash 4 interface.(http://f4l.sf.net/)
* Anime Studio, formerly known as [[Moho]] (http://www.e-frontier.com/article/articleview/1913/1/793?sbss=793) a non-free example. (Written in Java.) Features skeletal animation ([http://www.e-frontier.com/article/articleview/1918/1/800?sbss=80х, unique bone rigging for 2D]) and automatic tweening of vector operations, [http://img.osnews.com/img/2547/moho4-rh.png view screenshot].
* [[LimSee2]] (http://wam.inrialpes.fr/software/limsee2/) is an excellent almost-free basis. (visible-source limited-use license)
* Spalah Flash (http://spalah.sourceforge.net/?p=10) (not to be confused with Spalah CMS) "is a GTK2[[/GNOME2]] based application for generating Macromedia SWF and [[W3C]] SVG animations." The GUI is today minimalist but the author is trying to integrate it with inkscape. See http://spalah.sourceforge.net/?p=19
* SMIL 2.1 player: http://www.cwi.nl/projects/Ambulant/distPlayer.html (GPL)
* Bob Sabiston's proprietary animation software http://www.flatblackfilms.com
* [[Synfig]] ([http://www.synfig.com/ link]) is a film-quality 2D vector animation editor and renderer. It features image morphing between drawings and output animation that is resolution independent both visually and temporally. (GPL)
* Ktoon (http://ktoon.toonka.com/) is a 2D Animation Toolkit designed by animators for animators, focused to the Cartoon Industry. (GPL)
* Jahshaka (http://www.jahshaka.org/) multiplatform QT animation program powered mostly by OpenGL (GPL)
* Powerpoint (http://office.microsoft.com) has an easy but basic interface. No flash killer, but some nice ideas.
* The Tab (http://www.the-tab.com/) Another non-free example that features elegant systems for parent-child animation and a very interesting feature that is designed for pseudo-3D camera moves.
* Pencil (http://www.les-stooges.org/pascal/pencil/index.php?id=Home) vector and bitmap free animation package using Qt toolkit run on Win32 (XP and works fine on wine), and MacOSX. Simple but already powerful basic animation. It uses blender like timeline with multiple layers and Author plan to export SVG.
* SVGDeveloper (http://www.perfectsvg.com/) is a non-free SVG authoring tool with animation support.
* Blender3D (http://blender.org/) is a 3d (eq. vector) animation program featuring [http://wiki.blender.org/index.php/Manual/Animation_Basics key frame, motion curve, path animation] using [http://wiki.blender.org/index.php/Manual/Ipo_Curves_and_Keyframes interpolation (IPO) curve editing] combining with [http://wiki.blender.org/index.php/Manual/Shape_Keys shape keys] and [http://wiki.blender.org/index.php/Manual/Animation/Lattice_Animation deforming by a lattice] (GPL)
* [http://gimp.org Gimp] the bitmpa editor and it's included animation script for gif is really minimalistic and frame based
* [http://gimp.org Gimp-GAP] (wich stand for Gimp Animation Plugin) is a gimp plugin has some good interfaces for managing movments of objects (menu video=>movepath), layer management and apply effects along animation. A powerfull onionskin management, and notions of clip/storyboard, but could be slow in complexe case and slow computers.

==== Fantavision example ====
Back in the '80's there was a program on Apple IIE (Amiga and MS-DOS too) called "Fantavision". It allowed one to create vector artwork (although I didn't understand at the time that that was what it was called) and animations. It allowed one to create frames of animation where you manually repositioned, recolored, scaled, rotated etc. the objects from one frame to the next. However, it then automatically interpolated frames between the 2 frames (the number of interpolated frames was configurable) such that it create a smooth transition of the object moving from one frame to the other. The effect was very similiar to the "Morphing" effect for raster graphics (popularized in a Michael Jackson video, I believe). That is, the system calculated the trajectory of "Key Points" of the objects from one frame to the next. This process is often called "Tweening" (a term used by Macromedia Flash). [[Sketch|Skencil]] (formerly known as [[Sketch]]) supports this functionality and describes it as "Blending".

I guess what I'm saying is that I think a nice interface to create animations would be similiar. So to animate you would do the following:

* Draw the initial SVG Image

* Increment Frame (from say 1 to 20)

* Reposition the elements in frame 20 (including scaling, color changes, adding removing objects, etc, etc, etc)

* System would then calculate a trajectory for each key point from frame 1 to frame 20. Trajectories would be calculated for things like:
** Each "node" of an object
** Color
** Transformation Matrix
** etc

* You could display/manipulate the trajectories (using the trajectory editor shown above by the original creator of this topic)

* The system would then store the animations using SVG trajectories and the "Key Points" would be the frames you manually created

:So, to create say a 100 frame animation, one might only need to manually create/modify 10 frames and the system would interpolate the additional frames as necessary.

* Also, once the system interpolated frames it would allow you to manually modify the interpolated frames creating further "Key Points" and allow further refinement and interpolation.

NOTE: 3D apps such as blender also use a technique like this, which I think is most widely known as "keyframe animation" or simply "keyframing". However, many such systems tie the keys too closely to actual animation frames, and this creates problems when the frames-per-second rate changes. Particularly in the case of vector apps which are not so low-level as bitmaps and animation frames, I would suggest that frames should be as abstract as possible.

Having key positions in simple percentages of the total animation time might be a better solution. This would also need to be a global/local system, of course: animated objects would have their own animation time specified when inserted into a larger document. A character's walkcycle would end at 100%, but in the larger animation, it would perhaps only be 5% of the total time, yet repeating as the object moves across the screen.

One issue with this abstraction of frames might be that important animation effects do not occur exactly within frames: small things could be mistimed, or simply missed altogether. If you set the frame rate too low, this would be an obvious side effect, so it's not necessarily a problem
that Inkscape should try to fix. On the other hand, a few things could be done to ease this. For instance, "snapping" animation events to frames when exporting (thereby slightly altering the timing), or perhaps just warning that certain animation events are not visible at such a low frame rate.

Of course, on the web, with SVG and DHTML, where most Inkscape animations will hopefully be used one day, frames are not an issue at all, and we just worry about keys in time :)

ANOTHER NOTE: Interpolation does not necessarily occur along straight lines and linearly in time. Paths are already part of Inkscape, so points could move along paths; also he time-length graph can be something like a path, instead of a straight line.

==== Jahshaka example ====

I have used jahshaka for a small animation. This was my first real experience with animation. Thought rough, jahshaka is all about key frames and setting properties for those key frames.

Things I liked

* Key frames are on a per object basis
* When an object is selected you can quickly move from one key frame to another
* properties values for rotation can span beyond 0 and 360, permetting to set three or more complete rotation with too key frame. I think this kind of feature could be used for all bounded values (like color, transparency and so on). Is this compatible with SVG or should it be an artifact ?
* representation of properties values on a time line graph. This functionnality was still not very usable, but being to interact through that kind of object could be very useful (see below)

Things that lacks (and Inkscape shall have)

* possibility to copy animation properties from one object to another (say copy color animation, or whole animation)
* possibility to modify a property value for all key frames at once (eg. translation of object for all key frames or a selcted group). I think this could happen through the value = f(time) graph metioned above. You could select points (representing keyframes) and move them up (more), down (less), right (sooner). This graph could be organised by properties set (color, position). I think this kind of graph would be very close to SVG animations tag.
* macro that helps sets common effects (like blinking for example, or crossing the screen....)

==== Bob Sabiston Example ====
Bob Sabiston's animation software is an amazing vector-based package that stores line width within the points that make up a line -- derived from a tablet pen. usually in a simple stroke there could be a hundred data points storing width information. Then in the next keyframe, a line from a previous key is selected and re-drawn restricted to the same number of points. The software allow sthe points to be "repositioned" as you watch their previous locations be re-positioned. When you run out, the line ends automatically. This information is interpolated in tweening frames to change shape, width, position, but retains the same number of data-points. See the film "Waking Life" for the making-of video for a demonstration. Also visit his website for examples of it's capabilities converted to flash. http://www.flatblackfilms.com

==== Other thoughts ====

Suggestion from someone else: working like [[CinePaint]] (compared with Gimp), with each frame independently from each svg document (working like this or providing this feature) - providing vectorial edition quality we can't get on apps like Macromedia Flash or any other (maybe [[ToonBoom]] or Moho) - allowing us to make our work fast publish without further lack of quality.
(One more suggestion about it: being able to convert .swf to .svg sequence (or animated .sgv) and vice versa.)

It is suggested that there be basically two modes: Local (Object) mode and Global mode. Below is a picture showing a very rough design of the local mode:

http://www.inkscape.org/wiki_uploads/anim_gui1.png

In local modes, all properties of the object editing will be shown on a timeline, and one can create and edit frame within the timeline. Then one may assign different value of that properties on different timeline, or make it change linearly, or nonlinearly :)

----

Animation support in Inkscape offers great new opportunities. Here are some points that I think are important to keep in mind when adding animation to the GUI:

* ''Originality'' Don't do as other do - except it's the best way.
* ''Simplicity'' Animation should not stand in the way of the user. Only show as much as necessary to perform a certain task, and do things in the most natural way.
* ''SVG-Orientation'' SVG animation is different in some ways. The UI should reflect this, and not reassemble concepts of tools that just work differently. E.g.,
** SMIL animation has no concept of frames. So we don't need a frame-based timeline, but a time-based one.
** SMIL animation in general is to animation what vector graphics is to graphics: It's declarative and object oriented. So one doesn't animate a scene, one animates objects on a scene, etc.
* ''Coherence'' The animation UI should reassemble concepts that Inkscape users are already familiar with:
** Animation timelines can in some contexts be treated as paths that one can add points to (keyTimes). Or one can control animation timing with splines (keySplines).

I composed a mockup that reflects the above mentioned characteristics to some extend:
http://www.uni-bremen.de/~felwert/inkscape/Animation01.html

==== Powerpoint Example ====
You select an object and add types of animation. These are listed in the custom animation pane. They can be set to occur all at once, one at a time, onclick, with previous or after previous. A number appears next to each object in the editing window when the object has animation applied to it, representing the sequence of the animations. When an object has an Entrance type animation added to it as the first animation, it will not appear on screen until the timeline reaches this point. animations can be linked together to create quite complicated sequences.

==== Onion Skinning ====
Onion skinning is a standard animator tool, previous or next frames (sometime both) are displayed under the current frame with differrent color, or less contrast, allowing to understand wich drawing the animator is actually working on, and wich frame is 1 step or 2 step before or after the actual frame.

This can easily be implemented using transparency parameter of layer, and automatize selection of layers to be displayed, parameters following a specialized gui entries.

Onionskin in gimp-GAP is a good example of what should be a minimal requirement. that is managin backword, forward and both direction onion skin, with variable visiblity increase decrease. Color changes on onionskinning could be another useful option to increase visiblity of different frames, as generally the onionskinning is done at the sketching animation step (meaning mostly grey or black & white drawing)

[http://en.wikipedia.org/wiki/Onion-skinning Onion skinning on wikipedia].

==== Interactive ====
I have started using svg to develop interactive displays. Having used several other svg tools currently on the market, I am interested in a more generic implementation that doesn't have animation effects get in the way of interactive controls.

==== Playback of Construction Steps ====
We, at [http://www.classapart.org Class Apart] ( www.classapart.org ), plan to use Inkscape in a manner similar to the classroom whitebord to create taught lectures and record the screen in an mpeg movie. The problem is that raster based formats would take about 50 MB for an hour of content, and does not go very well with our unstated goal of getting a whole course on a cd or all courses of a semester on one dvd. It would be great if we could store the construction steps of the svg keyed against time while recording. Then while playback we can patch the svg dom with the steps as needed, using something similar to smil script. How does one go about implementing this? We could find some members willing to implement.

[[Category:Developer Discussion]]

Animation-(Timeline)

2007-04-13T18:22:15Z

Freedo: /* Other thoughts */

[[Animation|Back to main page for animation]]

=== User interface for timeline-based animation ===

==== Existing animation programs (Free & non-Free) ====

* [[MacromediaFlash]] is a good non-Free example.
* Ikivo Animator is a good non-Free example producing SVG Tiny animations (http://www.ikivo.com/animator/index.html)
* Macromedia Director prior to version MX had a different interface (http://www.rice.edu/fondren/erc/howto/director.html) which I prefer(ed) over Flash
* QFlash is a FUNCTIONAL free-software mock-up of the Flash 4 interface, which can import SVG files but not edit them. (http://qflash.sourceforge.net)
* F4l is a non-functional free-software mock-up of the Flash 4 interface.(http://f4l.sf.net/)
* Anime Studio, formerly known as [[Moho]] (http://www.e-frontier.com/article/articleview/1913/1/793?sbss=793) a non-free example. (Written in Java.) Features skeletal animation and automatic tweening of vector operations, [http://img.osnews.com/img/2547/moho4-rh.png view screenshot].
* [[LimSee2]] (http://wam.inrialpes.fr/software/limsee2/) is an excellent almost-free basis. (visible-source limited-use license)
* Spalah Flash (http://spalah.sourceforge.net/?p=10) (not to be confused with Spalah CMS) "is a GTK2[[/GNOME2]] based application for generating Macromedia SWF and [[W3C]] SVG animations." The GUI is today minimalist but the author is trying to integrate it with inkscape. See http://spalah.sourceforge.net/?p=19
* SMIL 2.1 player: http://www.cwi.nl/projects/Ambulant/distPlayer.html (GPL)
* Bob Sabiston's proprietary animation software http://www.flatblackfilms.com
* [[Synfig]] ([http://www.synfig.com/ link]) is a film-quality 2D vector animation editor and renderer. It features image morphing between drawings and output animation that is resolution independent both visually and temporally. (GPL)
* Ktoon (http://ktoon.toonka.com/) is a 2D Animation Toolkit designed by animators for animators, focused to the Cartoon Industry. (GPL)
* Jahshaka (http://www.jahshaka.org/) multiplatform QT animation program powered mostly by OpenGL (GPL)
* Powerpoint (http://office.microsoft.com) has an easy but basic interface. No flash killer, but some nice ideas.
* The Tab (http://www.the-tab.com/) Another non-free example that features elegant systems for parent-child animation and a very interesting feature that is designed for pseudo-3D camera moves.
* Pencil (http://www.les-stooges.org/pascal/pencil/index.php?id=Home) vector and bitmap free animation package using Qt toolkit run on Win32 (XP and works fine on wine), and MacOSX. Simple but already powerful basic animation. It uses blender like timeline with multiple layers and Author plan to export SVG.
* SVGDeveloper (http://www.perfectsvg.com/) is a non-free SVG authoring tool with animation support.

==== Fantavision example ====
Back in the '80's there was a program on Apple IIE (Amiga and MS-DOS too) called "Fantavision". It allowed one to create vector artwork (although I didn't understand at the time that that was what it was called) and animations. It allowed one to create frames of animation where you manually repositioned, recolored, scaled, rotated etc. the objects from one frame to the next. However, it then automatically interpolated frames between the 2 frames (the number of interpolated frames was configurable) such that it create a smooth transition of the object moving from one frame to the other. The effect was very similiar to the "Morphing" effect for raster graphics (popularized in a Michael Jackson video, I believe). That is, the system calculated the trajectory of "Key Points" of the objects from one frame to the next. This process is often called "Tweening" (a term used by Macromedia Flash). [[Sketch|Skencil]] (formerly known as [[Sketch]]) supports this functionality and describes it as "Blending".

I guess what I'm saying is that I think a nice interface to create animations would be similiar. So to animate you would do the following:

* Draw the initial SVG Image

* Increment Frame (from say 1 to 20)

* Reposition the elements in frame 20 (including scaling, color changes, adding removing objects, etc, etc, etc)

* System would then calculate a trajectory for each key point from frame 1 to frame 20. Trajectories would be calculated for things like:
** Each "node" of an object
** Color
** Transformation Matrix
** etc

* You could display/manipulate the trajectories (using the trajectory editor shown above by the original creator of this topic)

* The system would then store the animations using SVG trajectories and the "Key Points" would be the frames you manually created

:So, to create say a 100 frame animation, one might only need to manually create/modify 10 frames and the system would interpolate the additional frames as necessary.

* Also, once the system interpolated frames it would allow you to manually modify the interpolated frames creating further "Key Points" and allow further refinement and interpolation.

NOTE: 3D apps such as blender also use a technique like this, which I think is most widely known as "keyframe animation" or simply "keyframing". However, many such systems tie the keys too closely to actual animation frames, and this creates problems when the frames-per-second rate changes. Particularly in the case of vector apps which are not so low-level as bitmaps and animation frames, I would suggest that frames should be as abstract as possible.

Having key positions in simple percentages of the total animation time might be a better solution. This would also need to be a global/local system, of course: animated objects would have their own animation time specified when inserted into a larger document. A character's walkcycle would end at 100%, but in the larger animation, it would perhaps only be 5% of the total time, yet repeating as the object moves across the screen.

One issue with this abstraction of frames might be that important animation effects do not occur exactly within frames: small things could be mistimed, or simply missed altogether. If you set the frame rate too low, this would be an obvious side effect, so it's not necessarily a problem
that Inkscape should try to fix. On the other hand, a few things could be done to ease this. For instance, "snapping" animation events to frames when exporting (thereby slightly altering the timing), or perhaps just warning that certain animation events are not visible at such a low frame rate.

Of course, on the web, with SVG and DHTML, where most Inkscape animations will hopefully be used one day, frames are not an issue at all, and we just worry about keys in time :)

ANOTHER NOTE: Interpolation does not necessarily occur along straight lines and linearly in time. Paths are already part of Inkscape, so points could move along paths; also he time-length graph can be something like a path, instead of a straight line.

==== Jahshaka example ====

I have used jahshaka for a small animation. This was my first real experience with animation. Thought rough, jahshaka is all about key frames and setting properties for those key frames.

Things I liked

* Key frames are on a per object basis
* When an object is selected you can quickly move from one key frame to another
* properties values for rotation can span beyond 0 and 360, permetting to set three or more complete rotation with too key frame. I think this kind of feature could be used for all bounded values (like color, transparency and so on). Is this compatible with SVG or should it be an artifact ?
* representation of properties values on a time line graph. This functionnality was still not very usable, but being to interact through that kind of object could be very useful (see below)

Things that lacks (and Inkscape shall have)

* possibility to copy animation properties from one object to another (say copy color animation, or whole animation)
* possibility to modify a property value for all key frames at once (eg. translation of object for all key frames or a selcted group). I think this could happen through the value = f(time) graph metioned above. You could select points (representing keyframes) and move them up (more), down (less), right (sooner). This graph could be organised by properties set (color, position). I think this kind of graph would be very close to SVG animations tag.
* macro that helps sets common effects (like blinking for example, or crossing the screen....)

==== Bob Sabiston Example ====
Bob Sabiston's animation software is an amazing vector-based package that stores line width within the points that make up a line -- derived from a tablet pen. usually in a simple stroke there could be a hundred data points storing width information. Then in the next keyframe, a line from a previous key is selected and re-drawn restricted to the same number of points. The software allow sthe points to be "repositioned" as you watch their previous locations be re-positioned. When you run out, the line ends automatically. This information is interpolated in tweening frames to change shape, width, position, but retains the same number of data-points. See the film "Waking Life" for the making-of video for a demonstration. Also visit his website for examples of it's capabilities converted to flash. http://www.flatblackfilms.com

==== Other thoughts ====

Suggestion from someone else: working like [[CinePaint]] (compared with Gimp), with each frame independently from each svg document (working like this or providing this feature) - providing vectorial edition quality we can't get on apps like Macromedia Flash or any other (maybe [[ToonBoom]] or Moho) - allowing us to make our work fast publish without further lack of quality.
(One more suggestion about it: being able to convert .swf to .svg sequence (or animated .sgv) and vice versa.)

It is suggested that there be basically two modes: Local (Object) mode and Global mode. Below is a picture showing a very rough design of the local mode:

http://www.inkscape.org/wiki_uploads/anim_gui1.png

In local modes, all properties of the object editing will be shown on a timeline, and one can create and edit frame within the timeline. Then one may assign different value of that properties on different timeline, or make it change linearly, or nonlinearly :)

For an example of a similar model, have a look at:

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

==== Powerpoint Example ====
You select an object and add types of animation. These are listed in the custom animation pane. They can be set to occur all at once, one at a time, onclick, with previous or after previous. A number appears next to each object in the editing window when the object has animation applied to it, representing the sequence of the animations. When an object has an Entrance type animation added to it as the first animation, it will not appear on screen until the timeline reaches this point. animations can be linked together to create quite complicated sequences.

==== Onion Skinning ====
Onion skinning is a standard animator tool, previous or next frames (sometime both) are displayed under the current frame with differrent color, or less contrast, allowing to understand wich drawing the animator is actually working on, and wich frame is 1 step or 2 step before or after the actual frame.

This can easily be implemented using transparency parameter of layer, and automatize selection of layers to be displayed, parameters following a specialized gui entries.

[http://en.wikipedia.org/wiki/Onion-skinning Onion skinning on wikipedia].

==== Interactive ====
I have started using svg to develop interactive displays. Having used several other svg tools currently on the market, I am interested in a more generic implementation that doesn't have animation effects get in the way of interactive controls.

==== Playback of Construction Steps ====
We, at [Class Apart, http://www.classapart.org/], plan to use Inkscape in a manner similar to the classroom whitebord to create taught lectures and record the screen in an mpeg movie. The problem is that raster based formats would take about 50 MB for an hour of content, and does not go very well with our unstated goal of getting a whole course on a cd or all courses of a semester on one dvd. It would be great if we could store the construction steps of the svg keyed against time while recording. Then while playback we can patch the svg dom with the steps as needed, using something similar to smil script. How does one go about implementing this? We could find some members willing to implement.

[[Category:Developer Discussion]]

Animation-(Timeline)

2007-04-13T17:37:39Z

Freedo: /* Existing animation programs (Free & non-Free) */

[[Animation|Back to main page for animation]]

=== User interface for timeline-based animation ===

==== Existing animation programs (Free & non-Free) ====

* [[MacromediaFlash]] is a good non-Free example.
* Ikivo Animator is a good non-Free example producing SVG Tiny animations (http://www.ikivo.com/animator/index.html)
* Macromedia Director prior to version MX had a different interface (http://www.rice.edu/fondren/erc/howto/director.html) which I prefer(ed) over Flash
* QFlash is a FUNCTIONAL free-software mock-up of the Flash 4 interface, which can import SVG files but not edit them. (http://qflash.sourceforge.net)
* F4l is a non-functional free-software mock-up of the Flash 4 interface.(http://f4l.sf.net/)
* Anime Studio, formerly known as [[Moho]] (http://www.e-frontier.com/article/articleview/1913/1/793?sbss=793) a non-free example. (Written in Java.) Features skeletal animation and automatic tweening of vector operations, [http://img.osnews.com/img/2547/moho4-rh.png view screenshot].
* [[LimSee2]] (http://wam.inrialpes.fr/software/limsee2/) is an excellent almost-free basis. (visible-source limited-use license)
* Spalah Flash (http://spalah.sourceforge.net/?p=10) (not to be confused with Spalah CMS) "is a GTK2[[/GNOME2]] based application for generating Macromedia SWF and [[W3C]] SVG animations." The GUI is today minimalist but the author is trying to integrate it with inkscape. See http://spalah.sourceforge.net/?p=19
* SMIL 2.1 player: http://www.cwi.nl/projects/Ambulant/distPlayer.html (GPL)
* Bob Sabiston's proprietary animation software http://www.flatblackfilms.com
* [[Synfig]] ([http://www.synfig.com/ link]) is a film-quality 2D vector animation editor and renderer. It features image morphing between drawings and output animation that is resolution independent both visually and temporally. (GPL)
* Ktoon (http://ktoon.toonka.com/) is a 2D Animation Toolkit designed by animators for animators, focused to the Cartoon Industry. (GPL)
* Jahshaka (http://www.jahshaka.org/) multiplatform QT animation program powered mostly by OpenGL (GPL)
* Powerpoint (http://office.microsoft.com) has an easy but basic interface. No flash killer, but some nice ideas.
* The Tab (http://www.the-tab.com/) Another non-free example that features elegant systems for parent-child animation and a very interesting feature that is designed for pseudo-3D camera moves.
* Pencil (http://www.les-stooges.org/pascal/pencil/index.php?id=Home) vector and bitmap free animation package using Qt toolkit run on Win32 (XP and works fine on wine), and MacOSX. Simple but already powerful basic animation. It uses blender like timeline with multiple layers and Author plan to export SVG.
* SVGDeveloper (http://www.perfectsvg.com/) is a non-free SVG authoring tool with animation support.

==== Fantavision example ====
Back in the '80's there was a program on Apple IIE (Amiga and MS-DOS too) called "Fantavision". It allowed one to create vector artwork (although I didn't understand at the time that that was what it was called) and animations. It allowed one to create frames of animation where you manually repositioned, recolored, scaled, rotated etc. the objects from one frame to the next. However, it then automatically interpolated frames between the 2 frames (the number of interpolated frames was configurable) such that it create a smooth transition of the object moving from one frame to the other. The effect was very similiar to the "Morphing" effect for raster graphics (popularized in a Michael Jackson video, I believe). That is, the system calculated the trajectory of "Key Points" of the objects from one frame to the next. This process is often called "Tweening" (a term used by Macromedia Flash). [[Sketch|Skencil]] (formerly known as [[Sketch]]) supports this functionality and describes it as "Blending".

I guess what I'm saying is that I think a nice interface to create animations would be similiar. So to animate you would do the following:

* Draw the initial SVG Image

* Increment Frame (from say 1 to 20)

* Reposition the elements in frame 20 (including scaling, color changes, adding removing objects, etc, etc, etc)

* System would then calculate a trajectory for each key point from frame 1 to frame 20. Trajectories would be calculated for things like:
** Each "node" of an object
** Color
** Transformation Matrix
** etc

* You could display/manipulate the trajectories (using the trajectory editor shown above by the original creator of this topic)

* The system would then store the animations using SVG trajectories and the "Key Points" would be the frames you manually created

:So, to create say a 100 frame animation, one might only need to manually create/modify 10 frames and the system would interpolate the additional frames as necessary.

* Also, once the system interpolated frames it would allow you to manually modify the interpolated frames creating further "Key Points" and allow further refinement and interpolation.

NOTE: 3D apps such as blender also use a technique like this, which I think is most widely known as "keyframe animation" or simply "keyframing". However, many such systems tie the keys too closely to actual animation frames, and this creates problems when the frames-per-second rate changes. Particularly in the case of vector apps which are not so low-level as bitmaps and animation frames, I would suggest that frames should be as abstract as possible.

Having key positions in simple percentages of the total animation time might be a better solution. This would also need to be a global/local system, of course: animated objects would have their own animation time specified when inserted into a larger document. A character's walkcycle would end at 100%, but in the larger animation, it would perhaps only be 5% of the total time, yet repeating as the object moves across the screen.

One issue with this abstraction of frames might be that important animation effects do not occur exactly within frames: small things could be mistimed, or simply missed altogether. If you set the frame rate too low, this would be an obvious side effect, so it's not necessarily a problem
that Inkscape should try to fix. On the other hand, a few things could be done to ease this. For instance, "snapping" animation events to frames when exporting (thereby slightly altering the timing), or perhaps just warning that certain animation events are not visible at such a low frame rate.

Of course, on the web, with SVG and DHTML, where most Inkscape animations will hopefully be used one day, frames are not an issue at all, and we just worry about keys in time :)

ANOTHER NOTE: Interpolation does not necessarily occur along straight lines and linearly in time. Paths are already part of Inkscape, so points could move along paths; also he time-length graph can be something like a path, instead of a straight line.

==== Jahshaka example ====

I have used jahshaka for a small animation. This was my first real experience with animation. Thought rough, jahshaka is all about key frames and setting properties for those key frames.

Things I liked

* Key frames are on a per object basis
* When an object is selected you can quickly move from one key frame to another
* properties values for rotation can span beyond 0 and 360, permetting to set three or more complete rotation with too key frame. I think this kind of feature could be used for all bounded values (like color, transparency and so on). Is this compatible with SVG or should it be an artifact ?
* representation of properties values on a time line graph. This functionnality was still not very usable, but being to interact through that kind of object could be very useful (see below)

Things that lacks (and Inkscape shall have)

* possibility to copy animation properties from one object to another (say copy color animation, or whole animation)
* possibility to modify a property value for all key frames at once (eg. translation of object for all key frames or a selcted group). I think this could happen through the value = f(time) graph metioned above. You could select points (representing keyframes) and move them up (more), down (less), right (sooner). This graph could be organised by properties set (color, position). I think this kind of graph would be very close to SVG animations tag.
* macro that helps sets common effects (like blinking for example, or crossing the screen....)

==== Bob Sabiston Example ====
Bob Sabiston's animation software is an amazing vector-based package that stores line width within the points that make up a line -- derived from a tablet pen. usually in a simple stroke there could be a hundred data points storing width information. Then in the next keyframe, a line from a previous key is selected and re-drawn restricted to the same number of points. The software allow sthe points to be "repositioned" as you watch their previous locations be re-positioned. When you run out, the line ends automatically. This information is interpolated in tweening frames to change shape, width, position, but retains the same number of data-points. See the film "Waking Life" for the making-of video for a demonstration. Also visit his website for examples of it's capabilities converted to flash. http://www.flatblackfilms.com

==== Other thoughts ====

Suggestion from someone else: working like [[CinePaint]] (compared with Gimp), with each frame independently from each svg document (working like this or providing this feature) - providing vectorial edition quality we can't get on apps like Macromedia Flash or any other (maybe [[ToonBoom]] or Moho) - allowing us to make our work fast publish without further lack of quality.
(One more suggestion about it: being able to convert .swf to .svg sequence (or animated .sgv) and vice versa.)

It is suggested that there be basically two modes: Local (Object) mode and Global mode. Below is a picture showing a very rough design of the local mode:

http://www.inkscape.org/wiki_uploads/anim_gui1.png

In local modes, all properties of the object editing will be shown on a timeline, and one can create and edit frame within the timeline. Then one may assign different value of that properties on different timeline, or make it change linearly, or nonlinearly :)

==== Powerpoint Example ====
You select an object and add types of animation. These are listed in the custom animation pane. They can be set to occur all at once, one at a time, onclick, with previous or after previous. A number appears next to each object in the editing window when the object has animation applied to it, representing the sequence of the animations. When an object has an Entrance type animation added to it as the first animation, it will not appear on screen until the timeline reaches this point. animations can be linked together to create quite complicated sequences.

==== Onion Skinning ====
Onion skinning is a standard animator tool, previous or next frames (sometime both) are displayed under the current frame with differrent color, or less contrast, allowing to understand wich drawing the animator is actually working on, and wich frame is 1 step or 2 step before or after the actual frame.

This can easily be implemented using transparency parameter of layer, and automatize selection of layers to be displayed, parameters following a specialized gui entries.

[http://en.wikipedia.org/wiki/Onion-skinning Onion skinning on wikipedia].

==== Interactive ====
I have started using svg to develop interactive displays. Having used several other svg tools currently on the market, I am interested in a more generic implementation that doesn't have animation effects get in the way of interactive controls.

==== Playback of Construction Steps ====
We, at [Class Apart, http://www.classapart.org/], plan to use Inkscape in a manner similar to the classroom whitebord to create taught lectures and record the screen in an mpeg movie. The problem is that raster based formats would take about 50 MB for an hour of content, and does not go very well with our unstated goal of getting a whole course on a cd or all courses of a semester on one dvd. It would be great if we could store the construction steps of the svg keyed against time while recording. Then while playback we can patch the svg dom with the steps as needed, using something similar to smil script. How does one go about implementing this? We could find some members willing to implement.

[[Category:Developer Discussion]]