Animating Graphics in Articulate Storyline | How-To Workshop
Вставка
- Опубліковано 25 лип 2024
- #ArticulateStoryline #eLearning #InstructionalDesign
When you're designing eLearning in Articulate Storyline, your slides allow you to visualize your learning content and help your learners see what you're trying to say. And one way to do this is by combining animations with audio narration to create a mixed-multimedia experience.
So, in this How-To Workshop, I'll show you how to use the timeline in Articulate Storyline to animate graphics. We'll explore how to sync entrance and exit animations to audio narration and how to use motion paths to create engaging (and interactive) content.
👉 Check out all of my Articulate Storyline How-To Workshops:
• Learn How to Use Artic...
👉 Check out and sign up for our future community events here:
community.elearningacademy.io...
----
Timestamps:
00:00:00 Intro
00:00:40 Why Design with Animations?
00:04:30 Navigating the Timeline in Articulate Storyline
00:11:43 Design an Animated Slide
00:13:47 Preview the Timeline
00:14:59 Apply Entrance Animations
00:18:33 Copy & Paste Animations with the Animation Painter
00:20:18 Manually Syncing Animation with Audio Narration
00:23:51 Apply Exit Animations
00:27:13 Use Cue Points to Sync Animations with Audio Narration
00:32:50 Animate Text by Paragraph
00:36:31 Entrance & Exit Animation Slide Example
00:39:52 Apply & Sync Motion Paths
00:48:27 Motion Path Slide Example
00:50:15 Create Interactive Motion Paths
00:58:18 Animated Slide Examples
01:02:13 Tips for Designing with Animations
01:03:20 Closing
----
Learn more about growing your eLearning career:
elearningacademy.io/
Enroll in our eLearning academy and community:
elearningacademy.io/academy/
Snag a copy of The eLearning Designer's Handbook:
amzn.to/3AlFkYU
----
Follow The eLearning Designer's Academy:
Twitter: / elearningacdmy
LinkedIn: / elearningacdmy
----
Follow Tim Slade:
Twitter: / sladetim
LinkedIn: / sladetim
Change your thinking about your skills, career and confidence by enrolling in my FREE 10-day Career Mindset Reset course: community.elearningacademy.io/c/10-day-career-mindset-reset/
Tim, your long-form How-To Workshops are invaluable! Thank you.
Excellent video and lots of good tips. I really enjoyed the example of landing the alien on the moon!
Glad you enjoyed it!
Thanks so much for this! I am so glad I found your explanation of motion path animation, and by extension, your whole course. I feel so much better about my next project.
Glad it was helpful!
Awesome 👍
I'm a new Articulate user and your videos are such an amazing compliment to my training.
Thanks, Teresa! I'm glad you're enjoying it!
Loved the landing procedure. Great explanation of interaction of objects.
A great segue from PowerPoint animation knowledge to Articulate implementation. This cleared up a LOT for me. Thanks Tim!
I’m glad it was helpful! Thanks for watching!
Thank you so much for this!
You have no idea how helpful this was! Thank you so much!
Oh don't worry...totally understand! I had to learn the hard way! I'm glad it was helpful!
I've watched a lot of videos already, but your video is the most comprehensive, helpful yet fun to watch and learn from! Thank you so much really. I do not usually leave comments, but I was really impressed. 1 hour went so faaast.
Thank you so much for taking the time to watch and comment. I truly appreciate it…and I’m so happy you found the video helpful!
Thank you so much for putting together for this video. It's super useful for my role and I appreciate it :) keep up the good work
Thanks, Tien! I'm glad it was helpful!
Brilliant Tim, thank you for this. Your communication skills are very good. Greetings from New Zealand
Just got Articulate. Excellent training video.
Thank You! Thank You! Thank You! This was extremely helpful. Much more applicable and useful examples of content compared to everything else I have viewed so far. I feel less intimidated by the application and I'm beginning to see how quick and easy I can get started creating a few projects I have to do. I so appreciate you!
Glad it was helpful!
Thank you Tim! I recreated the UA-cam background image at the end of your video and practiced integrating animations for the like, subscribe and bell button. I'm super proud of the result! Your videos are super fun and useful, great job!! 😃
I love that...and I'd love to see it. If you get the chance, feel free to share it within our community here: community.elearningacademy.io/c/share-your-wins/
Great session! Looking forward to storyboarding :-)
Thanks! I'll get a session scheduled soon! You can keep an eye out for all of my upcoming events here: community.elearningacademy.io/c/events/?sort=asc
Absolutely loved it - so useful & practical!!! Thank You!
Glad it was helpful!
Getting my licence in a few days, I'm loving the videos. I started with you telling the story of your career. How it resonates with me is crazy lol. Keep up the amazing work, I hope to learn learn learn, so my trainees can improve improve improve
Thanks for watching and sharing, Stuart! Let me know if there's ever anything I can do to help!
The cue point feature section is revelation for me. Thank you Tim😍
Glad it was helpful! Thanks for watching!
currently in my masters program and can’t thank you enough for this resource!!! so helpful
Happy to help!
Top Tips!
Can't wait to use these ideas tomorrow in my trial version of Storyline.
"How to Design Effective CPD for Teachers"
Thanks for watching!
Thanks for this upload!!
Thanks for watching!
This was amazingly helpful. Thanks Tim!
Glad it was helpful! Thanks for watching!
thank you Tim! this was awesome!
Thanks, Paula! I appreciate the kind words!
Very helpful and informative lesson, Tim! Thanks!
Glad it was helpful!
Wow, What a great tutorial. I love your approach Tim. Thanks so much. Adam.
Thanks, Adam! Much appreciated!
This is immensely helpful - thanks so much!
Glad it was helpful!
Thank you so much for sharing your knowledge. I am learning so much.
Thanks for watching!
Mouse trickery is my new favorite phrase! 😁
Ha! Thanks for sharing!
Very creative👍. Thank you so much for sharing this🙏
Thanks for watching!
Thanks so much for the video! I am designing using animation and wanted to make sure that I am on track with what I am designing. Thanks for the great video demonstration and experts tips to use Storyline 360.
I'm glad it was helpful! Thanks for watching!
Your course are really good very useful in tone and speed thank you !
Thanks! I appreciate it!
Fantastic!! Thank you too much 🌺
Glad you liked it!
Outstanding tutorial. The examples were great, style is relaxed and friendly, expert content always on point. I learned a lot from the careful explanations. It gave me a lot of food for thought planning projects going forward. Thank you very much.
Thanks! I’m glad you liked it!
woahhhhh you are amazing, thank you
Woahhhhh...you're amazing too! Thank you! :)
Thanks a lot for your teaching😇
It's my pleasure
Great stuff, Sir!
Glad you liked it!
Fantastic and inspiring as always! Now to go find a way I can incorporate something like that UFO interaction! Haha
Thanks, Sara!
very good
Love your videos. I would have the viewer create shapes or images from scratch so they can get more hands on experience. Love your tips and teaching us what mistakes you made along the way. Thank you!
Glad you liked it!
SO much great stuff in here! I finally understand cue points, and I think I can make my motion paths much more effective now. I do wish more of the health related contented didn't zoom in on BMI. BMI is crap science LOL But that is like the epitome of working with content that might irk you - or just me. Great video as always!
Thanks, Jessie! And totally agree with you on BMI. I feel like no matter how much weight I lose, it always say I'm obese! 🙄
@@elearningacdmy I could send you down a total rabbit hole about how awful the BMI scale is. For starters - designed by someone connected to eugenics LONG LONG AGO
@@JessieCarty Really?! Wow...I had no idea! 🤯
When you are animating slides what do you do for alt text? Are you assuming the visuals are only for sighted users? Would love to hear how you manage both these wonderful animations along with accessibility.
Ok, besides the great and helpful content, you are also hilarious!
Ha! Thanks...I try not to take myself too seriously! :)
@@elearningacdmy We need more people like that!
@@poukhananthony7589 Agreed!
Nice video! Very helpful, quick question. Your landing spot was green in the timeline, how did you make it disappear (no green) during preview but still interact with the ufo?
I think Articulate solved this in the most awkward way possible. It took many years for them to introduce what they called the "Timeline Visualization" which basically is just the ability to see what is going on at a specific frame on your timeline. Before this, you actually had to PLAY your timeline to get an update (!!).
The obvious solution to what Tim Slade is trying to show is for Articulate to add at least position, scale and rotation nodes to any object, and add keys ability in the timeline together with masking functionality, like most other software does. With todays solution you cannot make an image do a slight zoom/move inside a mask to make what many people refer to as a typical Ken Burns effect.
This should be a very easy thing for Articulate to solve, but the speed of development on this software is just almost complete to a stand-still.
Thanks for sharing...I have lot of thoughts! In a nutshell, I agree with you SO much.
So well done, Time. I am not interested in knowing how you broke that image apart to add the motion paths to all of the parts of the image. Illustrator?
Thanks! I'm glad you liked it! To answer your question...yes, I did that in Adobe Illustrator...and I'll have an upcoming How-To Workshop on how to do that in a few weeks. You can sign up for that here: community.elearningacademy.io/c/events/how-to-workshop-editing-elearning-graphics-in-adobe-illustrator
Hi, I really enjoyed your tutorial. What program do you use for assembling the two screens? The one of your face and the computer screen?
Thanks for watching! I record, edit and produce all of my videos in Camtasia.
This is great. Any idea how to have an image float in and then do a small bounce. I can do this in PowerPoint but I cannot figure out how to do this in storyline. I'm going for the same float and pop a character has in Yyond.
I'm glad you liked it! Regarding your question...I think you'd have to have the object animate in with an entrance animation, and then do the bounce with a motion path. I hope that makes sense!
Hi Tim. What would you search for in Envato Elements to find shape graphics like you have on these slides (the swirly header shape)?
Hey Ben! Great question. I would say it's less of a specific search term...and more of finding a graphic that already includes that element, and then extracting from it. In this case, I believe I created that shape in PowerPoint.
I share how to do this in this video here: ua-cam.com/video/zm6zua2YET8/v-deo.html
Many of my slides have a "user click to play" trigger to play audio. When I attempt to create cue points the audio track "plays" on the timeline... without audible audio. On all my slides where the audio auto-starts on the timeline, the audio is audible, and I can create cue points. How do I create cue points for audio that requires the user to click the audio in the slide (i.e., play the audible portion when attempting to create cue points?)
Tim, can you move an object with a motion path and at the same time resize the object? Like if you had a image centered and zoomed in, you could have it shrink and move to the side.
Unfortunately not. But I wish!
@@elearningacdmy That is disappointing. Thanks though!
It's Storyline, give it 10 more years and this functionality will maybe be on the roadmap :)
What do you use to switch between macOS and windows?
I run Windows on my Mac via Parallels. I hope that helps!
@@elearningacdmy Thank you!
Fish eating text?? Useless and crazy!
Right?! I totally agree!
@@elearningacdmy And striped Angel Fish?? Seriously