looking for a way to animate 16 png files, crop too, swiftly in Xara designer

Hi. Insert 16 images, how to Insert->Image->from file and have it snap to the same place each time?
Then how to perform the same crop for each image?
Should I do this before I insert into animation frames?
How do I ensure the position of each inserted image for each Animation frame?
How to Vertically and Horizontally mouse Drag and snap an object (after insert image from file)? Currently CTRL only holds my vertical still, not horizontal. And I cannot make out what Xara is snapping too.

what I'm hoping to read:
a snap to grid ruler setting
batch auto crop feature
options for Animation that auto crops all frames, after positioning each image in same place

what I've researched briefly:
Magnetic Lasso tool
Rectangular Region tool
Grid & Ruler view, set my original position to 20 and 20, then maybe CTRL mouse drag the top left of each image to this origin and have it snap

Thank you
Attachment 129452
Attachment 129453
Attachment 129454

this gif animation should show there is a lot of white space I would like to crop. I CTRL mouse dragged each inserted image to the RIGHT, and eyeballed the vertical position. let me try inserting this gif in next comment. Attachment 129455

mintintergal,
Firstly how are you producing these images (screen-grabs)?
can you attach your .web or .xar file?

Managed to download your very small animation animation. Unfortunately too small to really work on but here's a couple of sugestions re cropping & white space reduction:

thanks. windows key print-screen, then paste to windows Paint, save as PNG. fyi, Windows G saves png screen shots one step faster.

why are you pasting to windows paint and not directly into a xara document [from which you can also save as PNG, with a keyboard shortcut, if you need the grabs as seperate image files]

I would agree with egg - prepare your images in an editor document, not an animation one; in xara at least it is a better workflow

Hi Egg, You made a fantastic New Animation (process) of size 360 x 185. My cropping resulted in 1465 x 784 file exported to new png files. Thanks again.

1. I am stuck snapping extra white space after pasting (or after Insert menu, Image from file..)
2. How can I then snap to bottom right (if page options are 1464 or something large)?

Let me suggest:
Is it because there is a default 480px margin in the Page Options size?
Is there a setting to tell Xara paste to Not shrink the pasted image?
It seems anything under 500 px and the process works with snapping to top Left.
It does seem like Zara snaps if I mouse drag, but is too granular, and the slightest pixel off, messes up my animation.

screen shots
Attachment 129456
Attachment 129457
Attachment 129458

Quote:

---

Is there a setting to tell Xara paste to Not shrink the pasted image?
It seems anything under 500 px and the process works with snapping to top Left.

---

go to xara utilities menu > options > view tab

if 'resize large imported photos down to....' is selected change this to the 'import at the dpi specified in the image file' option

this will probably fix the resize issue on import/paste

Quote:

---

It does seem like Zara snaps if I mouse drag, but is too granular, and the slightest pixel off, messes up my animation.

---

you could try using the positon settings on the selector tool infobar to force selected image[s] to a fixed position relative to 0x,0y

attaching one Windows zipped file of two Xara projects. the second project has the cropping part complete, so you can probably ignore the first one. 4.14MB

egg is an expert in xara animation, I am not, I use another program, but one cardinal rule I will never deviate from is 'always work in whole pixels' - your final animation is going to be sized in whole pixels, so you must make sure you crop your images to whole pixels and in the correct aspect ratio

obviously, if the image[s] you are using are not in the same aspect ratio as your final video size you will need to have white space either in x or y; if you are making an animation that is not a standard video size maybe not, but you must still have your images in whole pixels

your screen capture should be in whole pixels and you should keep it that way - if somewhere along the way, either by cropping or whatever, your image has one dimension that is in pixel fractions you are going to have to either remake it, or, pad it to whole pixels by placing it over a white rectangle of the correct whole pixels size and making a bitmap copy [thereby introducing some white space], or recropping it at a whole pixel size [thereby losing a small part of it]

this is particularly important in xara whose reporting of image size is only as accurate as the number of decimal points your windows OS is set to; a small variation can completely throw an animation, as you noted earlier....

like this ?

Attachment 129460

In the olden days I would often do stuff like this with flash.

Looking at the animation made by hand drawn I would use the end frame still to start with and make it a static background plate across all frames.

I would then add shapes to hide what should not be seen in the first frame - those shapes would be the same as the background colour. The next frame is then the first frame less some of the shapes that obscure the background plate, the third frame has more shapes removed.

On frames where the lines are and they change position, I would take that section from the image and just add that cropped line over the base image as required.

I might have done this via masking in flash.

