Explore the community Forums Lectora Lectora Questions & Answers Animate HTML5 animations inserted via Web Window

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #409845 Score: 0
    Profile photo of John Martin
    John Martin
    Member
    beginner
    intermediate
    picture perfect
    friend finder
    curious george
    wise owl
    contributor
    profile
    @jmartin9501

    I have several older courses authored in Lectora but that had Flash animations.  I am going through and “redoing” the Flashes in Animate (Flash Canvas) so they have an HTML5 output (and not .swf)  and then reinserting them into Lectora using the “Web Window” feature, republishing and loading onto our SABA LMS test server.

    I’ve been successful for awhile, but on my last two conversions, those pages that have these animations loaded via Web Window are not only taking a long time to load (elements come in in phases) but the action on the next button is also delaying.  (I click the next button and the page doesn’t turn for 15-20 seconds, regardless of if the animation is still playing or finished.)

    I have access to both Inspire and Publisher and have tried with outputs from each but with the same result.

    Unfortunately, sharing files is not an option.  Just hoping for some direction on where to go.
    There is not a whole lot out there about Animate Flash (Canvas) HTML5 …just lots of stuff on ActionScript2 from 2005.

     

    #409877 Score: 0
    Profile photo of Jennifer Valley
    Jennifer Valley
    Member
    contributor
    beginner
    friend finder
    advanced
    lectora beginner
    verified member
    wise owl
    profile
    picture perfect
    curious george
    113 pts
    @jvalley4735

    What about moving the objects to the title level initially hidden so they are pre-loaded.  Then on the show of the page show the web window.

    I think JS might be helpful but I’m not well versed. Maybe @mnotermans5114 might know

    #409903 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
    106 pts
    @mnotermans5114

    Actually untill now i use Javascript HTML5 animation with GSAP straight in Lectora.. so i only need to know a selector for HTML objects to get an animation working. In Lectora 17 and with Seamless Play active i do notice its tougher to get the proper object selected…so that might hinder your workflow too.

    In fact i did animate a lot with Adobe Flash in the past, and was thinking about starting to reuse that workflow again with Animate like you @jmartin9501 do. Especially because my workflow animating with JS in GSAP directly is sometimes complicated, especially for less experienced JS-developers. So this sounds like a great testcase for me to sharpen my skills on that part.

    So if i read correctly… your workflow did work properly before…but not anymore ?

    Did you test older Animate animations to see whether its related to updates in Lectora ?
    Is your implementation in Lectora the same as before ?

    I would love to help by checking the workflow and samples…as you mention a shared file is not an option…

    Could you remake simple variants? One showing it working properly, one showing the issue at hand?
    That for sure would help… else i would need to build samples myself first…

    Kind regards,
    Math

    #409938 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
    106 pts
    @mnotermans5114

    One thing that is of BIG influence is…did you make the Adobe Animate content in Edge Animate ( then its DOM based ) or in Animate CC ( then it will be Canvas based ). Difference will have impact for sure.
    As i read your original post… thats probably the issue at hand. Animate CC is Canvas based so you for sure will have to change scope of your scripts somewhat to target the objects in your Animate animations.

    #409945 Score: 0
    Profile photo of John Martin
    John Martin
    Member
    beginner
    intermediate
    picture perfect
    friend finder
    curious george
    wise owl
    contributor
    profile
    @jmartin9501

    I oversee several courses that were originally built in Dreamweaver (I think) and had flash used throughout.  I pulled them into Lectora and converted the flashes from AS2 to AS3 using the same setup. I have made revisions, republishing in the latest Lectora throughout the years.  Recently, I have converted the AS3 Flash (swf) to HTML (Canvas CC) –something I had to figure out how to do. Again not much out there.

    I have inserted the animations the same way in all of them.  Insert –> Web Window –> Local Web Based content (added .html) and checked “Include all files and subfolders”.  The first ones worked fine; some slides loaded a little slower. I guess I can understand some of the bigger animations taking awhile to load but now they all do.  AND, my next button is now affected (and wasn’t before).

    A co-worker was wondering if something may be running (looping) in the background and eventually gives up on trying to do it.

    I think I am going to give Jennifer’s suggestion a try.

    #409970 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
    106 pts
    @mnotermans5114

    Yeah preloading always good. CreateJS/EaselJs, the Javascript engine used by Animate CC has also a preload library. Although im not sure whether you can use that one. Basically Jennys idea of putting the assets on title level to let Lectora preload it might suffice. Would love to know if and how we can make use of the preloading in Lectora..
    I cant imagine, especially with Seamless Play there isnot a builtin function for preloading… Joe ? @wheels

    #409985 Score: 0
    Profile photo of John Martin
    John Martin
    Member
    beginner
    intermediate
    picture perfect
    friend finder
    curious george
    wise owl
    contributor
    profile
    @jmartin9501

    I tried moving two of my webwidgets up into the course level as Jennifer suggested.  I moved one that was pointing to a Flash Canvas/HTML Animation and one that was pointing to a video in our video server.  I made them both invisible and put actions to show/hide when they got to/left the intended page.

    While the animation and the video viewer did not appear until the correct page, the audio on the animation played on every slide up to its rightful page.  The page would partially load, play the page 9 animation audio, then finish loading and then play the page.

    Math, I was just starting to question if the createjs-2015.11.26.min.js that generates when you uncheck hosted libraries in Animate under Advanced JavaScript options was perhaps the culprit.  That was something I have recently started to do differently since some of my learners do not have internet access on the machines they use to take my training.  Leaving it checked does not create this .js and the page with animation goes out to the internet to get the .js  (which BTW cutting and pasting the code into a Word document at 11pt is 63 pages long).

    I deleted the createjs-2015.11.26.min.js from the webwin folder of one of the  pages; it did not change how that page performed.

    🙁

     

    #409995 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
    106 pts
    @mnotermans5114

    Just made a quick sample…without a lot of animation…to check whether i can get Animate CC content working in Lectora ( in my case Lectora Online because i use that one most nowadays ). Well all three scenarios i could think of implementing Animate CC content works perfectly.
    The 3 ways i added it to Lectora are:
    1) using HTMLextension, Other -> content in iframe with https
    2) using Webwindow with a https URL
    3) using Webwindow with local content (and attaching needed files)

    All three work well…
    Onto the next step… triggering/targeting elements inside the Animate CC content from within Lectora

    #410530 Score: 0
    Profile photo of John Martin
    John Martin
    Member
    beginner
    intermediate
    picture perfect
    friend finder
    curious george
    wise owl
    contributor
    profile
    @jmartin9501

    Interesting… I have another course that is also loading pages slowly that have HTML5 animations.

    With one slide, for example, when I play it from my browser it takes 6.8 seconds to load and play but when I play it from our SABA LMS Test server, it takes 21 seconds to load.

    #410535 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
    106 pts
    @mnotermans5114

    I dont like SABA, when i worked with it everything was slow…ok that was version X10… but i didnot like SABA

    #410552 Score: 0
    Profile photo of John Martin
    John Martin
    Member
    beginner
    intermediate
    picture perfect
    friend finder
    curious george
    wise owl
    contributor
    profile
    @jmartin9501

    Curiouser and curiouser…
    When played in IE on our SABA LMS, that slide takes 20 secs.
    When played in Chrome or Edge, it only takes the 6.8 seconds.

    #412312 Score: 0
    Profile photo of John Martin
    John Martin
    Member
    beginner
    intermediate
    picture perfect
    friend finder
    curious george
    wise owl
    contributor
    profile
    @jmartin9501

    UPDATE
    I had inserted a text box that said “This Page Loads Slowly” and had set it to transition out after 30 seconds (the typical longest time it would take for the animation or video player to appear).

    When I deleted this text box, the elements still took awhile to appear but at least my next button now responds right away again.

    #412372 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
    106 pts
    @mnotermans5114

    Very weird. You might wanna remove all ( if any still in ) Lectora transitions from page-elements and check that. If thats causing it, you can opt for Javascript-based transitions. I use GSAP all the time to fade elements in and out. Also made a setup for page-transitions ( semi seamless play ) where i put all page-elements in a container and fade that container in and out on next/previous page actions.

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

You must be logged in to reply to this topic.