Timeline: Add individual games on frames.

[codeBeastAdobe]

Hi there. Recently we have been creating games/apps using HTML5 canvass with createJS etc... in Animate.

The idea now is to create a story similar to Dora the explorer.

We will create animations like a Dora type character walking along and suddenly she comes to an obstacle.

This is where we will use one of our apps, for example a word search. She has to complete it to get a key.

She finishes and walks on, next obstacle, next activity.

Sorry about too much detail.

So my question is, can we add each of our apps into the timeline as a movieclip.

All of our apps are on one frame for example. The actions layer has all the code. The other layers have all the graphics etc...

Would I just copy and paste all those frames into my story movie timeline ie: The app would fire up when they hit that frame or I would use gotoAndPlay - that way I could add the games/activities to the end of the timeline so they don't get in the way of the story and if I wanted to modify the story.

Baically it's all about injecting individual games into one timeline.

[JoãoCésar]

Hi.

Unfortunately Animate doesn't have a native feature for this situation.

The easiest and most effective approach is to create iframe elements at runtime containing your games. 

But if you can't or don't want to use an iframe, then you will have to structure your games in a way that they are well encapsulated in a single Movie Clip. So you can simply copy and paste them into the necessary frames.

Please let us know what you think.

Regards,

JC

[codeBeastAdobe]

Thanks.

The idea is not to break the experience. 

1 - Games encapsulated in a movieclip would be the best option.

2 - We have a platform that uses iframes to insert our games so that's cool too but would also break the experience.

      ie: The student is playing and suddenly has to wait for the game to load. I suppose we could load it in the background so it loads instantly. We could have a transition screen, which indicates that an activity/mission is about to commence.

Some games do this - so it would always look like it's the same game BUT only if it loads in the same iframe.

That would mean unloading the "parent" game wouldn't it, playing the new game, and then reloading the parent game.

Is that right? Or would be it very quick anyway.

It's actually a better option to load into iframes, that way I don't end up with a massive timeline + 20 games all in one movie. Not very manageable. 

[JoãoCésar · Accepted solution]

You could put each game in a different Movie Clip and then add each one at runtime using new lib.YouGameLinkage(). So when the user navigates to another frame, you would remove the current game.

But do you have an example of a platform or technology that can load dozens of games in a row without loading time?

I think it's a pain point that we don't have much to escape from and the user understands that, IMHO.

Because if you preload everything youl'll have a big memory problem and if you don't... Well, there will be loading times.

So I think it makes sense to let the user wait for a while or you can think of a design strategy for your games in which they are extremely simply and easily downloadable. For example, one game could actually be made of more than one FLA or Movie Clip. Then you would load several parts of the game in the same frame in the main timeline.

Anyway... It's a big challenge to solve.

[codeBeastAdobe]

I'm going to experiment this week to see how it goes. I will check load times and see if the experience is affected or not. I will get my kids to play it and ask them for feedback. 

I will post here again with the best solution just in case anybody else is creating their own educational system.

Thanks João

[JoãoCésar]

Awesome!

Your feedback will certainly be very valuable to us all.

Regards,

JC