A Flash Developer Resource Site














Internet Commerce

Partners & Affiliates














Developer Channel

internet.com


Featured Flash FLA
Gallery Downloads 11337 Flash Movies | 1 New Flash Movies Added
What's New | Top 100

Featured FLA

» Author: Bugra Ozden
» Title: Skatalog v9 - product catalog
» Description: Create your product catalog easly and publish on your website or Create your image gallery, documents list, portfolio. Fully XML Driven
» More by Bugra Ozden


Random FLAs | Add Flash Movie
Featured Flash Site
Gallery Downloads 5828 Flash Sites | 0 New Flash Links
What's New | Top 100 Flash Site

Featured Site

» Posted in the Flash Kit Links section
» Title: Creative DW Image Show PRO
» Description: Creative DW Image Show PRO is a Dreamweaver extension which enables the user to create multimedia presentations. It combines the features of the popular Creative DW Image Show with the ability to add professional text effects to slides (similar to After Effects). The product is very customizable: the user can choose the duration of the transition effects, the slide motion start and end position, zoom and panning type for both images and texts.


Random Links | Add your own Flash Related Links
Flash Tutorials 1280 Tutorials 7 New Tutorials Added!
What's New | Top100

» Make a Flash Slide Show Screen Saver
» Simple flash making tutorial for thanksgiving
» Create flash banner for website
» Create xml slideshow with free template
» How to Insert a Multilingual Subtitle Into Your Flash Video Studio
» How to Create Cool Halloween Slideshow
» Debugging flash using the Firebug console
» Create Flash Slideshow on Blogger
» FLASH TRICKS IN WEB ADVERTISING: FLASH BANNERS
» Unknown Tag: Title10
Random Tutorial | Add Site

Trading Customer Accounting (IL)
Next Step Systems
US-IL-Chicago

Justtechjobs.com Post A Job | Post A Resume


Tutorials Home What's New Top Rated Submit myTutes Random!

Search Tutorials


Tutorials Tutorials » Dynamic_Content

Categories JavaScript Pop-up windows (no external scripts) in Flash - a definitive guide
Author: Jeffrey F. Hill | Website: http://www.flash-db.com |

 
Page 2
«prev 1 2 3 4 5 6 next»

Basic Theory and Technique

To start we are going to go over the most basic JavaScript code that we will be using. This code can be placed on any button within your Flash movie. Additional it can be used as a frame action by removing the on (release) { portion and placing the code on a frame.

on (release) {
getURL ("javascript:NewWindow=window.open('ShowPopup.php','newWin','width=400,height=300,left=0,top=0,
toolbar=No,location=No,scrollbars=No,status=No,resizable=No,fullscreen=No');  NewWindow.focus();
void(0);");
}

The first part (Green) tells the browser that we will be sending it some JavaScript code. Then we define a new window object called 'NewWindow' This name is important because it will allow us to reference the popup window at later times. This does not have to have the name 'NewWindow' it can be anything as long as you keep it consistent. Then we use the window.open JavaScript command to open up a new window. This function contains a couple of options. The first is the target URL to the Page that you want to open inside the pop-up window. In this case that's 'ShowPopup.php'. The next option is to give the window a Name, the name of the window in this example will be 'newWin'. Then we have the option to include any of the following window parameters - shown by this part of the above code 'width=400,height=300,left=0,top=0,toolbar=No,location=No,scrollbars=No,status=No,resizable=No,fullscreen=No'. By changing around the numeric values and No to Yes you can control most of the features of the window. You can of course leave any or all of these properties out and they will then be set to their default values. Here is a description of each:

  • width: A numeric value representing the width of the popup window
  • height: A numeric value representing the height of the popup window
  • left: A numeric value representing the left (X) position of the popup window
  • top: A numeric value representing the top (Y) position of the popup window
  • toolbar: A Yes / No value indicating whether to add a toolbar to the popup window
  • location: A Yes / No value indicating whether to add the URL Location to the popup window
  • scrollbars: A Yes / No / Auto value indicating whether or not to include scrollbars in the window
  • status: A Yes / No value indicating whether to add the bottom Status/Loading part to your window
  • resizeable: A Yes / No value indicating whether to allow the window to be resized once opened
  • fullscreen: A Yes / No value indicating whether or not to open the window fullscreen. This will open a borderless full screen window in IE but will not work with Netscape.

Then we add the NewWindow.focus(); part, this ensures that the popup will be opened on top of all other windows. You can change this to NewWindow.blur(); (which is the opposite of focus except it pushes the window behind any other browser windows that are open. Then we close off the code by adding the void(0); portion.

As you can see that since we are able to add additional functions such as NewWindow.focus(); we will be able to add quite a few more functions and effects for this pop up window. The next part describes some of the more useful ones. Also their is no real need to place this script on a button - you can just as easily place it on a certain frame in your flash movie at a specific point you want your window to open. An example would be:

getURL ("javascript:NewWindow=window.open('ShowPopup.php','newWin','width=400,height=300,left=0,top=0,
toolbar=No,location=No,scrollbars=No,status=No,resizable=No,fullscreen=No'
); NewWindow.focus();
void(0);");

Just don't add the on (release) { portion. With this technique you can continue to open windows place at specific locations as your movie continues to play.

Using this same technique in HTML instead of Flash

Theirs always some time that we have to revert to using HTML instead of Flash. And yes we can use this same technique in an html page with a few modifications.

"javascript:NewWindow=window.open('http://www.flash-db.com/index.php','newWin','width=400,height=300,left=0,top=0,
toolbar=No,location=No,scrollbars=No,status=No,resizable=No,fullscreen=No');
NewWindow.focus(); void(0);"This is the Link

The below link will be generated by the above code. This is the exact same concept used in the Flash button example - except we add the , closing tags, and remove the ending ); used in the flash example.

This is the Link

Cross Browser Compatibility

The basic code above should work with all browsers. The animated and custom effects below (next page) can vary with older browsers and with some Netscape versions. All functions mentioned and used in this tutorial and created with the Auto-code generator appear to work with all IE 5+ versions and all Opera 6 browsers - some functions such as the resizeBy and scrollBy will not work with all Netscape versions. The moveBy animated movements do work with most Netscape versions (which means at least the shake window is completely cross browser). Also some effects will vary slightly between browsers.

«prev 1 2 3 4 5 6 next»

» Level Intermediate

Added: : 2002-01-09
Rating: 8.81 Votes: 149
Hits: 2300
» Author
Jeffrey Hill is a freelance web developer from Boulder, Colorado. He specializes in creating and developing dynamic database driven Flash content and applications. Specialty's include SQL, PHP, Perl, and XML.
» Download
Download the files used in this tutorial.
Download (0 kb)
Get conversion and unzipping tools for PC and Mac here!

» Forums
More help? Search our boards for quick answers!

Please rate this tutorial, 10 is the top rating, you can also click the comments link to read/write a review.
10 9 8 7 6 5 4 3 2 1
Read or Post Comments
 
   
 

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs