interactive book with animate cc + Indesign ?

[Ali Shaatani]

i want to make E-book for children and insert Animated Element (html canvas) as pages for the animated stuff and InDesign for the fixed layout

but the problem is that i don't know what platform should i use to Combine them both to be as a single flip eBook.

and i want it,to be offline app for android tablets

any help with this problem ?

[kdmemory]

Hi Ali

this seems to be an issue for which you should focus your search for solutions towards the InDesign Forum. eBook format for Android in general is the EPUB format. And InDesign from CC2014 upwards can export to EPUB 3 format which apparantly is the most recent spec. Animations from Animate, I'm sure, there are ways to get that into InDesign (mp4, html/js, animated gif - I guess - I'm not the expert here).

Maybe this is a start ...

Klaus

[rayek.elfin]

InDesign can be used for interactive somewhat animated children's books. The animation tools are pretty terrible, however, and outdated. Interactivity is limited to simple static stuff, such as hiding and showing content. Don't expect to create highly interactive content with only InDesign.

One way to work around these limitations, is to use Animate CC and animate more involved animations in it, and export to OAM files, which are then placed in InDesign. This is probably what you are asking: to include Animate CC animations in InDesign, you must export these as OAM files (and be sure to work with html canvas in Animate CC).

The trouble with this approach is that it is very indirect, and requires planning how everything works together.

It is doable, however. And the epub format as well as InDesign export have limitations. Some things just don't work as expected, or at all.

Exporting your InDesign project to an app is not directly possible without external tools. InDesign does support fixed layout epubs, but those currently only work without issues on iPads and MacOs in the iBook viewer.

To export/convert and InDesign project to an app, you have a couple of options:

- use the free InDesign HTML export plugin to export to HTML pages. https://indesignsecrets.com/exporting-from-indesign-to-html5-amazing-free-script.php Then use Cordova and some simple coding to convert your html project to a working mobile and/or desktop app. This is completely free, and you will have the option to add external html/css/js elements as well. This gives you the most control, but is technically more involved.

- use a commercial plugin like In5 to deploy your app directly. Expensive, but easier. Ajar Productions: Design and Animation Software

A third option is to completely abandon InDesign and Animate CC, and instead switch to a (visual) game engine, and create your interactive children's book app in one of those. The advantages are that you will have FAR more control over the interactive aspects, and many game engines now have advanced built-in animation support, and allow for direct export to various platforms, including mobile apps and web.

Examples of these would be Godot Engine (open source and free) or Unity (free). In my opinion a better option, but again at the expense of having to learn new software, and possibly more technical as well. Almost no limits in regards to creativity and interactive elements, however. And the least expensive option.

So it depends on your requirements, and technical confidence.

[JoãoCésar]

Hi.

One thing that I would like to point out is that Godot and Unit are indeed very powerful engines. I myself created an app and some other stuff with Godot.

But both Godot and Unity are not really tools for assets creation, UI design, vector drawing and animation like Animate.

Animate has all that is needed to create a product like an interactive book from ground up in one single package. And is far easier to learn and to use.

Also you can output to web using HTML5 Canvas/WebGL documents and to mobile using AS3 documents and even HTML5 documents if you wrap the output in a webview like you described.

[rayek.elfin]

JoãoCésar  wrote

But both Godot and Unity are not really tools for assets creation, UI design, vector drawing and animation like Animate.

Animate has all that is needed to create a product like an interactive book from ground up in one single package. And is far easier to learn and to use.

Also you can output to web using HTML5 Canvas/WebGL documents and to mobile using AS3 documents and even HTML5 documents if you wrap the output in a webview like you described.

Yes, of course assets must be created outside of Godot or Unity. The same holds true for InDesign, and, to an extent, for Animate CC.

I disagree with you in regards to animation, though: Godot and Unity have quite powerful animation timelines and other animation features which even Animate CC cannot match. The new timeline in Godot 3.1 (currently almost in beta) offers a very powerful graph editor which just works much better than the one in Animate, for example. There's even animation blending and a working cut-out character bones-based animation editor.

Animations play in real time in the editor itself, even nested animations unlike Animate where movieclips refuse to play and the entire animation must be previewed (or has this changed in the latest version?)

For UI design Godot has a full theme editor for GUI components. Animate CC and InDesign lack this as well.

