Smart questions
Smart answers
Smart people
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Member Login
Remember Me
Forgot Password?
Join Us!

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips now!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!
Join Tek-Tips
*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

LINK TO THIS FORUM!

Add Stickiness To Your Site By Linking To This Professionally Managed Technical Forum.
Just copy and paste the
code below into your site.

Tek-Tips LinkedIn® Group

Partner With Us!

"Best Of Breed" Forums Add Stickiness To Your Site
Partner Button
(Download This Button Today!)

Feedback

"...Your site is a great idea. I should have joined your site years ago. Better late than never..."
More...

Geography

Where in the world do Tek-Tips members come from?
Click Here To Find Out!

Tek-Tips Shirts!

Get Tek-Tips Swag
Get your
Tek-Tips Forums
SWAG here!
Home > Forums > Programmers > Graphics and Publishing > Adobe: Flash Forum

expandable flash movie

thread250-1664803
Read More Threads Like This One
LittleNFiesty (TechnicalUser)
26 Oct 11 9:28
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 (Programmer)
6 Dec 11 6:32
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="http://code.jquery.com/jquery-1.6.4.min.js"></script>
        <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="http://store.adobe.com/go/getflashplayer">Flash 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.....

Read More Threads Like This One

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Back To Forum

Back To Adobe: Flash

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close