Animation in Xara

[Big Frank]

I created this in just under half an hour. It is far from perfect, but that wasn't the point. The point was to illustrate that with time and experience, you can do a lot with Xara in a very short time.



Click to view it. It is a simple 6-frame GIF animation created using the Mold tool. With more time and effort, the effect could be made much, much better.

[Big Frank]

Here is the same animation, here on the right, a little further down the line:



Click to view it. It's a lot heavier than the previous one because it's now dithered to give a smoother effect, but you wouldn't place an animation that large on the front page of a website anyway.

And it's still just six frames, all manipulated using the Mold tool. The whole thing was done without reference to an actual waving flag, so there's no doubt at all it could be improved upon. But, as with everything in this thread, that's the province of the author, not the software.

Would I like to see an improvement in the Mould tool? Yes. Does the current one stop me getting my hands dirty and creating what I want to create?

HELL NO. ( <-- that was me speaking Texan )

[dcahall]

I really like what you achieved. You can see that there is a way to get there. Right now it may not match the full animation of those others you showed but it is certainly headed in that direction.

If you and Gare think I have been negative, I am sorry for that. Gare's tutorial had inspired me to try something and in the process ran into some of the limits (I think) of the tool. I feel that is important to know as well and have only tried to define (at least for me) where there so I do not stress myself out over things that I cannot control and learn to use the tool properly. Throughout this discussion, I feel that I have learned a lot. I am obviously not the artist that the two of you are but that will not stop me from trying things. To me, that is how we learn.

On a more positive note, I am including another version that is somewhat of a take-off on Gare's tutorial that triggered this whole discussion. It is now where as elegent as yours and actually reverts back to my original image just to mess around. This one has 25 frames and I used the effects along with the Image Skill Displacement Map plugin to change the shape of the image in each frame. All I did from one frame to the next was change the scale setting by about 10 in each of the frames. The changes were applied to frames 2 through 13 then I copied them in reverse order to try to return the flag to its original setting. I also set the frame display time to .09 for each frame.


(click to see animation)

If you think about how Gare used this capability along with the displacement maps, I am sure the two of you could produce something far more elegent. I will bet you guys could come up with some amazing results. Combining that plugin with some some of the techniques used to for applying the shadow/highlighting in his tutorial could produce some really interesting results.

So, HELL YES, there is probably a way to get there if you have the time, talent, and desire.

BTW: When you are in the forum, is there a way to go directly to the last post (I usually click on the last number shown next to the thread title)? Also, how small does the gif have to be (dimensions) to display inline without having to click it to see the animation?

[Big Frank]

So, HELL YES, there is probably a way to get there if you have the time, talent, and desire.

In this instance I don't believe it has much to do with talent. It has more to do with experience, both of the physical characteristics of what it is we are tying to reproduce, and of the software tools used to achieve it.

With a full-time occupation keeping me permanently busy, I have little time to devote to this, and I have no particular desire to create a Texan waving flag animation. The desire is to show others that:
a) the software is far more capable than they sometimes give it credit for
b) if they devote the time to make a thousand mistakes, the end result will be quite remarkable

The point of the examples posted in this thread certainly isn't to show you how much better we are at this, it is to show you that there's nothing stopping you getting to the same point or further, certainly not any perceived shortcomings in the Mould tool. I've shown you what can be achieved with an animation of just six frames. Imagine what you could do using the same or similar technique with an animation of 36 or 60 frames.

My preferred media of choice for this subject is GIF, Gary's is clearly more SWF / 3D. In any event I look forward to seeing many more of your uploads and there's no doubt we will see great strides as your experience and confidence increase exponentially.

Knock 'em dead!

[Gare]

My preferred media of choice for this subject is GIF, Gary's is clearly more SWF / 3D.

Please let me clarify your statement, Big Frank. The "media" is only the "container" for the frames itself.

Most of the time when it's a paying job, I'm asked to create full animation, 30fps, usually HD 720p or higher. My edited output is AVI uncompressed and I usually go to MPEG-4 for presentation on YouTube or an authored DVD.

It doesn't make a whole lot of difference what the file format is. What's relevant is the software one uses, understanding the path of least resistance when picking out software to help you visualize what you have in your head...and a good program that can transcode a piece of animation from one "container" to another.

Working with an animation idea in 3D space on a personal computer yields different results than 2D, because the two are different by nature, motif, whatever one would call it. But I can write an animation I created using Cinema 4D to swf, GIF, AVI...the file format is only for playback and has very few limitations.

The file format isn't really the bottleneck in David's animation endeavor here: he's gaining experience (that he didn't have yesterday!) with Xara...which wouldn't be my first choice of software if I was asked to animate a flag that looks dimensional and shaded. Frank, you and David have demonstrated here that it's do-able using Xara; I submit to you that it's less of an uphill battle if you have the experience with 3D animation software (and the bucks to buy it), but it's clearly do-able.

Experience is key, absolutely. Experience to get from point A to point B as quickly as possible.

My Best,

Gary

[dcahall]

