Back To Flash and ActionScript Forum

Javascript Onload swf in a table cell

  • kingjeremy02
  • Newbie
  • Newbie
  • User avatar
  • Joined: Nov 05, 2007
  • Posts: 9
  • Status: Offline

Post September 28th, 2009, 10:18 pm

To anyone who can help!

Okay, I'm new and confused in this and really need a simple steps approach to making this happen. Any help is immensely appreciated! ...
I'm badly lost ... :?


Here's what I'm trying to accomplish:

1) The flash.html page has a table cell ID: "stage" so that when the page loads a flash movie (intro.swf) will automatically play/loop in the "stage" cell
2) There are also 2 text links in a different table cell - that if clicked will replace/play intro.swf on "stage" with "text-1.swf" and/or "text-2.swf"

I'm not even sure where to start to make this code, I need help. (Ugh!)
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post September 28th, 2009, 10:18 pm

  • mk27
  • Proficient
  • Proficient
  • User avatar
  • Joined: Jun 09, 2009
  • Posts: 334
  • Status: Offline

Post September 29th, 2009, 11:41 am

#1 just put the .swf in the table cell.

#2 the links use onclick to fire some javascript involving the innerHTML of the cell, namely, to make it the same as it already is, which will reload the .swf

There is probably a better way to do #2, I don't know that much flash.
Image
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Joined: May 28, 2003
  • Posts: 23404
  • Loc: Woodbridge VA
  • Status: Offline

Post September 29th, 2009, 1:04 pm

The easiest way is going to be with the externalInterface class and javascript. Unfortunately I haven't worked with that much other than to open a movie in a new popup window. Been looking for something like what you want but haven't found anything. If I do I'll post it. In the meantime do some research on externalInterface and javascript and AS interaction.

//I'll also move this to the Flash forum.
"There's no place like 127.0.0.1 except for ::1."
Alexandria Networks. Leader in IT consulting for associations/non-profits, and small to medium sized businesses around the northern Virginia and Washington D.C. metro area.
  • mk27
  • Proficient
  • Proficient
  • User avatar
  • Joined: Jun 09, 2009
  • Posts: 334
  • Status: Offline

Post September 29th, 2009, 3:46 pm

ATNO/TW wrote:
The easiest way is going to be with the externalInterface class and javascript. Unfortunately I haven't worked with that much other than to open a movie in a new popup window. Been looking for something like what you want but haven't found anything. If I do I'll post it. In the meantime do some research on externalInterface and javascript and AS interaction.

//I'll also move this to the Flash forum.


That isn't the easiest way, but it's probably "the better way"...
Image
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Joined: May 28, 2003
  • Posts: 23404
  • Loc: Woodbridge VA
  • Status: Offline

Post September 29th, 2009, 5:29 pm

Well, my thought is the flash movie in the one table cell is essentially an empty container, that loads the first movie onload. Then depending on which link is clicked it changes the movie loaded into the container. But I haven't the first idea how to code that without finding an existing example. I'm betting graphixboy or IceCold has done this or similar.
"There's no place like 127.0.0.1 except for ::1."
Alexandria Networks. Leader in IT consulting for associations/non-profits, and small to medium sized businesses around the northern Virginia and Washington D.C. metro area.
  • kingjeremy02
  • Newbie
  • Newbie
  • User avatar
  • Joined: Nov 05, 2007
  • Posts: 9
  • Status: Offline

Post September 29th, 2009, 6:26 pm

Precisely ATNO/TW!

Okay, someone has sent me some code without explanation except to say, here's an example of what you want... :?
Problem is: I don't know what out of the code is essential to the problem I've stated above (I'm embarrasingly green!).
Anyone able to decipher and explain it - I wouldn't know what to look for, and what to include and/or what to change to make it work with the problem I've stated above (hope that makes sense...)

ATNO/TW - maybe the answer you and I seek lies within :)

Quote:
<html>
<head>
<title>The Photographer - Hypnotic Photo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="assets/site.css" rel="stylesheet" type="text/css">
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script src="Scripts/swfobject.js" type="text/javascript"></script>

