Linking HTML to specific frame in .swf

**skate_lhs** · 09-08-2010, 04:18 PM

reference www.fulfordsupply.com

I have a products page with a .swf with the different categories of products we carry (plumbing, hydronics, solar etc).

I also have a banner on the home page with a link to 'hydronics' which is one of the different categories on the products page.

Is there a way to link to this page (/products.html) and go directly to the 'hydronics' category?

Thanks in advance all you smartypants

**whispers** · 09-09-2010, 12:39 PM

it depends I guess..

you have an HTML banner..that has a link on it.

this calls/does what? just loads the products page?

but you want, when the products page loads..to jump directly to the whatever sub-cat that link in the banner says...is this correct?

my suggestion would be to use a 'query string variable'

so that link(s) in the banner that normally just goes to:

http://www.somsite.com/products.html

will now be:

http://www.somsite.com/products.html?catID=hydronics

make sense so far?

then..all you need to do is have your embedded .swf thats in he products .html page check this url string and grab the var from it.. and jump to that specific frame in the movie.

Im not sure how your embeding your .swf's into your .html page..but I highly recommend using SWFObject to do so.. and then use the built in query string var feature...

**skate_lhs** · 09-09-2010, 02:07 PM

This looks like exactly what I'm trying to do.

So I change the link in my banner to http://fulfordsupply.com/products.html?catid=hydronics

How exactly do I go about checking that url string in actionscript? I really have a limited knowledge of it. I've been looking around online but can't seem to find any code that relates.

**whispers** · 09-09-2010, 02:55 PM

you would use SWF Object to embed your .swf into your .html page(s).

http://code.google.com/p/swfobject/wiki/api

a little more than half way down:
swfobject.getQueryParamValue(paramStr)

swfobject.getQueryParamValue(catID)

is what you need to use when you embed the .swf into your .html page..

then inside your products.swf you need to check for the:

_root.catID; variable.. and see if it is hydronics (or whatever).. and then jump/start on that frame..

so to summarize for you.

1.) you need to get SWF Object and use that method of embedding your .swf into your products.html page

2.) read the link above and edit your embed code (only an example above) as you need to.... adding the code to xxxx.getQueryParamValue(xxx); get the var name form the query string.

by doing this.. it automatically creates a var on the _ROOT of the .swf for you to use..

its available once the .swf loads.. so you can use an if() statement right away in the first frame to do 'whatever'..

**skate_lhs** · 09-09-2010, 03:42 PM

whispers, thanks for the quick response. I've read it over and over. I understand the concept but not how to apply it.
My flash (and general computer) knowledge is minimal but I'm trying my best.

I've downloaded the source files for swfobject and uploaded the javascript onto my server- into the same folder where my swf's are.

I've tried to embed using this code:

Code:

<script type="text/javascript" src="swfobject.js"></script><script type="text/javascript">
   var so = new SWFObject("3boxes.swf", "3box", "700", "125", "10", "#336699");
   so.write("flashcontent");
</script>

however nothing shows up.

Also, I'm unsure of how or where to use the function 'swfobject.getQueryParamValue(paramStr)'.

**skate_lhs** · 09-09-2010, 03:51 PM

edit-

I can't figure it out. I've embedded my flash like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SWFObject dynamic embed - step 3</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>

<script type="text/javascript">
swfobject.embedSWF("products.swf", "products", "700", "400", "10.0.0");
</script>

</head>
<body>
<div id="myContent">
<p>Alternative content</p>
</div>
</body>
</html>

I've doublechecked and the .js in on my server in the same folder as these pages and swf's.
All I'm getting is 'alternative content'.
Also, where would i use the swfobject.getQueryParamValue function?
this is so way over my head. shoulda told my boss to get someone who knew what he was doing to build this site.

**whispers** · 09-13-2010, 06:54 PM

hi.. here is an example for you..

its a very simple process once you understand it..and do it once or twice.

1.) DL the SWF Object 2.x package..

take the .js script from there and save it in the same folder as your .swf

