HI I'm fairly new with Story Line - my question is.. is it possible to create a typewriter effect. I have a web address that i would like the letters to look like they are being typed in. I'm sure this is going to be a DUH! moment - but thanks in advance for your assistance!
Few ways to go about this. The least complicated is creating a variable first, something like "myURL". Then create shape (such as a square) just off of your stage. Create a trigger on this shape so that when the timeline starts, your myURL variable is set to the full URL.
Make copies of this shape and delete an additional letter from each copy until you end up with one shape with a single letter. Now arrange your shapes on the timeline, pretty close together, to produce an animation that builds the letters one at a time.
Now when you add %myURL% to a text field, you can position it wherever you want without having to worry about a one letter at a time build arrangement.
Hi Christina, Steve's idea is very clever but I built one using the "old school" method which is adding each letter as a separate text box to the timeline. To make it seem more realistic you should use a font like new courier and drop some of the letters a bit. Here is an example of a title screen where I used this method.
I just updated the link to this one so it should work now. Example
You could also add animations with a punch sound for when the typewriter "fingers" hit the page, revealing the letters. You would need to be careful with the layering here so the "fingers" do look like they are coming from within the typewriter.
I've used Nancy's example when showcasing a phone number. The numbers appear as the narration reads it aloud. Very effective, but equally time consuming.
I've used Nancy's example when showcasing a phone number. The numbers appear as the narration reads it aloud. Very effective, but equally time consuming.
For anyone still looking for a quick and dirty way of doing this without sacrificing quality, the technique I use works pretty well. Basically, I use Microsoft Powerpoint's typewriter text animation to type out any text that needs to be animated (my preset attached below). Then, I use Camtasia, or any other screen-recording software to record the animation when it's previewed in Powerpoint. I save the custom video and "insert" it into my Storyline project (example attached). It's that simple!
I experiment a lot with gamification and have uncovered a lot of nifty hacks like this one. Maybe one day I'll upload em all! (the female robot speaking is actually my recorded voice with a ton of effects on top heh heh... and I'm American. "MY GOD HOW DID HE DO IT?!"
Also, I forgot to mention that I'm working on transitioning from PP to Adobe After Effects to upgrade my typewriter text effect quality. It's most likely going to look 100 times better. If y'all are interested, I'll upload my preset for that when it's ready.
16 Replies
Few ways to go about this. The least complicated is creating a variable first, something like "myURL". Then create shape (such as a square) just off of your stage. Create a trigger on this shape so that when the timeline starts, your myURL variable is set to the full URL.
Make copies of this shape and delete an additional letter from each copy until you end up with one shape with a single letter. Now arrange your shapes on the timeline, pretty close together, to produce an animation that builds the letters one at a time.
Now when you add %myURL% to a text field, you can position it wherever you want without having to worry about a one letter at a time build arrangement.
If you're comfortable with JavaScript, you could also use a JavaScript trigger to generate the text sequence.
Ok I will try the least complicated suggestion Steve - Thank you - JavaScript ... beyond me at this point
Thank you!!!
Hi Christina, Steve's idea is very clever but I built one using the "old school" method which is adding each letter as a separate text box to the timeline. To make it seem more realistic you should use a font like new courier and drop some of the letters a bit. Here is an example of a title screen where I used this method.
I just updated the link to this one so it should work now. Example
Cool & simplistic Nancy, nice job. I do like the dropped 'e' effect. Go back a few years and yeah, that's realistic.
You could also add animations with a punch sound for when the typewriter "fingers" hit the page, revealing the letters. You would need to be careful with the layering here so the "fingers" do look like they are coming from within the typewriter.
Nancy great idea!!! Thank you I love your example!!
I've used Nancy's example when showcasing a phone number. The numbers appear as the narration reads it aloud. Very effective, but equally time consuming.
I hear you about the time consuming part
Nancy - I took your idea because i'm a little "old" school that is
It worked great - thank you all for your help and input!!
For anyone still looking for a quick and dirty way of doing this without sacrificing quality, the technique I use works pretty well. Basically, I use Microsoft Powerpoint's typewriter text animation to type out any text that needs to be animated (my preset attached below). Then, I use Camtasia, or any other screen-recording software to record the animation when it's previewed in Powerpoint. I save the custom video and "insert" it into my Storyline project (example attached). It's that simple!
I experiment a lot with gamification and have uncovered a lot of nifty hacks like this one. Maybe one day I'll upload em all! (the female robot speaking is actually my recorded voice with a ton of effects on top heh heh... and I'm American. "MY GOD HOW DID HE DO IT?!"
Hope this helps!
Also, I forgot to mention that I'm working on transitioning from PP to Adobe After Effects to upgrade my typewriter text effect quality. It's most likely going to look 100 times better. If y'all are interested, I'll upload my preset for that when it's ready.
As of office2010 you can save your PowerPoint file as a wmv video.
Hello,
Would love to see this example. But seems that this link is not valid. Please could you repost it? Many thanks,
Thanks - that is really helpful
This is a great solution! Thanks so much for posting this.