5 Replies Latest reply: Mar 27, 2012 9:34 AM by adninjastrator RSS

    Previewing SWF content in local server

    alijbrown Community Member

      Hello All

       

      I am new to developing with dreamweaver CS5 - and website development in general.  I have compiled two swf slideshow / galleries in Flash Professional and wish to insert both into separate pages on my website.  Both swf files are xml based (and so load in content dynamically).  Both swf files work when tested as stand alone elements on my local computer.

       

      The swf components are stored in their own folder ("Banner" and "Gallery") - together with all assets associated with that component.  Both component folders have been copied to my root directory for the purposes of developing and testing my website.

       

      The swf files have been inserted fine into webpages.  The problem arises when I preview the page in browser (local server set up for php): the preloader in each swf becomes visible (and so the swf clearly begins to "play") however the content does not load.

       

      I've read something about having to insert a "Mark of the Web" in html.  I've tried to insert this manually, but it has not made a difference.

       

      Does anyone know what I may have missed?

       

      I am only testing locally at the moment.  If it would be useful to see the site (thereby requiring an upload of the site) would someone be kind enough to talk me through what I would need to do to let you guys see it. Total newbee - sorry.

       

      Cheers,

       

      Alistair

        • 1. Re: Previewing SWF content in local server
          adninjastrator Community Member

          The swf components are stored in their own folder ("Banner" and "Gallery") - together with all assets associated with that component.  Both component folders have been copied to my root directory for the purposes of developing and testing my website.

          This tells me that most likely the problem is pathing... that is, the .swf cannot find the Flash assets because you did not create the .swf with the Web site folder structure in mind, rather the .swf/assets were created with

          "their own folder ("Banner" and "Gallery")"

          So

          Both swf files work when tested as stand alone elements

          but because the .swf is placed on a Web page outside of "their own folder", all the paths to the Flash assets become relative to the Web page, NOT the physical location of the .swf.

          So to correct this, you will need to alter all the pathing to reflect the path from the WEB PAGE to the Flash assets, not the physical location of the .swf.

          Once that is done, the .swf WILL NOT WORK when

          tested as stand alone elements

          Why? because the path to the Flash assets will then be pathed correctly relative to the Web page and not the location of the .swf.

          So next time when you start a Flash project, create an exact duplicate of the final Web site folder structure first, and create a simple Web page that you can place the .swf on.... then path the Flash assets.

          For your review:

          Pathing issues

           

          Almost always when it works on the local machine and not the server, it's a pathing problem.
          You can put your Flash related files in whatever folders you want, they do NOT have to be in the root, they do NOT all have to be in the same folder. But if you have a problem and if sticking them all in the root folder works, then you know that the issue was a pathing problem.
          Just remember that paths used in the .swf become relative to the Web page on which the .swf is placed, NOT it’s physical location.  So for example, if your .swf is in the flash/data folder and you use that .swf on a Web page in the root folder, you are in effect, removing that .swf from flash/data and putting it in root. So if the .swf is loading any related files (xml, images, video, etc), the path used inside the .swf to load the .xml file has to be relative to it's new location in root and then back down into flash/data. This is true even though when testing the .swf by itself, it can be inside flash/data and work just fine, since relative to it's location, the path is just fine, they are in the same folder. But if that same path is used when the .swf is placed on a page two folder levels up, the relative path has changed, the old "same folder" path will not work.

          In fact if you are placing the .swf on a web page in a different folder than the .swf is stored in, and that .swf calls external assets, then direct clicking and opening of the .swf in it’s folder should NOT work! That’s because the paths to the external assets should be relative to the Web page and not the physical location of the .swf.
          So just be sure that you use addresses relative to the final Web page locations (not physical file locations) and you can put the Flash related files in what ever folders you want.
          Best wishes,
          Eye for Video
          www.cidigitalmedia.com

          Best wishes,

          Adninjastrator

          • 2. Re: Previewing SWF content in local server
            alijbrown Community Member

            Thank you Adninjastrator.  That has been a great help.  I've have amended the paths for each component so that they are relative to the webpage location, and both .swfs are now working when tested inside dreamweaver.  However, when I preview pages in a browser (local server) the assets are still not being loaded. 

             

            I am testing on xampp as I have a spry menu component which is being called via php.  The server folder for the website (as defined inside dreamweaver) is therefore C:\xampp\htdocs\abp2\ (abp2 being my site folder); and the url is http://localhost/abp2/

             

            The two swf are now directed along path "source files/[AB gallery proj] OR [banner]/assets/" to find the assets to load; source files being a folder inside the website root folder.  Is there any reason this is unlikely to work when previewed on a local server?

             

            Many thanks for your assistance.

             

            All the best,

             

            Alistair

            • 3. Re: Previewing SWF content in local server
              adninjastrator Community Member

              What exactly does this mean?

              both .swfs are now working when tested inside dreamweaver

              Are you previewing in a browser? from the Web page that the .swf is placed on? or no, because you need to test from a server?

              Either way, it's still most likely a pathing error.

              Until you get the Flash pathing ironed out can you comment out or delete the php and save the page as "flash_test.html"? that way you eliminate any local server issues.... or create a separate HTML page and save in the same folder as the actual Web page just for testing the Flash.

              So you altered the paths to be relative to the Web page?..... all the paths? so now from the Web page the .swf will correctly find the .xml file? What about all the paths to images, etc in the .xml file? ... now the .xml file is also sitting on the Web page. So even images in the exact same folder as the .xml file need a path relative to the Web page either coded into the .swf or in the xml.

              Here is a quick example:

              http://www.sqis.net/

              the video player with scrolling menu.

              The .swf sits on a Web page in the root.

              var so = new SWFObject("vid_blasts/vid_blast_player2.swf".........

              so to find the .swf, the browser needs to go one folder level deep into the "vid_blasts" folder.

              The .swf uses an xml file to load the images and captions... so hard coded into the .swf, the path to the .xml file must be relative to the Web page, NOT the actual location of the .swf (the .swf and the .xml file are both in the same folder (vid_blasts).

              This is the actionscript in the .swf that loads the .xml file:

              ssx.load("vid_blasts/sqis_vid_blasts.xml");

              So even though both files (.swf and .xml) are in the same folder, I must add the "vid_blasts/" part to get the .swf to correctly load the .xml file.

              Now in that same "vid_blasts" folder is a sub folder "thumbs" where the thumb nail images are.... but since they now must be called relative to the Web page, the path to the thumbs hard coded into the .swf must reflect that.

              This is the actionscript that pushes the thumbnail urls into an array in the .swf:

              urls.push("vid_blasts/thumbs/" + ss[i].attributes.url);

              So relative to the Web page, the path to the thumbs is "vid_blasts/thumbs/", even though the thumbs are only one folder level deeper that the .xml file.

              Adding these folder levels to the path could have also been done in the thumbnail URL in the actual .xml file also, but then you would need to add that extra path information to each and every image path... so it's just easier to deal with it once in the .swf.

              This is how the data looks in the actual .xml file:

              <picture  caption="King Spa Suite"

                  url="vbt_Suite_Spa.jpg"/>

              The path from the Web page to the thumbnail image as shown in the .xml file is simply "vbt_Suite_Spa.jpg".....

              But wait!! relative to the Web page, the path to the image is NOT "vbt_Suite_Spa.jpg".....   CORRECT!

              but remember that when the .swf is assembling the array of thumbnails, it is appending "vid_blasts/thumbs/" in front of the url attribute listed in the xml file:

              urls.push("vid_blasts/thumbs/" + ss[i].attributes.url);

              producing the url "vid_blasts/thumbs/vbt_Suite_Spa.jpg". Relative to the Web page, the correct path to the thumb is

               

              "vid_blasts/thumbs/vbt_Suite_Spa.jpg"

              So most likely you are still having pathing problems. Hope this example will help illustrate how to deal with that.

              Best wishes,

              Adninjastrator

              • 4. Re: Previewing SWF content in local server
                alijbrown Community Member

                Thanks again, that is all a really good example of re-pathing everything, and will be a good resource in future.  At the moment though, I'm happy that all paths have been corrected and are now relative to the web page. 

                 

                The .swf will is displaying and will play (showing images and all thumbnails) in DW, in Live Mode and in display mode.  It was not doing this previously, before we re-pathed the .xml and the image assets inside the .swf and .xml.  So (I think) the pathing problems are now resolved, as when viewing the web page from DW (whether on either design or Live mode) the .swf components operate as intended.

                 

                Great idea saving the .php down as a html to remove any possibility that the local server has something to do with local server.  The .swf components WORK in browser when the page is an html. So pathing is all correct and problem must be local testing. 

                 

                Any ideas?  Thanks again for your help so far.

                 

                Best wishes,

                 

                Alistair

                • 5. Re: Previewing SWF content in local server
                  adninjastrator Community Member

                  Only advise... I don't think you want any

                  http://localhost/abp2/

                  in any of the Flash related paths, since none of that will be relative once you upload to a real Web server. Path relative to the Web page and not the location on the Web page on a localhost or even abp2, since neither will be on the Web server.

                  If you still have problems... skip testing on the localhost, upload and test from an actual, on-line Web server.

                  Best wishes,

                  Adninjastrator