Page transitions in Lectora 16

mnotermans5114 Community Member Posts: 916
Ok we got page transitions in Lectora 16.
But i do think there are just little page transitions available.. Box, Split Horizontal/Vertical, Strips and Wipe. I do miss a smooth fadeIn and fadeOut.

And even more important...i want the pages to crossfade. Next page showing when the current page fades out. Ok, i know... not that easy...but i like being on the edge ;-)

So i am thinking of creating a setup that does this.

- Setup a title on 1 page, with all repeating elements in place so i dont need to bother with them
- Create content in a separate awt, that will be loaded inside the first title. ( mmmmm... might need a awt for each page..not very wise.. well thinking aloud ;)
- If i have the page to be shown loaded somewhere/somehow.. i can grab an image both of the previous page and the next page. Fade those either with JQuery or whatever.. and then when the new page is available fade out the image of the old page ontop..

Ok, i know... a bit fuzzy..

Anyone knows a better solution ?


  • jvalley4735
    jvalley4735 Community Member Posts: 1,357
    I added your suggestion to our queue to improve the fade in and fade out functionality and to add a crossfade :)

    What about a jquery crossfade ?
    <span class="tag"><html></span>    
       <span class="tag"><head></span>
       <span class="tag"><script</span> <span class="atn">src</span><span class="pun">=</span><span class="atv">""</span><span class="tag">></script></span>
       <span class="tag"><script</span> <span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="tag">></span><span class="pln">
          $</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">()</span> <span class="pun">{</span><span class="pln">
                $</span><span class="pun">(</span><span class="str">'#test'</span><span class="pun">).</span><span class="pln">fadeOut</span><span class="pun">(</span><span class="lit">2000</span><span class="pun">);</span><span class="pln">
                $</span><span class="pun">(</span><span class="str">'#test1'</span><span class="pun">).</span><span class="pln">fadeIn</span><span class="pun">(</span><span class="lit">2000</span><span class="pun">);</span>
          <span class="pun">});</span>
        <span class="tag"></script></span>
        <span class="tag"><style></span><span class="pln">
           h1 </span><span class="pun">{</span><span class="kwd">font-size</span><span class="pun">:</span><span class="lit">12em</span><span class="pun">;</span><span class="kwd">position</span><span class="pun">:</span><span class="pln">absolute</span><span class="pun">;</span> <span class="kwd">left</span><span class="pun">:</span><span class="lit">0</span><span class="pun">;</span><span class="kwd">top</span><span class="pun">:</span><span class="lit">0</span><span class="pun">}</span>
           <span class="pun">#</span><span class="pln">test1 </span><span class="pun">{</span><span class="kwd">display</span><span class="pun">:</span><span class="pln">none</span><span class="pun">}</span>
        <span class="tag"></style></span>
        <span class="tag"></head></span>
        <span class="tag"><body></span>
           <span class="tag"><h1</span> <span class="atn">id</span><span class="pun">=</span><span class="atv">"test"</span><span class="tag">></span><span class="pln">A</span><span class="tag"></h1></span> 
           <span class="tag"><h1</span> <span class="atn">id</span><span class="pun">=</span><span class="atv">"test1"</span><span class="tag">></span><span class="pln">B</span><span class="tag"></h1></span>
        <span class="tag"></body></span>
        <span class="tag"></html></span>
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    Hi Jenny,

    Yeah with 2 elements on the same page, indeed a perfect solution.
    But thats the problem..its the next page you want to crossfade with... well i do ;-)

    Thought about making a big one page monster in which the user zooms/fades/tweens from page A to page B when he clicks next. Would work, but makes maintenance for other developers a nightmare.

    I now have a project in which the original course allready was done in Flash... and it needs to look as much as possible as that... well those page-transitions is the only left bottleneck ;-)
  • npowell9105
    npowell9105 Community Member Posts: 12
    I miss this feature too, Math... When I first started in the eLearning industry the company I worked for used a little know product called Knowledge Presenter. It was terribly slow and only had one undo!! BUT.... it's page transitions from one to the next and back were perfectly smooth. I believe it had a 'load 5 pages' option or something like that. The is was almost 10 years ago! So there's no doubt the ability to do is around! I think it's the one solid thing I don't like about Lectora, the choppy changes from screen to screen.

    I wonder if JSON in the backend would solve this age old issue...

    I also think it's one of the reasons people like captivate products.... (I'll wash my mouth out now!).


    My two cents.


    Nick :)
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    Im not sure about how Captivate does this, but Articulate Storyline2, which has perfect page transitions too, uses Flash... well i do think that is a no-go... i developed a lot in Flash in the past, and really loved it back then, but well for now its a obsolete route im afraid. I did enhance the sample i use above... will upload that to show...

    Kind regards,

  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    Added a working setup as explained before. Nice looking transitions between pages, but not to easy to setup.
    Anyone that has a project and needs help with a setup like this, let me know and i help.
  • srangan-3520
    srangan-3520 Community Member Posts: 8
    How do I add transitions to individual pages in Lectora 18. Right now, when I apply a transition to page, it gets applied across all pages. Any solution? And why Lectora has such few transition effects? I am pretty new to Lectora.
  • carlfink
    carlfink Community Member Posts: 968 ✭ Legend ✭
    1. In the Title Explorer (the left pane of the design window), select the page.
    2. Switch to the Properties tab of the Ribbon.
    3. Click Page in the Transition section.
    4. Click the dropdown and select a transition type.
    5. Repeat for other pages.
    Why does Lectora have few transitions? I assume because not very many customers have asked for more. You should request it from them, if transitions are important to you.