there's a few on this page to look at for inspiration
http://www.crossed-flag-pins.com/animated-flag-gif.html
Printable View
there's a few on this page to look at for inspiration
http://www.crossed-flag-pins.com/animated-flag-gif.html
Does the swf video appear in post #39 now?
I swapped in a different file.
TIA,
—g
#39 yes - thanks Gary [#35 still no]
The error was between the chair and the keyboard.
When writing the swf, I didn't specify that an internal player goes along with it.
#35 now plays?
Thanks!
-g
Before I saw your #35 and #39 which are excellent, I created the animation below. It does not animated as smoothly in the exported gif and it shows in the preiview in Xara but I think you would get the idea. Obviously not as elegent as yours but I was just trying to find a way. Unfortunately, I accidentally deleted the .xar file but I did this by drawing the flag as a series of lines which I could then manipulate individually and elimate the tween problem with the mold tool.
Attachment 91918
(click to watch it "wave")
BTW: I love what you did with #39. That would take a ton of work to accomplish with Xara but I now believe it could be done but I do not think it would work out as smooth. Especially as a .gif file...
step one, a 250 frame animation found at the link i posted above, imported into xara, reduced to 125 frmes and manipulated a bit
Attachment 91920
File Information:
Description An animated GIF
Using an 8 bit, 64 colour globally optimised palette
Not ditheredImage Size 185 by 156 pixels File Size 593189 bytes
next step, if i have the motivation, will be to covert all frames to vector
further on will have to be a way to add a pattern, that'll be fun :/
#35 now rocks..
nice flag Frank
The flapping green cloth is an excellent example of what Maya, 3D Studio and other modeling programs can do with Dynamics. I believe that's clothing dynamics with a force such as wind applied.
Well, I came up with something that might help along the flag animation. Dave, what you did is quite innovative.
I used the "Even Wave" Deformation Live Effect, each frame changing the Phase setting.
Attachment 91925
It's a correct assumption that a more fluid animation of a waving flag could be done in Xara...it's a question of patience. What this example needs (and it's attached below) is a more critical eye than I have at the moment, to see where the highlights should move frame by frame, and perhaps even a shorter onscreen duration. I used .2 seconds and it looks to be too slow. I need more frames, too, but I'm just demonstrating a Live Effect you already own that puts waves on a vector or bitmap object.
By the way, Google's Swiffy is wonderful, for converting Flash (on its way out) to HTML, with a little CSS and JavaScript embedded.
Bring your SWF files here!
Here's a link to a page Barbara worked on a little. It's about 1MB and this is NOT Flash or MPEG-4.
A CSS converted animation
As I mentioned before, getting an animation done is the hard part. File formats for DVD authoring and the Web is "kid's stuff".
My Best,
Gary
Big Frank Your link has some excellent waving flags......I looked at the one for the US and loved it.
My point to this entire thread is coming around to the fact that there are some challenges to creating animations in PGD.
1. What I see when I click on the Preview icon is not always what is going to be rendered when you export your animation. As an example, when I clicked the preview link in the UI (not the preview in browser link), the animation was pretty smooth. After I exported it (in both gif and swf formats), the animation was far more choppy.
2. You should be able to use any of the Xara functions (i.e. mold) on a keyframed object to change it from one frame to another and have the object tweened to the new frame.
3. It would also be great if you could add control points to be used by the the mold function. That would give me far more leverage in deciding the shape of an object and its contents (i.e. the fill or merged shapes when I drew the Texas flag) so you would have more control over the entire keyframed object.
OK - those are some starters.
FRANK: Why does your gif animate on the page without clicking it and the ones Gare and I included require you to click them:
BTW: For those who may have looked at the other thread I started about breaking the graphic and web functions into separate programs, IMHO the animation features/challengs represent why I think separate programs that address specific topics is preferred. Again, this is probably a minority opion but is mine.
Any images uploaded to this forum and placed in-line are displayed as-is (like my animation) unless they exceed a certain size (dimensions, not kilobytes), in which case they are automatically resized (like yours).
The key to smooth animations is "keep 'em small". Not everybody has a whizzing video card with nitrogen cooling. As you can see from my flag above, an animation doesn't have to be big to be interesting.
[QUOTE=Big Frank;454208]Any images uploaded to this forum and placed in-line are displayed as-is (like my animation) unless they exceed a certain size (dimensions, not kilobytes), in which case they are automatically resized (like yours).
Thanks for that tip. I opened your green flag in PGD and the flag is "off the page" on every frame. I have seen that if I open a gif I created with Xara as well. Any way to correct that?
If I could add control points and use the mold tool, you could build a full flag (like the US one). I am going to try some other silly stuff to see what could be done as well. I understand that by changing the timing of the frames you could build something by having a totally different object that looked like the base object and doing it as well. The problem I see in building something like this in Xara is being able to manipulate the fill of the object. Thus the mold tool would work if you could have more control points to manipulate the object (including the fill - interior content) of the object. Xara is not far a way from this.
I'm not sure tbh, but it's never been an issue for me. Set all frames as visible and editable, select all and then just drag everything onto the canvas. Also a good opportunity to adjust the page dimensions. I'm far from being an expert, but I love dabbling with animation in Xara. Ever since I got my first copy of Xara I haven't used anything else.
Hi David—
You could submit the Mould tool's enhancements you want to the "Dear Xara" forum, but honestly? The point is moot, I believe. Charles probably won't ask the engineers to devote time on an existing feature—and in the process tearing up a lot of code—to change not only the Mould tool's features, but the model for those features. They have it set up that both the Envelope and the Perspective modes require four points, no more and no less. I'm not very familiar with application code, but I get the sense that the Mould tool is very different code from the Envelope filter that CorelDRAW has used for years, which allows the deletion and addition of control points.
I'd like to move on from the Mould tool and what you can't do with it in animations, on this thread, David. Even if you could add control points, the model for animating stuff is based around Adobe's Flash engine.
• Flash does not allow the sort of animation that might be possible with the Mould tool because it changes the path of shapes, based on a node-governing motion. Flash disallows nodes (control points) to be moved between keyframes by the program. Yes, you can move control points, but then you lose the 'tweening capability of Xara.
So one could argue that Xara is limited by whatever can be declared in Adobe Flash animation. At the same time, one would also need to argue that Adobe is to blame for making Flash "rules" as limited as they are. I'm trying to be fair and not appear as a total suck-up here, honest! Xara's animation features are limited, and the way we've seen Xara grow in successive versions? It's not likely they will revisit the animation features. Which saddens me, because HTML 5+CSS+JavaScripting is the new model for animations on the Web.
Now, there are also animation off the Web—video, traditional cel-painted cartoons, 3D—and there are no real restrictions because you need something other than Xara to create them.
On the other hand, if you're slightly brain-damaged like me, the limitations of Xara can be seen as a challenge, and by trying to work around them, you might discover something you didn't originally consider, and the results might be as interesting as your original goal.
The Xara file is attached in case anyone would like to improve upon it. By the way, I only named three of the spheres. Seems that duplicates can inherit the name and be keyed, so this was not a big-time effort.
@Big Frank—Agreed completely that you don't have to eat up bandwidth to entertain a web audience. Small can be beautiful, too, as you've demonstrated.
My Best,
Attachment 91969
Here's another starting place: The stripes and the blue field are lines. I didn't animation the line control points because in Flash, this blows the keyframing. What I did instead was create a wavy line, and then scale it disproportionately, vertically.
XARA file is attached.
My Best,
Gary
Gare, I agree that we have kind of beat the subjct to death. I think it helps to know though where the limits are. My biggest concern remains that what I see in the preview (not Preview in Browser) does not always accurately represent what I will see after I export the animation.
Going back to that bouncing ball tutorial, you notice that the tween produces a very smooth animation without having a lot of frames. In the messing around we have been doing with the flags, I am not seeing the same results even when we name the objects so they will be keyframed.
I also have a concern that if I open an animated gif (regardless of where it was created) all of the content if "off the stage".
I would like to know more about the HTML5-CSS-Javascript approach. The animation that was shared in this thread was very impressive. I am probably unique but less than 10% of the animations I have created in the past were used for web purpose. Most of them were used in PowerPoint and in DVDs I created for some reunions. Prior to Xara, I used other tools and some of them are no longer available or have been buried in other packages that are too darn expensive for a retired guy who is doing this stuff for fun.
I am going to play around with the AVI capabilities a little more and see what happens in that arena or if I run into the same problems. I am been off testing another tool for another product so have stepped away a little for now.
I am enjoying exploring the capabilities/limitations though. Just wish I were a little better artist. Sometimes I get ideas but do not know the tool nor have the aristic capabilities of some of you guys so the results are not always what I would like,
That's why you should preview in your browser. You don't test a race car in a field do you? You test it on the surface it was designed for. Same with these animations.
Your "stage" is the page. The grey area around the page is called the pasteboard. The page, when creating or editing a GIF animation, is a Xara convention and has nothing to do with the animation. An animation, when exported to GIF, loses anything that isn't in the GIF89a specification. The only place you will see the page is in your XAR file. When you import an animated GIF, you are not importing the working file, you are importing the exported code and Xara is only displaying the frames as originally exported by the application that created the GIF. Even if you import a GIF made in Xara, it will not look like your XAR file, because it has been processed by an export filter. It's like feeding a whole bunch of grass to a cow. Well, let's not go there...
I explained above how to get your imported GIF onto the page: "Set all frames as visible and editable, select all and then just drag everything onto the canvas. Also a good opportunity to adjust the page dimensions.". But you don't even have to do that because when you export your animation you have the option of exporting either what is within the page boundaries or the objects in your frames, ignoring the page completely. It just makes things cleaner, visually, if you place your objects on the page and adjust the page boundaries accordingly. But it's by no means mandatory.
@David—
David, don't confuse the content with the container.
I don't know as anyone else besides me has posted a CSS animation, but I created the animation in Cinema 4D. That's the origin of the content. The container is CSS—I uploaded it to Google's Swiffy free for the time being) service as a Flash file because C4D can export to Flash (swf, actually). From there a copy became a 1.2MB HTML document.
Big Frank also has an excellent point: what you see in Preview is local to your hard drives. What you post has to go from a server to your screen, so naturally the quality won't be identical.
@ Everyone—
Rule Number One for designing an animation or anything else:
If your final product looks wrong, don't change the data. Change your view.
Here's a simple example, and Dave, I'll get to animation in a moment. You take a photo and bring it into Xara, and you do all sorts of neat color correcting until it looks perfect. Three weeks later, you buy a new monitor.
And your beautiful photo from 3 weeks ago looks lousy.
What do you do? Do you re-edit your perfect photo so it looks good on your new monitor?
NO.
You recalibrate your monitor.
You always, always, always change your view of data. Only as a last recourse do you change the data itself.
Hint: one change is relative, the other is permanent!
++++++++++++++++++
So, Dave, animation? The only way to judge how an animation will look on the web, is to post it on the web. So you create your animation, always comparing what you see in a copy on the web to what you're working on.
If you want perfection, you don't use GIF or SWF. You write a copy at 30 frames/second to MPEG-4 file format and then transcode it to DVD at 8 Mbps transfer rate.
Some containers will slow you down, while others will present your content the way you created it.
For example, what if you owned a $$$$$$ 3D animation program and knew how to use it, and wrote a HD [720p] (1280 by 720 pixels) animation to file, AVI, no compression.
It would play back on your computer like crap. Why? You didn't take into consideration your final playback device. Computers typically use a processor that's good for most general purposes, while DVD players hooked up to TV sets have dedicated processors that do just one thing: they display images very fast, very smoothly, while PCs do not, not usually. The DVD you put in a DVD player, and the streaming media you might rent from Apple or Amazon is specially encoded (usually to MPEG-4 or similar), and has a fairly undemanding amount of data that needs to be processed per second: this is called transfer rate and a reasonable MPEG-4 on YouTube is usually 2000kbps, while commercial DVDs are 8000.
The above is all true but you don't have to ingest it right now, Dave, or anyone else.
Yes, there is a lot to learn about the computer specifics of animation, to make it come out looking right time after time. I have to do this every month with the tutorials—and to stop from pulling my remaining hair out, I've memorized a system with the software I own.
I have no idea how the industry accumulated so many different parameters and file formats! My point is that there is a difference between art you create, and how it is displayed on a monitor other than your own.
If something looks less than perfect, blame how its presented first, and not the content itself.
Make any sense?
My Best,
Gary
All very true. Both of you (you and Big Frank) have made some excellent and valid points. I completely understand the points both of you are making and you have provided some very good educational points.
Maybe I am wrong, but here are some points I am taking away from this:
- Do not use the Preview link to see how an animation will really look. Use it only to see if you are achieving the type of effect you want to achieve in your animation
- Do not oepn an animated gif in Xara to edit it unless you are ready to resize the page and move all of the objects on each page to the Xara page
- Use Xara for rather unsophisticated animations (like the bouncing ball tutorial) but if you want some comprehensive things like the waving flags Big Frank pointed us to, use a different tool
I really like Xara and have recommended it to many people I know and have worked with. I think it is important to learn what limitations (if any) a product has and choose the right tool for the right job. In this thread, I proved that I am not as knowledgabl as you guys on this topic and that I have a limited range of what I want to accomplish that is probably not in sync with how others are using it. :o
I will sit back, watch and try learn from the rest of you and enjoy the fruits of your efforts. :D
Xara represents different things to different people, David.
Charles wrote in the foreword to my book that he wanted to create not specifically a vector drawing program, but a design program, in which people from different disciplines can express themselves. Bob likes Desktop Publishing, Sue needs a technical illustration, Peter wants a GIF animation for the Web, most all go away happy.
Which is truly saying quite a lot about an inexpensive piece of software, that, sadly, too few people accept and adopt as a serious, commercial program. Instead, one person laments that it doesn't do enough Desktop Publishing, or enough animation, or this or that, and are far too easily dismissive of it as a serious creative tool. That's the problem when you try to be a lot (if not everything) to everybody. You wind up being not enough, to too many.
Me? I've been using Xara for over a decade, creating EPS files and doing color proof work for the books I've written. You don't get a lot closer to an "acid test" for the commercial possibilities of a product. Because if I or Xara screwed up, tens of thousands of dollars would hang in the balance, and I'd simply hang. The Production houses that work for publishers always "assumed" I used Illustrator.
I didn't.
And the books went from Production to the commercial presses, to warehouse, to stores, to customers. Successfully.
I believe Mike W. also uses Xara for production-critical work, as other are, I'm sure.
It can't do everything, but it ain't a toy, either.
:)
—Gary
I agree completely with Gary, David.
You are over-simplifying what you see as a problem and/or a shortcoming with the program.
I use Xara almost exclusively for ALL of my graphic design work (I'd say 99%), be it traditional art for print or website design. Over the years, and I've been using it since 1997-ish, I have learned that the capabilities of this program continue to exceed my expectations. I love it and I simply would not do without it. But only experience will demonstrate that to you.
The green flag animation is so beautiful because it was created not in a 2D animation program but a 3D modelling program. If what you want is in effect a 3D animation (a waving Texan flag) then do not expect the 2D animation features of a fully-featured 2D graphic design program to give you that.
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.
Attachment 91986
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.
Here is the same animation, here on the right, a little further down the line:
Attachment 91988Attachment 91987
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 ;) )
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.
Attachment 91990
(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. =D>
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?
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!
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
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). =D>
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
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!).
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.
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.
Attachment 91997
Man, how much smaller do I have to make the image before it will display inline with the animation?
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.
David,
Don't forget to walk before you can run!
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..................
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).
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?
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?
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.
Attachment 92010
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.
Attachment 92011+++++++Attachment 92012+++++++Attachment 92013+++++++Attachment 92014
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
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 :D)
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 :D but the exercise was to use the mould tool and it really does have possibilities.
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.
Attachment 92015
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.:-O
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??? :)
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