Recently I came across a situation where I needed to resize the stage of the flash file from within HTML. I came up with a very simple way of doing it and decided to share it with you all.
The tutorial should be very easy to follow for people with even least knowledge of Flash, ActionScript, HTML, CSS and JavaScript. I will try to be as detailed as possible in writing this tutorial.
I am going to use Flash 8.0, ActionScript 2.0, Javascript and HTML/CSS in this tutorial. Lets get started!
We are going to start by creating a new Flash file.
Set the dimensions of the Flash file to 170px x 170px.
Create 2 movie clips
Name: mcA, Linkage Name: mc_A, Movie Clip Dimension: 170px x 170px.
Name: mcB, Linkage Name: mc_B, Movie Clip Dimension: 400px x 300px.
I am going to keep both the movie clips in the library and attach them dynamicaly using attachMovie class. You can put the movie clips on the timeline if you need to.
Action Script:
//attach the mc_B to stage and give it an instance name movieClipB…
attachMovie(“mc_A”, “movieClipA”, _root.getNextHighestDepth());
We are going to use the External Interface class to allow action script in flash to communicate with the Javascript in HTML. Lets go ahead and import the External Interface class in flash.
Action Script:
import flash.external.ExternalInterface;
Now lets create a function to remove the movieClipA from the stage and attach mc_B when the movieClipA is clicked.
Action Script:
function enableButtonA(){
//when movieClipA is clicked and released…
movieClipA.onRelease = function (){
//call the function receiveFromFlash in JavaScript and pass it the parameter css/css2.css…
ExternalInterface.call(“receiveFromFlash”, “css/css2.css”);
//attach the mc_B to stage and give it an instance name movieClipB…
attachMovie(“mc_B”, “movieClipB”, _root.getNextHighestDepth());
//call the function enableButtonB in flash…
enableButtonB();
//remove the previously attached movieClipA from the stage…
removeMovieClip(“movieClipA”);
}
}
//call the function enableButtonA in flash…
enableButtonA();
Now lets create another similar piece of code for when the movieClip B is clicked.
Action Script:
function enableButtonB(){
//when movieClipB is clicked and released…
movieClipB.onRelease = function (){
//call the function receiveFromFlash in JavaScript and pass it the parameter css/css1.css…
ExternalInterface.call(“receiveFromFlash”, “css/css2.css”);
//attach the mc_A to stage and give it an instance name movieClipA…
attachMovie(“mc_A”, “movieClipA”, _root.getNextHighestDepth());
//call the function enableButtonA in flash…
enableButtonA();
//remove the previously attached movieClipB from the stage…
removeMovieClip(“movieClipB”);
}
}
Alright! we are done with the actionscript portion for this project. Now publish and create the SWF and HTML files.
Now lets create the CSS files.
CSS
.flashDim{
width:170px;
height:170px;
}
Save the css files as css1.css
CSS
.flashDim{
width:400px;
height:300px;
}
Save this css file as css2.ss
Create a new folder called ‘css’and move the 2 css files inside the folder.
Lets open up the HTML file in notepad, or any other text editor and make some changes to it.
We are going to link the css1.css file inside the HTML and create a javascript function to switch between the two css files we created. This is the same function we are going to call from within flash using the ActionScript External Interface class.
Code explaind:
When we click on the movie clip in flash, the action script uses the external interface class to communicate with javascript inside HTML. The javascript function is called and a parameter is passed to the function. The javascript changes the css file that increases (and decreases) the dimension of the div.
I hope this tutorial is going to be helpful.