6 Replies Latest reply on Oct 20, 2014 8:50 AM by killahfhonix

    Multi-page app with edge animate

    JRHall Level 1

      I am using Edge Animate to create a multi-page interactive mobile app.


      I have the composition built and working fine. However, my question is the best way to build the multiple pages and link between them.


      I know I can set them up as individual html pages and navigate like a standard website, but will that system translate into an app? Or is there a better way to set up the pages, such as multiple compositions in a single html wrapper?

        • 1. Re: Multi-page app with edge animate
          robboerman Level 4

          It's better to keep it in 1 html file.


          don't know if phonegap updated this but it would alwase bug with multiple html files.

          1 person found this helpful
          • 2. Re: Multi-page app with edge animate
            JRHall Level 1

            Thanks for that.


            I'm only just really getting into Animateand coming from a designer/animator direction with little coding background.


            I have looked at all the documentation I can find on bootstrapping and multiple compositions etc. However, all of them seem to assume a certain level of HTML already and seem to skip over some of the very basics, and I am struggling a little.


            Can I keep each of my compositions organized in individual folders, or do I need to have everything in a single folder with all the images and other media in a single folder each?


            Sorry, I have no code yet to show as I'm not entirely sure where to start. Should I take the.html Animate creates for the first comp and add in the extra comps and stages as I go along?


            Thanks for any help

            • 3. Re: Multi-page app with edge animate
              arao2k6 Level 2

              You could take the following approach by creating a wrapper html : http://blogs.adobe.com/edge/2012/05/15/bootstrapping-edge-compositions/


              Also look into the post: http://forums.adobe.com/thread/1242949 for some more info.




              1 person found this helpful
              • 4. Re: Multi-page app with edge animate
                JRHall Level 1

                Thanks Avinash,


                I think the second one is very hepful for this.


                I will try it out and post whether or not it works for what I want

                • 5. Re: Multi-page app with edge animate
                  JRHall Level 1

                  Hi Avinash,


                  I did eventually try the bootstrapping system.


                  I think it is possibly the way to go but I have a couple of problems;


                  1: My Edge Comps are set to responsive scaling (both) and center stage (both) and have overflow set to hidden. However, when I load the bootstrapped version, none of these settings seem to be working anymore.


                  2: All my navigation is set on internal buttons but I can't seem to use them to control navigation in the bootstrap version. I can click on them and advance the timeline but I can't use them to affect a variable contained within the wrapper.html nor can I use a timeline trigger to load a new composition.


                  Starting to go a little mad with it all

                  • 6. Re: Multi-page app with edge animate
                    killahfhonix Level 1



                    Following the bootstrap callout below.... how can one better organise your stages; currently all the files are in the same root dir.

                    http://www.adobe.com/devnet/edge/articles/bootstrapping-edge-compositions-with-bootstrapca llback.html

                    Was trying to reach out to Josh Hatwick, but cant.

                    It would be quite helpful if the staff can provide an amended example.zip, so that the wrapper loads "Page B" and "Page C", but each with its own folder also carrying a bkg image?




                    The image added is important cause it seems to become hard coded as a string as below _edge.js file.

                    { rect: ['413px', '609px', '317px', '118px', 'auto', 'auto'], id: 'r5', userClass: 'r', type: 'image', fill: ['rgba(0,0,0,0)',
                    '/images/r5.png', '0px', '0px']