Author Topic: Animations in XWD  (Read 10546 times)

Offline hidden

  • China Tour Guide
  • Global Moderator
  • Senior Member
  • *****
  • Posts: 4741
    • Bushtrack Web Creations
Animations in XWD
« on: April 07, 2009, 01:59:29 AM »
Hi Sami. Since you are the animation expert, I thought I would start the ball rolling and post a XWD question here.

I am having difficulty understanding how to create animations in XWD which have fade in/fade out. I can do it fine with Coffee Cup because it has a timeline, and functions for motion effects such as fading.

But how do I do it in XWD? I can only see how to do simple GIF/Flash, but cannot figure out how to overlay/fade.  :help:

thanks
Rick
:rick:  Follow me, it's better if we are lost together!

Offline hidden

  • Sami
  • Administrator
  • Senior Member
  • *****
  • Posts: 5924
  • Not a geek. Just a Nerd.
    • CSB Tutorials
Re: Animations in XWD
« Reply #1 on: April 07, 2009, 06:45:21 PM »
Do you want the fade in/out on mouseover or click, or just continually doing it (like a gif or flash)?

You do not have a setting to fade in/out automatically without using flash.

You can NOT build the animation in your XWD web page. 
When you click the animation bar, it opens a NEW XWD window to allow you to build.
You can build the gif/flash with XWD or with XXP.  (I like the text functions of XXP better).
Save the file and export it as either gif or flash. 
Then you insert that back into your XWD page.

I am in the process of making a simple sample with step by step instructions that I will post shortly. 
Takes longer to take the screen prints and type the instructions than if I just built a simple animation.  :D
 
« Last Edit: April 07, 2009, 10:39:27 PM by Samrc »
-Samantha
TNG: "Sometimes, you can make no mistakes, do everything right, and still lose" - Capt Picard to Data
(:turtle: In memory of Turtle: May 22, 1944 - Nov 24, 2007  GURU, mentor, and really nice guy! :turtleleft: )

Offline hidden

  • Sami
  • Administrator
  • Senior Member
  • *****
  • Posts: 5924
  • Not a geek. Just a Nerd.
    • CSB Tutorials
Re: Animations in XWD
« Reply #2 on: April 07, 2009, 10:38:21 PM »
Ok.... Here's a sample and step by step frame by frame animation tutorial made in XWD.
Included a downloadable file you can play with also.

Let me know if I made it clearer or not....

-Samantha
TNG: "Sometimes, you can make no mistakes, do everything right, and still lose" - Capt Picard to Data
(:turtle: In memory of Turtle: May 22, 1944 - Nov 24, 2007  GURU, mentor, and really nice guy! :turtleleft: )

Offline hidden

  • China Tour Guide
  • Global Moderator
  • Senior Member
  • *****
  • Posts: 4741
    • Bushtrack Web Creations
Re: Animations in XWD
« Reply #3 on: April 08, 2009, 12:40:10 AM »
Thanks Sami, you made it perfectly clear. I have got the concept now! Your tutorial is excellent.

Rick
:rick:  Follow me, it's better if we are lost together!

Offline hidden

  • Sami
  • Administrator
  • Senior Member
  • *****
  • Posts: 5924
  • Not a geek. Just a Nerd.
    • CSB Tutorials
Re: Animations in XWD
« Reply #4 on: April 08, 2009, 09:13:12 AM »
Glad you like it and that it was helpful.   :D
-Samantha
TNG: "Sometimes, you can make no mistakes, do everything right, and still lose" - Capt Picard to Data
(:turtle: In memory of Turtle: May 22, 1944 - Nov 24, 2007  GURU, mentor, and really nice guy! :turtleleft: )

Offline hidden

  • China Tour Guide
  • Global Moderator
  • Senior Member
  • *****
  • Posts: 4741
    • Bushtrack Web Creations
Re: Animations in XWD
« Reply #5 on: April 08, 2009, 07:13:38 PM »
Sam, there is one part I have not quite got! When ending, how do you reorder the images to bring the original image in frame 2 to the top in the final 2 frames? The move backwards/forwards is greyed out, so how do you do it?

Rick
:rick:  Follow me, it's better if we are lost together!

Offline hidden

  • China Tour Guide
  • Global Moderator
  • Senior Member
  • *****
  • Posts: 4741
    • Bushtrack Web Creations
