Part-finished animation ......

[Acorn]

You know by now I @Egg you on.

Truly appreciate the effort.

Acorn

[xtom]

Easing can be done using the < and > symbols:

"Accelerating and Decelerating

Usually the tween steps are evenly spaced between keyframes, producing a linear animation from one keyframe to the next. By appending < and > symbols to the front of the object name, you can make objects speed up or slow down. So naming an object >Name means that it starts fast and slows. The opposite, <Name, would start slow and speed up.

You can even use these in combinations. So an object name <>Name would start slow, speed up and then slow down towards the end of the frame period. In traditional animator's terminology this is called 'easing', so you can ease in or ease out, and the command <> would be an ease in/out.

You can control the degree of acceleration or deceleration by using numbers from 0 to 9. So <2Name would be a very gentle acceleration, while <9Name would be extreme acceleration. Similar >2 in front of the name would give a slight deceleration. Using the name >Name (with no number) is the same as >5Name.

Example: there is an example file called Pendulum in the Flash Examples section of the Designs Gallery (click the Disc Designs button on the Designs Gallery). The pendulum group uses a combination of <> and the rotate command. Another example called "Zoom.xar" is also worth examining."

Thanks for the info on easing Simon, I will give this a go.

Egg, you can also export as avi too, I was attempting to use it for making a simple video intro so avi is ideal for that.

[Egg Bramhill]

Hi Tom, yes I know that's possible too however there's still the resolution issue. This way of creating is pure vector and the resolution stays sharp whatever the size. That said there may be an issue of the svg eating up computer memory or cpu so it's a bit of a compromise. However the latest version below runs perfectly on my mobile.

I've also added easing so the train enters slowly from the right and speeds up to the left.

Also added wheels at the back so the train looks more like it's running on the track rather than floating.

Latest Version

[Egg Bramhill]

Here's the new train, I'm far happier with it now:

[wizard509]

Looks good to me Egg.

[handrawn]

very good

[xtom]

The train looks great Egg. I would suggest maybe a shadow under it but then you might need shadows elsewhere and not sure if it fits with the look you're going for.

I agree the easy resizability of the svg animation is super nice. In Xara I created my animation at 1920x1080 for video but yeah it wouldn't be as easy to export it bigger in the future if I needed also I imagine the file size on the svg animation is much smaller for web use no matter what size it is displayed at. Looking at your page source I thought it would be a single animation file but it seems to be separate files for different parts, interesting. I have not explored svg much so this is all new to me.

[Egg Bramhill]

Thanks peeps.
Yes Tom, there is in fact 5 animations(1 used twice). Apart from the background image the rest have transparent backgrounds. The total size is 173Kb.
Below is an exploded view of the scene.

DEMO

[Egg Bramhill]

I added a shadow under the train as suggested by Tom. Better or not?

LINK

[handrawn]

I don't think so - it's static, ie anchored to the train; a real shadow would track with the light source and POV, as the train moves along; which sounds like a lot of work without scripts to handle it