Skip to main content
A
Anonymous
March 6, 2017
Answered

Adding a custom animation

  • March 6, 2017
  • 2 replies
  • 271 views

I am looking to add a custom animation to my eLearning game. Take a look at the image I have attached. Throughout this eLearning game, I want the student to be able to track their progress through the lesson map. For example, is there a way I can add an animation that draws a line from one of the X's on the map, curves through the dotted lines on the picture until it reaches the next X on the map. If this is not possible, what is the closest alternative to an idea like mine?

 

 

blog

    This topic has been closed for replies.
    Correct answer TLCMediaDesign

    The easiest, although not exactly what you want is to have multiple images with the paths drawn and animate their opacity to show the images in the exact same place. Would be fairly simple with object states..

    Animating the line segments could be done also but you would need a bunch of x,y starting and ending points to draw the line with SVG and animate their opacity. It would take some serious JavaScripting.

    2 replies

    Lilybiri
    Lilybiri
    Legend
    March 6, 2017

    To have a different drawn path for each success is not so much a problem with multistates, but to see it 'drawn' as animation will need a lot of work because you'll have to create the curved motion paths and the only help you can get is from guides. A small dot could follow the curved paths.

    I have a very simple example with multistates for progress in a quiz (without animation) in this blog post:

    Playing with Numbers - part 1 - Captivate blog

    Joseph Ganci
    Joseph Ganci
    Inspiring
    March 7, 2017

    Agreed. The easiest way to do this that comes close is to animate a dot or little pirate along the path and then when it reaches the next X use an alpha effect to bring in the line, or change object state to one where the line is drawn.

    TLCMediaDesign
    TLCMediaDesignCorrect answer
    Inspiring
    March 6, 2017

    The easiest, although not exactly what you want is to have multiple images with the paths drawn and animate their opacity to show the images in the exact same place. Would be fairly simple with object states..

    Animating the line segments could be done also but you would need a bunch of x,y starting and ending points to draw the line with SVG and animate their opacity. It would take some serious JavaScripting.

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