Explore the community Forums Lectora Lectora Questions & Answers Transition Timing on a Click to Reveal

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #351360 Score: 0
    Profile photo of Ben Haizlip
    Ben Haizlip
    Member
    beginner
    intermediate
    wise owl
    curious george
    contributor
    @bhaizlip9268

    Hi all.  I’m in serious need of some help please.  I’m currently building a 3 item click to reveal text in version 16.2.2.  Reveal 1 has a table and as my first head talks about something, a rectangle appears on a delay, then the next head’s speech bubble, then another rectangle, then finally 2 arrows and a third rectangle.  I had it timed and set up to run very nicely, but here’s my problem.  If my learner exits out of my Reveal_1 before all the transitions have run, then they STILL run, but on the “home” page (not the reveal page) and it makes no sense because you’ve got boxes and arrows appearing over an image.  I’ve tried not using transitions and using actions with a delay.  I’ve tried placing those actions on the objects themselves, as well as placing the actions on the background image in the Reveal_1 screen.  I’ve tried putting the actions in the click too.  I’ve tried on mouse click, I’ve tried on show, and I’ve tried on page show.  Nothing seems to be working for me.  I love how transitions let me regulate the flow of information on a screen, but this is a headache.  Who can help me out?

    #351376 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    147 pts
    @Klaatu

    Can you post the file?

    #351402 Score: 1
    Profile photo of Tim K
    Tim K
    Member
    contributor
    beginner
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    wise owl
    curious george
    Group Member
    209 pts
    @timk

    I never understood why you can add a delay to a transition… I’d advise to use delays for actions only, as it’s easier to control.

    You need a variable to know which of the three buttons has been clicked, i.e. which of your animations is running.

    Create a variable called e.g. “path”, initial value = 0.

    Add an action to each of your buttons:

    On: Click
    Action: Modify variable
    Target: path
    Type: Set equal to
    Value: 1 (for Button 1), 2 (for Button 2), 3 (for Button 3)

    Now you know which of the buttons has been clicked.

    Change your animation to not run on click of the button, but the next step to be run when the previous has been done, and add conditions:

    Only if “path” Is equal to “1” for button 1 etc.

    Tim

    This post has received 1 vote up.
    #351413 Score: 0
    Profile photo of Ben Haizlip
    Ben Haizlip
    Member
    beginner
    intermediate
    wise owl
    curious george
    contributor
    @bhaizlip9268

    Darrell,

    Sorry.  I finally got frustrated and just did away with the click to reveal aspect of the screen and made it a few individual screens.  Now that I see Tim’s post below yours though I may give it another try.  I appreciate you being willing to help!  Thanks.

    #351419 Score: 1
    Profile photo of Tim K
    Tim K
    Member
    contributor
    beginner
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    wise owl
    curious george
    Group Member
    209 pts
    @timk

    Hm, I wasn’t able to edit or delete my previous post and I thought this was easier. I attached a working sample although it’s only partly similar to my description….

    Mind, it would be easier without transitions.

    This post has received 1 vote up.
    Attachments:
    1. Title-1-4.zip
    #351447 Score: 0
    Profile photo of Ben Haizlip
    Ben Haizlip
    Member
    beginner
    intermediate
    wise owl
    curious george
    contributor
    @bhaizlip9268

    Tim,

    Your sample title is awesome.  Thank you so much for that.  I’m just going over it trying to understand it, and am going to show it to our programmer tomorrow and see if it can be made into a template for our courses.

     
    Thanks again!

    #351476 Score: 0
    Profile photo of Tim K
    Tim K
    Member
    contributor
    beginner
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    wise owl
    curious george
    Group Member
    209 pts
    @timk

    The important thing is to understand the sequence in that the actions and effects are executed. If you have an action with a delay to show an object with a transition (that has a delay) the sequence is:

    Action is executed -> Action Delay -> Action is run (Show) -> Transition Delay -> Transition is run -> Object is visible

    When you have three actions on a button to show three objects with different delays, all of these actions are “executed” (in my above definition) immediately when the button is clicked, i.e. the delay is initialized. You can’t interrupt this sequence once an action “is executed”.

    In my sample I’m using action groups to split up the sequence. Once a button has been clicked there’s no way to prevent Running the action groups. But the actions in the group make a new sequence. These actions have no delay and are dependent on a variable. If you click Button 1, action group B1_S3 will be run 4.5 seconds later. The action is the group is “executed” immediately, but it is not “run” if “path” has been changed by clicking another button.

    A problem that comes with transitions is the step “Transition is run”. It takes a while to complete the transition and from a technical perspective the object is “hidden” until the transition has been finished. An action to hide the object that is currently fading in has no effect, as (again technically) it is still hidden. That’s why there are so many “Hide” actions in the groups.

    #351503 Score: 0
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    67 pts
    @mnotermans5114

    Allthough Tim’s description works perfect and is indeed a great solution to get ‘sequences’ with timing like this done inside Lectora, i tend to use GSAP and especially TimelineMax for it. With the use of TimelineMax in GSAP you can setup any sort of sequence or timeline and easily ( well all is done in Javascript, so easy depends on your knowledge of Javascript ) change either timing, delays, pause…even play the whole sequence backwards.
    For education use i will make a sample showing the use of TimelineMax.

    ~Math

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.