18 Replies Latest reply on Jun 9, 2014 6:01 PM by TimJaramillo

    Deeplinking of pages within single Edge project

    -=XX=-Nephilim Level 1

      Hi all!

       

      I am attempting to build simple website in Edge Animate and so far things are going surprisingly well.

       

      However, I have a slight issue / problem...

       

      When I am navigating from page to page URL naturally stays the same.

       

      I am wondering if there is any 'deeplinking' technique - same or similar to one we used for Flash projects.

       

      In short - what I wish to achieve is simple URL change while browsing through a site eg. domainame.com/home/ domainame.com/gallery/ etc...

       

      Please help if you can

        • 1. Re: Deeplinking of pages within single Edge project
          TimJaramillo Level 4

          Hi there, this jQuery plugin looks like it might work for your needs:

           

          http://benalman.com/projects/jquery-hashchange-plugin/

          • 2. Re: Deeplinking of pages within single Edge project
            -=XX=-Nephilim Level 1

            Thanks!

             

            Hmmm...

             

            Has anyone tried this within Edge project?

             

            If so, was it working and how exactly was it implemented?

             

            Simple Edge samples are welcome for coding noobies like myself 

            • 3. Re: Deeplinking of pages within single Edge project
              TimJaramillo Level 4

              Hey Nephilim, here's a simpler implementation that doesn't use any library, but instead uses the window.location.hash method. Let me know if you have any Q's!

               

              example (click buttons to add hash tag to url):

              www.timjaramillo.com/code/edge/url_set_deeplink

               

              source:

              www.timjaramillo.com/code/edge/_source/url_set_deeplink.zip

              • 4. Re: Deeplinking of pages within single Edge project
                -=XX=-Nephilim Level 1

                Hi Tim!

                 

                Thanks again! That works in a sense of adding hash tags - yes...

                 

                But it appears that browser back button and acctual URLs don't work.

                 

                For example, when I click on back button hash does change however Edge timeline remains in the same position. Same if I copy / paste hashed url eg. domainname.com/#gallery site simply loads from the start ignoring the hyperlink.

                 

                In short, that example works only cosmetically but not functionally

                 

                It would be great if we could figure out proper deeplinking somehow - deeplinking where for example URL domainname.com/#gallery would point browser to the gallery page / place on the Edge timeline or indeed where back / forward browser buttons would work as intended since after all that is the point of deeplinking - for user(s) to bookmark particular parts of the site and jump straight to it.

                 

                I think this would be beneficial for entire Edge community so figuring this out would be great for all.

                • 5. Re: Deeplinking of pages within single Edge project
                  TimJaramillo Level 4

                  Hey Nephilim,

                   

                  Keep in mind that this program is called "Edge Animate"- and it's emphasis is really on animation, not on creating fully-functional, full-featured websites with a simple click. That being said, since the program is built on javascript, you can use any 3rd party javascript libraries you want, in order to hack together fully-functioning websites. This requires some basic javascript knowledge- if you've implemented swfAddress in Flash AS3, you can probably implement one of the 3rd party jQuery deeplink/history plugins- the basic concepts are the same, even if the code syntax is slightly different. In fact, here's a jQuery history plugin built by the same people that built swfAddress:

                   

                  http://www.asual.com/jquery/address/

                   

                  I put together a quick, simple sample of the above asual jquery address plugin (if you use it on a production project, please check out their donation page). This sample shows setting the hashtag via button click, and then using the above library to listen to that URL change and respond accordingly. It also shows how to listen to the back/fwd buttons, and using the library to respond to those events. It also shows parsing the initial url for deeplinks, and responding accordingly.

                   

                  root example:

                  www.timjaramillo.com/code/edge/deeplink_back_fwd_button

                   

                  deeplink example (disregard the extra space between o-n at the end- the forum is adding that space):

                  http://www.timjaramillo.com/code/edge/deeplink_back_fwd_button/#section2

                   

                  deeplink example (disregard the extra space between o-n at the end- the forum is adding that space):

                  http://www.timjaramillo.com/code/edge/deeplink_back_fwd_button/#section3

                   

                  source:

                  www.timjaramillo.com/code/edge/_source/deeplink_back_fwd_button.zip

                   

                  Good luck, and mark this puppy as Correct!

                  • 6. Re: Deeplinking of pages within single Edge project
                    -=XX=-Nephilim Level 1

                    Hi Tim,

                     

                    This is great - many thanks!

                     

                    Off topic, I am wondering if you can help with something else...

                     

                    I posted this few weeks ago and had no replies :s

                     

                    http://forums.adobe.com/message/5020442#5020442

                     

                    Any chance you can have a look and through some light if you can?

                     

                    Thank you again - you are star!

                    • 7. Re: Deeplinking of pages within single Edge project
                      Rokoff Level 1

                      Hi Tim,

                      I'm working on a dress up game, where the user would swipe three stacked divs to customize a characters "outfit".

                      div 1 would be a head

                      div 2 would be a body (or shirt)

                      div 3 would be pants

                      Lastly, there's a background that would change on a button click. I've got a working example, and so far it seems to be functioning well.

                       

                      My goal is to allow the user to share the "outfit" that they select. Ideally it would work on current desktop and mobile browsers.

                       

                      I came across this thread, and it seems like your solution for creating deeplinks would be a good way to accomplish my goal. However, I'm not sure how to best implement the code you'd provided into my project as it's a bit more complex (or if this is even possible using jQuery address).

                       

                      Would you have any thoughts, or possibly be able to point me in the right direction? Thanks!

                      Oliver

                       

                      https://www.dropbox.com/s/cjq2cx9t0aw5tnk/dress_up.zip

                      • 8. Re: Deeplinking of pages within single Edge project
                        TimJaramillo Level 4

                        Hey Rokoff,

                         

                        Here's a general breakdown of how I'd go about this:

                         

                        Use URL params for each attribute you want to share. When a user shares the URL, concatenate the shared values to the URL- a shared URL would look something like this:

                         

                        www.mycoolsite.com/index.html?head=head1&body=body3&pants=pants2

                         

                        Then when your site launches, check to see if the above URL params exist, if so- grab the URL param values and show the shared avatar.

                         

                        //---------------------------------------------------------------------------------------- ---------------------------------------------------

                         

                        Below is a function that you can use to get the value of a URL param that you pass to it (this is raw custom code, not related to the example libraries I posted in the previous examples). Run a check for each of your attributes, passing in the value to the function, and using the return value to rebuild the avatar with the shared values (jump to a frame label with the corresponding attire).

                         

                        // get URL param values

                        var headValue = sym.getParam('head');// head1

                        var bodyValue = sym.getParam('body');// body3

                        var pantsValue = sym.getParam('pants');// pants2

                         

                        // tell symbols to stop at labels, based on URL params

                        sym.myHead.stop(headValue);

                        sym.myBody.stop(bodyValue);

                        sym.myPants.stop(pantsValue);

                         

                         

                        sym.getParam = function( name )

                                  {

                                            name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");

                                      var regexS = "[\\?&]" + name + "=([^&#]*)";

                                      var regex = new RegExp(regexS);

                                      var results = regex.exec(window.location.href);

                                      if (results == null)

                                          return "";

                                      else

                                          return results[1];

                                  }

                        • 9. Re: Deeplinking of pages within single Edge project
                          Rokoff Level 1

                          Thanks for the quick response Tim.

                           

                          I'm attempting to adapt this code to my project and am getting some errors. Right now I'm just trying to get the "head" to function properly, and have the rest commented out. I substituted getParam with getVariable in the get URL param values (looking at the API, this seemed to be the way to do it, but honestly I'm not sure). If you have another minute, can you see if there's anything obvious jumping out at you? (I don't want to take up too much of your time though. I'm doing my best to wrap my head around this.) Here's what I'm using:

                           

                          // get URL param values

                          var headValue = sym.getSymbol('monster').getVariable('swipe_head');// head1

                          //var headValue = sym.getSymbol('monster').getParam('swipe_head');// head1

                          //var bodyValue = sym.getSymbol('monster').getParam('swipe_body');// body3

                          //var feetValue = sym.getSymbol('monster').getParam('swipe_feet');// feet2

                           

                           

                          // tell symbols to stop at labels, based on URL params

                          sym.stop(headValue);

                          //sym.myBody.stop(bodyValue);

                          //sym.myFeet.stop(feetValue);

                           

                           

                          sym.getParam = function( name ){

                          name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");

                              var regexS = "[\\?&]" + name + "=([^&#]*)";

                              var regex = new RegExp(regexS);

                              var results = regex.exec(window.location.href);

                                  if (results == null)

                                      return "";

                                  else

                              return results[1];

                          }

                          • 10. Re: Deeplinking of pages within single Edge project
                            TimJaramillo Level 4

                            Hey,

                             

                            The below lines are correct. They are calling the "getParam" function that I gave you. It has nothing to do with getVariable:

                            var headValue = sym.getParam('head');// head1

                            var bodyValue = sym.getParam('body');// body3

                            var pantsValue = sym.getParam('pants');// pants2


                             

                            PM me your files if you'd like me to take a look.

                            • 11. Re: Deeplinking of pages within single Edge project
                              TimJaramillo Level 4

                              Here's a functioning protoype:

                              http://www.timjaramillo.com/code/edge/url_param_v2/index.html?head=head3&body=body3&pants= pants3

                              http://www.timjaramillo.com/code/edge/url_param_v2/index.html?head=head1&body=body2&pants= pants3

                              http://www.timjaramillo.com/code/edge/url_param_v2/index.html?head=head3&body=body2&pants= pants1

                               

                              Source:

                              www.timjaramillo.com/code/edge/_source/url_param_v2.zip

                               

                               

                               

                              And the code (my previous post had some silly errors, like trying to set variable values before functions- JS has some weird quirks):

                               

                               

                              var headValue;

                              var bodyValue;

                              var pantsValue;

                               

                               

                              sym.init = function()

                              {

                                  // get values from URL

                                    headValue = sym.getParam('head');// head1

                                        bodyValue = sym.getParam('body');// body2

                                        pantsValue = sym.getParam('pants');// pants3

                               

                               

                                        // tell symbols to stop at labels, based on URL params

                                        sym.getSymbol('myHead').stop(headValue);

                                        sym.getSymbol('myBody').stop(bodyValue);

                                        sym.getSymbol('myPants').stop(pantsValue);

                               

                               

                                        console.log('headValue = '+headValue);

                                        console.log('bodyValue = '+bodyValue);

                                        console.log('pantsValue = '+pantsValue);

                              }

                               

                               

                              sym.getParam = function( name )

                              {

                                        name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");

                               

                               

                                        var regexS = "[\\?&]" + name + "=([^&#]*)";

                                        var regex = new RegExp(regexS);

                                        var results = regex.exec(window.location.href);

                               

                               

                                        if (results == null)

                                                  return "";

                                        else

                                                  return results[1];

                               

                               

                              }

                               

                               

                              sym.init();

                              • 12. Re: Deeplinking of pages within single Edge project
                                Rokoff Level 1

                                This is super-close Tim. One last question (hopefully)...

                                Since I've got my 3 divs nested within a container div, how would I reference them?

                                 

                                For example I'm trying this, but am getting an error in the event handler (element):

                                headValue = sym.getSymbol('monster').getParam('swipe_head');// head1

                                • 13. Re: Deeplinking of pages within single Edge project
                                  TimJaramillo Level 4

                                  Hey there,

                                   

                                  Don't do this!

                                  headValue = sym.getSymbol('monster').getParam('swipe_head');// head1

                                   

                                  Do this!

                                  headValue = sym.getParam('head');// head1

                                   

                                  Not sure if I explained this clearly. The above line is setting the variable "headValue", by calling the function "getParam", which I gave you. You should not be setting the "headValue" variable to your symbol- that won't do anything.

                                   

                                  Now, see in my code where I said "tell symbols to stop at labels, based on URL params"? That's where you will want use the URL param to send the head symbol to a corresponding timeline label. Not sure how your symbols are nested, but assuming the different heads are in: monster/swipe_head, you would do this:

                                  sym.getSymbol('monster').getSymbol('swipe_head').stop(headValue);

                                   

                                  See the API doc for more info on targetting symbols:

                                  http://www.adobe.com/devnet-docs/edgeanimate/api/current/index.html?utm_source=feedburner& utm_medium=feed&utm_campaign=Feed%3A+developer_center_tutorials+(Adobe+Developer+Center+RS S+Feed)#Use_symbol_elements

                                  • 14. Re: Deeplinking of pages within single Edge project
                                    Rokoff Level 1

                                    Ahh ok. That makes sense. Thank you!

                                    • 15. Re: Deeplinking of pages within single Edge project
                                      TimJaramillo Level 4

                                      No prob!

                                       

                                      Btw, can you mark my post from 4:13 PM as helpful (click the "Yes" next to "Was this helpful"), so other users can find the correct solution?

                                      • 16. Re: Deeplinking of pages within single Edge project
                                        blurden

                                        just a heads up to anyone reading the correct answer here - there are some updates to the jquery.address library that prevent conflicts... be sure to go to github and get the latest - https://github.com/asual/jquery-address

                                        • 17. Re: Deeplinking of pages within single Edge project
                                          goshko Level 1

                                          Hello Tim,

                                          I have a similar problem, but I'm not really good with code and can't really figure it out from your examples. I'm trying to make buttons to change the hashtag value, document title and control the main timeline accordingly. So that when someone goes to example.com/#home, they would be taken directly to the 6th second of the animation and so on. I'm trying to accomplish this without using any external plugins.

                                          I got some help here, but unfortunately it is not very useful for me: Re: Is it possible to change the URL of the browser corresponding to changes in the timeline?

                                          Maybe you might help me?