2.) create new .html file..

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

	<head>
		<title>SWFObject 2 dynamic publishing example: Query Params</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<script type="text/javascript" src="swfobject.js"></script>
		<script type="text/javascript">

		
		var flashvars = {};
		if (swfobject.getQueryParamValue("catID")) {
  			flashvars.catID = swfobject.getQueryParamValue("catID");
		}

		var params = {};
		params.quality = "high";
		params.bgcolor = "#FFFFFF"



		swfobject.embedSWF("getQueryParam_demo.swf", "flashContent", "200", "100", "8.0.0","expressInstall.swf", flashvars, params);
		</script>
	</head>
	

	<body>
		<div id="flashContent">
			<h1>Alternative content</h1>
			<p><a href="http://www.adobe.com/go/getflashplayer">
			<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
		</div>
	</body>
</html>

swfobject.embedSWF(swfUrlStr, replaceElemIdStr, widthStr, heightStr, swfVersionStr, xiSwfUrlStr, flashvarsObj, parObj, attObj, callbackFn)¶

Insert alternative content using standards compliant markup and embed Flash content with unobtrusive JavaScript (also called dynamic publishing).

Arguments:

* swfUrl (String, required) specifies the URL of your SWF
* id (String, required) specifies the id of the HTML element (containing your alternative content) you would like to have replaced by your Flash content
* width (String, required) specifies the width of your SWF
* height (String, required) specifies the height of your SWF
* version (String, required) specifies the Flash player version your SWF is published for (format is: "major.minor.release" or "major")
* expressInstallSwfurl (String, optional) specifies the URL of your express install SWF and activates Adobe express install. Please note that express install will only fire once (the first time that it is invoked), that it is only supported by Flash Player 6.0.65 or higher on Win or Mac platforms, and that it requires a minimal SWF size of 310x137px.
* flashvars (Object, optional) specifies your flashvars with name:value pairs
* params (Object, optional) specifies your nested object element params with name:value pairs
* attributes (Object, optional) specifies your object's attributes with name:value pairs
* callbackFn (JavaScript function, optional) can be used to define a callback function that is called on both success or failure of embedding a SWF file (SWFObject 2.2+)

your missing a bit in your embed code.

1.) you need to create and (grab) your flashvars form the query string (and any params you want to add)

Code:

var flashvars = {};
	if (swfobject.getQueryParamValue("catID")) {
  		flashvars.catID = swfobject.getQueryParamValue("catID");
	}

var params = {};
params.quality = "high";
params.bgcolor = "#FFFFFF"

and you also need to tweak you actual EMBED line:

swfobject.embedSWF("products.swf", "products", "700", "400", "10.0.0");