<style type="text/css">
<!--
.style1 {
color: #CCCCCC;
font-size: 14px;
}
.style3 { color: #FFFFFF;
font-family: Tahoma, Verdana, Arial;
font-size: 12px;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d = document;
if(d.images){
if(!d.MM_p)
d.MM_p=new Array();
var i,j = d.MM_p.length, a = MM_preloadImages.arguments;
for(i = 0; i < a.length; i++){
if (a[i].indexOf("#")!= 0){
d.MM_p[j] = new Image;
d.MM_p[j++].src = a[i];
}
}
}
}

function MM_swapImgRestore() { //v3.0
var i,x,a = document.MM_sr;
for(i = 0; a && i<a.length && (x=a[i]) && x.oSrc; i++){
x.src = x.oSrc;
}
}

function MM_findObj(n, d) { //v4.01
var p,i,x;
if(!d){
d=document;
}
if((p = n.indexOf("?")) > 0 && parent.frames.length) {
d = parent.frames[n.substring(p+1)].document;
n = n.substring(0,p);
}
if(!(x = d[n]) && d.all){
x = d.all[n];
}
for (i = 0; !x && i<d.forms.length; i++){
x = d.forms[i][n];
}
for(i = 0;!x && d.layers && i < d.layers.length; i++){
x = MM_findObj(n,d.layers[i].document);
}
if(!x && d.getElementById){
x = d.getElementById(n);
}
return x;
}

function MM_swapImage() { //v3.0
var i,j = 0,x,a = MM_swapImage.arguments;
document.MM_sr = new Array;
for(i = 0; i < (a.length - 2); i += 3){
if ((x = MM_findObj(a[i]))!= null){
document.MM_sr[j++] = x;
if(!x.oSrc){
x.oSrc = x.src;
}
x.src = a[i+2];
}
}
}

function loadFlashObject(imageFile, widthSize, heightSize){
var so = new SWFObject(imageFile, "mymovie", widthSize, heightSize, "8", "#333333");
so.addParam("scale", "noscale");
so.addParam("loop", "false");
so.write("flashcontent");
}

//-->
</script>
</head>
<body onLoad="loadFlashObject('assets/BA-00.swf', '340', '285');MM_preloadImages('assets/button-5a.jpg','assets/button_GallerySamples-B.jpg')">
<img src="assets/blank.gif" width="388" height="40" border="0" usemap="#Map" longdesc="---">
<map name="Map"><area shape="rect" coords="3,3,384,37" href="index.htm" alt="Home">
</map><br>
<br>
<table width="259" border="0">

<tr>
<td width="31"><img src="assets/blank.gif" alt="hypnotic photo" width="25" height="1"></td>
<td width="218"><a href="photographer.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Photographer','','assets/button_Photographer-B.jpg',1)"><img src="assets/button_Photographer-A.jpg" alt="About the Photographer" name="Photographer" width="198" height="35" border="0"></a><br>
<img src="assets/blank.gif" alt="hypnotic photo" width="1" height="4"><br>
<a href="samples.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Gallery Samples','','assets/button_GallerySamples-B.jpg',1)"><img src="assets/button_GallerySamples-A.jpg" alt="Photo Gallery Samples" name="Gallery Samples" width="198" height="35" border="0"></a><br>
<img src="assets/blank.gif" alt="hypnotic photo" width="1" height="4"><br>
<img src="assets/button_BeforeAfter-B.jpg" alt="Before and After altered enhanced photos"></td>
</tr>

</table>

<br>
<table width="850" border="0" cellspacing="0" cellpadding="0">
<tr height="285">
<td width="34">
<img src="assets/blank.gif" width="25" height="8">
</td>
<td width="434">

<p><span class="style1">Here are some example <em>before and after</em>&nbsp; images,&nbsp; in which a photo has been artistically transformed and enhanced.</span>

<p><br>
<span class="style1">
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Test 1','','assets/button-1a.jpg',1)" onClick="loadFlashObject('assets/BA-clip1.swf', '340', '285');">
<img src="assets/button-1.jpg" name="Test 1" width="50" height="20" border="0"></a><span class="style1">&nbsp;&nbsp; A Charming backdrop . . . (Example 1</span>)<br>
<br>
</span>
<span class="style1">