Trying a flipbook effect of the whole frame is going to be a nightmare because any misalignment will cause jitters. Taking a single frame as a backdrop and changing what is seen
via an overlaid shape will keep everything rock steady.

This really is a simple job.

'han-drawn' never liked flash much, coming from, and still working in, a cell based animation background now with added timelines... but yes this is a really simple job

my animation is just paging through the images which have been cropped to exactly the same size and placed in sequence at exactly the same positon in each frame, pretty much in the way egg outlined in his video

your method will likely reduce file-size and [if it is possible in a xara gif, I can't remember] give scope for transitions that could help make it smoother....

I am not convinced your way would be better for a flipbook effect.... misalignment would cetrainly cause jitter, but misalignment [unless you do it for effect] is a number one sin from my point of view, like dancing the wrong steps or hitting the wrong notes

Quote:

---

Originally Posted by handrawn

'han-drawn' never liked flash much, coming from, and still working in, a cell based animation background now with added timelines... but yes this is a really simple job

my animation is just paging through the images which have been cropped to exactly the same size and placed in sequence at exactly the same positon in each frame, pretty much in the way egg outlined in his video

your method will likely reduce file-size and [if it is possible in a xara gif, I can't remember] give scope for transitions that could help make it smoother....

I am not convinced your way would be better for a flipbook effect.... misalignment would cetrainly cause jitter, but misalignment [unless you do it for effect] is a number one sin from my point of view, like dancing the wrong steps or hitting the wrong notes

---

I made my primary living from Flash and I would not class myself as a professional animator like you. Flash was used by a lot of professional animators in it's time and I made several Apple IOS projects using it.

Mostly the animations I work with are based on human interaction, so I don't make videos as such except to build image sequences for use 'flipbook style' in software - for example a walking sequence where the character is guided via human interaction or a reaction sequence when the right or wrong choice is made.

My flash days peaked with a project that used flash entirely and had over a million online sign-ups for a charity and my software was controlling multiple characters walking around a showground of tents - all automated.

Anyway..

First & formost your screen grabs are not exactly the same alignment. This is an issue outside Xara.
All the screen grab images in your file is 2560 x 1080 px.
Utilites / Options / Page Size / set to 2560x1080.
With the view-all and select all open on the Action Frame Gallery, Select All.
Set the origin point to Top Left.
Set the 16 selected images to 2560x1080px
Export animation.
It works but it's too big 2088Kbs and because your screen-grabs wheren't exactly aligned (or perhaps your method of cropping) there's a slight jump in the animation.

I reset the page size to 1280x540 and reset the 16 images to the same.
This created an animated gif of 636Kb which is probably still too large but it could be reduced further using backgrounds and overlays.

Heres the animation after painstaking re-alignment, this one set to 800 x 428 (289Kb)
I would know the value of such a gif unless it was for software promotion, neither would I do this animation as a gif.

Thank you Handrawn and Egg. It's working. Is there a way to custom keyboard shortcut, animation gallery, New Frame?

notes:
a. Xara, Utilities, screen capture feature, can be assigned a keyboard short cut and is better than Windows G or alt Print screen, imo.
b. Utilities, options, mouse, Magnetic snap radii, setting this to 20 (try toggling on off the next Windows menu, snap to grid, setting, to ensure it "applies")
c. Windows menu, Snap to Grid, does also snap objects
d. using New Blank Document, keyword "blank", when capturing/pasting Xara screen shots

Quote:

---

Originally Posted by mintintegral18

Thank you Handrawn and Egg. It's working. Is there a way to custom keyboard shortcut, animation gallery, New Frame?

---

you are welcome

I don't think there is a key s/c - the new button on the frame gallery is the usual way ?

@pauland - sure, I have seen some truely excellent things done in flash.... but personally way back 15 years ago when I first started with toonboom I was put off flash because it was common to have swf sequences that needed to be imported into TB and integrated into the animation sequences; flash as you know makes [should that be made?] compromises when it renders ...it was a pain

Yes, finally noticed my original screen grabs were off, thanks. I started fresh again. Also, I somehow missed that this thread had a second page. Thanks everyone. To me, flipbook style ensures me of snap or crop across any application, or I could "reboot" the entire process, so long as screen grabs work. Or pixels are reliable, as handrawn mentioned. But the idea is to use Microsoft Power BI "trend line." They only publish "bookmarks." I made 16 bookmarks and used F11 full screen and took 16 screen grabs after clicking a bookmark. Windows snipping tool will not let me set a rectangle crop size either. I want to see linear regression in action. The scatter plots do have a "play" feature, but it's wonky to what is used as x or y axis. So the idea of cropping only what is changing is probably worth looking into. And Egg's process, I can use for any scenario. I can now place drawings by hand into flatbed scanner, then scan and crop using HP printer software and try some basic animation. But perhaps animation of a comic, changing eyeballs and eye brows and mouth only, perhaps a second process of this with cropping (not flipbook style) could be worked on.

Egg, may I suggest you change Windows resolution, or change the render output of your videos to MP4 or mkv or something or ensure you have HD enabled. I could barely make out some menu selections. Actually, they worked fine, with yellow circle and because I have Xara installed, but the value of these videos, they should show bigger somehow. To better balance the knowledge transfer in the video with richer video quality showing text of menus, radio buttons, tiny toolbars. I did open, and full screen, in youtube. In my fullscreen, I was expecting to see your video resolution blow up bigger.

notes on forum attachments:
This forum seems to crop and resize attachments. On the bright side, This forum also saves all my past year or so screen shots. (Coincidentally, Windows 10 just this month or so, some major update, deleted the default Feedback folder in Pictures folder, that I was using for such screen shots, anytime I want to "show" what I am talking about. I had about a years worth or software screen shots, showing all the things that I may forget I learned in Xara or my other music software, now gone, except in this forum).

some screen shots of important steps from Egg's video or the Xara features I did not know about.
Attachment 129468
Attachment 129469
Attachment 129470
Attachment 129471
Attachment 129472
Attachment 129473
Attachment 129474
Attachment 129475

gif is the only way to animate in XARA? Is there another way to animate this? reread your post.

I really don't unerstand what your requirements are here? What are your gifs supposed to be achieving? You talk about screen grabs, scanners , eyeballs .....

Quote:

---

I can now place drawings by hand into flatbed scanner, then scan and crop using HP printer software and try some basic animation. But perhaps animation of a comic, changing eyeballs and eye brows and mouth only, perhaps a second process of this with cropping (not flipbook style) could be worked on.

---

Quote:

---

Egg, may I suggest you change Windows resolution, or change the render output of your videos to MP4 or mkv or something or ensure you have HD enabled.

---

My videos are full HD, it's not my videos that are low quality, it's your very poor animated gif. Check the resolution of the Xara background images. ;)

Quote:

---

notes on forum attachments:
This forum seems to crop and resize attachments.

---

The forum sets the maximum image size to 800px, so resize your attachments to match this width.

Quote:

---

some screen shots of important steps from Egg's video or the Xara features I did not know about.

---

Mint, TG is all about self help and I'm only glad to know I'm being of assistance :D

Quote:

---

gif is the only way to animate in XARA? Is there another way to animate this? reread your post.

---

I'll try to reply to this later but firstly I think it would be of great assistance if you explained exactly what your wanting to use these gifs for?

Quote:

---

Originally Posted by mintintegral18

gif is the only way to animate in XARA? Is there another way to animate this? reread your post.

---

i'll get back to you on that one ;)

1. Animating a statistics charts, trend lines over scatter plots, trends over time. I thought you mentioned something, "I would know the value of such a gif unless it was for software promotion, neither would I do this animation as a gif." What other way can this be done?

2. Can Xara do this? zooms, horizontal pans
like these features that come with Predator movie DVD.
https://www.youtube.com/watch?v=MjrBdMUl7d4 (not the beginning 3-d rolling ball intro)
inserting same link here https://www.youtube.com/watch?v=MjrBdMUl7d4

do you fancy digging your garden with a teaspoon ?

no, that is not what xara does; to do that you need an animation program [toonboom harmony will do it] - but first remember that no program actually does any of this [bar the tween/morph/FX], you do it using the tools the program provides, and you need to learn the skills that are needed to visualise and impliment it - you need to be able to think in terms of camera pans coupled with layered z-space, not just x and y; no disrespect, but if you already understand this, you would not be asking the question...

xara is not an animation program in that sense - it is a design program which has animation capability oriented in the main towards making graphics for websites

I know egg uses an SVG animation program, he may have been thinking that would be better for your project, but that is for him to confirm...

All a gif is, is a series of images. There is no tweening. You can zoom & pan but as these are made up of a series of images they will be very jerky. As HD states I use svgator to create animations that do tween smoothly but this has restrictions also.

From your supplied animation it looks like you are taking screen grabs of some other software. I'd suggest using screen capture software (Screencast-o-Matic or similar) for this, far to much hard work creating a meaningless gif ;)

stop motion in fact...

yu want to make a film digitally, clip or otherwise, you need film making software

xara will export animation tweened as avi... but for the OP project I think paul's way of gradually revealing/hiding with masks to make the changes smooth would be better than tweening

I would start afresh and recreate the animated chart as a transitional/supersite plugin: https://initiostar.co.uk/demo/chart/..._xr_page_chart

You can create any chart with your own data this way, have next and previous buttons and a toggle auto-play, much the same way as an animated presentation.

You can change from a toggle auto-play to full cycle automation with a minor adjustment to the javascript in the Website HTML (body); otherwise you can built all sorts of on-page animations.

Toggle Auto-Play below requires a button with this link: javascript:void(toggleScroll());

HTML Code:

---

<script>
curScrollInterval=null;
function toggleScroll(){if(curScrollInterval){clearInterval(curScrollInterval);curScrollInterval=null;}else{curScrollInterval=setInterval(function(){xr_spapp((xr_curp+1)%xr_spapn);},3000);}}
</script>

---

Otherwise for full-auto remove the above and replace with:

HTML Code:

---

<script>
setInterval(function(){xr_spapp((xr_curp+1)%xr_spapn);},6000);
</script>

---

The time intervals in the above code 3000/6000 can be changed to suit.

Attachment 129486


This Xara file would be published to the SAME directory as your main site and would appear in this case as "chart.htm". From there you would create a placeholder (proportionally with the same height and width) and embed that page in it.

You can of course covert the full animation to an MP4 video too.

Gary

mp4 is the way to go for web...

Quote:

---

Originally Posted by Initiostar

I would start afresh and recreate the animated chart as a transitional/supersite plugin: https://initiostar.co.uk/demo/chart/..._xr_page_chart

You can create any chart with your own data this way, have next and previous buttons and a toggle auto-play, much the same way as an animated presentation.

You can change from a toggle auto-play to full cycle automation with a minor adjustment to the javascript in the Website HTML (body); otherwise you can built all sorts of on-page animations.

Toggle Auto-Play below requires a button with this link: javascript:void(toggleScroll());

HTML Code:

---

<script>
curScrollInterval=null;
function toggleScroll(){if(curScrollInterval){clearInterval(curScrollInterval);curScrollInterval=null;}else{curScrollInterval=setInterval(function(){xr_spapp((xr_curp+1)%xr_spapn);},3000);}}
</script>

---

Otherwise for full-auto remove the above and replace with:

HTML Code:

---

<script>
setInterval(function(){xr_spapp((xr_curp+1)%xr_spapn);},6000);
</script>

---

The time intervals in the above code 3000/6000 can be changed to suit.

Attachment 129486


This Xara file would be published to the SAME directory as your main site and would appear in this case as "chart.htm". From there you would create a placeholder (proportionally with the same height and width) and embed that page in it.

You can of course covert the full animation to an MP4 video too.

Gary

---

Gary, i love your dedication.

I personally have no interest in doing the OP's job so I have instead addressed a simple animation method that can be used for anything. [Not a bold statement, one which is slanty so I can slide off problems]

Attachment 129487
Unzip and run the design file.

It has a novel jQuery plugin of 317 bytes:

Quote:

---

$.fn.cycle = function(timeout, showSpeed){
var $all_elem = $(this)


show_cycle_elem = function(index){
if(index == $all_elem.length) return;
$all_elem.hide().eq(index).fadeIn(showSpeed);
setTimeout(function(){show_cycle_elem(++index)}, timeout);
}
show_cycle_elem(0);
}

---

jQuery 3.6.0 has been included as you should not be running an insecure, stale library.


jquery.cycle.js is a simple plugin where you can set the step time and how quickly the blob appears.


An object is given a link of form:
javascript: void $('.classname').cycle(step, showTime);


In this demo file, there are two ClassNames used: animate & justDucks


The 'Animate slow' button has Link: javascript: void $('.animate').cycle(500, 16);
The 'Animate 25fps' button has Link: javascript: void $(".animate").cycle(40, 8);
The 'Just Ducks' button has Link: javascript: void $(".justDucks").cycle(750, 25);

You tune your animation speed to suit.
You add ClassNames to elements that can be shared by an element:
All Ducks/Eggs have both classNames: htmlclass="animate justDucks"

To keep a progression, you would need to copy all past objects and add new ones to a Grouped collection and give that the required ClassName.
If you know what you are about, you could remove the .hide() part in $all_elem.hide().eq(index).fadeIn(showSpeed);

Acorn

Interesting Acorn and thanks for sharing.

I'll have a play later.

Gary

Quote:

---

I personally have no interest in doing the OP's job so I have instead addressed a simple animation method that can be used for anything. [Not a bold statement, one which is slanty so I can slide off problems]

---

slide away .... :)