Animation in Xara

[Big Frank]

David,

Don't forget to walk before you can run!

[dcahall]

I understand :-)

I am not a total novice at this stuff. I have played with Flash for several years including using the scripting capabilities for developing presentations that were animated instead of using PowerPoint. I have also built Flash animations that were used in PowerPoint presentations for sales purposes. I actually used Macromedia's Flash tool and have used Kool Moves (which has some really interesting features). I also used x3d to create some animtions (mostly spinning logos) including having our company logo (before I retired) and one of our major clients that would swap the logos as the rotated. I also added some animations to our company web site (again before I retired).

I was trying to explore the capabilities of animation in Xara and have felt they is not as flexible as some of the other tools I have used. In particular, its tweening capabilities do not seem as powerful as those other tools. But I have found through this thread that there may be more power than I gave it credit for in some cases and then again less flexible than I thought in some other areas. With the waving flag exercise I think we have seen that the mold tool could be strengthened to add some power.

I am intrigued by the fact that the HTML5, CSS & Javascript animation capabilites. I used to design web applications for a software company and have used HTML, CSS and Javascript a good bit. HTML5 was just coming on when I retired. We were pretty much exclusively a Microsoft shop so I had to be careful with some stuff becuase MS historically did not adhear to industry standards very closely. I think they are trying harder in that department now. I think it would be wise for Xara to look at supporting this environment (HTML5, CSS & Javascript) since they are emphasizing web devlopment with their tools.

I just wish I had the artistic talents of people like you and Gary so that I could make things look better. In that last image I posted, I saw some of the effect I wanted to achieve (I saw some interesting movement in the shadowing on the flag) even though I did not do a good job of reshaping the flag. My attempt was aimed at achieving some effects even if it artistically did not come out as well as I would like.

I wish some other people would join us in this and help us expose the animation power of the Xara toolset and perhaps help us define where improvements could be made to strengthen it. Sometimes I may come across more critical than I should but my goal is to help strengthen the tools even if I am not the best user out there.

Hope we can keep exploring this topic together..................

[dcahall]

I tried to download your waving Texas flag (the dithered one) and open it in PGD (I am running Vista) but I keep getting an error (Windows closed the appliction). Would you mind sharing the xar file? I want to "pick your brain". I am curious to see if you did the dithering the way I was thinking about which is defining a "shadow" object on top of the image that was just large enough for the higlighting/shadow that has a gradient fill that can be changed from one frame to another. On a previous attempt, I tried switching from stained glass to bleach fill to produce shadows on one frame and highlights on another.

I think your animation proves that the "mold" tool could really be used to achieve some of the same effects (not all of course) as the Displacement Map plugin if it were strengthened. At least for this reshaping of an object in an animation, it could be very powerful. That is why I was suggesting the ability to add additional control points for that tool.

BTW: After looking at the HTML5 environment a little better, I fully appreciate an earlier post that said Flash is on its way out because this new animation environment will run on multiple platforms without having to have a player on the client side. IMHO, that is hughe. Just strengthens the argument of why Xara should be pursuing it (they probably are - just not public with it yet).

[dcahall]

OK - the second attempt opened the file just fine. Now I will show my ignorance of the Xara tool. How did you create the dithered copy of the image? That is one heck of an interesting technique. Is there a tutorial somewhere that I should go watch?

[dcahall]

Gary & Frank, I just saw an interesting plugin that would probably do exactly what we wanted in this example. Check out the link below. The only problem is that is costs $20 but if this technique was a "must have", it would probably be worth it. I have one of this companies plugins (I think it is free with PGD) and it it is representative of how the their plugis work, this would be ideal for this endeavor. Looks very much like the people who developed that green waving flag might have used this tool.

http://www.redfieldplugins.com/samFlags.htm

Is there another animation topic we could explore?

[Gare]

Hi David—

The Redfield filter isn't doing much more than the free deformation filter, except it's lightening your wallet of $20 and it's tailored to create a waving flag effect instead of general deformation.

I don't see anywhere that it's an animated effect, so hang on to them pesos, partner. :)

Big Frank is more than capable of answering your question about dithering, but as long as I'm posting right now:

On the Animation Frame Gallery, you have a Properties button. You click it and then choose the GIF Options.



One warning about dithering an animation, everyone. The reason why you'd dither a GIF animation in the first place is to fake additional colors in the file that cannot be natively expressed because the GIF standard has a maximum capability of 256 indexed colors. Which makes soft feathery clouds look banded unless you allow some dithering.

My FFH opinion is that you design around the color limit when you think up your animation, instead of always dithering as a last step. Why? Because the saved file size of the GIF animation is larger with dithering, and that ultimately means that a visitor viewing your website with a lot of dithered GIF animations will have to wait longer for them to load than smaller undithered animations.

