9 Replies Latest reply on May 9, 2014 6:14 PM by heathrowe

    Embedding Html code or widgets within Adobe Edge Animate project

    Monkybomb Studios

      Hi There,

       

      I have just discovered Edge and i think it is amazing finally the "new" web standards are being put in the designers hands again!!

       

      My question is this i have designed an online web based application using the amazing features in edge, what i need to do now is for instance add a weather widget or a news feed, how do i get this to work in edge, i have read about using iframes to embed video but this approach doesnt work for me, i would love to use this software for all of our web based projects but i need to know if its possible to embed html

       

      If anyone out there can point me to some literature or an example of how this is done i would be so grateful! seriously love this software!

       

      Thanks in advance!


        • 1. Re: Embedding Html code or widgets within Adobe Edge Animate project
          heathrowe Most Valuable Participant

          Have you tried the jquery load() method?

           

          See here for reference .load() | jQuery API Documentation

           

          Basic example would be

          1. create a div box element, and say call it widgetContainer in the Elements panel;
          2. with this element selected go to the Properties panel and set the Overflow property to auto;
          3. save project as is, to a folder on your drive, then copy widget files to a sub-folder under your main project folder;
          4. then somewhere throughout your project, ala an event handler (click, mouseover etc) use the load() method to pull in the widget file (.html) directly into the widgetContainer element;

           

          Example:

           

          // I placed this in the compositionReady event handler //

           

           sym.$("widgetContainer").load('html/sample.html');
          

           

          //End Copy Code //

           

          Hope this helps

          Darrell

          • 2. Re: Embedding Html code or widgets within Adobe Edge Animate project
            Monkybomb Studios Level 1

            Hi Darrell,say creat a div

             

            Thank you so much for your reply, i am sure you a probably 100% correct but alas i am jost in the world of jquery it would seem, will this method allow me to call an html page widget thing.. which is using its our jquery assets too?

             

            Basically i am making an interactive interface for some sinage and i need to be able to nest m weather widget, exchange wiget and rss within this interface if i cannot do this i guess it start from scratch somewhere else haha, i do love this software i reminds me alot of what flash used to be Just a little bit complex to get my brain around haha sooo used to the action scripts lol

             

            When you say max a div box element do you mean just a rectangle? and do i then convert this into a symbol should i be using the common libraries? i am but a designer lost in the matrix haha.

             

            If you have the patience i could really use a hand holding session here!

             

            Thanks so much in advance!

            • 3. Re: Embedding Html code or widgets within Adobe Edge Animate project
              Monkybomb Studios Level 1

              Is there maybe an example project which imports a html page into a adobe edge animate project?.

               

              I would just like to see an easy example of how this works.

               

              Im sure i wouldnt be the only one out there

              • 4. Re: Embedding Html code or widgets within Adobe Edge Animate project
                heathrowe Most Valuable Participant

                Thing is there are 1000s of html widgets, what I provided is simply a way to get the html page (the one liner I provided) into a div of the Edge Animate project.

                 

                Please provide an exact example of a html widget you are referring to.

                 

                Darrell

                • 5. Re: Embedding Html code or widgets within Adobe Edge Animate project
                  Monkybomb Studios Level 1

                  Hi again Darrell,,

                   

                  Thanks for the reply, At the moment if i could get hello world to show within a div in edge i would jump for joy! . Im starting to wonder if there is something wrong with my procedure, correct me if im wrong here..

                   

                  Open edge, create new project, draw out rectangle, convert to symbol, name symbol widgetContainer, open up stage properties and set overflow to auto, open up code editor and under composition ready event add   "sym.$("widgetContainer").load('html/helloworld.html');" Is this the right process?

                  What i need to do i either pull an iframe of an existing webpage onto the div whitin my project or get a jquery standalone project to display within the div either will work for me as long as i have the ability to update the information seamlessly, the exact widget im using is called WeatherSlider Premium jQuery Weather Widget.  To be honest i would love to just pull an iframe of the site i would like displayed in the div that would be perfect..

                  Thank you again for taking the time to listen and reply to this, Adobe community for the win! I was mortified when flash got pushed out the market so i am really happy that we are back in the game with awesome tools again So excited to be learning again

                  Thank you again hope my rambling has made sense


                  • 6. Re: Embedding Html code or widgets within Adobe Edge Animate project
                    heathrowe Most Valuable Participant

                    Yes your process is correct, but I don't know where you have it implemented? My example it is in compositionReady event handler so the external html will appear immedaitely after the composition is ready for rendering.

                     

                    Here is an example: it loads sample2.html file from the /html folder directly under the root.

                     

                    http://www.heathrowe.com/edge/load/load.zip

                     

                    As for the weather widget you reference that is a plugin? How do you anticipate getting it into the 'div' container?

                     

                    Ideally, the load() method is for referencing files you have tucked under your project somewhere, so you can refer to it as I noted.

                     

                    Darrell

                    • 7. Re: Embedding Html code or widgets within Adobe Edge Animate project
                      Monkybomb Studios Level 1

                      Hi again Darrell,

                       

                      Thank you for the example it makes sense to me what you have done here, is there no way to link to an external page? not one you have build under the edge platform for instance an iframe? where you could point it to a location on the web which it displays within the div itself? I really dont mean to be annoying Im just looking for a way to add the functionality of a few widgets into the project so that all the signs can update their weather etc online remotely, If i can link out with in the div that is ideally what i am looking to do and i am hoping that this is possible it seems funny that you could have the power of all these tools bending code to the users will that calling a simple web address would be easy

                       

                      Have a look at the example swf hosted here http://prev3.monkybomb.co.za/splitscreen%20flash.swf to get a better understanding of what im looking to do and perhaps you can assist me in finding the best way to accomplish my goals within the edge framework.

                       

                      Thank you again for all you help you deserve 50 points!!

                      • 8. Re: Embedding Html code or widgets within Adobe Edge Animate project
                        Monkybomb Studios Level 1

                        Hi Darrell!

                         

                        I just want to say thanks alot i have just got the iframe working within the sample you have sent me making this software as awesome as i thought!! :

                         

                        You are a legend man!