Skip to main content
S
sigur_rosser
Inspiring
December 14, 2016
Question

Scroll an image up across slides...

  • December 14, 2016
  • 2 replies
  • 417 views

I was wondering if anyone has any advice to accomplish this scenario.  I want an image (a tall diagram) to be present across a series of slides.  The image will be placed on the first slide.  Each time I advance to the next slide, I want the image to scroll straight up from it's current position to a new position, approximately 100 pixels (Y position decremented).  I'd like it as smooth as possible.  This will be repeated over and over until the final slide.  If it matters, each slide will have an unique instance of the scrolling text interaction.

I'm just now cracking the manual on the effects available in Cp9.  Any suggestions would be greatly appreciated.

thanks

    This topic has been closed for replies.

    2 replies

    TLCMediaDesign
    TLCMediaDesign
    Inspiring
    December 15, 2016

    I'm thinking this would be  fairly simple by creating an html page with the image. Set up event listeners to know when captivate changes slide and animate the image using jQuery. Zip the html page and insert as an html5 animation.

    I don't have time to give you the code right now, but should be able to work it out soon if you do not know the scripts that would be needed.

    What size is the image and what is the increment in pixels that it need to scroll?

    S
    StevePixel
    Inspiring
    December 15, 2016

    Hi Eric,

    Totally doable, I would use a custom motion path either timed to play on enter or use an advanced action to delay it for a set number of seconds after slide "Enter"

    Cheers

    Steve

    Lilybiri
    Lilybiri
    Legend
    December 15, 2016

    Steve, did you try out your suggestion? I don't think it will be that easy, will try to explain :

    • It is indeed perfectly possible to create a custom movement effect with exactly the required distance, either using rulers and snapping to them for the points of the motion path, or by editing the XML describing the effect.
    • The OP didn't tell how big that image is, which can cause issues because the scratch area (outside of the stage) is limited: will it be possible to add the whole image, with the biggest part outside of the stage?
    • If you thought to apply 'Timed for the Rest of the Project', you have to know that the effect applied on the first slide will be repeated on each following slide, which means the image will not continue to scroll.
    • User points to the scrolling text interaction, wat is the link with the image/diagram?
    • I would not recommend using Delay actions to keep everything on the same slide, (and apply the motion effect again) since each slide needs another Scrolling Text Interaction (probably for explaining) and it is very difficult to estimate the correct amount of time needed by the learner. With a slide-based approach, the control can be given to the learner. BTW: it is possible to change the content in a Scrolling Text interaction by controlling the value of the associated variable, but at this moment that feature only works for SWF output. I have logged a feature request to extend it to HTML output.
    • OP didn't specify if the learner will be able to return to the slides? Is it necessary to reset the effects (which is already a challenge).

    I suspect that the diagram will have to be cut in parts. A different image will be needed on each slide, with a unique motion effect. That partial image will need  If all images have exact the same size, which will be bigger than the stage, it is easy to apply the same location for them. Must confess that I didn't create a sample project (yet), to see if the movement is smooth with this scenario.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices