expandable flash movie

LittleNFiesty · Oct 26, 2011

I want to create an expandable flash movie. Where someone has to click on it and then it expands (not over the content of the page) and if they want to close it a close button that reduces it back down. Does anyone have any idea where I can find a tutorial for this?

draigGoch · Dec 6, 2011

Hi,

You can create thios effect using a mixture of actionscript, html, css and javascript.

I haven't touched flash for a while, so i am using as2 rather than as3, don't know what the synhtax for this is i'm afraid.
Within your flash file, you might have this code for handling two buttons named btn1 and btn2:

Code:

import flash.external.ExternalInterface;

btn1.onPress = function() {
	//This line below will call the javascript function showFlash with the parameter "show"
	clicked = ExternalInterface.call("showFlash","show");
}
btn2.onPress = function() {
	//This line below will call the javascript function showFlash with the parameter "hide"
	clicked = ExternalInterface.call("showFlash","hide");
}

Your html page might look similar to this:

Code:

<!DOCTYPE html>
<html>
	<head>
		<title>Expanding flash example</title>
		<style>
		* {
			padding: 0px;
			margin: 0px;
			border: 0px;
		}

		html, body {
			height: 100%;
			width: 100%;
			overflow: hidden;
		}

		#adContainer {
			position: relative;
			height: 200px;
			z-index: 1;
			overflow: hidden;
		}
		#div2 {
			position: relative;
			background-color: #FFEE66;
			border: 1px #CC0000 solid;
			z-index: 100000;
			margin: 5px;
			padding: 5px;
		}
		</style>
		<!-- Load jQuery -->
		<script type="text/javascript" src="[URL unfurl="true"]http://code.jquery.com/jquery-1.6.4.min.js"></script>[/URL]
		<script type="text/javascript" src="include/swfobject.js"></script>

		<script type="text/javascript">
		
			function showFlash(mode) {
				if (mode=="show") {
					$('#adContainer').animate({height: "400px"},500);
				} else {
					$('#adContainer').animate({height: "200px"},500);
				}
			}
			
			$(document).ready(function(){
				$('.show').click(function() {
					showFlash("show");
					return false;
				});
				$('.hide').click(function() {
					showFlash("hide");
					return false;
				});
			});
			
			var flashvars = {},
			params = {wmode:"opaque"},
			attributes = {};

			swfobject.embedSWF("include/expanding_ad.swf", "expanding_ad", "800", "400", "9.0.0","include/expressInstall.swf", flashvars, params, attributes);
		</script>
	</head>
	<body>
		<a class="show" href="#">Show Animation</a>
		<br/>
		<a class="hide" href="#">Hide Animation</a>
		<div id="adContainer">
			<div id="expanding_ad">
				You will need <a href="[URL unfurl="true"]http://store.adobe.com/go/getflashplayer">Flash[/URL] Player 9</a> or above to view this page.<br />
			</div>
		</div>
		<div id="div2">Text underneath</div>
	</body>
</html>

For this code to work, you need to download the swfobject from

http://code.google.com/p/swfobject/

and make sure that the files are set up in the proper directories.

It works using z-index on different divs to display one div in front of the other (for this to work, the divs need to have their css "position" attribute set to absolute or relative).

The function called from within the flash file, and from the javascript itself when clicking on one of the hyperlinks is:

Code:

function showFlash(mode) {
	if (mode=="show") {
		$('#adContainer').animate({height: "400px"},500);
	} else {
		$('#adContainer').animate({height: "200px"},500);
	}
}

Which uses the jquery framework to animate the height of the container div around the flash file.

Hope this all makes sense to you.

A computer always does what you tell it to, but rarely does what you want it to.....

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!

expandable flash movie

LittleNFiesty

Technical User

draigGoch

Programmer

Similar threads

Part and Inventory Search

Sponsor