Storyline Animations

A little disappointed to see the limited animation options in Storyline. I miss motion paths and the wipe animation in particular.  Has anybody come up with a creative solution for simulating a motion path animation in Storyline?

I'm trying to create a scene where a projector screen drops down from the ceiling.  I would typically do this with motion paths or a wipe animation but I'm stuck in Storyline. Any ideas?

52 Replies
Glyn Chadwick

Hi Mark

Sorry for the delay in getting back to you.

You can place the Web Objects on the top layer. If you put it on a lower layer you cannot seem to load higher layers. I also have a problem with closing the layer that the Web Object is on, I am still working on this.

The Web Object and the main storyline slide have independent timelines. The Start and Pause buttons, as well as other interactions on the web object work as normal.

I will post a link to a test file here as soon as I have ironed out a couple of minor issues (that I have caused!).

In the meantime - Happy New Year to everyone.

Glyn

Glyn Chadwick

I have been working on embedding HTML5 animations and have found some restrictions, most of you probably know about these, but here they are;

  • Objects cannot be above the HTML5 layer.
  • Objects below the HTML5 layer can be seen via transparency but not on the mobile player.
  • When played on Articulate player, the animation does not fill the screen, however the web object is shown full screen.
  • Interactions embedded into the HTML5 web object still work.
  • Web Objects can be on a layer, but this should be the top layer.

You can see the example at lms.aviatas.com/Trials/EmbeddedHTML5Mobile/story.html

Sorry about the simple animations.

Mark Pickart

I have been using flv's to maintain transparency. The only issue I am running into is horribly slow load times. The file isn't even over 30 mb.  Does anyone have a suggestion to making a presentation play faster when multiple flv's are running. It also takes some time to load like 35 seconds. Their are a lot of layers. Part of the issue here is it promotes user control so their is a lot of choice, and where there is a lot of choice there are a lot of triggers, variables, and slide layers. Any ideas to quicken load times other than dropping quality.

Jerson  Campos

Are you talking about the entire atriculate course or the flv files that are near 30 mb?  


A couple of tricks you might use is to make any assets you use correctly sized for your final output. I'm sure you know what happens when you increase the size of the image, it becomes very blurry and jagged. So most people tend to get the image larger then they need. Well if you get it to large and size it down, you still have the 5 mb file size to deal with. Most programs will recapture the image and lower the file size when you output it, but some don't. So I suggest that you trim the fat when it comes images and audio. variables and triggers shouldn't be a problems since they are just text and code.

Mark Pickart

The course at its worst quality is 30mb at its best its 55mb or so. Most of the animations and pictures are sized to the size of the slide i am producing to. I have a ton of slide layers appearing on hover over on the same slide the animations play. Once I  publish out and view it online the course just chugs. Could it be too many layers and state changes on hover over?

Ray Handley

That kind of file size is unacceptable, so while this works well and appears seamless I question it's validity in the real world where clients are wanting a smaller output to load quickly. The other issue is the lack of transparency with a .wmv file which means to use PowerPoint you would likely be restricted to PowerPoint dimensions. I will test this out though and see what the options are. Thanks for this post and the links guys. Very informative as usual. Like all of you, I am looking forward to the custom animations and motion paths being available in Storyline.

Richard Armitage

Glyn Chadwick said:

I have been working on embedding HTML5 animations and have found some restrictions, most of you probably know about these, but here they are;

  • Objects cannot be above the HTML5 layer.
  • Objects below the HTML5 layer can be seen via transparency but not on the mobile player.
  • When played on Articulate player, the animation does not fill the screen, however the web object is shown full screen.
  • Interactions embedded into the HTML5 web object still work.
  • Web Objects can be on a layer, but this should be the top layer.

You can see the example at lms.aviatas.com/Trials/EmbeddedHTML5Mobile/story.html

Sorry about the simple animations.


Some nice tests there. Annoyingly for us, we want to use the Flash output for desktops (ie6 solution) and HTML5 output for mobile. That means we can't add HTML5 animation objects. Definitely looking forward to extended animation functionality. 

Bruce Graham

Hi Monica and welcome to the Heroes Community.

Articulate never "pre-announce" feature and function availability, however, I am sure it is being worked on.

