interactive button over video

Oct 08, 2014

Juan Roncesvalles
By Juan Roncesvalles

Greetings,

I'm wondering if anyone out there has animated a button over a video over a specific path. Let's say you had video footage of walking through the grocery store from a shopper's perspective. As objects become visible a button appears and once clicked, stops the video and provides some feedback. Keep in mind the camera is constantly moving, thus the location of the button and scale changes over time to account for perspective.

I have a suceessful version in flash (as3) however

output would be ipad friendly, thus flash was a no-go...

Is there's some way of packaging the swf so that stoyryline will accept the as3?

Also tried using adobe after effects to export a transparent png sequence that could be overlayed on the video, but storyline extends each png to the duration of the timeline and the video's duration would require a massive amount of trimming.

Is there a way to import a .png sequence (with transparency) that allows a linear type import so that 001.png = frame 1, 002.png = frame 2?

If so is it possible group assign a group of .png files to a trigger?

While I found the new motion paths fairly helpful, they do not provide the accuracy that keyframes provide.

Any suggestions would be greatly appreciated. Thanks in advance!

Best,

Juan

4 Replies
Kevin Thorn
over 9 years ago10/11/14 at 8:55 pm (UTC)

Hi Juan, and welcome to the forums!

Wendy provided a link to a tutorial on how to interact with a video which based on your description should be a sufficient solution.

For your other questions:

  • There is no current way to package an SWF where Storyline will interpret AS3.
  • While Storyline has a timeline, it's not set up like keyframes like in Flash. There's not a current way to assign an animated sequence where image01 = frame1 as there are not 'frames'
  • There's no current way to assign a trigger to a group of objects. You can still group images but you'd have to assign a trigger to each object within the group

Sorry, as these are not exactly the answers you were looking for. However, I've had some success with SWFs with an alpha channel for transparency interacting with other objects including video. While that works on desktop, the SWF doesn't even appear on an Apple device.

I've also had success with a animated GIF sequences. This format supports transparency and is visible on an Apple device. GIFs don't have the same pixel quality or range of colors, but if your buttons are graphic and not photographic this format might work.

Hope some of this helps.

Juan Roncesvalles
over 9 years ago10/12/14 at 1:47 am (UTC)

Wendy and Kevin,

Thank you for your replies. I will definitely explore these methods. Since time was short ended up creating a "tracking animation" in storyline using hotspots drawn frame by frame (no this was not fun), and reducing the opacity of hotspots to zero (thus they are there but not seen so it seems like playing a version of click on where's waldo (client was happy with this). Later I'll re-render from after effects the animated masks/tracking data composited on top to "fake the button" if necessary.

I do have one quick question about the quepoint method, this will control both the media and timeline, correct?

Thanks again for the suggestions very helpful.

Best,

Juan

This discussion is closed. You can start a new discussion or contact Articulate Support.