Re: Animations in XWD
« Reply #6 on: April 08, 2009, 10:09:52 PM »
I notice "move forwards/backwards" is not greyed out when I select images in your tutorial example. But I have tried twice and in both cases, when I select an image, the "move forward/backward" is greyed out!  :-\
:rick:  Follow me, it's better if we are lost together!

Offline hidden

  • Sami
  • Administrator
  • Senior Member
  • *****
  • Posts: 5924
  • Not a geek. Just a Nerd.
    • CSB Tutorials
Re: Animations in XWD
« Reply #7 on: April 09, 2009, 09:14:10 AM »
First left click the top image to select it. Then Arrange > Put to Back  (Ctrl B in XXP....don't have XWD on the office machine).
Repeat that so you shuffle the images to bring the right picture to the top in that frame.

You can not use the option for moving the image to the back until you have selected the top image.

Quote
I notice "move forwards/backwards" is not greyed out when I select images in your tutorial example. But I have tried twice and in both cases, when I select an image, the "move forward/backward" is greyed out!

Are you saying that in YOUR OWN sample your move is grayed but mine is not?
- You must have the frame you are working on selected in the animation gallery.  Using my sample, frame 7 is where I reorder the images. So to edit that frame it must be selected in the gallery list.
- Nothing in the sample I provided is locked or grouped. Are you using grouping?
- Do you have your top image set to transparent? Try setting your VIEW QUALITY slider DOWN so your image becomes just an outline and try to select the image again.  Using my sample, frame 7 has a resized small mostly transparent image in the center of the animation. When you set the view quality down, you can see that image in the center, outlined by black.  When I make things transparent, I usually make them a TINY BIT smaller (sometimes 2-4 pixels smaller) than the other images so when I set my view quality down I can QUICKLY see that transparent image.  In the example I shared with you, I made my image VERY small because I wanted the effect of pushing the new image forward each time.  Blending in, I would have kept the image ALMOST the same size and made it bleed from transparent to full image.

If you want me to see your file, you can give me a link or email it to me and I will check it out when I get home tonight.
« Last Edit: April 09, 2009, 09:28:18 AM by Samrc »
-Samantha
TNG: "Sometimes, you can make no mistakes, do everything right, and still lose" - Capt Picard to Data
(:turtle: In memory of Turtle: May 22, 1944 - Nov 24, 2007  GURU, mentor, and really nice guy! :turtleleft: )

Offline hidden

  • China Tour Guide
  • Global Moderator
  • Senior Member
  • *****
  • Posts: 4741
    • Bushtrack Web Creations
Re: Animations in XWD
« Reply #8 on: April 09, 2009, 06:37:21 PM »
Hi Sami, thanks for your advice. But nothing I can do allows me to move any images under the Arrange command. I have sent you an email with the file attached and an explanation where I am at.

I would appreciate if you could have a look tonight.
thanks
Rick
:rick:  Follow me, it's better if we are lost together!

Offline hidden

  • Sami
  • Administrator
  • Senior Member
  • *****
  • Posts: 5924
  • Not a geek. Just a Nerd.
    • CSB Tutorials
Re: Animations in XWD
« Reply #9 on: April 09, 2009, 08:35:14 PM »
Ok... The fixed file has been returned in email.  As I mentioned, I promised to explain what happened to your file on the board.

1) In order to MOVE/CHANGE objects (vector graphic or image) you must have named objects.  You got this right.  :clapping:  Each image was properly named on the frame where you inserted it.  Your first image is inserted on Frame 2 and you named it centrelink.

2) You must COPY the frame forward to carry forward the same named object's position.
You ALMOST got this right!   :clapping:  Frame 2 was copied forward to Frame 3.   3 was carried forward to 4, 4 to 5, etc.  So good job.  Along the way, on each of the ODD numbered frames you deleted the previous image from your flash.  It is easier to manage with fewer layers! 

3) Your LOOP requires you to go back to that first image.  You need to carry that image forward during the animation. My tutorial sample left all the layered images in place...I never trimmed out the used images. I had a stack of images. You CAN trim the used images, except for that FIRST image.  That is needed to complete the loop.  You could not change the order/arrangement (grayed out) because you had trimmed that image out too.  You did not have a stack of images to re-order. 

SO....My fix:

