-
Animation in Xara Revisited
Hello,
I have quite a few questions for y'all.
I was wondering if anyone knew how to create a flickering light on a Xara page, similar to the light on http://www.bottlebellphotography.com/. I wouldn't want the long intro; I just want the part of the flickering light. Any ideas? Do I HAVE to use flash? Also, is there a way to make an firefly, butterfly, etc move on the page? If I had an image of a pretty insect, could I get it to move from the bottom of the page to the top? If so, how do I do that? Last question, can you change the cursor to something other than an arrow (for everyone who visits the site, not just the person who created it)?
Please reply!!
Thank you all for your time.
Take Care,
Monica
-
Re: Creating a flickering light in Xara
It's Flash. So my guess is the designer created the effect from scratch.
You could always show some chutzpah and e-mail the photographer and ask. :rolleyes:
-
Re: Creating a flickering light in Xara
Hi Monica—
You can use Xara's animation features to create a flickering effect with text or other shape by specifying a very short duration for a frame with a particular brightness, move on to another frame of short duration with a different brightness for the shape, and so on.
Here are some Flash animation guidelines and a video tutorial on basic animation
Changing a cursor on a web page is possible—I've visited web sites where the visitor's cursor changes— but it takes more clever Flash coding (or CSS) than is currently possible in Xara...to the best of my knowledge. For what might be considered Cleverness foe the sake of being clever, I'd advise you to pass on this one.
My Best,
Gary
-
1 Attachment(s)
Re: Creating a flickering light in Xara
Try this xar file. It's very similar to the effect you want. To create the flicker just create a black shape over a bitmap (bitmap in this case is in the background layer) name the shape "darkener" and copy the frame and change darkeners transparency. Repeat as often as required. To view the effect go File / Preview Flash. n.b. in the attached xar the darkening shape is named "black"
-
Re: Creating a flickering light in Xara
Nice, example, Egg. I see your timing is 2/10s of a second, usually.
That should give Monica a good head start on the flickering text effect she wants by just following the order and duration you have on the Animation Frame Gallery.
My Best,
Gary
-
Re: Creating a flickering light in Xara
Monica? Monica? Does this work for you?
Egg - Brilliant.
-
Re: Creating a flickering light in Xara
Cheers Gary. I was going to use this effect to recreate your fairly recent neon sign tutorial but as always time is the problem.
Other Gary. Monica is the OP or am I missing your point?
-
2 Attachment(s)
Re: Creating a flickering light in Xara
@Egg—
I believe Other Gary is asking where she is, why she hasn't posted again, what with all this great material we've provided for her.
I took a whack at created the sort of "stutter" the photography has with his text, based on your leag, Egg
And you know what? Without bothering to write to the photographer as O.G. suggested, I think that this might be a full-fledged FLV file, a video animation in a Flash wrapper, and not straight vector animation as we can create in Xara. There's noise, and a blur in before the flickering, and I've seen this script done in After Effects and with plug-ins such as ParticleIllusion.
So I think there's a workable solution here, but it might not be what the photographer is running as a very tired, annoying portal to his content online.
My Best,
Gary
-
1 Attachment(s)
Re: Creating a flickering light in Xara
-
Re: Creating a flickering light in Xara
These flickering effects are great, thanks and executable are with so small file sizes
-
1 Attachment(s)
Re: Creating a flickering light in Xara
Forgot to attach the xar file
-
Once you've animated, you have export options in Xara
Thanks, Egg! It's a clean, exceptionally self-explanatory example you've gifted the community with.
Hi csehz —
There is some confusion in the content creator’s community over what a Shockwave file is, and whether is it the same as a Flash file. Technically, a SWF is, or should be, a vector-based animation, although you can certainly put a JPEG or other image file in a SWF file using XWD and XDP. A Flash file, the type that Apple decided not to support a few years ago, is commonly used as a “container”, a wrapper for highly-compressed video. But if you have the patience, you could put a video into a SWF file using Xara products, you’d have to have a way to turn the video into individual frames and the resulting file size would make the effort not only masochistic, but ridiculous in saved file size.
Because support for SWF and FLV file formats—specifically for mobile devices—has been on and off for the past few years and MPEG-4 has grown in popularity on the Web, I cannot recommend sticking to only SWF as animation output, even though a vector shape-only animation is fantastically small as you see here (if you’re viewing on a desktop computer!).
I think GIF will be around in the foreseeable future, although it’s large in comparison to SWF file sizes. You just have to know who your audience is, and know what animation file formats their browsers support. Even on the desktop, sometimes “Flash” is not visible on pages because the user’s browser is blocking it, sometimes this is by accident, as a security risk, which has been Apple, Inc.’s reason for not supporting it for as far back as Steve Jobs was aware of the risks with the file format.
By the way, does everyone realize that you can export an animation you create in XWD and XDP to AVI file format with alpha channel transparency? Here’s how you could create an animated title for a video (let’s make it HD here), that you can super over footage with transparency. Now, you need a video editor that “sees” the AVI file as containing transparency; I’ve not seen any entry level programs, but if you or someone you know uses Adobe After Effects or Premiere, these two editors will import AVI footage that has an alpha channel, and interpret this channel as transparency information:
1. Set up your animation from the beginning to 1280 x 720 pixels. This is called 720p high definition, and there are higher resolutions but I want to keep this simple here.
2. Set your frames on the Animation Frame Gallery to a duration of 0.03 seconds, which is equal to 30 frames per second, a common US fps rate for digital video.
3. Create your animation; move text around, for example, “XARA Films Presents…”, for example.
4. Choose File>Export Animation, probably after you previewed your video.
5. In the Export Animation dialog, choose AVI from the Save as Type drop-down list and then click Options.
6. In the Options box, choose Uncompressed from the drop-down list at top, because any compression (“codec”) scheme we have in 2013 for AVI files disallows the saving of an alpha channel, and certainly not the MS Video 1 or Intel compressors offered when the transparency box is unchecked in this dialog.
7. Type 30 in the Frames per second box so the animation frame duration agrees with your exported video. This is called the resolution of the video, and doesn’t do anything to speed up or slow down your video. Generally, it just makes your video choppy or smooth.
8. Check the make background transparent checkbox, the Area to save doesn’t make a difference if you’re going to work with this video in an editor, click Apply and then click Close to get back to the Export dialog box, click Export and then get to editing with your new video clip in an editor that recognizes alpha channels in AVI type video.
Xara 3D will export to AVI also, but the background transparency issue becomes academic: there is no AVI with alpha option in Xara 3D Maker v7, but you could in practice define a solid green background for your animation and then use a video editor’s green screen chromakey feature (if supported) to trim out the background. Alternatively, if you export as a SWF, you’ll have the transparency if you specify it, but then you have to find a utility that can convert the SWF to something easier to work with, such as an AVI or QuickTime video with alpha. After Effects can import a SWF from Xara 3D with transparency, and it’s also $1,000 retail or $50/month to rent.
My Best,
Gary
-
1 Attachment(s)
Re: Once you've animated, you have export options in Xara
Gary thanks very much the explanation.
Basically in Xara Designer Pro X my issue is with .avi that can not see a real preview of it. In my old example which is just a button reproduction basically, containing mixed transparency and feather:
- checking it in Flash animation preview of course comes the message that mixed transparency and feather are not supported, so the button appears without those
- checking it in GIF animation preview it is limited because of the colors
- the only real preview is in Web page preview, but that just shows one frame of course
So how someone can preview the whole .avi in Xara?
Attachment 95816
I was not sure where to set that 0,03 duration which you mentioned, I think in this particular example that has different meaning as the layers are coming and the objects are not moving. Probably you meant that if the objects are named and so moved. Here setting 0,03 that is just a very short changing of frames.
Anyway just tried the .avi export and upload to link http://youtu.be/pcSCoeq0dUY, well I waited slightly sharper quality, but maybe just I did something wrong. However tried the dimensions as you proposed so 1280x720 and the .avi type is uncompressed.
-
2 Attachment(s)
Re: Once you've animated, you have export options in Xara
Hi csehz—
I’m sorry to say that there are a few things about animation in Xara that you do not understand. Most importantly, you need to begin with all your shapes in frame 1 and name the ones you want to animate; you right-click over a shape and choose Names.
The other thing is that you say you realize you cannot do feathering. Okay, there are several things not allowed in Xara animation; go to this tutorial page, read the list of things permitted and download the PDF transcript because you can take your time following along, unlike my video that plays in real time.
Now, I’m attaching an edited version of your XAR file, csehz and it will work now. What I did to make the effects not permitted work is to make bitmap copies of them, name them, and animate them. Although this makes a SWF that is too large for the web (see below), it will make a fine AVI file. I didn't know what you wanted to animate, so I just followed an instinct, sorry!
How do you preview your animation as an AVI? You don’t—you just preview it by clicking the SWF (Flash preview animation in browser)button on the Animation Gallery of buttons.
My Best,
Gary
-
2 Attachment(s)
Re: Once you've animated, you have export options in Xara
The file size can be reduced fairly drastically by not using such big bitmap copies Gary.
Don't know why the swf isn't animating here.
-
Re: Once you've animated, you have export options in Xara
Thanks the examples,
Gary yes I am aware that the objects should be named to make possibly the tweening, but in my example just wanted to register on the frames how to do a button. For example tutorials could be done similiarly, attaching beside in text maybe that which layer why came above. Sorry if it was confusing, it is really not a traditional animation. Rather just frames after each other and putting an additional layer in each.
Briefly so your technique to improve the .avi quality is making a bitmap copy for those elements, which are anyway not supported in flash. And seeing Egg's example considering the size optimizing too, however in .avi that is not a big factor, but definitely if someone would like to use it as .swf on web pages.
Thanks just again your efforts to explain
-
1 Attachment(s)
Re: Once you've animated, you have export options in Xara
Hi csehz—
Briefly so your technique to improve the .avi quality is making a bitmap copy for those elements, which are anyway not supported in flash.
No. I had to make bitmap copies of the elements in your animation file because Flash supports bitmaps but it does not support linear transparency or feathering. To improve the quality of an AVI video, your elements can be the same size as you have them, but they should probably be 96 pixels/inch in image resolution. A higher resolution for these bitmaps copies will not improve the final AVI video, and if you want to convert the AVI to MPEG-4 for display on YouTube (YouTube converts AVIs for you, but does a sucky job), you would still be at a frame resolution of 96 pixels/inch.
And seeing Egg's example considering the size optimizing too, however in .avi that is not a big factor
Absolutely correct. AVI and other video file formats can go as large as 2 to 4K (2 to 4 thousand pixels measured across one axis) for digital theatrical display. So trying to conserve file size is not a consideration with video (AVI MPEG-4 and so on) whose destination is a theater, but when you want to create an animation to embed on a web page, well, then you want to consider your audience and the fact that no everyone has a fast internet connection. Eric reduced my file size a LOT, and this is good for the forum and web pages, with no loss in bitmap quality because the SWF in this example is being played at 1:1 viewing resolution. His file dimensions are about 200 by 200 p[ixels, and not intended to take up your whole screen, so we can save file size here.
@Egg—your BB code was bad. sledger outlined how to post a swf correctly a long time ago on tg, and to paraphrase his instructions:
1. You click Go Advanced, and then click Manage Attachments.
2. Go get your swf, and choose to embed it, then come back to the editing window.
3. Use this BB snippet, and insert the attachment number in the appropriate place within the snippet, along with the display size. Now to stop this snippet from doing anything in this post, I've put a curly bracket at the beginning and one at the end, but YOU want to use straight brackets, okay? Bolded stuff below gets changed.
{flash=http://www.talkgraphics.com/attachment.php?attachmentid=91966] width=xxx height=yyy[/flash}
4. Delete the attachment, end attachment code you inserted into the body of the message, preview, then post.
Only 10K with bitmaps. Good going, Sir Egg! I knew I was generating a large file, I plead guilty to being in a rush this morning to get the post up and was a slob with maintaining a small file size for TalkGraphics.
My Best,
Gary
-
Re: Once you've animated, you have export options in Xara
-
1 Attachment(s)
Re: Once you've animated, you have export options in Xara
Gary thanks the .swf attaching advice too, hopefully that is playing now
Attachment 95832
-
2 Attachment(s)
Re: Once you've animated, you have export options in Xara
Anyway I am not sure why probably doing something wrong, but at trying the bitmap version, so creating bitmap from the feathered layers in the button, got such message
Attachment 95835
And after the created bitmap a white shape
Attachment 95836
-
Re: Once you've animated, you have export options in Xara
You cannot use Bleach or Stained Glass transparency in an animation, csehz. Xara uses all the Shockwave rules and limitations for animation as I listed on Xara Xone. So regardless of whether your output is to SWF or AVI, you still need to be careful when using transparency. ONLY "Mix", regular transparency mode is allowed in animation, and that's why you got the messed-up bitmap.
Your animation looks TERRIFIC, by the way! Great stuff!
-g
-
Re: Once you've animated, you have export options in Xara
Gary thanks for the infos, I learnt really a lot in this thread. Inspite of the limitations itself in flash, and that it seems becoming less used on web pages, sure are great possibilites in animations.
For example that inspires me in Xara way that on the first frame all the objects can be collected on the pasteboard, which will appear in the whole animation. After simply copying that start frame, the elements are always immediately there for the next frame and any of them can be pulled in and thats all. By this really fast can produce something.
-
Re: Once you've animated, you have export options in Xara
If you click a frame on the Animation Frame Gallery, and then click the Copy button, you create a new frame with all the shapes in frame 1 (or whichever).
Your way is good, keeping shapes on the pasteboard, though. A named shape, or group of shapes, can always be put "off stage" and then brought back on stage in a different frame.
I don't know about SWF animation being less used on the Web, but in any event, when you own Xara, you own an animation product, too, and despite some limitations, you consider the price—in a way, it's free, inside Xara.
Let's see some more of your work, okay, csehz?
My Best,
Gary
-
2 Attachment(s)
Re: Once you've animated, you have export options in Xara
Gary yes with pleasure, and actually would have question with certain scenarios :D These are not works anyway just plays :)
For example I would be interested whether there is some trick how an object could follow a "curve" in Xara animation. In the attached one would be nice to simulate a paper plane flying, imagined as the black curved line shows. Coming in fast and slowing down (has name >:plane), after should slowly faster and fly away
Attachment 95848
Attachment 95850
But two open issues are, how the slowing down pattern should be combined with following the black curve. With more frames sure could be improved, but neither by that never had too good results in following a curved path for an object
-
2 Attachment(s)
Re: Once you've animated, you have export options in Xara
Okay, you have just hit another limitation in Shockwave specifications: the arc you want the airplane to follow? Arcs (curves) are parabolic equations and SWF file rules and regulations have no capability built-in to calculate what you need here.
The only solution I can think of is to do a LOT of keyframes, each with a very short duration such as 0.03 seconds onscreen. Then follow your curve very precisely, then sit back and play it over and over and decide when you want it to slow down. You then pick that frame and give it a longer duration such as 0.06 seconds, twice as long.
We are really getting into Advanced animation topics, and I am afraid we will hit a limitation here using Xara, I am sad to say.It doesn't offer Hollywood-style animation features, but within the Shockwave limitations/file format, if you are inventive, you can think of a lot of things you can animate in a linear style, not curve.
That and other things such as fading in and out.
You can also animate text on a curve, did you know?
Here's a try at "smooth, curving" animation. It is not great art, but perhaps there's something someone can learn from the file and the timings.
My Best,
Gary
-
2 Attachment(s)
Re: Once you've animated, you have export options in Xara
Gary thanks that is great, moreover only in 14 frames. Before the opening I thought that it needed more. Probably that requires some experience where is the balance between in following the route and in the number of the frames.
I also tried in the attached example those you mentioned LOT of keyframes :-), changing the line dashed and stepping by that. Relatively now it follows the route, but still I do not like too much. As I remember a paper airplane sometimes sure does similiar stop in the air, collecting the power for the next cure, but still somehow differently :D This has a kind of Monthy Python jumping yet in the middle point sure :D
Attachment 95856
Attachment 95857
Well following the dashed line steps two questions minimum came up :-)
- is there maybe keyboard shortcut for copy frame?
- how to do that after a copy the frame get right after, not to the end of the frame list?
-
2 Attachment(s)
Re: Once you've animated, you have export options in Xara
The interesting is that between simply two frames, applying resize + rotate + deformation, the result is much more fluid and giving the impression that it follows arc and not a straight line
Attachment 95864
Attachment 95865
-
Re: Once you've animated, you have export options in Xara
Your should be very pleased with this latest paper airplane animation, csehz.
As far as your questions go:
• Is there a keyboard shortcut for Copy (frame) on the Animation Frame Gallery?
A: No. If you have the Pro version, under Utilities there is a Customize Key Shortcuts, and although there's a lot of good commands you can find here, I do not see anything for the Animation Frame Gallery. So I've suggested it to the programmers for a future version. Write in the "Dear Xara" thread when you want something in the future! I asked for something like the ShapeBuilder tool and eventually they added it!
• How do I get the frame I copy to go directly beneath the original?
A: When you Copy a frame, it always goes to the end of the list. And this can be confusing if you are editing in the middle of the list, but
1. You can rename a frame by double-clicking on the name and then a dialog box appears.
2. You can drag a frame name up or down the list to re-order the sequence.
My Best. It's Sunday and I'm going to go out in back gardening with Barbara!
Gary
-
2 Attachment(s)
Re: Once you've animated, you have export options in Xara
If you use Flash to create animations like this it is very much easier as you can create a graphic and make it follow a path and it's very simple. However in Xara you need to do a lot more thinking to get smooth paths. Here's one I created in Xara, pull it apart to see how it works. If you select the Background layer and go to wire-frame you can see the paths that the darts follow.
I like your latest swf chesz.
-
Re: Once you've animated, you have export options in Xara
For only 15 frames, this is excellent, egg.
Yeah, you can make actors (objects, shapes) follow a path in Adobe Flash, and do similar advanced things in SwishMax (about $100(US), but with patience obvious you can get a complex animation accomplished in Xara, as you've demonstrated.
Overall, though, I need to mention that some "shortcomings" are due to the SWF standard and not Xara itself, such as flat transparency and no more than 8 stops (pins, changes) in a gradient. SWF also doesn't support elliptical gradients so get out the Blend tool.
My Best,
Gary
-
1 Attachment(s)
Re: Once you've animated, you have export options in Xara
Gary thanks the answers just again,
Egg I am amazed how smoothly your planes are going, the green one exactly that path which I also tried, the white with that whole circle path. As I understand sometimes you put very small frame times, even there is a 0, those are for smoothing the turnings?
Attachment 95869
-
Re: Once you've animated, you have export options in Xara
Yes chehz, yes that's correct. In my animation there are two states for each graphic, a start and and an end position. The start position time determines how long the tween should exist between to two frames (0.7secs in the first frame for example). The second frame I set the timing to 0.001 which displays as zero on the timeline but it works. This way avoids a staggered wait between frames.
-
1 Attachment(s)
Re: Once you've animated, you have export options in Xara
That logic is extremelly smart, I am analyzing like in Terminator 2 was that super intelligent robot arm :)
As I can see you also doing a name change during the fly, so the green airplane is 'plane1' in the first two frames, after a copy exactly to the same place but already as 'plane2'.
Moreover, removing for example the the 'Many' fills from 'plane2', anyway also for 'plane1' the same, it turns out that it is a group which is a circle. So I assume you use the rotate feature to follow the smooth fly.
Attachment 95888
Could you advise how you create this circle + airplane, I would think that the circle is transparent but seems no, having some fill. Briefly, I was not able to reproduce it :D
-
Re: Once you've animated, you have export options in Xara
@ csehz—
This fact might not be of help immediately, but in the future:
Xara prefers that when you want to go from transparent to opaque in a Flash animation you use 1% for transparent, and not 0% because zero suggests that something doesn't exist on the page. And when you want top go from transparent to opaque, you begin at 1% and end up at 99% and not 100, because Xara sees 100% as having no transparency properties.
My Best,
Gary
-
4 Attachment(s)
Re: Once you've animated, you have export options in Xara
-
2 Attachment(s)
Re: Once you've animated, you have export options in Xara
Gary thanks the transparency advice, and Egg please, this example is perfect for education :-) So the key is to have the circle as no fill, no line, and the object has to be inside the circle.
Unfortunately I am actually stucked in a weird thing, why this attached airplane is falling apart at rotating with the circle? You see that grey bottom part. Anyway ideas are coming sometimes from mistakes, so I could simulate the crashing of it but actually that is not my target :D All of the shapes are checked they do not have individual name, so not clear why that is animated separately
Attachment 95896
Attachment 95897
-
Re: Once you've animated, you have export options in Xara
What a great tutorial diagram, Egg. Makes it very clear!
-
2 Attachment(s)
Re: Once you've animated, you have export options in Xara
Cheers Boy, it's been an interesting thread.
csehz, I know exactly what you mean, I had the same issue when I created my first paper plane animation. I found the only way to avoid this was to create a bitmap copy of the plane. As all vectors are grouped it should really act under the same rotation but under certain circumstance that I couldn't work out it didn't. Sorry, I meant to mention this earlier. One thing re using a bitmap is the object becomes a square and it's quite easy to find that this bitmap square is outside the circle and thus effect it's rotation which is no longer circular. If you look at rocket3 in my last xar file the rocket bitmap is slightly outside the circle and subsequently effected the rotation. Fortunately this wasn't to any great degree.
I've created this animation on revealing a path using a similar technique. The chalk brush circle (converted to a bitmap) is revealed in a similar method.
-
2 Attachment(s)
Re: Once you've animated, you have export options in Xara
Here's your animation but the plane has been converted to a bitmap. This avoids the breaking up.
-
1 Attachment(s)
Re: Once you've animated, you have export options in Xara
Having pieces come apart in a group when animating is a certainty in Xara, as well as Flash, I think.
The workaround of making a bitmap is inspired, Egg.
Overall, there seems to be a problem with keeping the center of rotation centered. I had the world's worst time getting the center of rotation to stay put with a lot of shapes here:
Ultimately, my solution was to put the component pieces into a circle, in position, and then make the circle invisible and rotate it. By the nature of this animation scheme, circles "prefer" to have their center of rotation at their center.
I wish I understood this quirk and limitation better!
My Best,
Gary