9 Replies Latest reply on Jun 30, 2016 8:35 AM by just.emma

    Embed animate files

    stver56334116

      Hi

       

      I've just published a small animation on animate, and now have a java script and html file.

      How do i go about embedding these files?

       

      thanks

      Stephen

        • 1. Re: Embed animate files
          kglad Adobe Community Professional & MVP

          embed in what?

           

          normally, you would upload the html and js file to a server and link to your html file to display your animation.

          • 2. Re: Embed animate files
            stver56334116 Level 1

            Hi

             

            thanks for the reply.

            I'm trying to embed an animation in an e-book.

            any idea how to make this work?

             

            thanks

            • 3. Re: Embed animate files
              marjantrajkovski Level 4

              Best solution is to embed with iframe. Other harder way for which is needed good knowledge of HTML/JS is to link external JavaScript with canvas element in html page. All you need in your html page is <canvas  id="mycanvas"></canvas> tag where you want to appear Canvas with ID which reference external Canvas JavaScript.

              • 4. Re: Embed animate files
                kglad Adobe Community Professional & MVP

                how are you publishing/creating your ebook?  or is your flash/animation actually your ebook?

                • 5. Re: Embed animate files
                  stver56334116 Level 1

                  im using kotobee to create the ebook. i have access to the html, css and java script in the background

                  • 6. Re: Embed animate files
                    kglad Adobe Community Professional & MVP

                    ask for help using kotobee.

                    • 7. Re: Embed animate files
                      just.emma Adobe Community Professional

                      I just did a quick search on their site; it looks like you can zip up your files, upload the zip, and insert it as a widget:

                       

                      Animation techniques for ebooks - Kotobee Blog

                       

                      Book Widgets: Everything you need to know - Kotobee Blog

                       

                       

                      author1.jpg

                      • 8. Re: Embed animate files
                        Colin Holgate MVP & Adobe Community Professional

                        Perhaps publishing as OEM would work.

                        • 9. Re: Embed animate files
                          just.emma Adobe Community Professional

                          Additional instructions; I just realized it was slightly more involved than just uploading the zip; first you have to add a plist file and add .wdgt to the name of your folder.

                           

                          Full instructions below:

                          How to create book widgets from scratch?

                          Creating your own widget from scratch highly depends on your web programming proficiency. If you that is something difficulty for you then stick instead to widget builders like the ones inbookry.com and bookwidgets.com. If you need to create something very specific then here are some guidelines for the process.

                          As we’ve already mentioned, an ebook widget is basically an HTML5 app bundled into a Zip archive. The HTML5 app may consist of a root HTML file along with a collection of images, JavaScript, and CSS files. It does not mean that the entire functionality is limited to these files, but it can be shared with a backend system, written in any language of your choice, such as PHP, Java, or .Net. If a backend system is used, then an Internet connection is required for the widget to operate correctly. A smart widget may run without an Internet connection, but once an Internet connection is detected, it will utilize services from the backend.

                          JavaScript is perhaps the most important coding tool required, since it’s what intercepts interaction from the user, as well as controls what displays on the screen. Entire games and apps may be developed using JavaScript. To develop your widgets, you can use JavaScript frameworks and libraries, that can ease the process for you, such as jQuery, Angular, Knockout, etc. Just be careful with the file size – many times you’re better off sticking with vanilla JavaScript (plain code) if you want to achieve simple functionality.

                          After your app is developed and ready, name the root index file as index.html. All that is left, to make the widget compatible with iBooks Author, is to add an Info.plist file. This file defines some properties that are not mentioned elsewhere, such as the width and height of the container, and the location of the root file (index.html in our case). Also, if you would like to represent this widget with a certain icon as the button, the icon should be named Default.png and should sit at the root level. This is an example of an Info.plist file:

                          <?xml version="1.0" encoding="UTF-8"?>
                          <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
                          <plist version="1.0"><dict>
                          <key>BackwardsCompatibleClassLookup</key>
                          <true/>
                          <key>CFBundleDevelopmentRegion</key>
                          <string>English</string>
                          <key>CFBundleDisplayName</key>
                          <string>calculator</string>
                          <key>BRNotifiesOnReady</key>
                          <true/>
                          <key>CFBundleIdentifier</key>
                          <string>com.bookry.calculator.embed</string>
                          <key>CFBundleName</key>
                          <string>calculator</string>
                          <key>CFBundleShortVersionString</key>
                          <string>1.0</string>
                          <key>CFBundleVersion</key>
                          <string>1.0</string>
                          <key>KFNotifiesOnReady</key>
                          <true/>
                          <key>Height</key>
                          <integer>768</integer>
                          <key>MainHTML</key>
                          <string>ibooks_container.html</string>
                          <key>Width</key>
                          <integer>1024</integer>
                          <key>IBNotifiesOnReady</key>
                          <true/>
                          </dict>
                          </plist>

                          Place all the files into one folder postfixed with “.wdgt”, compress it into a zipped file, and congratulations!

                          In a separate article, we will look take a real-world example and implement a book widget completely step by step.

                           

                           

                           

                          Source: Book Widgets: Everything you need to know - Kotobee Blog