Sorry that's not very positive, but you can be sure that the end-result will be

In the meantime, if I need to do this, I create in PowerPoint 2010 with all the animations I need, save to video format, and then just Insert > Video, it works perfectly and seamlessly.

Hope that helps - and once again a warm welcome to the Heroes Community.

Bruce

PS - apologies for saying again what I had forgotten I said back in July!

John Black

Bruce Graham said:

Hi Monica and welcome to the Heroes Community.

Articulate never "pre-announce" feature and function availability, however, I am sure it is being worked on.

Sorry that's not very positive, but you can be sure that the end-result will be

In the meantime, if I need to do this, I create in PowerPoint 2010 with all the animations I need, save to video format, and then just Insert > Video, it works perfectly and seamlessly.

Hope that helps - and once again a warm welcome to the Heroes Community.

Bruce

PS - apologies for saying again what I had forgotten I said back in July!

If you have Presenter, you can also save it out as a swf, which is full-screen and uses less bandwidth.

Mark Pickart

Honestly I always get a stock response of submit a feature request, or this is very popular I am sure its being worked on, but there is very little I see actually changing. The video work around is functional but not practical. I use the software to create a lot of learning games and have recently run into more problems with using videos. The .flv work around is crashing flash when multiple layers and states are involved. Without a motion tween or a way to more accurately define the speed of an object other than the 5 choices, it is extremely limiting. The software would be far more powerful with the motion tween available.

Pam Richmond

I would also like to see more animation options, including wipe and motion paths. I submitted a feature request and suggest that others do as well. Storyline is still a relatively new product, so it can be expected that more features are needed.  I would rather have fewer features that work properly than have a lot of features that may not. I do wish Articulate would give us some idea when the next release will be available. It would be very helpful

Philip Lima

Bryan Tregunna said:

I too am disappointed with no wipe animation. For presentations or elearning, wipe and fade are my two favourites. I actually use very few others.

Having created a graphic with a wipe animation in PPT, how do I save it to wav or swf?

Once you have everything all set:

  1. File
  2. Save & Send
  3. File Types: Create a Video
  4. Click the Create Video Button

This will create a video that you can then 'Insert" in Storyline.

Nancy Woinoski

Hi everyone, I think you can do a lot with the animation in Storyline. You just have to be a little creative. Here is an example of a storyline project in which the animation was done entirely in Storyline. I posted this example a while back but here it is again for those of you who are interested.

Example 

Rutwin Geuverink

Trying to expand the animation options in SL using the mouse cursor.

Since the cursor is very small (32x32) you can change the picture after you publish the file. The cursor is stored as "mouse_long number.png" inside the story_content folder. (make sure you give the new .png the same name)

Call me mad but since animated cursors can be inserted as well, it's quite easy to create and insert a walking character, driving car, flying plane etc. completely animated and without any transparency issues.

Rutwin Geuverink

Hi Nick, great you liked my idea

I guess the mouse menu opens because you're missing the original cursor that I used in my project.

(didn't realize it wouldn't actually copy the cursor into SL)

I will attach an updated version of the project where I already selected a standard mouse cursor. All you will need to do is publish it and change the "mouse_long number.png" inside the story_content folder with a picture of your liking (let's say 256x256 in size)

You can also change or insert a mouse cursor yourself :

Let me know how creative you got with this:)

Margaret Morse

Mostly I've used Bruce's method of making little movies in PowerPoint, although sometimes the images are not very crisp. However, a post on this topic some time ago about using silences to trigger events got me thinking that one could almost do cell animation using them to change layers. One would need a pretty good educational reason to go to this trouble, but it lets you animate more than one thing at a time. Once you have a slide set up with numbered silences, you could use it anywhere you needed it, though you'd need to do your own tweening with the images. So, here's my contribution as a truly rococo solution.

--mlm

Rutwin Geuverink

mhhh, that makes for some interesting possibilities I think.

I still have to test how an animated cursor+changing the .png will work out.

How about using an animated picture as replacement for the .png, combined with an automatic slide advance....

EDIT: I found this great and 100% free cursor creator/editor program http://www.rw-designer.com/cursor-maker