Sound can be far better controlled in Godot and Unity too.

And Animate CC doesn't really support 3d. With Godot, for example, it is simple to combine 2d and 3d on the same canvas.

But yes, with power comes greater complexity. Although with Animate CC, as you state, converting to an app is more complex than in these other tools (and which have native support, rather than require the need for webview wrapper).

Myself, I would just prepare image assets in an image editor and vector package, and then import those in Godot. Animate in Godot, build the GUI in Godot, some simple actions, and done. But it requires technical skills the OP probably doesn't possess.

Based on the OP's question I presume InDesign + animated OAM elements plus the In5 commercial plugin would be the simplest approach.

In the end it all depends on the job's requirements and the designer/developer's technical skills and willingness to learn new things.

[JoãoCésar]

You can create all assets in Animate CC if you wish. I work on a lot of projects that I don't even have to touch other software.

Godot and Unity animation tools are geared towards games because they are game engines. But Animate is not a game engine. It can also be used to create games and great games, of course. But historically, when Animate CC was still Flash, the main usage was interactive content for the web and also animated cartoons for TV.

That's the difference. I don't think an animation studio would pick Godot or Unity to be the animation solution for TV shows like Teen Titans Go! or Wakfu.

Animations play in real time in the editor itself, even nested animations unlike Animate where movieclips refuse to play and the entire animation must be previewed (or has this changed in the latest version?)

This is not true. You can preview your entire animation at authoring time if you use synced Graphic symbols.

Animate doesn't have a full library of ready-to-use UI elements. This is true. But yet is far easier to get an app running in Animate than in practically any other development solution.

And Animate CC doesn't really support 3d. With Godot, for example, it is simple to combine 2d and 3d on the same canvas.

This is not true. Stage3D is a real 3D solution. The same goes for WebGL. What you have to keep in mind is that Animate is geared towards 2D production not 3D. It's similar to Unity that doesn't have "real" 2D as far as I can tell.

It's hard to enumerate tools like Animate that you can really create an app or game from the ground up, from the scratch. You can draw, design, animate, add code and publish all in one place. Without worrying about 3rd party drawing and design tools, Git, Node, dependencies, Android Studio, and so on.

If the OP is not skilled with code, than Animate is by far the best option. Even experienced coders can find a hard time to get something done in modern game engines. But ANCC is very friendly for beginners. And this ease of usage that makes ANCC so powerful.

Not to say that the OP already has experience with another Adobe solution. And that's the advantage of working with Adobe tools: their integration. The OP will be able to bring assets from InDesign, Illustrator, Photoshop, XD easily. This easy integration would not happen with 3rd party game engines.

Another thing to mention is that you are suggesting a game engine to the OP. But the main goal of the OP is not a game.

[rayek.elfin]

JoãoCésar  wrote

You can create all assets in Animate CC if you wish. I work on a lot of projects that I don't even have to touch other software.

Godot and Unity animation tools are geared towards games because they are game engines. But Animate is not a game engine. It can also be used to create games and great games, of course. But historically, when Animate CC was still Flash, the main usage was interactive content for the web and also animated cartoons for TV.

That's the difference. I don't think an animation studio would pick Godot or Unity to be the animation solution for TV shows like Teen Titans Go! or Wakfu.

Years ago I used to do a lot of animation and development in Flash. Of course game engines and Animate CC are quite different beasts. In this particular case I think the two overlap and both may be used for interactive animated ebook apps. You are correct that Animate has asset production built into it, and vector animation is a real strength of Animate. For bitmap assets an external tools would still be needed, though. All apps have their respective advantages and bottlenecks.

JoãoCésar  wrote

Animations play in real time in the editor itself, even nested animations unlike Animate where movieclips refuse to play and the entire animation must be previewed (or has this changed in the latest version?)

This is not true. You can preview your entire animation at authoring time if you use synced Graphic symbols.

Animate doesn't have a full library of ready-to-use UI elements. This is true. But yet is far easier to get an app running in Animate than in practically any other development solution.

I mentioned movie clips in this context rather than graphic symbols. One of the strengths of Godot's animation timelines is that they will play in real time while editing, if needed. As far as I am aware, Animate CC's movie clips still need to be previewed separately. Unless this was improved since I last used it.