<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Test 2','','assets/button-2a.jpg',1)" onClick="loadFlashObject('assets/BA-clip2.swf', '340', '285');">
<img src="assets/button-2.jpg" name="Test 2" width="50" height="20" border="0"></a><span class="style1">&nbsp;&nbsp; Subtle enhancements . . . (Example 2</span>)<br>
<br>
</span>
<span class="style1">
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Test 3','','assets/button-3a.jpg',1)" onClick="loadFlashObject('assets/BA-clip3.swf', '340', '285');">
<img src="assets/button-3.jpg" name="Test 3" width="50" height="20" border="0"></a><span class="style1">&nbsp;&nbsp; Music poster star . . . (Example 3</span>)<br>

<br>
</span>
<span class="style1">
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Test 4','','assets/button-4a.jpg',1)" onClick="loadFlashObject('assets/BA-clip4.swf', '340', '285');">
<img src="assets/button-4.jpg" name="Test 4" width="50" height="20" border="0"></a><span class="style1">&nbsp;&nbsp; Peering into a soul . . . (Example 4</span>)<br>
<br>
</span>

<span class="style1">
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Test 5','','assets/button-5a.jpg',1)" onClick="loadFlashObject('assets/BA-clip6.swf', '340', '285');">
<img src="assets/button-5.jpg" name="Test 5" width="50" height="20" border="0" onClick="MM_swapImage('Test 5','','assets/button-5a.jpg',1)"></a><span class="style1">&nbsp;&nbsp; Other world transposition . . . (Example 5</span>) </span>
</td>
<td width="340">
<div id="flashcontent">
</div>
</td>

</tr>

<tr>
<td width="34">
<img src="assets/blank.gif" width="25" height="8">
</td>
<td width="434">
<p>&nbsp;

</p>

<p>
</p>

</td>
<td width="340">
<p>&nbsp;

</p>
</td>
</tr>

<tr>
<td width="34">
<img src="assets/blank.gif" width="25" height="8">

</td>
<td width="434">
<p></p>
</td>
</tr>

<tr>
<td width="34">
<img src="assets/blank.gif" width="25" height="8">
</td>

<td width="434">
<p></p>
</td>
</tr>

<tr>
<td width="34">
<img src="assets/blank.gif" width="25" height="8">
</td>
<td width="434">

</td>
</tr>
</table>
<p></p>

</body>
</html>
  • IceCold
  • Guru
  • Guru
  • User avatar
  • Joined: Nov 05, 2004
  • Posts: 1254
  • Loc: Ro
  • Status: Offline

Post September 30th, 2009, 4:06 am

ohh my, why would you go trough all the trouble of switching images? :D
as ATNO said, you can use external interface.
So the actionscript will look like this:
Code: [ Select ]
import flash.external.ExternalInterface;

this.createEmptyMovieClip("mcHolder", 0);

function loadContent(targetURL)
{
  mcHolder.loadMovie(targetURL);
}

function onChange( targetURL:String )
{
  loadContent(targetURL);
}

ExternalInterface.addCallback( "onChange", this, onChange );

loadContent("intro.swf"); // first load intro
stop();
  1. import flash.external.ExternalInterface;
  3. this.createEmptyMovieClip("mcHolder", 0);
  5. function loadContent(targetURL)
  6. {
  7.   mcHolder.loadMovie(targetURL);
  8. }
  10. function onChange( targetURL:String )
  11. {
  12.   loadContent(targetURL);
  13. }
  15. ExternalInterface.addCallback( "onChange", this, onChange );
  17. loadContent("intro.swf"); // first load intro
  18. stop();


and the javascript + html, like this:
Code: [ Select ]
<html>
<head>
<script>
    var me;
    function getID( swfID )
    {
        if(navigator.appName.indexOf("Microsoft") != -1)
            me = window[swfID];
        else
            me = document[swfID];
    }

    function AsChangeContent(targetURL)
    {
        if (me == undefined)
            getID("testload");
        me.onChange(targetURL);
    }
