Overview:

Many have struggled with the task of getting you swf to read or get the current url showing in the browser, the html page the browser is at which has the swf embedded. Not to be confused with the _root._url which returns the path of the swf file. This would be helpful to know if someone is embedding your swfs on their site, or even customize your swf depending on which page it resides on. There is a pretty simple, yet virtually undocumented way to do this. We have to use javascript by calling External Interface and get the url from the DOM. Window.location.href. Then we must call the toString() function only because ExternalInterface.call requires a function rather than only reading a static property.

Steps:

Import external interface into your file: import flash.external.ExternalInterface;
Initialize a variable to store the url path: var urlPath;
Create a function to call external interface and assign the html page path to your variable: urlPath = ExternalInterface.call(“window.location.href.toString”);
Call the function when/if needed.

Example:

With javascript: window.location.href or window.location.href.toString();
With actionscript: ExternalInterface.call(“window.location.href.toString”);
External Interface html Example
[kml_flashembed publishmethod=”dynamic” fversion=”9.0.0″ movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2008/01/externalinterface.swf” width=”550″ height=”200″ targetclass=”flashmovie”]

[/kml_flashembed]
Actionscript:
[cc lang=”actionscript” tab_size=”2″ lines=”40″]
import flash.external.*;
var urlPath;

function geturlhttp() {
urlPath = ExternalInterface.call(“window.location.href.toString”);
}
geturlhttp();
//Here I assign the url to a text box on the stage
_root.urlText.text = urlPath;

[/cc]

Download:

ExternalInterface.zip

PHP Menu Include function to reuse an html block on multiple pages

Posted on December 21, 2007August 29, 2014 by Evan Mullins

Overview:
When making websites frequently we want a navigation bar or menu to show on every page. Rather than repeating the code on every single page, which is virtually impossible to update and maintain, or worse, using frames, use PHP to automate this and build each page dynamically. PHP will just paste in the navigation or whatever you’d want represented on every page. To do this we use the php include function. You can use include() to show headers, footers, or any elements that you’d reuse on multiple pages. The include() function takes all the text in a specified file and copies it into the file that calls the include function. This is great for scalability and updating- instead of changing multiple files, only change one!
Here’s what a php include function looks like:
<?php include(“nav.php”); ?>

Steps:
1. Make the actual nav you want.

2. Put it into a php file (or any type of file, html, txt, as long as it’s formatted as html)

3. Place the php in your page to ‘print’ the desired file into your final html page before the browser renders the page using the include function. This spits out html. The viewer’s only see html, as that’s all it is, the php created the html file- That’s why it’s called PHP: Hypertext Preprocessor.

Example:
The nav.php file:
[cc lang=”php” tab_size=”2″ lines=”40″]

Home |
About Us |
Portfolio |
Contact Us

[/cc]

The homepage.php:
[cc lang=”php” tab_size=”2″ lines=”40″]
<?php include(“nav.php”); ?>

Welcome to my home page

home page text lorem ipsum
[/cc]

And here’s a sample site with a nav bar containing 4 pages included through php for Home, About, Portfolio and Contact.

Download

phpNav.zip

NavBar Menu List with CSS

Posted on December 11, 2007August 29, 2014 by Evan Mullins

The Overview:

An interactive navigation bar using CSS with rounded corners. Just put the html as an unordered list and your navigation links as list items and the CSS will do the rest! As shown here! The css will tell the browser to display this special unordered list as the menu. This utilizes a technique to have one background image with three states: normal, hover and active. The css controls the placement of the background image so when you hover, the images is displaced to show only the hover state, and likewise for the active and then returns to the normal state. This is compatible in all the browsers I have checked so far, let me know if you find any issues [thanks].

The Steps:

1. First make the html. An <ul> full of <li> elements.

2. Make the desired backgrounds. Three part background (or two) . One part ‘Normal’ state and another ‘hover’ state and optionally an ‘active’ state. Add additional backgrounds if you want anything like rounded corners, or just a header.

Top Menu Background Image

Middle Menu Background Image

Bottom Menu Background Image

3. The CSS to attach the two together

The Example:

verticalMenuCSS.html

As you can see this is a simple html unordered list with list items.

[cc lang=”html”]

My Site
Home
About
Biography
Portfolio
Contact

[/cc]

Here’s the magic.

[cc lang=”css”]
/*vertical Menu CSS style sheet*/

*{
list-style:none;
margin:0px;
padding:0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
}

.sidemenu {
width: 150px;
border: none;
}
.sidemenu li a {
height: 18px;
text-decoration: none;
}
/*Top sidemenu Item (Header and rounded corners)*/
.sidemenu li.top a:link, .sidemenu li.top a:visited {
color: #828282;
display: block;
background: url(images/menuTop.png);
background-repeat:no-repeat;
padding: 1px 0 1px 0;
font-size: 1em;
font-weight: bold;
text-align: center;
}
/* Uncomment this if you want the header to be an interactive link
.sidemenu li.top a:hover {
color: #828282;
background: url(images/menuTop.png) 0 -22px;
}
.sidemenu li.top a:active {
color: #26370A;
background: url(images/menuTop.png) 0 -44px;
}*/

/*sidemenu Item Middle*/
.sidemenu li.middle a:link, .sidemenu li.middle a:visited {
color: #5E7830;
display: block;
background: url(images/menuMiddle.png);
background-repeat:no-repeat;
padding: 1px 0 1px 20px;
font-size: 0.8em;
}
.sidemenu li.middle a:hover {
color: #FFFFFF;
background: url(images/menuMiddle.png) 0 -22px;
}
.sidemenu li.middle a:active {
color: #FFFFFF;
background: url(images/menuMiddle.png) 0 -44px;
}

/*Bottom sidemenu Item (rounded corners)*/
.sidemenu li.bottom a:link, .sidemenu li.bottom a:visited {
color: #5E7830;
display: block;
background: url(images/menuBottom.png);
background-repeat:no-repeat;
padding: 1px 0 1px 20px;
font-size: 0.8em;
}
.sidemenu li.bottom a:hover {
color: #FFFFFF;
background: url(images/menuBottom.png) 0 -22px;
}
.sidemenu li.bottom a:active {
color: #FFFFFF;
background: url(images/menuBottom.png) 0 -44px;
}
[/cc]

verticalMenuCSS.html

The Download:

verticalMenuCSS.zip