Welcome to TalkGraphics.com
Results 1 to 9 of 9
  1. #1
    Join Date
    Sep 2013
    Location
    La Malbaie, Canada
    Posts
    671

    Default Presentation - reverse reveal animation

    Hi,

    I'm working on a presentation and I want to have parts of a photo zoom in. I created an image for the part with a border. No problem getting the image to zoom/fade-in upon using the right arrow. What I want is for the image to unreveal (disappear using the reverse of the zoom/fade-in) upon pressing the next right arrow. Is there any way to do this?

    The only way that I found was to duplicate the Presentation step with the background photo as the next step.

    Thanks,
    John CB
    John CB
    Xara DPX(19.0.0.64291)

  2. #2
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    40,936

    Default Re: Presentation - reverse reveal animation

    Try a rectangle the same color as the background and covering the photo and have it fade in. The effect will be the photo fading out.
    Gary W. Priester
    Mr. Moderator Emeritus Dude
    , Sir

    gwpriester.com | eyetricks-3d-stereograms.com | eyeTricks on Facebook






  3. #3
    Join Date
    Sep 2013
    Location
    La Malbaie, Canada
    Posts
    671

    Default Re: Presentation - reverse reveal animation

    Hi Gary,
    Thanks for taking a look.

    This image should help:
    Click image for larger version. 

Name:	Xara presentation reveal1.jpg 
Views:	13 
Size:	55.0 KB 
ID:	133032

    Step 2 reveals the image with the circle - it zooms in (Zoom/fade in effect). I just want it to zoom back out like it came in. As I indicated and as per what you said, I simply made step 3 the rectangular image re-reveal either instantly or fading in. But that is not what I'm looking for. I want step 3 to take the revealed image back out, the same way that it came in. If this were a fly-in, I would want it to fly back out the same way that it came in. Making the background reveal as Step 3 would not make the circular image fly back out.

    It seems that Xara is missing a "reverse" option, or am I missing something here?

    Edit: I should point out that the image above doesn't include what is outside of it, like text. The presentation window is larger.

    Thanks,
    John CB
    Xara DPX(19.0.0.64291)

  4. #4
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    16,119

    Default Re: Presentation - reverse reveal animation

    John, Xara has failed to provide anytime like this.
    I have done it with CSS and anime.js.

    Here is a Xara approach that might work for you: Xara - Contoured Step in Presentation.xar

    I used a Contour to cover the pervious Line.
    It is not a Fade Out but it does perform a web animation that is not unpleasant. To me, at least.

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPXv18 , XWDPv12/v15, XPGDv10, X3D7, Xara Xtreme 5, and others back through time (to CC's Artworks).
    Technical remediation and consultancy for your web designs. TG Nuggets you might like. Report faults: Magix; Xara Cloud+/Pro+

  5. #5
    Join Date
    Sep 2013
    Location
    La Malbaie, Canada
    Posts
    671

    Default Re: Presentation - reverse reveal animation

    Hi Acorn,

    For my purpose, your solution is about the same as just bringing back the underlaying photo.

    The equivalent in PowerPoint that I'm looking for is "Exit." There is also "Entrance" and "Emphasis." There is no emphasis or exit in Xara. Strange.

    Thanks,
    John CB
    John CB
    Xara DPX(19.0.0.64291)

  6. #6
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    16,119

    Default Re: Presentation - reverse reveal animation

    John, it's not strange. Xara's approach of web animation fails, in most cases, to handle Exits. I did a full cover of CSS and mouse out effects to overcome this but handling keypresses is at a different level. I'll have another look.

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPXv18 , XWDPv12/v15, XPGDv10, X3D7, Xara Xtreme 5, and others back through time (to CC's Artworks).
    Technical remediation and consultancy for your web designs. TG Nuggets you might like. Report faults: Magix; Xara Cloud+/Pro+

  7. #7
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    16,119

    Default Re: Presentation - reverse reveal animation

    John, I gave my shape below a Name of htmlclass="box".

    In the Page Body, I added jQuery:
    Code:
    <script>
    $(document).keydown(function(e) {
      if (e.which == '39') { //right arrow key
        $(".box:visible").finish().css('transition', 'transform 2s ease-in-out').css('transform','scale(0.05)');
      }
    });
    </script>
    In your presentation on a right arrow press, the box shape will take 2 seconds to shrink down to 1/20 of its size.
    Clearly you could set the scale to zero or just fade it away with $(".box:visible").finish().fadeOut(2000);

    A simple test of the first: jQuery Shrink Away - Presentation Step.xar

    It probably needs a Down Arrow (40) inclusion.

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPXv18 , XWDPv12/v15, XPGDv10, X3D7, Xara Xtreme 5, and others back through time (to CC's Artworks).
    Technical remediation and consultancy for your web designs. TG Nuggets you might like. Report faults: Magix; Xara Cloud+/Pro+

  8. #8
    Join Date
    Sep 2013
    Location
    La Malbaie, Canada
    Posts
    671

    Default Re: Presentation - reverse reveal animation

    Hi Acorn,

    Thank you very much for that. I didn't understand anything...then I played with it and was able to make the green box disappear and a new yellow one appear and disappear. That is what I was looking for!

    In the meantime, instead of Xara, I've been using PowerPoint as it's more suitable for the intended end use, and my wife is doing the presentation.

    I will need this trick for future Xara presentations, however.

    Xara has been very useful, as my wife wants the faces in some photos to expand to a zoomed-in image with a light border. Thank goodness for Clipview and LiveCopy.

    Magix Movie Studio/Video Pro Travel Maps wizard has also been useful as she wants a map with an animated line and arrowhead going along some streets.

    I'll post parts of the finished product in this thread in a day or so.

    We do have some great tools!
    John CB
    Xara DPX(19.0.0.64291)

  9. #9
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    16,119

    Default Re: Presentation - reverse reveal animation

    Quote Originally Posted by browj2 View Post
    Magix Movie Studio/Video Pro Travel Maps wizard has also been useful as she wants a map with an animated line and arrowhead going along some streets.
    John, @Egg demonstrated such an action with my use of anime.js, SVG line drawing, https://www.talkgraphics.com/showthr...s-Line-Drawing. His demo: https://www.parkeston.com/tg/.

    To animate the arrowhead, I would run it with a motion path, https://www.talkgraphics.com/showthr...Path-Animation.

    That all said, does XDPXv19 have SVG rendering yet?

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPXv18 , XWDPv12/v15, XPGDv10, X3D7, Xara Xtreme 5, and others back through time (to CC's Artworks).
    Technical remediation and consultancy for your web designs. TG Nuggets you might like. Report faults: Magix; Xara Cloud+/Pro+

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •