Egg that is great in 4Kb and absolutely smooth
Egg that is great in 4Kb and absolutely smooth
Really nice!
Only I assume comparatively it was a lot of work: With the SVG method that I used, I simply told the line to animate. I was also able to specify a custom timing function, giving full control over how the line animates. I chose ease-in, which means: first slow, then fast
Furthermore, I get a super-compact SVG file which runs in every modern browser, incl. those on smartphones and tablets.
Better SVG support right in Xara would be awesome. At the moment, the only serious SVG editors that I'm aware of are Inkscape (slow) and Illustrator (expensive).
It wasn't straight forward Feklee and I admit that the css method has many advantages. Just one drawback for me though and that's that I'm crap at code. It may take me three quarters of an hour on how to best create a graphics solution but an eternity to learn css or javascript.Only I assume comparatively it was a lot of work
The Swiffy converted swf file works equally as well in all browsers, smartphones and tablets.
SVG for all it's early promise has made very slow progress and it's still a rarity on the web. I'm no expert but I believe there's to many variations in the file type. In Notepad, compare svg's files created using both Inkscape & Xara of the same simple object, a 400 px green filled circle with a 4px black stroke. The two files look entirely different. They render the same in a browser (apart from the different page sizes) but why the large difference in content? Xara svg files are bloated with <defs> that don't appear to have any relevance to the content like DefaultArrow2 etc. As for including a bitmap, just don't go there!Better SVG support right in Xara would be awesome
I use VideoScribe a bit but trying to import a Xara generated SVG file is useless. I need to strip out all the <defs> in Notepad to even start to get a Xara generated SVG file to at least look recognisable. I often copy and paste from Xara to Inkscape, then export from Inkscape to SVG for import to VideoScribe. It's impossible to include a bitmap. Not saying it's a Xara issue or an VideoScribe shortcoming but whatever it is the SVG filetype, for all the years it's been around should now be stable and equal across all platforms.
Egg
Minis Forum UM780XTX AMD Ryzen7 7840HS with AMD Radeon 780M Graphics + 32 GB Ram + MSI Optix Mag321 Curv monitor + 1Tb SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host
Don't have any numbers, so can't argue about this. I have used it. Also SVG is supported by Google Web Designer, a tool for creating banner ads.
There are various versions, just like for example with PDF.I'm no expert but I believe there's to many variations in the file type.
Blame Xara on that. SVG, like HTML or PDF, can be authored in a multitude of ways, yet render to the same image. Bitmap file formats, which are much simpler, are not a good comparison.Xara svg files are bloated with <defs> that don't appear to have any relevance to the content like DefaultArrow2 etc.
For many years there has been a bug in Xara concerning bitmaps in SVG. It's fixed now. Still, SVG export indeed is not great.As for including a bitmap, just don't go there!
There you are coding.I need to strip out all the <defs> in Notepad [...]
Anyhow, getting the animation to work is rather straight forward - see my earlier post. As I found out, Xara will map layers to groups in SVG. As CSS IDs the groups get the layer names (avoit spaces). If you use these IDs, then no editing of the SVG file is necessary, except for one line that needs to be added below the DOCTYPE declaration:
This loads an external file with the CSS code describing the animation.Code:<?xml-stylesheet type="text/css" href="animation.css" ?>
Here's my CSS file describing the first animation step:
The value of 1500 needs to be adjusted to match line length. I did that by trial and error. "contour" is naming the group of key-frames. "step1" is the name of the layer containing the line in Xara.Code:/* Include below DOCTYPE in svg file: <?xml-stylesheet type="text/css" href="animation.css" ?> */ * { -webkit-animation-timing-function: ease-in; } @-webkit-keyframes countour { from { stroke-dashoffset: 1500; } to { stroke-dashoffset: 0; } } #step1 path { stroke-dasharray: 1500; stroke-dashoffset: 1500; -webkit-animation: countour 0.5s linear forwards; -webkit-animation-delay: 0.5s; }
Here's a way that uses Xara's vectors objects (of any shape or form): Animate.xar
I only set a low number of line elements to check how well it can be tuned.
The pop-up text is part of the animation.
It uses class Names to include anything and some jQuery to render the animation.
You alter the direction, or sequence, by repositioning the order of the elements in the Page & Layer Gallery.
It could be used as a one-shot slideshow for a stack of images.
Acorn
Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat
Manually. I chose line segments but it could have been circles, squares, boxes or donkeys.
I just dropped my shape onto the line and turned it to fit, which is why it is a bit rough.
I wasn't trying to replicate your line, just demonstrate a method that used Xara vectors instead of SWF or animated GIFs.
If it was just for this line I would have used HTML 5's Canvas.
The Xara approach doesn't require any other editor.
Acorn
Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat
Donkeys !?!?!?
Egg
Minis Forum UM780XTX AMD Ryzen7 7840HS with AMD Radeon 780M Graphics + 32 GB Ram + MSI Optix Mag321 Curv monitor + 1Tb SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host
Smooth!
How did you draw the line and the donkeys? Using some kind of brush tool?
No Feklee, for the line animation I wanted to smooth out Acorns example (no criticism, I just thought the example "jaggy" and wanted to see if it could be smoothed).
I created a very short line (rounded ends and fairly large line width). Cloned, moved and applied a blend. Next created another curvy line. Selected both & fitted blend to curve.
Arrange/Convert to editable shapes/Ungroup. Deleted the blend curve. With all still selected, as per Acorns instructions, named them all htmlclass=animate.
This gave a very smooth animation. The donkey one was done in exactly the same manner but it just auto animated unlike Acorns version that required a button press.
Perhaps Acorn could expand on this?
I must admit it's fun to play around with but unfortunately my brain won't remember how I did it myself tomorrow!
Egg
Minis Forum UM780XTX AMD Ryzen7 7840HS with AMD Radeon 780M Graphics + 32 GB Ram + MSI Optix Mag321 Curv monitor + 1Tb SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host
Bookmarks