1.) the PRODUCTS id parameter (#2) , needs to match the <DIV> container ID where you want to put this 'flash movie'

in your code you have: <div id="myContent">

that needs to be changed to match

and you need to add the flashvars and the param objects to your embed code.

swfobject.embedSWF("products.swf", "products", "700", "400", "10.0.0", flashvars, params);

so your full code would be:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SWFObject dynamic embed - step 3</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>

<script type="text/javascript">
var flashvars = {};
	if (swfobject.getQueryParamValue("catID")) {
  		flashvars.catID = swfobject.getQueryParamValue("catID");
	}

var params = {};
params.quality = "high";
params.bgcolor = "#FFFFFF"

swfobject.embedSWF("products.swf", "products", "700", "400", "10.0.0", flashvars, params);

</script>

</head>
<body>
<div id="products">
<p>Alternative content</p>
</div>
</body>
</html>

as your last step.. you need to edit your .fla/code so you can do whatever you need (jump to a certain frame) in your flash movie once that var is received.

ie:

actionscript Code:

var whatCat:String = _root.catID;
switch (whatCat) {
    case "Hydronics" :
        trace("Hydronics");
        someClip.gotoAndStop(1);
        break;
    case "Another Cat-1" :
        trace("Another Cat-");
        someClip.gotoAndStop(2);
        break;
    case "Another Cat-2" :
        trace("Another Cat-2");
        someClip.gotoAndStop(3);
        break;
    case "Another Cat-3" :
        trace("Another Cat-3");
        someClip.gotoAndStop(4);
        break;
    case "Another Cat-4" :
        trace("Another Cat-4");
        someClip.gotoAndStop(5);
        break;
    default :
        trace("No category of that kind found");
        someClip.gotoAndStop("errorFrame");
}

check out the demo attached.. use the 'edit.html' file to test things.. when it first loads..it will do nothing.....say undefined

however look at the URL in your browser.. there is NO ?catID=hydronics there

so add it..

then hit enter/go.. and see the catID be displayed on the stage.

**skate_lhs** · 09-15-2010, 09:22 AM

thanks so much for your time. really appreciate it!
I'm getting at it now and I'll let you know how it works.
thanks again. tons.

**whispers** · 09-15-2010, 09:52 AM

no problem.. glad it helped.

**skate_lhs** · 09-15-2010, 10:37 AM

Ok so I'm getting there.
I'm making a test file first to figure this out.
I have this code on the first frame:

Actionscript Code:

var whatCat:String = _root.catID;
    switch (whatCat) {    
        case "hydronics" :        
        trace("hydronics");        
        someClip.gotoAndStop("hydronics");       
        break;    
    case "eco" :       
        trace("eco");      
        someClip.gotoAndStop("eco");       
        break;    
    case "plumbing" :        
        trace("plumbing");       
        someClip.gotoAndStop("plumbing");       
        break;      
    default :        
        trace("No category of that kind found");        
        someClip.gotoAndStop("errorFrame");
}

as well as a movieclip, 'someClip' with 4 frames. With labels 'hydronics', 'eco', 'plumbing', and 'errorframe'.
This is online at fulfordsupply.com/test.html.
On the errorframe is a blue box- and whether you put in /test.html or
/test.html?catID=hydronics/eco/plumbing you get the error frame.
i've tried playing around with "s and can't seem to find the issue arghh
I'll keep playing around with it.

**whispers** · 09-15-2010, 11:24 AM

can you post both your .fla and your .html file?

just to make sure..

.js file is there...right?

I think maybe your missing a parameter in your emebed line?

try this:

swfobject.embedSWF("products.swf", "products", "700", "400", "10.0.0", flashvars, params);

into this:

swfobject.embedSWF("products.swf", "products", "700", "400", "8.0.0", "expressInstall.swf", flashvars, params);

see if that clears it up for you..

**whispers** · 09-15-2010, 11:25 AM

also this wouldnt work:
/test.html?catID=hydronics/eco/plumbing

your param(s) always need to go at the end

someFolder/test.html?catID=hydronics

**skate_lhs** · 09-15-2010, 12:08 PM

i knew it was gonna be something stupid like that.
I didn't think it was gonna do anything but adding expressinstall.swf worked... so weird 'cause it was already embedded just fine.
anyways, thanks tons! you're the best.

**whispers** · 09-15-2010, 12:15 PM

I 'thought' it was an optional parameter..

but I took it out of mine and it didnt parse right.. so I added it back in and it worked.. figured might be same for you.

glad it all worked..

now you can tell your boss where to go! LOL

**skate_lhs** · 09-16-2010, 04:28 PM

So I got the code into my actualy .swf and after a little tinkering its working awesome.
I'm inspired to make a tutorial of how to do this- I've seen lots of forum posts looking for answers to this but no detailed answers like you gave me. I'm sure people could really use this for marking in their banner what page they're on.

If anyone happens to take a look at my site- www.fulfordsupply.com/products.html- refresh it a couple times and you'll see that the bottom bar appears in multiple at the top of the screen before the page fully loads. weird. any ideas of what might be happening here? this has never happened before I used swfobject.

**whispers** · 09-16-2010, 05:56 PM

hmm..

sorry I cant seem to duplicate your 'bug' I dont see anything at bottom..as well as at top.

also I believe this HAS been covered a few times.. Im sure "I" covered it before as well..

actually there is a link in my footer to a previous example I did as well

http://board.flashkit.com/board/show...ight=swfobject

urlVar > flash 3 link I think it is?

Thread: Linking HTML to specific frame in .swf

Thread Tools

Display

Linking HTML to specific frame in .swf

Posting Permissions