PDA

View Full Version : Code for importing a swf



holson
10-15-2008, 05:02 PM
I have a portfolio website with thumbnails that bring the larger jpg into a container. The URL is www.hansericolson.com

I am wanting to make a Flash page on this on-line portfolio and I need some code that will allow me to click on a thumbnail and import a swf into the container instead of a jpg. Anyone out there know how to do this?

Much appreciatated....HO

Jesdisciple
10-15-2008, 09:30 PM
How do you determine the filename of the SWF? A third function (or a modification of the second) needs to implement that.
function makeSwf(url, name, width, height){
var object = document.createElement('object');
var embed = document.createElement('embed');
var param = document.createElement('param');
object.width = embed.width = width;
object.height = embed.height = height;
param.value = embed.src = url;
param.name = name;
object.appendChild(embed);
object.appendChild(param);
return object;
}
function showSwf(swf){
var container = document.getElementById('imagecontainer');
container.appendChild(swf);
}

holson
10-16-2008, 11:38 AM
Thanks Chris for taking the time to reply.

Does this code go into my external javascript page? Where would I put it? Also, do I put the name of the SWF where you have:

function showSwf(swf){
var container = document.getElementById('imagecontainer');
container.appendChild(swf);

Thanks

Jesdisciple
10-16-2008, 02:10 PM
Does this code go into my external javascript page?Yes, but it also needs to be "hooked" to the thumbnails somehow, like your current changeimage function.


Also, do I put the name of the SWF where you have:

function showSwf(swf){
var container = document.getElementById('imagecontainer');
container.appendChild(swf);No, that wouldn't work for more than one movie. Although inline event-handlers are messy, just put the SWF filename into the HTML like you were doing with the image filename.
<td class="thumbnail" onclick="showSwf('images/XX_movie.swf');">
<img src="images/XX_pic_sml.jpg"/>
</td>

Replace the above showSwf function with this:
function showSwf(url){
var container = document.getElementById('imagecontainer');
var swf = makeSwf(url, 'movie', 559, 697);
if(container.hasChildNodes()){
container.replaceChild(swf, container.firstChild);
}else{
container.appendChild(swf);
}
}

holson
10-16-2008, 03:24 PM
Thanks again Chris!

This is the code I have placed into my html doc....

<!-- THUMNAIL 01 -->

<td class="thumbnail" onclick="showSwf('images/fish_and_cat.swf');">
<img src="images/36_pic_sml.jpg"/>
</td
<!-- END THUMNAIL 01 -->


and this is the code I put into my external javascript page:


// MENU LINK FUNCTIONS
function mouseovercolor(thisspan){
thisspan.style.color = '#f00';
}
function mouseoutcolor(thisspan){
thisspan.style.color = '#fff';
}
function pagejump(pageurl){
window.location.href = pageurl;
}
// END MENU LINK FUNCTIONS



// THUMBNAIL CHANGER
function changeimage(imagestring){
var imagecontainer = document.getElementById('imagecontainer');
var newbe ="url('" +imagestring +"')";
imagecontainer.style.background =newbe ;
}

function makeSwf(url, name, width, height){
var object = document.createElement('object');
var embed = document.createElement('embed');
var param = document.createElement('param');
object.width = embed.width = width;
object.height = embed.height = height;
param.value = embed.src = url;
param.name = name;
object.appendChild(embed);
object.appendChild(param);
return object;
}
function showSwf(url){
var container = document.getElementById('imagecontainer');
var swf = makeSwf(url, 'movie', 559, 697);
if(container.hasChildNodes()){
container.replaceChild(swf, container.firstChild);
}else{
container.appendChild(swf);
}
}
// END THUMBNAIL CHANGER

I haven't got it to work....when I refresh, all of the content seems to jump slightly and there is an attempt for the image to change....any more thoughts?

Thanks again for the help
HO

Jesdisciple
10-16-2008, 06:44 PM
Can I test this on your site, please? I'd like to look at exactly what the DOM functions are doing, complete with the deployment context.

holson
10-16-2008, 11:24 PM
The only problem is that this portfolio site is not on-line yet. You can look at the pages that are on www.hansericolson.com, but this site is the template for my visual design site and it doesn't have a Flash page and there are no SWFs in the folders. Is there any way I can send you files? Let me know what I can do for you to test this for importing the SWF.
Thanks,
HO

Jesdisciple
10-16-2008, 11:59 PM
To attach files to your post, zip them up with an archive manager (7-Zip (http://www.7-zip.org/) is fantastic) and click "Post Reply" to the left just below my post. Go down and click the button that says "Manage Attachments", "Browse..." to the zip, and "Upload" it.

holson
10-17-2008, 11:52 AM
Here are the zipped files you requested.
Thanks,
HO

Jesdisciple
10-17-2008, 05:46 PM
Umm... What did you use to zip that up? I get an error when unzipping it; when I peak inside it, I only see a bunch of empty folders. If you used 7-zip, what compression algorithm was/is selected?

holson
10-17-2008, 06:57 PM
I was using Zip-it for the Mac. Will 7-zip work with a Mac?

holson
10-17-2008, 07:15 PM
I used Zip-It, but it doesn't seem to compress the files. Can I use 7-zip with a Mac? What would you recommend?
HO

Jesdisciple
10-18-2008, 01:33 AM
No, 7-Zip is Windows-only (although I think Wine is available for the Mac)... Here's why I can't get into your archive: http://www.maczipit.com/faq/pkzip.html To get around this, I think you'll have to upload them to a server without archiving them. I use RapidShare.com (http://rapidshare.com/) for this.

holson
10-18-2008, 10:58 AM
I have uploaded the files to RapidShare....where should I send it? It asks for a email address.
HO

Jesdisciple
10-18-2008, 06:10 PM
You're not sending anything but a verification email; enter an address you have access to. RapidShare will list all your uploaded files in your account after you register (in Free Zone > Collector's Zone Login).

holson
10-18-2008, 11:23 PM
I sent this using my email address....I'm not sure if I did this properly, as I am not familiar with this program. Are you able to access the files now?

Jesdisciple
10-19-2008, 03:13 AM
You'll need to post the URLs found in your account. :)

(Note that you can upload individual files to DD, but I don't think SWF is among the allowed extensions.)

holson
10-19-2008, 11:46 AM
This should give you what you need....Thanks Chris!


http://rapidshare.com/files/155160686/flash.html

http://rapidshare.com/files/155160687/library.js

http://rapidshare.com/files/155160688/stylesheet.css

Jesdisciple
10-19-2008, 04:56 PM
Could you also link or upload an image and its corresponding SWF?

holson
10-19-2008, 05:25 PM
Here you go....

http://rapidshare.com/files/155566662/fish_and_cat.swf

http://rapidshare.com/files/155566663/36_pic_sml.jpg

Jesdisciple
10-19-2008, 05:34 PM
Okay... Now what's the problem? I click the image and the SWF appears.

holson
10-21-2008, 02:23 AM
Hmmmmm, I can't get it to play on my computer. What could be the problem?

Jesdisciple
10-21-2008, 03:03 AM
What browser are you using? Operating system? Does no SWF ever work in any browser? (Although I can walk you through the basic debugging steps, I'm not knowledgeable about Flash so you really ought to consider asking someone who is (http://dynamicdrive.com/forums/forumdisplay.php?f=20).)

holson
10-21-2008, 03:07 PM
I am using FireFox....operating system is Mac OS 10.3.9. I did my initial portfolio in Flash.... www.OlsonVisualDesign.com and importing SWFs on sites I've designed is simple for intros.... www.hansericolson.com but I can't seem to find a way to display these SWFs into my on-line portfolio done in HTML and Javascript.

Jesdisciple
10-21-2008, 04:36 PM
Please post the HTML that worked in those cases; I'll modify the JS according to it.

holson
10-21-2008, 05:49 PM
Here is the js file, plus the css file and the Portfolio file. I think this is what you are asking for?....there are no swfs here, but you can use the one I sent you already and also the "cat" thumbnail and see if you can get this "Fish and Cat" swf to load in the image container....let me know if you need anything else....Thanks, HO

http://rapidshare.com/files/156209672/library.js

http://rapidshare.com/files/156209673/stylesheet.css

http://rapidshare.com/files/156209674/portfolio01.html

Jesdisciple
10-21-2008, 06:59 PM
Where did you display the SWF that worked? I can't find it in the HTML or JS...

holson
10-21-2008, 07:50 PM
Here is the file

http://rapidshare.com/files/156246864/fish_and_cat.swf

Jesdisciple
10-21-2008, 08:02 PM
But where is the code that displayed it (or any other) successfully for you?

holson
10-21-2008, 09:48 PM
I uploaded the 3 files....portfolio01.html....this file has the "thumbnails" code and calls in the jpg....what I am trying to do is use that thumbnail to call in the swf. I also uploaded the library.js (external javascript page) and the stylesheet.css external file.

Jesdisciple
10-21-2008, 10:00 PM
I did my initial portfolio in Flash.... www.OlsonVisualDesign.com and importing SWFs on sites I've designed is simple for intros.... www.hansericolson.comSo those work,...


but I can't seem to find a way to display these SWFs into my on-line portfolio done in HTML and Javascript.And this one doesn't. I'm looking for the code that does work.

EDIT: That first link works, right? Then I'll grab its source.

Jesdisciple
10-21-2008, 10:54 PM
Try using this makeSwf:
function makeSwf(url, id, classid, width, height){
var object = document.createElement('object');
var embed = document.createElement('embed');
var movie = document.createElement('param');
var params = {allowScriptAccess: 'sameDomain', movie: url, quality: 'high', scale: 'noscale', salign: 'lt', bgcolor: '#5a0808'};
movie.name = 'movie';
embed.src = movie.value = url;
object.id = id;
object.classid = classid;
object.codebase = 'http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0';
object.width = embed.width = width;
object.height = embed.height = height;
embed.type = 'application/x-shockwave-flash';
embed.pluginspage = 'http://www.macromedia.com/go/getflashplayer';
for(var i in params){
var param = document.createElement('param');
embed[param.name = i] = param.value = params[i];
object.appendChild(param);
}
object.appendChild(movie);
object.appendChild(embed);
return object;
}

EDIT: And this showSwf, replacing id and classid with the appropriate values:
function showSwf(url){
var container = document.getElementById('imagecontainer');
var swf = makeSwf(url, id, classid, 559, 697);
if(container.hasChildNodes()){
container.replaceChild(swf, container.firstChild);
}else{
container.appendChild(swf);
}
}

holson
11-01-2008, 11:19 PM
Hey Chris....I've been out of town and have just gotten back to this code you created for me. I guess this code is a little more than I understand. I'm not even sure where to put it....any advice?

Jesdisciple
11-02-2008, 01:55 AM
Replace the other functions by the same names with those. (See Post #2 (http://www.dynamicdrive.com/forums/showpost.php?p=165896&postcount=2).)

Other than that, I'm guessing this is what got you (and it's rather complex):
var params = {allowScriptAccess: 'sameDomain', movie: url, quality: 'high', scale: 'noscale', salign: 'lt', bgcolor: '#5a0808'};
for(var i in params){
var param = document.createElement('param');
embed[param.name = i] = param.value = params[i];
object.appendChild(param);
}I found that most of the attributes in the single embed element exactly matched the name/value attribute pairs in the several param elements. To avoid repeating myself, I wrote the above for..in (http://javascript.wikia.com/wiki/Tutorial/Control_flow_statements#for..in) loop. For example, its first iteration will do this:

var param = document.createElement('param');
embed[param.name = 'allowScriptAccess'] = param.value = params['allowScriptAccess'];
object.appendChild(param);That middle statement is where all the work is done, and it's equivalent to these (because all assignment operators evaluate to the assigned value):

param.name = 'allowScriptAccess';
param.value = params['allowScriptAccess'];
embed['allowScriptAccess'] = params['allowScriptAccess'];
And those last two statements are equivalent to these (see the lookup operators (http://javascript.wikia.com/wiki/Object#Lookup_Operators)):

param.value = 'sameDomain';
embed.allowScriptAccess = 'sameDomain';

Is there anything else you don't get? EDIT: Oops, the movie: url entry in params should be removed.

BTW, I'd like to know whether it works. :) If it doesn't, please post any errors.