Whenever you have a chance to save bandwidth, you use it and make friends.

++++++++++++++++++++++++++++++++++

I'd like to return to our philosophical discussion about "what it takes" to produce interesting animations, specifically for the Web:

When William Shakespeare wrote in Hamlet, “ The play’s the Thing...”, I don’t think he meant, “Plays are better entertainment than beheadings, stoning, and movie theaters.”

I think he meant in a Marshall McLuhan sense, “The content of the play is of the main attention to the audience. Costumes, the quality of the acting, the sets, everything else is of subordinate importance.” And I’m basing this on the Modern Day critique that all the special effects in the world can’t save a $200 million summer movie from the $1 DVD bin at Kmart unless the core of the film has a compelling story.

Similarly, you could think of animations you build in Xara as being tiny stories, brief little segments that have a beginning, a middle, and an end, as all satisfying stories go. The plot can be very simple; in fact, it needs to be simple. Example? A face appears from camera left, pauses, smiles, and then exits again camera left.

This sort of stuff can be exported as an animated GIF at a small size, and doesn’t have to be elaborately illustrated. Because the play is the thing, not the actor. Here are a few examples of brief GIF animations I’ve created over the past 10 years, using Xara, and Barbara and I used them as avatars and emoticons on the website we own and are currently ignoring, because we’re preoccupied with tg.

+++++++++++++++++++++

David? You don’t have to be a Van Gogh to do this sort of thing. It’s all in the concept, because all that really matters is the content of an animation, not necessarily how professionally it’s drawn or anything. As Big Frank said, it’s not always the talent: a lot of times it’s the experience a Xaraist has…or needs to acquire.

And if there was a shortcut to experience, I’d be 40 years younger saying this same thing, and trying to bottle and sell “Instant Experience”.

My Best,

Gary

[stygg2003]

Been watching the discussion going on about gif flag waving and should you use gif or swf file, which is the better? Quite an interesting debate and as I'm no expert in animation I'm not going to choose one (chickened out )
But I got good results when I did the bouncing ball tuts. and they were swf.
Any how guys I thought I'd try a waving flag using the mould tool and exported it as a swf.! It looks like the flag of jitterbug land but the exercise was to use the mould tool and it really does have possibilities.

[dcahall]

Gary, I played with the free version of the Redfield plugin (not their wavy flag version) just to see what would happen. I created a 6 frame animation just for fun. In 5 of the frames I applied the plugin with some different settings (that was the only change). Interesting what resulted. I could have taken more time to make it cleaner but I just wanted to see what would happen (I guess this type of experimenting is how we learn ). Would also look nicer with a background like Franks animation. Could also have used the the Mold tool to add some additional effects.



BTW: Those are some neat animations you posted. More of the type I would expect with the Xara tool (not to say that you cannot do more sophisticated stuff). Also looks like I finally found a size the would display without having to click it.

[Gare]

I might not be making a point here so that it makes sense.

Animations on the web, the same as animations on a DVD hooked up to your TV set, do not have to look choppy, or stuttering, or whatever you'd like to call the effect we'd see in the early 1970s NASA footage. It's called "not enough frames". If you want smooth animations (depending on the nature of the animation), you need to use at least 12 frames to describe a second of action.

One of the ways to make an animation smooth without the tedium of drawing a whole passel of frames manually is by keying a frame, and then letting Xara do the in-between frames automatically. Although the Mould tool is great to do a reference image, or even a frame of a distorted flag or whatever, Mould shapes cannot be declared in the Names Gallery as a "key shape".

Which means if you're going to use the Mould tool for visual content, you need to manually create frames in-between key frames.

Or you could get happy with NASA footage-like animations.

My Best,

Gary

P.S.- I worked with Adobe Edge for a while last night, and my conclusion is that Adobe shouldn't bet the farm on this product. It's Artist-hostile. It does amazing things to generate HTML code that produces vector animation, and yep, that's the future of Web animation, but Geez Louise, is that a logically-opaque and visually intimidating UI. If it takes an artist more than 2 minutes to discover where the key button is and the drawing tools, you lose, man.

Att'n: Xara engineers. You got your ears on? How about HTML export of animation in version 9???

[Gare]

I tried something that Photoshop would offer to smooth out GIF animations.

I think it works, same theory, with Xara. I feel I've got the animation smoothed out significantly better than just keying between two Mould frames. What I did was shorten the animation interval to .2 seconds, and use two copies of the flag at different opacity levels.



The XAR file is attached so you can see what I did. It's a proof of concept, hardly finished or anything

My Best,

Gary