Example

ElisabethGoss's avatar
ElisabethGoss
Community Member
13 days ago

Ocean Facts


Since I have only recently started [participating in these challenges, I wanted to try some of the more recent ones I missed, so I incorporated a cut paper effect and some morph transitions in this little interactive video activity.

For this activity, I used an animated video background as a base layer and added numbered hover icons to allow users to scroll over each sea creature to learn a few simple facts about each. Upon hover, a small circular video of the real creature appears along with some text about the creature and a learn more link to inspire more in-depth learning about each.  Hope you like it!

View Activity

Check out my portfolio

Find me on LinkedIn

3 Replies

  • This is amazing!! I've been trying to figure out how you inserted transparent videos. Would you be willing to share the file?

    • ElisabethGoss's avatar
      ElisabethGoss
      Community Member

      Thanks! 

      I did the hover videos by:
      1. Saving the video as an image from powerpoint like this
      2. Then with the image on a powerpoint slide, I placed a circle shape over where I wanted the video and used merge>subtract to create a circular cutout of the image like this (Storyline doesn't have the merge functions for shapes, or if it does I can't find it) 
      3. Created a layer for each hover video, inserted the image with the circle cut out for the associated video, and layered the video behind the image. 

      You can download the file below to see all the layers and triggers etc. (The above cut-out steps won't necessarily be intuitive just from the storyline file) 

      Download

Getting Started with the E-Learning Challenges

Find practical answers to common questions about the E-Learning Challenges, a weekly event that helps you build skills, create your portfolio, and grow as an e-learning professional.