17 Replies Latest reply on Oct 27, 2017 11:36 AM by sergiopol

    How to publish an Animate app?

    dalstondavid Level 1

      Hi all,

       

      I'm building some interactive animations in Animate CC and would like to create an app around them. How do I go about publishing them? Do I use PhoneGap? And do I create an Adobe Air document or an HTML canvas document?

       

      You can tell I don't even know what I'm talking about here. I previously built and published an app in InDesign, currently on sale on the app store. I found the whole DPS process very nebulous and fiddly. I'm a musician and writer, not very tecky, but always happy to learn. What's the best way for me to get my interactive animations for sale onto mobile devices? And can I do it as part of my ordinary CC subscription?

       

      I don't know why Adobe hasn't produced some very simple, non-jargon videos for people like me who just want to know how to go about this in plain English. Every time I come across a tutorial it uses words I've never heard before. As a teacher, I do know how difficult it can be to remember what it's like not to know this stuff, but it's easy to feel a bit excluded from what are probably perfectly simple processes

       

      Many thanks for any help!

      Greetings from London

      @dalstondavid

        • 1. Re: How to publish an Animate app?
          JosephLabrecque Adobe Community Professional

          Hi. You have a number of choices here...

          • You could definitely export HTML5 Canvas and embed that within a PhoeGap application.
          • You could also create an AIR for Android or AIR for iOS project and create a native mobile app directly from Animate CC.

          Normally when talking mobile projects, you need to identify a few things before making a choice like this. Primary amoung these are what platforms to target, you capabilities and familiarity with certain languages, and the project requirements.

          • 2. Re: How to publish an Animate app?
            dalstondavid Level 1

            Thanks Joseph, I'm not sure what the considerations are for choosing one over another, mainly because I don't know what the various technologies will allow me to do.

            I want to create a series of animated presentations with a little bit of interactivity—touching a few buttons (menu etc) and maybe a bit of drag and drop (if I can figure that out...), together with a voice-over. Nothing too fancy. No in-app purchases, no data collection, no game play, just some swiping and clicking and dragging and watching and listening. As far as the languages, well if I need some javascript I'll scrabble about and watch some youtube and ask for help. The app should ideally be available on the app store for iOS and Android tablets and phones.

             

            I used Flash years ago and creating animations is not new to me; and more recently I've been using Edge Animate, so making the thing look and act right is probably going to be easy enough. It's really just how to get it out and up.

             

            When you say "native mobile app" how is that different from the first option? In practical terms, what are the implications for the process?

             

            Thanks for your help

            Best wishes,

            David

            • 3. Re: How to publish an Animate app?
              JosephLabrecque Adobe Community Professional

              Sounds to me like using AIR to publish native apps to iOS and Android is the way to go. That supports all you want to do and is a direct compile from Animate CC - whereas using a combo of HTML5 Canvas and PhoneGap would be a lot more tricky - especially where sound is considered.

              1 person found this helpful
              • 4. Re: How to publish an Animate app?
                dalstondavid Level 1

                Okay, I'm creating in Animate CC and intend to stay there if possible. Today I've now gone through the rigmarole of development certificate and provisioning profile and app ID on the Apple Developer site and can successfully preview the app on the connected iPad, all within Animate CC. So I guess that is the way to go for now. No idea how to package up the app for the iTunes store, but that's a long way away for now, so no worries!

                 

                Now I just have to learn how to use actions and stuff! Many thanks for your help.

                I guess doing it this way means I cannot be uploading an html animation to the web, for example, but can only view it on my mobile device?

                 

                David

                • 5. Re: How to publish an Animate app?
                  JosephLabrecque Adobe Community Professional

                  Not necessarily. Any assets and animation you create using Animate CC can be used in any other Animate CC document type. So you could easily copy your animated content from an AIR document to an HTML5 Canvas document for web.

                  • 6. Re: How to publish an Animate app?
                    dalstondavid Level 1

                    Right, good to know. I'll doubtless have other questions as I get into this, but thanks for your help for now!

                    • 7. Re: How to publish an Animate app?
                      sergiopol Level 1

                      Hello Joseph, sorry to jump into someone else's post but it's tighly related to my needs. I happened to just finished watching your lynda.com tutorial on data-driven Animation. You see I need to create an RSS feed app for both Android and iOS and since I've worked in Animate I kind of know my way around it so I decided to give it a go. However from what I've come to know AIR is a simpler and perhaps more effective way to publish the app than HTML. So what would you recommend? Is it possible to do in AIR rather than HTML 5? Do you know of a tutorial like the one you did at lynda but focusing on AIR? Thank you very much.

                      • 8. Re: How to publish an Animate app?
                        JosephLabrecque Adobe Community Professional

                        No problem. Here are a few thoughts:

                        1) AIR is (IMO) a bunch better solution for apps. HTML5 Canvas is great for Web though!
                        2) AIR can actually render HTML content within an HTML view. So it could even act sort of like an Electron or Cordova wrapper.
                        3) You could also utilize Cordova/PhoneGap.

                         

                        There are lots of options - but yeah - you could def use AIR. I wrote a MXNA/AXNA (RSS news aggregator) mobile app in AIR a while back, even!

                         

                        AXNA Feed Reader - Android Apps on Google Play

                         

                        I'll try and find the source code to share.

                        • 9. Re: How to publish an Animate app?
                          sergiopol Level 1

                          That'd be awesome Joseph. Thanks for that and for your insight!!

                          • 10. Re: How to publish an Animate app?
                            JosephLabrecque Adobe Community Professional

                            Here is an example snippet using AS3:

                             

                            private function gatherFeedData():void {

                              xmlLoader = new URLLoader();
                               xmlLoader.addEventListener(flash.events.Event.COMPLETE, feedLoaded);
                               xmlLoader.load(new URLRequest("http://inflagrantedelicto.memoryspiral.com/feed/"));
                            }

                             

                            private function feedLoaded(e:flash.events.Event):void {

                              feedData = new XML(e.target.data);
                               feedListCollection = new ListCollection();
                               for each(var feedItem:XML in feedData.channel.item) {

                              feedListCollection.push({title:String(feedItem.title), link:String(feedItem.link)})

                              }

                              feedList.dataProvider = feedListCollection;
                               feedList.itemRendererProperties.labelField = "title";
                               feedList.addEventListener(starling.events.Event.CHANGE, loadArticle);
                            }

                            1 person found this helpful
                            • 11. Re: How to publish an Animate app?
                              Colin Holgate MVP & Adobe Community Professional

                              Should you show your variable declaration lines too?

                              • 12. Re: How to publish an Animate app?
                                sergiopol Level 1

                                Thanks a lot Joseph, that's awesome! Do you think it would be possible to grab the picture attached to the feed and use it as the button for the article?

                                • 13. Re: How to publish an Animate app?
                                  JosephLabrecque Adobe Community Professional

                                  There is a LOT missing here - just a snippet of the relevant bits.

                                  • 14. Re: How to publish an Animate app?
                                    JosephLabrecque Adobe Community Professional

                                    Depends on the feed - you could parse for images though - sure.

                                    • 15. Re: How to publish an Animate app?
                                      sergiopol Level 1

                                      I'm trying to understand your snippet. The first part is when the app gathers the feeds' contents and the second one sends the data collected in the first part to the dynamic text fields in the app, is that right?

                                       

                                      So if I need to grab the picture of the feed I should include something like:

                                       

                                      "..feedListCollection.push({title:String(feedItem.title), link:String(feedItem.link), pic:(feedItem.image)})"?

                                       

                                      The variables not declared here are the ones specifying the interface elements right? And I guess it is missing the part that creates an instance of itemRenderer for each feedItem found in the XML

                                      Any other stuff I could be missing?

                                       

                                      Thanks a lot Joseph.

                                      • 16. Re: How to publish an Animate app?
                                        JosephLabrecque Adobe Community Professional

                                        Yeah, this particular app instance is using Starling and Feathers - so those are Feathers components it is populating.

                                         

                                        Things like xmlLoader.load(new URLRequest("http://inflagrantedelicto.memoryspiral.com/feed/")); will retrieve the RSS data into the xmlloader and that then fires the feedLoaded function to actually parse the data.

                                         

                                        feedData = new XML(e.target.data); will convert the raw data to XML object type and then we can loop through and grab bits of data from each item via

                                        for each(var feedItem:XML in feedData.channel.item) {

                                          //feedItem.title

                                          //feedItem.link

                                        }

                                        • 17. Re: How to publish an Animate app?
                                          sergiopol Level 1

                                          Excellent Joseph, thanks again.

                                           

                                          On Fri, Oct 27, 2017 at 11:48 AM, JosephLabrecque <forums_noreply@adobe.com>