You can create just about any type of animation effect using Storyline's animations and motion paths, including a simulation of text being hi-lighted on a slide. This example uses simple graphics as well as animations and motion paths to bring dull text content to life. Grab the download file to deconstruct it, or simply swap out the text for your own.
Sorry Nicole, I'm fairly new to SL2, I don't really get how you are creating the highlighted text effect. I can see the state changes and motion paths, they make sense. I just can't see the item/object/trigger/animation that turns the text yellow.
Hey Allain. The yellow highlight is a rectangular shape (you can see these shapes on the layers Line 1 and Line 2, look for "Rectangle 3" and "Rectangle 1" respectively on the timeline). Both shapes are filled with yellow and have 62% transparency, simulating the highlighter ink. In addition, each shape has "Wipe" entrance animation - this way there's no need to work with states for the yellow highlight, as the animation makes the object appear gradually. Hope this helps.
Took me a minute or two (ok, a half hour) to see that the layers have a text box with just the portion of the text on the base you want highloghted. With the base showing through the text on the layer has a wipe animation with the text highlighted. The highlighter image moves on a motion path. It took a bit of tweaking to get the timing on the text wipe animation to sync with the motion path animation for the highlighter. But, man, is this cool or what! Thanks, Nicole.
This is a really interesting concept. Thanks for sharing! One thing I might do differently is to switch up the layers a little, have the yellow appear between the text and the page so that it emphasizes the text without fading the letters.
Funny enough, if you change the wipe of the highlights from top it looks quite natural and acceptable maybe, as there's a slight lag between when the pen stops and the highlights end. Could also add a fade on the pen at the end of the animation to see the text.
If I wanted to add a 3rd line highlighted, how would I go about doing that? I have tried a few different things and creating some new triggers, but I can't seem to get the already highlighted lines to remain on the screen as I simulate the highlighting of the 3rd line.
22 Comments