13 Replies Latest reply on Aug 22, 2013 10:51 AM by mobly

    trying to use reel.js - cool 360 spin

    mobly Level 3

      Hi Guys

      I found this really neat open source .js script for spiing an image sequence. The  1st script below works a treat in Dreamweaver, but struggling as ever to translate it to EA.

       

      <!DOCTYPE html>

        <head>

          <meta charset='utf-8' content='text/html' http-equiv='Content-type' />

       

          <script src='jquery-1.9.1.min.js' type='text/javascript'></script>

          <script src='jquery.reel-1.2.1-bundle.js' type='text/javascript'></script>

       

        </head>

        <body>

       

          <img id="image" src='fish/DSCN0691.JPG' width="210" height="186" />

          <script>

            $(function(){ // when DOM ready

       

       

              $('#image').reel({

                images:      'fish/DSCN####.JPG|691..702'

              });

       

       

            });

          </script>

       

      and below is how I've tried to adapt it for Edge Animate

       

      ***********************

      * Adobe Edge Animate Composition Actions

      *

      * Edit this file with caution, being careful to preserve

      * function signatures and comments starting with 'Edge' to maintain the

      * ability to interact with these actions from within Adobe Edge Animate

      *

      ***********************/

      (function($, Edge, compId){

      var Composition = Edge.Composition, Symbol = Edge.Symbol; // aliases for commonly used Edge classes

       

       

         //Edge symbol: 'stage'

         (function(symbolName) {

           

           

            Symbol.bindElementAction(compId, symbolName, "document", "compositionReady", function(sym, e) {

               yepnope(

               {

                   nope:[

                     'JS/jquery.reel-1.2.1-bundle.js',

                    ],

                   complete: init

               }

               );

               function init() {

                var stage = sym.$("image");

                }

       

       

            $(function(){ // when DOM ready

       

       

              $('#image').reel({

                images:      'fish/DSCN####.JPG|691..702'

              });

       

       

            });

       

       

            });

            //Edge binding end

       

       

         })("stage");

         //Edge symbol end:'stage'

       

       

      })(jQuery, AdobeEdge, "EDGE-10368737");

       

       

      I have placed the first frame image on the stage and called the div "image" - although I see no reference to it in the full code in EA

       

      Any ideas?

       

      Cheers

      Alistair

        • 1. Re: trying to use reel.js - cool 360 spin
          resdesign Adobe Community Professional & MVP

          Hey Alistair,

           

          I will look at it more closely later but at first look it seems like you forgot to load 'jquery-1.9.1.min.js which in mentioned in the example at the top.

          • 2. Re: trying to use reel.js - cool 360 spin
            mobly Level 3

            I did have 'jquery-1.9.1.min.js with the yep/nope stuff but it didn't work, then I noticed there was an older version in the edge includes folder 'jquery-1.7.1.min.js, so thought they may be clashing? An uneducated guess!! i'll zip all the files and post them in a minute Cheers Alistair

            • 3. Re: trying to use reel.js - cool 360 spin
              mobly Level 3

              Files are here;  https://app.box.com/s/o7medsor513x1tdo69qq

               

               

              /***********************

              * Adobe Edge Animate Composition Actions

              *

              * Edit this file with caution, being careful to preserve

              * function signatures and comments starting with 'Edge' to maintain the

              * ability to interact with these actions from within Adobe Edge Animate

              *

              ***********************/

              (function($, Edge, compId){

              var Composition = Edge.Composition, Symbol = Edge.Symbol; // aliases for commonly used Edge classes

               

               

                 //Edge symbol: 'stage'

                 (function(symbolName) {

                   

                   

                    Symbol.bindElementAction(compId, symbolName, "document", "compositionReady", function(sym, e) {

                       yepnope(

                       {

                           nope:[

                                     'JS/jquery-ui-1.9.2.custom.min.js',

                             'JS/jquery.reel-1.2.1-bundle.js',

                            ],

                           complete: init

                       }

                       );

                    (function(){ // when DOM ready

               

               

                    

                      var mySymbolObject = sym.getSymbol("image");

                      ('#image').reel({

                        images:      'fish/DSCN####.JPG|691..702'

                      });

               

               

                    });

               

               

               

               

                    });

                    //Edge binding end

               

               

                 })("stage");

                 //Edge symbol end:'stage'

               

               

                 //=========================================================

                

                 //Edge symbol: 'image'

                 (function(symbolName) {  

                

                 })("image");

                 //Edge symbol end:'image'

               

               

              })(jQuery, AdobeEdge, "EDGE-10368737");

              • 4. Re: trying to use reel.js - cool 360 spin
                resdesign Adobe Community Professional & MVP

                Hey, What is it supposed to do?

                • 5. Re: trying to use reel.js - cool 360 spin
                  resdesign Adobe Community Professional & MVP

                  Hey I got it to work:

                  Use this and try it:

                   

                     yepnope(

                     {

                         nope:[

                                   'JS/jquery-ui-1.9.2.custom.min.js',

                           'JS/jquery.reel-1.2.1-bundle.js',

                          ],

                         complete: init

                     }

                     );

                   

                   

                  function init() {

                   

                   

                                      sym.$('.fishbowl').reel({

                            indicator:   5, // For no indicator just remove this line

                            images:      'fish/DSCN####.JPG|691..702'

                          });

                   

                   

                   

                   

                  }

                   

                   

                   

                  Here is your sample corrected:

                  https://app.box.com/s/a645uobfuphcwsqwrdfc

                  • 6. Re: trying to use reel.js - cool 360 spin
                    mobly Level 3

                    First off, brilliant, thank you so much.  However, I cant get my files to work, even pasting your code into mine!, I'll keep looking! So did you literally just change this;  function init() {                       sym.$('.fishbowl').reel({           indicator:   5, // For no indicator just remove this line           images:      'fish/DSCN####.JPG|691..702'         });   }  I created a symbol of the div, and gave the div the classname fishbowl but it's not having it, I'm nor getting the little rotate icon on mouse over, but as I say I'll keep looking Thanks again!! cheers Alistair

                    • 7. Re: trying to use reel.js - cool 360 spin
                      mobly Level 3

                      Oh Boy, I think you have sprinkled fairly dust on your file! In trying to understand why my version does not work, I see in yep/nope you use 'JS/jquery-ui-1.9.2.custom.min.js', however that .js file is not in the folder "JS" its in the edge includes folder but as well as that, in there is 'jquery-ui-1.9.1.custom.min.js', so not even the same js file name. I'm stumped!  I mean I'm really happy it works, but I ned to understand why it works, otherwise I wont learn!  cheers Alistair

                      • 8. Re: trying to use reel.js - cool 360 spin
                        resdesign Adobe Community Professional & MVP

                        Oops! - no need for jquerry-ui! Take the reference off and it will load faster.

                        • 9. Re: trying to use reel.js - cool 360 spin
                          resdesign Adobe Community Professional & MVP

                          Hey, I just updated the file. The class is on the image, not the symbol. (class is fishbowl not yellowGlow like in the picture).

                          yellowGlod.png

                          Mark it as correct if you want!

                          • 10. Re: trying to use reel.js - cool 360 spin
                            resdesign Adobe Community Professional & MVP

                            I updated the file again with some explanation in it!

                            • 11. Re: trying to use reel.js - cool 360 spin
                              mobly Level 3

                              I think I must have buggered my file here, as it just doesn't work; my file that you sent back does work, and it's really straight forward what you have done, although I couldn't do it myself. the reel.js is worth having a look at, as there are lots of ways to adjust it, plus you can annotate a frame on a 360 spin, very useful for spinning an object with built in hotspots. Anyway you are a star, as ever!  cheers Alistair

                               

                              P.S i'm not really too fussed about this, but I put the EA index file plus all associate files on my server to test, and the images dont appear! so still need to test on iPad, :-)

                              • 12. Re: trying to use reel.js - cool 360 spin
                                resdesign Adobe Community Professional & MVP

                                Thanks! You are very kind! :)

                                Weird. Have you tested their samples on the iPad? I'll look at it in a few.

                                • 13. Re: trying to use reel.js - cool 360 spin
                                  mobly Level 3

                                  oh yes, the .js works well in the iPad check out; jquery.vostrel.cz/reel also works with a sprite sheet, so for small images, this would be more efficient as there is just one image to work with rather than say 36 images. and also in the pipeline gyroscope hardware support!