looking for mentor/trainer

[astradamasta]

I am relatively new to inkscape. I draw my drawings in visio. I am wanting to animate some of my shapes. I know this can be done with java scripts or smil. I have been using a lil of both but think i should go with smil, from what i read it is a lil easier language. I am looking for someone to help me. I would like for someone to show me how to add animation code into my svg I am willing to pay if someone would be interested in teaching me how to do this.

[chriswww]

here's a good place to start looking into svg animation http://en.wikipedia.org/wiki/SVG_animation
no charge

[JimJoyce]

Hi Astradamasta,
You may have noted I placed a brief response in your other topic 'Adding animation code'.
As I said then, I'm just a learner, like you. (But, I bet you're not 80 years old, like me.)
So I'm not offering my services as a tutor.

My only tutor is the O'Reilly book 'SVG Essentials' by J Eisenberg.
However my edition was released in 2002, when Browser support for SVG was pretty weak.
His online 'Errate' pages show how things have changed.
His section on <defs> and <use> are quite good, but his chapter on Scripting
and Animation leaves me with more questions than answers,

I'd never heard of Visio, but a bit of googling tells me it's a sort of ttemplate editor.
Basically, it seems to use rectangles,diamonds and lines, rather like flowcharts and sitemaps.

To get started, I don't think you need animation, rather just simple SVG rectangles, polygons and lines.
Given that they are used repeatedly, you need a grasp of <defs> to define your basic shapes,
and <use> to position those shapes on your document.

The other day I was recommended Carto.net. I knew it well. Let me recommend it to you.
http://www.carto.net/svg/manipulating_s ... cmascript/
Nine examples with detailed descriptions of every line of the code.

Another Carto site, not so easily found is this 'Creating truly dynamic SVG'
http://www.svgopen.org/2002/papers/haus ... pting_svg/
Every bit as good, even if the description is not as detailed.

Another good place to start is with Kevin Lindsey's pages
http://www.kevlindev.com/
His SVG tutorials are very simple, but with detailed explanations.
http://www.kevlindev.com/tutorials/basics/index.htm