Back to the tutorial that started this whole thing. Gary, how do I create the maps to use with the Displacement Map effect plugin? I think it could be a really strong tool for doing stuff like we have been trying to do here.

I think Frank also proved that you could come pretty darn close with the mold tool but being able to have a few more control points on the mold would add a lot for this particular exercise.

I want to thank both of you for your contributions here. I do not really need the waving Texas flag, it just became a challenge to see if it could be done in Xara.

I really like what Frank did and think it looks great. You can imagine what it would look like if he would have done 15 or 20 frames instead of 6. When I did the blue one I posted some time ago, I also played with some highlighting/shadowing by switching from stained glass to bleach. Worked pretty good. I am also wondering what could have been done by using all of the techniques in your tutorial on multiple frames.

Once again guys, thanks for your efforts. They are greatly appreciated and demonstrate that if there is a will, there is a way. As I said before, this whole endeavor has taught me a lot (particularly about the Xara tool).

[Gare]

Hi David—

I didn't paint the displacement maps, as Frank did. I used a plug-in called Backdrop Designer from Digital Anarchy that works in Photoshop, but not in Xara.

The maps I packaged up for the tutorial might be thought of as "fish", whereas I think Big Frank can—instead of handing you a fish—teach you to fish. I think (not positive) he designed displacement maps in Xara. In not, then perhaps Frances did.

In any event, a displacement map tells the program doing the displacing two things: where the pixels should be "moved" in the original image, by where dark and light values are located, and 2. It tells by how much by the relative brightness of the tones in the map.

I'm attached a zipped up PSD file you can unzip and drag into Xara, David. The frame size is 400 by 300, and although I didn't test it, in theory, these are 6 sequential displacement frames that when used on 6 copies of the flag, should mess it up so it makes a waving sequence.

P.S. You'd asked about HTML 5 animation? Adobe Labs is open previewing Adobe Edge Animation, which I think is an animation program whose output is HTML, not swf. If you have an account at Adobe, it might be worth a download just to see what the fuss is about HTML and CSS animation.

And HTML output for animation is definitely on my "Dear Xara" list!

My Best,

Gary

[Big Frank]

Please let me clarify your statement, Big Frank. The "media" is only the "container" for the frames itself.

Well, actually, no it isn't. It defines what you can or cannot do to create the animation when using Xara. After all, this thread is called "Animation in Xara" and that's why I'm restricting myself to animation in Xara where the process for creating SWFs or GIFs is different in either case (or should be if you've read the help file!).

The file format isn't really the bottleneck in David's animation endeavor here: he's gaining experience (that he didn't have yesterday!) with Xara...which wouldn't be my first choice of software if I was asked to animate a flag that looks dimensional and shaded.

It wouldn't be mine either, but that's a topic for another day. This was in any event an interesting challenge in seeing what's possible using the tools currently included in Xara. And for many, many types of animation Xara is the perfect companion, notwithstanding the limitations of the Mould tool (I'm sorry, I can't bring myself to call it the Mold tool).

In conclusion, I have noticed that we see very little animation created in Xara on this forum, which is a great shame. Quite apart from the fact that lots of people like to see moving images, Xara's vector tools are ideally suited to the creation of animation in Flash or GIF (oddly I've never experimented with its AVI output). I personally would like to see a lot more people posting their animations in the Gallery.



For HTML5 Animation

• Check out http://www.hippostudios.co.uk/ for a simple and inexpensive HTML5 animation app
• http://www.koolmoves.com, a Kool Flash & HTML5 desktop authoring program at a Kool price, loads of features
• Adobe Edge will only be available on the cloud, i.e. rental on a subscription per month basis, not cheap and pretty average (but it's still in beta)
• Mugeda is in beta and is also a cloud-based service: https://www.mugeda.com/
• Blysk might be worth looking into, get into the beta program: http://bly.sk

I have purposely left out the Mac-only HTML5 tools since we are Xara Windows people (and you can use Google if you're interested).

I see HTML5 animation export as a serious possibility in Xara in the very near future as the two technologies, Flash and HTML5, are so similar that it would be foolish not to do so. Plus, it's one hell of a selling point to finally get into something at the very beginning of the hype.

[dcahall]

Wow Frank, you have passed along some very interesting information here. I will be checking out these links.

I used to own Kool Moves and like it a lot. You can do a bunch with it. Not sure you could do our waving flag thing though and get the highlighting and such though. I sure will check out the Adobe Edge also. I will look at these tools just out of curiosity because I do not do anything on the web any more but then with where things are going, you never know.

For you and Gary, I am adding another image that I played around with. I am sure you would do better but I tried to mix the Displacement Map plugin, the replacement map images Gary shared and a little bit of "molding". Did not come out like I woud like but then again, there was some interesting effects as well.



Man, how much smaller do I have to make the image before it will display inline with the animation?

[dcahall]

Frank - I have downloaded the Adobe Edge tool and will probably also look at the Blysk tool as well. I had some silly ideas in mind when I same sme of the samples on various pages. Will let you know if I come up with anything and have it where I can share it.