Explore the community Forums Lectora Lectora Questions & Answers Group transition not working on video?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #351187 Score: 0
    Profile photo of Dave Rigley
    Dave Rigley
    Member
    friend finder
    beginner
    intermediate
    @drigley6122

    Since page transitions aren’t giving the desired effect(we only want part of a page fading in and out) I’m using group transitions to keep my work simple. I’ve grouped a mix of text, images, buttons and a video and everything fades in and out as expected, except for the video. Video remains hidden but still auto plays and responds to mouseclicks as expected. If I take the video out of the group it works as normal but I can’t put a fade transition on it anymore.

    For now I have a workaround of a white rectangle fading out/in overtop of the video and it works fine because we have a white background for this project, but I’m concerned about how to handle this issue in the future.

    I’m on version 17.0.1

    Any advice would be appreciated.

    I’ve done some searching on the forums here and Google in general but haven’t seen anything that answers this question. If I missed something obvious, sorry, I’m new and still learning the terms 🙂

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

    Using Javascript you can tween/fade in or out groups. I prefer GSAP and since another question on the community was about targeting pageelements with GSAP in version 17 with seamless play on, making a sample showing solutions for both.

    An older sample showing how you can target a group with Javascript you can see here:

    Target groups with Javascript

    Regards,

    Math

    This post has received 1 vote up.
    #351493 Score: 2
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    130 pts
    @Klaatu

    While I too favor the Greensock Animation Platform (GSAP) for all types of animations it would be overkill here.

    Create a fade out class and then add it to ANY element(s).

    1. Create an external style sheet with the following rule:

    .fadeOut {
    opacity: 0;
    transition: opacity 1s linear;
    }

    2. Add a Run JavaScript action on whatever will trigger the fade with the following.

    document.getElementById(“video40″).className += ” fadeOut”;

    Replace “video40” with the HTML name of your video player. You can do this for all the elements you want to fade on the page; you’ll have procure the correct HTML ID’s of the element(s) you want to affect (the built in html name is not always the correct target – use the browsers developers console to inspect the element for the correct ID.

    This post has received 2 votes up.
    #351495 Score: 1
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    130 pts
    @Klaatu

    I forgot the attachment…

    This post has received 1 vote up.
    Attachments:
    1. Fade-Video.zip
    #351498 Score: 0
    Profile photo of Dave Rigley
    Dave Rigley
    Member
    friend finder
    beginner
    intermediate
    @drigley6122

    Wow! Thanks for the responses, Math and Darrel 🙂

    With the deadline on this project looming I’ve added “Proper fading” to my Nice to Have list and hopefully I can squeeze in some time to replace all of my workarounds before time is up.

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

    The only transitions that are supported within Lectora on a video object are random, appear, and fly.  If you placed any of the other options this can cause issues with the video. I’m bringing the fact that all are showing in group transitions even when a video file is present to our development team.

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

You must be logged in to reply to this topic.