You'll notice you need a bit of javascript/ecmascript
to provide for some user interaction.
After that the built-in SVG animation code should be just a doddle.
(I've not tried it yet.)

Hope this helps, Good luck.

[chriswww]

yes it's a bit sad that having also picked up SVG Unleashed in early 2000's, and cottoned on to all those wonderful technical svg resources, most now gather cobwebs.

i work with visio, when necessary, so might be able to provide some assistance in that respect.
btw visio has svg support, for diagrams that is, not for animations.

whilst you can do simple stuff using the SMIL stuff in svg..for all but simple things you'll need to learn some javascript programming and have a grip on the document object model (DOM).
don't mean to scare you or anything...especially that learning about DOM and javascript and svg are very relevant for doing website work.but there is a bit of reading and learning involved. the book mentioned is an absolute gem, but also quite technical and heavy going in parts. it does cover svg thoroughly.

[Jelle]

Hello Astradamasta,

If you're looking for a tutor, I may be able to help you out. I just finished giving a course in Web Design, using SVG as the method to create pages and animation using SMIL was one of the topics. The biggest problem using SMIL is that it doesn't have a generic browser support yet, hence the focus on Javascript to get things moving. However, if you're content using Firefox or Opera, you can do about anything purely SMIL based. For other browsers to behave correctly, one can use fakesmile.js, a library that will support SMIL across the board and/or SVGWeb.js for elder browsers.

Using SMIL can be a bit of a learning process as well, but I sort of got the hang of it now and can teach you how to create frame based animations that repeat indefinitely. The method used for it is creating the graphical content with Inkscape and then creating a separate file with the logic that makes things move around. That way you can probably use you Visio files (if they can be exported to SVG format) straight away. Alternatively you can import them into LibreOffice Draw or Presentations and export them to SVG. That way you can easily use objects defined in your Visio files and reuse them in your animations.

[Jelle]

Here is an example of how to create a frame based animation using a external file called frame_anim.svg with 7 defined objects to create a 1.6 second animation that repeats itself. Basically what you'd need to do is to create a file with that name, define 7 objects named frame1 to frame7 and you'll have a working example to play with. The advantage of using an external Inkscape file is that you can easily move objects to a preferred position. There are some caveats as well,.. but when you run into them you can ask about it.

Code: Select all

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<title>SVG Animation</title>

<defs>
<!-- First we need to declare the frames we use, as we cannot expect our browser to be able to load the objects from an external file during runtime.
So we <use> the frames we create in the inkscape file and give them the same id as in the Inkscape file, just so we can easily read our code and know
what frame is used frrom the Inkscape file
That way we have a clear relation to what's in the code and what is in the Inkscape file
-->
<use id="frame1" class="Button1" xlink:href="frame_anim.svg#frame1" />
<use id="frame2" class="Button1" xlink:href="frame_anim.svg#frame2" />
<use id="frame3" class="Button1" xlink:href="frame_anim.svg#frame3" />
<use id="frame4" class="Button1" xlink:href="frame_anim.svg#frame4" />
<use id="frame5" class="Button1" xlink:href="frame_anim.svg#frame5" />
<use id="frame6" class="Button1" xlink:href="frame_anim.svg#frame6" />
<use id="frame7" class="Button1" xlink:href="frame_anim.svg#frame7" />
</defs>



<g display="none">
<!-- Here we use the frames we declared in the <defs>
     and make them display at the end of the previous event, for a certain time (dur="0.1s")
    in this case I declared 16 frames for a total of 1.6 seconds
-->
 <use xlink:href="#frame1" display="none">
 <set id="f1" attributeName="display" attributeType="xml" to="inline" begin="fs1.begin" dur="0.1s" />
 </use>
 <use xlink:href="#frame2" display="none">
 <set id="f2" attributeName="display" attributeType="xml" to="inline" begin="f1.end" dur="0.1s" />
 </use>
 <use xlink:href="#frame3" display="none">
 <set id="f3" attributeName="display" attributeType="xml" to="inline" begin="f2.end" dur="0.1s" />
 </use>
 <use xlink:href="#frame4" display="none">
 <set id="f4" attributeName="display" attributeType="xml" to="inline" begin="f3.end" dur="0.1s" />
 </use>
 <use xlink:href="#frame5" display="none">
 <set id="f5" attributeName="display" attributeType="xml" to="inline" begin="f4.end" dur="0.1s" />
 </use>
 <use xlink:href="#frame6" display="none">
 <set id="f6" attributeName="display" attributeType="xml" to="inline" begin="f5.end" dur="0.1s" />
 </use>
 <use xlink:href="#frame7" display="none">
 <set id="f7" attributeName="display" attributeType="xml" to="inline" begin="f6.end" dur="0.1s" />
 </use>
 <use xlink:href="#frame6" display="none">
 <set id="f8" attributeName="display" attributeType="xml" to="inline" begin="f7.end" dur="0.1s" />
 </use>
  <use xlink:href="#frame5" display="none">
 <set id="f9" attributeName="display" attributeType="xml" to="inline" begin="f8.end" dur="0.1s" />
 </use>
  <use xlink:href="#frame4" display="none">
 <set id="f10" attributeName="display" attributeType="xml" to="inline" begin="f9.end" dur="0.1s" />
 </use>
  <use xlink:href="#frame3" display="none">
 <set id="f11" attributeName="display" attributeType="xml" to="inline" begin="f10.end" dur="0.1s" />
 </use>
  <use xlink:href="#frame2" display="none">
 <set id="f12" attributeName="display" attributeType="xml" to="inline" begin="f11.end" dur="0.1s" />
 </use>
  <use xlink:href="#frame1" display="none">
 <set id="f13" attributeName="display" attributeType="xml" to="inline" begin="f12.end" dur="0.1s" />
 </use>
  <use xlink:href="#frame2" display="none">
 <set id="f14" attributeName="display" attributeType="xml" to="inline" begin="f13.end" dur="0.1s" />
 </use>
  <use xlink:href="#frame3" display="none">
 <set id="f15" attributeName="display" attributeType="xml" to="inline" begin="f14.end" dur="0.1s" />
 </use>
  <use xlink:href="#frame2" display="none">
 <set id="f16" attributeName="display" attributeType="xml" to="inline" begin="f15.end" dur="0.1s" />
 </use>
 
 
 <!-- This is the piece of code to repeat the whole sequence in the scene
 we create an event with the id "fs1" and set the display to "inline"
 our whole sequence has 16 frames of 0.1 seconds lenght
 as we tell "fs1" to begin when "fs2" ends in the second iteration, we have to start our second "fs1"  at "-1.6s" or it will take "1.6" seconds before our animation starts.
 If your animation sequence takes longer, you'll have to add the total amount of time together and change the timing, or it will be out of sync.
 The same apllies for all durations used. If you change the total amount of time, make sure to change the duartion.
 -->
 <set id="fs1" attributeName="display" attributeType="xml" to="inline" begin="0s; fs2.end-1.6s" dur="1.6s"/>
 <set id="fs2" attributeName="display" attributeType="xml" to="inline" begin="fs1.end" dur="1.6s"/>
 </g>


</svg>