Skip navigation
alijbrown
Currently Being Moderated

Previewing SWF content in local server

Mar 26, 2012 3:37 AM

Tags: #cs5 #flash #content #dreamweaver #swf #xml #preview_in_local_server

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

 
Replies
  • Currently Being Moderated
    Mar 26, 2012 7:51 AM   in reply to alijbrown

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 27, 2012 7:19 AM   in reply to alijbrown

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 27, 2012 9:34 AM   in reply to alijbrown

    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

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points