1) I deleted frame 3 and above.  Copied frame 2 and built forward, keeping the first image in EVERY FRAME.  I resized it and made it transparent.  You will see that in this image (view quality set to lines only).

Though I trimmed out the other "used" images, this transparent first image remained constant because the frame was copied each time. 
2) To create the loop, I was able to bring that image forward again, and changed the transparency.
3) To replicate YOUR image effect which is different than mine, I copied the frame one extra time (frame 17) and moved it between frame 2 and 3.  This extra frame, set to .01 second.
- without the extra frame, XWD takes 4 seconds to fade the image to frame 3.  Try moving that extra frame to the end and see what happens.  You can drag it back into place.
- with the extra frame, XWD displays the image for 4 seconds and takes .01 second to fade the image.

« Last Edit: April 09, 2009, 08:42:06 PM by Samrc »
-Samantha
TNG: "Sometimes, you can make no mistakes, do everything right, and still lose" - Capt Picard to Data
(:turtle: In memory of Turtle: May 22, 1944 - Nov 24, 2007  GURU, mentor, and really nice guy! :turtleleft: )

Offline hidden

  • China Tour Guide
  • Global Moderator
  • Senior Member
  • *****
  • Posts: 4741
    • Bushtrack Web Creations
Re: Animations in XWD
« Reply #10 on: April 09, 2009, 08:56:15 PM »
Thanks Sami, I received your file. I did make one change, because when I first viewed the flash, it had no fade in. You had set the transparent images to 0.08 seconds instead of 0.8 seconds. It works great, thanks!

Thanks also for the explanation. I do not know how I managed to delete the images you said I deleted. In each case, I clicked "New", added a new image, then "copy" for the next image, etc. Nothing else. I did not consciously delete any images from the flash. So what did I do that deleted the previous image from odd numbered frames? Or, what should I be doing to retain them? How can you see what images are actually contained in each frame?

I am used to using a timeline where everything is visible!

thanks
Rick
:rick:  Follow me, it's better if we are lost together!

Offline hidden

  • Sami
  • Administrator
  • Senior Member
  • *****
  • Posts: 5924
  • Not a geek. Just a Nerd.
    • CSB Tutorials
Re: Animations in XWD
« Reply #11 on: April 09, 2009, 09:49:52 PM »
AH..... You answered your own question...!

Quote
In each case, I clicked "New", added a new image, then "copy" for the next image
That's what you and I did differently.  I click only COPY the frame each time!  This brings the data forward.

If you do not delete what is already there, you just build a stack.
If you delete objects you will not be able to use them again in the flash....so only delete what you won't need.