</script>
</head>
<body>
  <h1>Test external interface</h1>
  <div>
  <object type="application/x-shockwave-flash" data="testload.swf" width="550" height="400" id="testload">
    <param name="movie" value="testload.swf" />
    <param name="wmode" value="transparent" />
    <embed src="testload.swf" height="400" width="550" id="testload" ></embed>
  </object>
  </div>
  <a href="javascript:AsChangeContent('text-1.swf');">load text 1</a><br/>
  <a href="javascript:AsChangeContent('text-2.swf');">load text2</a>
</body>
</html>
  1. <html>
  2. <head>
  3. <script>
  4.     var me;
  5.     function getID( swfID )
  6.     {
  7.         if(navigator.appName.indexOf("Microsoft") != -1)
  8.             me = window[swfID];
  9.         else
  10.             me = document[swfID];
  11.     }
  13.     function AsChangeContent(targetURL)
  14.     {
  15.         if (me == undefined)
  16.             getID("testload");
  17.         me.onChange(targetURL);
  18.     }
  19. </script>
  20. </head>
  21. <body>
  22.   <h1>Test external interface</h1>
  23.   <div>
  24.   <object type="application/x-shockwave-flash" data="testload.swf" width="550" height="400" id="testload">
  25.     <param name="movie" value="testload.swf" />
  26.     <param name="wmode" value="transparent" />
  27.     <embed src="testload.swf" height="400" width="550" id="testload" ></embed>
  28.   </object>
  29.   </div>
  30.   <a href="javascript:AsChangeContent('text-1.swf');">load text 1</a><br/>
  31.   <a href="javascript:AsChangeContent('text-2.swf');">load text2</a>
  32. </body>
  33. </html>



Just make sure you don't implement external interface in intro.swf, text-1.swf or text-2.swf , or if you implement, don't use the same function for callback, otherwise will overwrite the original one :D
“True mastery transcede any particular art. It stems from mastery of oneself - the ability, developed throgh self-discipline, to be calm, fully aware, and complety in tune with oneself and the surroundings. Then, and only then, can a person know himself. ”
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Joined: May 28, 2003
  • Posts: 23404
  • Loc: Woodbridge VA
  • Status: Offline

Post September 30th, 2009, 6:44 am

That was roughly about what I think I anticipated for the actionscript. Had no clue how to code the javascript for it though. That looks about as simple as I thought it should be.
"There's no place like 127.0.0.1 except for ::1."
Alexandria Networks. Leader in IT consulting for associations/non-profits, and small to medium sized businesses around the northern Virginia and Washington D.C. metro area.
  • kingjeremy02
  • Newbie
  • Newbie
  • User avatar
  • Joined: Nov 05, 2007
  • Posts: 9
  • Status: Offline

Post September 30th, 2009, 12:23 pm

Thank you!
I'll try implementing this. Out of curiosity what purpose does "testload.swf" play - is it basically creating a transparent holder?
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Joined: May 28, 2003
  • Posts: 23404
  • Loc: Woodbridge VA
  • Status: Offline

Post September 30th, 2009, 12:30 pm

testload.swf would be your container movie (you'll have to create it since you don't already have it). Basically all it needs is that action script he posted above on the first frame).

If I'm following his code this creates your empty movie clip:
ACTIONSCRIPT Code: [ Select ]
this.createEmptyMovieClip("mcHolder", 0);


This is where it loads your first movie:
ACTIONSCRIPT Code: [ Select ]
loadContent("intro.swf"); // first load intro


The rest of the actionscript handles what happens when you click your links to change the loaded movie.

You might also want to consider adding a link option to return to the first clip after they've changed it - depends on exactly what you're trying to accomplish.
"There's no place like 127.0.0.1 except for ::1."
Alexandria Networks. Leader in IT consulting for associations/non-profits, and small to medium sized businesses around the northern Virginia and Washington D.C. metro area.

Page 1 of 1

Post Information

  • Total Posts in this topic: 10 posts
  • Users browsing this forum: No registered users and 52 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.