As far as easy and quick app dev goes, visual engines like Construct or Gdevelop are light years faster to develop and deploy apps with compared to Animate. As for myself, I am as fast in Godot as I ever was in Flash. It really comes down to experience with either one. Constructing a GUI is faster in Godot, as is binding quick events to them. Then again, Animate CC is much easier to grasp for a beginner.

JoãoCésar  wrote

And Animate CC doesn't really support 3d. With Godot, for example, it is simple to combine 2d and 3d on the same canvas.

This is not true. Stage3D is a real 3D solution. The same goes for WebGL. What you have to keep in mind is that Animate is geared towards 2D production not 3D. It's similar to Unity that doesn't have "real" 2D as far as I can tell.

You're right, I got off track there. I meant that both Godot and Unity have true visual 3d editors, with easy model manipulation, animating, visual texturing and shading, and so on. Putting a complex shaded 3d model in this 3d canvas is very simple: import and that is it. Compare Stage3D where even putting one simple triangle requires some pretty deep coding, and you will realize tools like Godot and Unity are worlds apart from Animate CC. It is a much more low-level tool compared.

(Hello Triangle | Adobe Developer Connection )

JoãoCésar  wrote

If the OP is not skilled with code, than Animate is by far the best option. Even experienced coders can find a hard time to get something done in modern game engines. But ANCC is very friendly for beginners. And this ease of usage that makes ANCC so powerful.

Not to say that the OP already has experience with another Adobe solution. And that's the advantage of working with Adobe tools: their integration. The OP will be able to bring assets from InDesign, Illustrator, Photoshop, XD easily. This easy integration would not happen with 3rd party game engines.

Another thing to mention is that you are suggesting a game engine to the OP. But the main goal of the OP is not a game.

For game engines the asset workflow is actually very good. Great in Godot, I think. Better than what I had with Flash. But that is another story. Depends again on a particular workflow.

Note that I actually suggested to work in InDesign for overall layout, and add more complicated interactive content and animations through the use of OAM files generated in Animate CC. Then export with In5. Based on the OP's question I assume Animate CC may be out of reach for a story book app. Might be wrong, of course. I hope the OP will respond later and provide us with more information.

The OP asked for an interactive animated story book to be released as an app. I provided a number of options. You also provided an option (Animate CC by itself). All good options for such a project, which is why I stated that it really depends on the exact project requirements the OP has in mind and their skill set.

[Ali Shaatani]

rayek.elfin  wrote

One way to work around these limitations, is to use Animate CC and animate more involved animations in it, and export to OAM files, which are then placed in InDesign. This is probably what you are asking: to include Animate CC animations in InDesign, you must export these as OAM files (and be sure to work with html canvas in Animate CC).

i tried to export my interactivity from Animate CC to OAM and import them to InDesign then to Epub3 ,all the interactive button become static and the animation stuck in loop, so i guess this not a reliable solution

what i'm exactly doing is making static children book interactive , so in some pages im just redesign the layout and changing the ugly assets and in other im adding animations and interactivity as page

and then i want to merge them both to be in single flip ebook , but this is looks impossible to do

and there is no reader can support what ANCC can export as interactive stuff ex(click and drag) not just (video or gif )

and there is no any platform can fully support HTML/JS from (ANCC) and static pages (InDesign) in single android app in nice flipping way as (E-reader)

what i'm planning to find is something that i can import HTML/JS pages as separate pages and other stuff videos and audio and the rest of the static pages

[rayek.elfin · Accepted solution]

With the free html export plugin that I mentioned earlier you export all the pages from InDesign. Then export all individual Animate CC pages as html. Add missing links, and you may have to fix InDesign's generated link function.

When everything is working, and all pages link up properly, use Cordova to convert to a working app for mobile, desktop, etc.

Although I have a feeling you might not have the technical skills (yet) to accomplish these steps (not meant in a bad way, of course). Which means you will have to read up on Cordova. Or perhaps as an alternative use Adobe PhoneGap to convert to an app for mobile.

The only way to combine html from InDesign and Animate CC in one app is to use a webview wrapper (Cordova, PhoneGap, etc.). That, or publish the pages as a live website. But you will still have to fix things, and use some basic HTML, CSS and Javascript to get it all working properly. No way around this.

[JoãoCésar]

My suggestion is that you bring your InDesign assets in and design and code everything in Animate CC.

Animate has all the tools you need to create an interactive book.

Regards,

JC