Quote
You had set the transparent images to 0.08 seconds instead of 0.8 seconds.
:-[  I set my timing to match the file you emailed me, but did not have my glasses on. :oops:
Actually timing is flexible, depending on the effect you want to achieve, fading, blending, spinning, zooming....
Personal choice for the effect YOU want to get.

Quote
How can you see what images are actually contained in each frame?
If you build in XWD, you can't without manually shuffling the images. 
If you build in XXP you have that NAME GALLERY I mentioned in the tutorial.
You can choose to highlight the STACK in a particular frame and have all the names that are in that frame show.
Frame 3 shows 2 of the names are highlighted.

Frame 5 has all 3 images highlighted so ALL of them were in that frame.



I was used to timelines too.  And for some things, it is MUCH better!  Start and stop a function at a different pace than the other functions.  Everything is right in front of you.  No guess.  I have been using Swish family for years (currently have SwishMax2) for flash.  (You can see a SwishMax2 flash of my mother, first item on my family page samisite.com/family.htm with with floating designs that would make screen captures be faulty images.  Have made similar for other websites that want image protection).

But for other things, the XARA method is quite quick and easy!  Easier for these type things once you get used to it.
My first try with Xara Xtreme Pro Animation took me several hours.  Could not wrap my head around the simplistic nature....   Eventually when I used a simple red square to test movement, left right up down, fade in out, etc I finally SAW what they meant!   The XXP and XWD animation does not have the feature list that flash software does.
« Last Edit: April 09, 2009, 10:07:39 PM by Samrc »
-Samantha
TNG: "Sometimes, you can make no mistakes, do everything right, and still lose" - Capt Picard to Data
(:turtle: In memory of Turtle: May 22, 1944 - Nov 24, 2007  GURU, mentor, and really nice guy! :turtleleft: )

Offline hidden

  • China Tour Guide
  • Global Moderator
  • Senior Member
  • *****
  • Posts: 4741
    • Bushtrack Web Creations
Re: Animations in XWD
« Reply #12 on: April 09, 2009, 10:10:28 PM »
Aha! the light came on!  :idea:

I have not tried it yet, but I have got it! So, if I always COPY the frame, then add the new image to it, I will have all the images in every frame! Will this have the effect of bloating the swf file? Is it better to delete the unwanted images in each frame, and just leave the first and last images where possible?

I have XXP but not installed on my laptop - I am away from home at the moment. I will give it a try when I get back in a few weeks.

thanks
Rick
:rick:  Follow me, it's better if we are lost together!

Offline hidden

  • Sami
  • Administrator
  • Senior Member
  • *****
  • Posts: 5924
  • Not a geek. Just a Nerd.
    • CSB Tutorials
Re: Animations in XWD
« Reply #13 on: April 10, 2009, 09:29:47 AM »
I have not compared flash size with and without stacking. But I would not expect much, if any, difference.

Based on how XARA stores the image data, I would expect that once you insert an image and name it, Xara would strip duplicate image data from the file. After all, it is not storing 8 different copies of the same image. The animation is just displaying the same image 8 times.


>>> This comes from the XARA XTREME PRO HELP about flash: 
(Search for FLASH, then on result frame click Photos to read the full help topic)

"The best way to incorporate photos is to use JPEG images as small as you can possibly get away with, and with the maximum compression you can accept.

If you just drop a JPEG file onto the animation and resize it, that does not reduce the size of the JPEG file, it only reduces the dimensions (and thus increases the resolution). Flash is just like Xara Xtreme Pro 4 in this respect; it will embed the original full resolution JPEG image so you can zoom in. So it's easy to estimate the size of any animation containing JPEG photos; it's approximately the sum of the sizes of all the embedded JPEG images (the Bitmap Gallery will show you the size of all embedded photos or bitmaps).

When tweening bitmaps or photos, only one copy of the bitmap is stored in the Flash file, so you can perform transformations of the bitmap with little overhead. In other words, just because the bitmap appears on frames 1, 2 and 3 of your animation, this does not mean three copies of the bitmap are embedded in the Flash file."



« Last Edit: April 10, 2009, 09:37:02 AM by Samrc »
-Samantha
TNG: "Sometimes, you can make no mistakes, do everything right, and still lose" - Capt Picard to Data
(:turtle: In memory of Turtle: May 22, 1944 - Nov 24, 2007  GURU, mentor, and really nice guy! :turtleleft: )

Offline hidden

  • China Tour Guide
  • Global Moderator
  • Senior Member
  • *****
  • Posts: 4741
    • Bushtrack Web Creations
Re: Animations in XWD
« Reply #14 on: April 10, 2009, 05:35:37 PM »
Thanks Sami, understood. Good explanation. Thanks for all your help with this. While the Xara Forum is also good, nothing beats the tutorials from Samisite Forum! 
:thankyousign:

By the way, I should learn to read more carefully! In your tutorial, you clearly instructed to COPY to get the next frame with the new image, but I used NEW! 
:oops:
« Last Edit: April 10, 2009, 05:40:58 PM by rickasaurus »
:rick:  Follow me, it's better if we are lost together!

Offline hidden

  • Sami
  • Administrator
  • Senior Member
  • *****
  • Posts: 5924
  • Not a geek. Just a Nerd.
    • CSB Tutorials
Re: Animations in XWD
« Reply #15 on: April 10, 2009, 10:41:39 PM »
Quote
While the Xara Forum is also good, nothing beats the tutorials from Samisite Forum!

You are sweet!
I updated the tutorial. Added/tweaked info re name gallery and other notes based on our discussions. Thanks for the input. Might help someone else too.

Ironically, at the bottom of your fade in/out thread on the Xara Forum I posted for assistance with that XWD tutorial made in XWD. So far, no response 36+ hours! Guess there is no answer... or I am being ignored. Maybe I ticked someone off?   ???   :-\  Ah Well I figured out the problem! 

I want to THANK YOU RICK.  While building that tutorial, I learned more about XWD.

I need that forum for advice.  I have used XXP for a long time now and LOVE the product, enjoy it more and more as I use it.  Though I have designed multiple product packaging for my daytime employer (40# and 50# bags and boxes), catalog binder, counter display mat, brochures, ads and many other "professional pieces" with XXP, feel like a novice most of the time, especially when I look at what others do with it!   

But for silly, fun projects, XXP is a JOY! Today I took our trowel guy mascot and gave him a bunny outfit for Easter in XXP. (His normal look, on right, appears on the site on the contact page.  And for years, I have tweaked him for baby new year, cupid, leprechaun, vampire, uncle sam, a pilgrim, santa claus, etc for the holidays.  Even put him in fatigues for the military!)
         

I am hoping they resolve the XWD issues (menu builder, ftp storage, etc) so I can use this for some of the sites!  I am akward with the program, and stumble a lot, but I think long-term, I might get quite a bit of use from it!

Quote
By the way, I should learn to read more carefully!
rofl   Not a problem here.
Despite my timing (.08 instead of .8 seconds) and your NEW, we still ended up with a working animation.
We make a good team!





« Last Edit: April 11, 2009, 10:49:04 AM by Samrc »
-Samantha
TNG: "Sometimes, you can make no mistakes, do everything right, and still lose" - Capt Picard to Data
(:turtle: In memory of Turtle: May 22, 1944 - Nov 24, 2007  GURU, mentor, and really nice guy! :turtleleft: )

Offline hidden

  • China Tour Guide
  • Global Moderator
  • Senior Member
  • *****
  • Posts: 4741
    • Bushtrack Web Creations
Re: Animations in XWD
« Reply #16 on: April 11, 2009, 04:52:14 PM »
Thanks again Sami for all your help on this. Since I posted here, I had not gone back to see those additional posts in Xara Forum. Anyhow, your tutorial did the trick!

I imagine your special page (with the beautiful header - great graphics!) specifically for XWD on Samisite.com may have ticked them off a little!

I am using XWD quite a lot now, I like it! I get around the menu issue by creating in Webstyle and importing with "Insert HTML"! And I use separate FTP for publishing. That is still an issue, because you cannot simply upload changes. XWD can reconfigure the image numbers when you make a change, and there is no way of knowing that. It is too much hassle to use every image as a placeholder and substitue with named images. I hope they change that aspect, although we lived with it in CSB a long time! The big difference is, CSB was so advanced, in publishing only the changes. It is still a mystery to me how Xara paid so little attention to the publishing aspects. I guess they are primarily interested in the graphics and forgot the publishing part, an afterthought.

Anyway, I like XWD and if they can resolve the menu and publishing issues it will be great.

thanks again
Rick
:rick:  Follow me, it's better if we are lost together!

Offline hidden

  • Sami
  • Administrator
  • Senior Member
  • *****
  • Posts: 5924
  • Not a geek. Just a Nerd.
    • CSB Tutorials
Re: Animations in XWD
« Reply #17 on: April 11, 2009, 05:10:15 PM »
Quote
I imagine your special page (with the beautiful header - great graphics!) specifically for XWD on Samisite.com may have ticked them off a little! 
Thanks. I was pleased with the graphics...fun to play with them. Making dragonflies with the limited drawing ability of XWD was a challenge!  Still working out bugs re a standardized set of Samisite templates. Want to make them easily changeable components.

Many others have posted XWD and XXP tutorials, some even on YOUTUBE.  I prefer to think they thought your issue was closed and required no further assistance because a couple folks gave you links to tutorials.  Course, they might have thought that mine was not needed since they had already covered the issue in other tutorials so why fix my page.   :-\

I am using my FTP program to upload pages/files. I set my ORDER to MODIFIED date.
Then choose only the files with latest modified dates.

Quote
XWD can reconfigure the image numbers when you make a change
Thanks for the tip about the image names changing...had not noticed that!  I don't care that XWD renames images. I like that about CSB (keeps google from listing MY images on their site for others to use!).  But CSB doesn't reorder them.  If abcde4fgh.jpg was assigned, that image remained that identifier.


« Last Edit: April 11, 2009, 05:20:07 PM by Samrc »
-Samantha
TNG: "Sometimes, you can make no mistakes, do everything right, and still lose" - Capt Picard to Data
(:turtle: In memory of Turtle: May 22, 1944 - Nov 24, 2007  GURU, mentor, and really nice guy! :turtleleft: )