Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations wOOdy-Soft on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Flash-Javascript Interaction

Step-by-step tutorial

Flash-Javascript Interaction

by  davdesign  Posted    (Edited  )
[color green]Just to let you know that I'm relocating my server as of today, and for a period of three to four weeks, none of the links to my files on this site will work.

If you need a file from me which is linked from this site then please just email me details of the relevant link and I will send the relevant file(s) to you.

After I've relocated the server and all the files within it I shall endeavour to update all links in Tek-Tips.[/color]




Create effects as seen at www.next-in.com .
Couldn't resist trying this for myself, so here's what I came up with. Credit to Colin Moock for the popup script. Also included in the zip is 'part' of the racing game I'm working on, so some of the scripting may be of use to you. Also, this doesn't work in AOL (thanks Carl), if anyone knows the fix for AOL I'd be all ears. Have fun! ;-)

www.pinkzeppelin.com/FAQ/java/launch.html
www.pinkzeppelin.com/FAQ/java/accelerator.zip


Step1
Create the button in your flash movie which will force the pop-up.
The button simply contains a Javascript getURL command which passes variables to a script held within the HTML coding (see step 2).
The actions take the form of :

[color red]
Code: 
getURL ("javascript:launchwin('mypopup.html' , 'newwindow' , 'height=250,width=600')");
[/color]

where
-'launchwin' is the name of the javascript function held within the HTML code.
-'popup.html' is the page you want to be displayed within the pop-up window
-'newwindow' defines the new pop-up window
-'height' and 'width' are the dimensions of your new window



Step2
Publish the movie you have just made.
Open the HTML file created and view the source code in Notepad or something similar.
Within the
Code: 
<HEAD>
tags, insert the following:

[color red]
Code: 
<!--################################################################-->
<!--######### THIS IS THE JAVASCRIPT CODE WHICH ENCOMPASSES ########-->
<!--###############THE FUNCTION TO CREATE A POP-UP##################-->

Popup Window
Version 2.0
Last Updated: May 7, 1999
Code maintained at: http://www.moock.org/webdesign/javascript/
Copy permission granted for non-commercial uses. Written by Colin Moock.-->


<SCRIPT LANGUAGE="JavaScript"> var javascript_version = 1.0;</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.1">  javascript_version = 1.1;</SCRIPT>


<SCRIPT LANGUAGE="JavaScript">

var newwin;

function launchwin(winurl,winname,winfeatures)
{
	//This launches a new window and then
	//focuses it if window.focus() is supported.
	newwin = window.open(winurl,winname,winfeatures);
	if(javascript_version > 1.0)
	{
		//delay a bit here because IE4 encounters errors
		//when trying to focus a recently opened window
 		setTimeout('newwin.focus();',250);
	}
}
</SCRIPT>
<!--#####################################################################-->
<!--#####################################################################-->
[/color]

Save your file and close. The above code embeds the javascript function in your page which is called upon by the button you created in Step1 to launch the pop-up window.



Step3
This is where you have to use your imagination and create an swf which utilises the javascript.
In my example I have created sporting animations which use balls to produce the effect of moving the window.
Import one of my swfs into a new movie (remember to set the dimensions to 250*600 if you want it to appear the same.
Now, lets use "bowler.swf" as an example. When you import an swf into a new movie you lose the actionscripting, so on frame 74 insert the following:

[color red]
Code: 
getURL ("javascript:shiftleft()");
[/color]

This basically matches the timing of the animation, such that when the ball 'hits' the side of the window the javascript function 'shiftleft' held within the Javascript file referenced in the HTML page is called to perform the window shift.
In the final frame of 'bowler' insert:

[color red]
Code: 
gotoAndPlay (1);
[/color]

...to loop the animation. Now save this as 'mypopup.fla' and publish the swf and html pages.



Step4
OK, we're almost there. In order for the javascript functions in 'bowler' to work, we have to place the javascript in the HTML page. So just like Step2, insert the following code between the
Code: 
<HEAD>
tags in 'mypopup.html' :

[color red]
Code: 
<!--#################################################################-->
<!--### THIS IS THE SCRIPT WHICH MAKES THE WINDOW MOVE ##############-->
<!--#################################################################-->

<SCRIPT LANGUAGE="JavaScript"> var javascript_version = 1.0;</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.1">  javascript_version = 1.1;</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
var x1=1000;
var x0=1000;
var y1=1000;
var y0=1000;
function shiftright()
        {
         for (x0 >= 0; self.window.moveBy(60,0) && x0 == (x0 - 10););
  }
  
  function shiftleft()
        {
         for (x1 >= 0; self.window.moveBy(-60,0) && x1 == (x1 - 10););
  }
  
  
function shiftup()
        {
         for (y1 >= 0; self.window.moveBy(0,-60) && y1 == (y1 - 10););
  }

function shiftdown()
        {
         for (y1 >= 0; self.window.moveBy(0,60) && y1 == (y1 - 10););
	
  }
</SCRIPT>
<!--#################################################################-->
<!--#################################################################-->
[/color]

Save your new 'mypopup.html and close.


OK, that's it. To test your work, open launch.html and press the button.


If you feel that you have learned from this FAQ or found it useful, please give it a high rating. This is the only way that I can tell if my FAQ's are being read, and if people stop reading them, I will stop making them. Cheers, dave.
Register to add this FAQ to your archive
Register to rate this FAQ  : BAD 1 2 3 4 5 6 7 8 9 10 GOOD
Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

Back
Top