In this tutorial you will learn how to load an external swf file in Flash using Action Script 2.0 (AS2).

We will create a button on the main timeline, clicking which will load up the external swf file as well as a close button. Clicking the close button will unload the external swf file and cause the close button to disappear.

Let’s begin!

Let’s assume the external swf file is named ‘external.swf’

1. In the main timeline create a button. You can put the text ‘Click Me’ on this button.

2. On the ‘Click Me’ button put the following AS2 code:

on (Release) {
_root.mymc._visible = true;
_level0.mymc.holder_mc.loadMovie(“external.swf”);
}

2. In the main timeline create a movie clip called ‘mymc’

3. Within ‘mymc’ create another movie clip called ‘holder_mc’ and a button. You can put the text ‘close’ on this button.

4. On the close button put the following AS2 code:

on (Release) {
_root.mymc._visible = false;
_level0.mymc.holder_mc.unloadMovie(“external.swf”);
}

That’s it!

You can download the .fla file for this tutorial here

How to load pictures in flash CS4 dynamically using the loader component.

In this tutorial we will learn how to load your pictures into flash dynamically using the loader component. The pictures I am going to work with is 500 pixels wide and 375 pixels height, so I am going to make the stage the same size. So click on the stage and go to properties panel and click on the size and change the size to 500×375 width and height as shown below.

Now I am going to drag the loader component to the stage, so click on the windows in the main menu -> components -> loader, and drag it on stage as shown below.

I am going to make it the same size as the stage and images ie:500×375, so click on the loader component and in your properties panel adjust the size to 500×375 with the ‘x’ and ‘y’ axis positioned at zero, so that it covers the entire stage, and give the loader an instance name and call it “myloader” as shown below.

And we are going to call this layer pictures.

Now your swf and the fla files have to be in the same directory as where your images are, so save your files in the directory where your images are stored. The advantage of doing this is, you are not loading your images along with your entire website, it is being called for externally, this way your flash loader takes less time to load.
Now create two buttons, name the first one as “1” and the second one as “2”, so lock the pictures layer and create another layer and call it buttons, make a round shape with the number “1” in it, and make another round shaped button with the number “2” in it. And bring it to either side of the stage, ie; one on the left extreme and the other on the right extreme.

Now click F8 and convert the symbol into button and call it btn_1 and btn_2 respectively as shown below.

Now we are going to add codes to these buttons, so that when number ‘1’ button is clicked the image1 loads and when the button ‘2’ is clicked the image2 loads. This way the flash does not take a long time to load, it loads first and then calls for the images when clicked on buttons.

In the action script, you are basically commanding that on release of the button, it calls for the instance name ie: myloader in this instance and the contentPath you defined is the image you are calling for as shown above.

Test your movie and you will notice that the flash CS4 loads faster, and only on clicking the buttons, it will display the image you have defined in your action script.
You now know how to load pictures in flash CS4 dynamically using the loader component.

To create a layout in flash CS4, first you need flash CS4 software, ideally I would recommend that you make a layout of what is in your mind on a white paper, as to the size, the color, the font, the navigation links you want, where to place them etc.,

Open the flash CS4 ->File -> New (shortcut key is Ctrl+N)

You will see a white stage, you can change the size and color by clicking on Modify on the main menu and clicking on Document (shortcut key is Ctrl+J)

You can choose the size of your flash CS4 website, here in this example I have chosen 700 pixels width and 500 pixels height and chosen #FFD7BB (beige color as background) with frame rate 30 fps as shown below.

Let us create a background rectangle for the site, so turn on the fill color and turn of the stroke color like this one below and choose one color from the color panel. I have chosen white color #FFFFFF.

Now choose the rectangle tool

and create a rectangle with 650 pixel width and 500 pixel height as shown below.

Now let us create a movie clip, click on the white banner on stage and press F8 and name the movie clip “main” and select movie clip and press OK like this one below:

Having created the main movie-clip, double click on the main movie-clip and create another movie-clip and call it “background” and press OK like this one below.

Having done this, double click on background movie-clip and using your selection tool

Drag over 75 percent of the stage downwards like this one below:

Click on the highlighted portion of the stage and click on the fill color and choose any color of your choice. I have chosen (#333333) a dark grey color.

Now having created the background movie-clip,

go back on the main movie-clip by clicking on “main” circled in red as shown above and name the layer which has the background movie-clip as background and add two more layers and call one “content” and another one “buttons”. To add layers you have to click on the icon circled in red below.

Let us add some content by using the text tool

Choose the font style I have chosen Ariel Black with font size as 20 as shown below:

Type “ABOUT US” and convert it into a symbol by pressing F8 and call it “Content” as shown below.

Now double click on “ABOUT US” you will enter the content movie-clip and rename that layer as sections as shown below.

Add a sub-heading if you want, below “ABOUT US” in a smaller font say 16 pixels and call “CEO”. Then add some content under the CEO with the fonts and sizes that I have selected from the character properties.

Now let us go ahead and add an image and optimize it. When importing images (File > Import > Import to Stage) into flash you have the ability to optimize them, It’s good to optimize your images from within flash, because you can tweak their quality whenever you want, without having to open them up again in an image editing program. So the file extension usually use for images is PNG, which provides a high quality image. So below you can see an image, that I have imported, as the featured item of the Flash site.

Now that we have imported the image on stage and optimized it, let us convert the image into a button, that opens up a browser window, now convert the flower image into a movie clip symbol and call it flowerMC, so press F8 and name it flowerMC and check on movie clip and click on OK.

Now you can give the movie clip an instance name, call it flower from the properties panel as shown below.

The image can now be given some functionality by referring to the instance name. In the content movie clip, create a new layer called script and click on the 1st frame of the layer.

Open up the actions panel and enter the code shown below.

Flower.onRelease = function(){
getURL(http://www.bestwebdesignz.com, “blank”)
}

This code refers to the image, using the instance name ‘flower’, giving it an onRelease function. So when ever the image is pressed and release, it can be told to do something. In this case, it is told to open up a browser window (getURL), using the address bestwebdesignz. We also have to add a stop action, because we are about to create more frames in the content movie clip

Now go ahead and add the rest of the content. We will be creating some buttons later, which. when clicked, will display the corresponding section. In the content MC we are going to create each section at a different frame. So when one of the buttons is clicked, the content MC will go to the frame with the respective content on. To do this, we are going to give each section a label that we can tell the content MC to go to. So, create a new layer called ‘labels’, in-between the script and section layer. Click on the first frame of the labels layer and, at the properties panel, enter ‘about’ under ‘frame’ circled in red as shown below:

Select the 10th frame of all the layers and then insert key frames for each layer press F6 or right click and select insert key frames as shown below.

On the 10th frame, of the labels layer, add another label called “portfolio”. You can add more frames, extending them to frame 20, by using f5 while layer 10 of all frames is selected.

Change all the text to suit this section and add the first thumbnail for your portfolio as shown below.

Convert the image to an MC called ‘thumbnail2′

You can add as many thumbnails you want, also converting them to Movie clip s called thumbnail1, thumbnail2, thumbnail3 and so on. Then give the thumbnail2 movie clip the same instance name, which we will use to give some functionality. Do the same with each of the other thumbnails, giving thumbnail3 movie clip the instance name ‘thumbnail3′ etc.

Click on frame 10 of the script layer and open up the Actions panel. As we did with the featured image, add the code show below, this time swapping the URL address for what ever you want the thumbnails to open up as shown below.

Thumbnail2.onRelease = function() {
getURL(“http://www.bestwebdesignz.com/tips/fireworks/fireworks-website-templates”,”_blank”)
}

Thumbnail3.onRelease = function() {
getURL(“http://wwwbestwebdesignz.com/tips/oscommerce/best-oscommerce-templates/”,”_blank”)
}

Thumbnail4.onRelease = function() {
getURL(“http://www.bestwebdesignz.com/tips/wordpress/best-wordpress-templates/”,”_blank”)
}

Thumbnail5.onRelease = function() {
getURL(“http://www.bestwebdesignz.com/tips/zen-cart-tutorials/best-zen-cart-e-store-template-themes/”,”_blank”)
}

Add another section, create another key frame by pressing F6 at frame 20 of all the layers. Create a label for the 3rd section. As you can see we have called it ’services’

Now that we have all the sections in the content movie clip , go back to the main movie clip and give the content movie clip an instance name. We can then use the instance name to control the content movie clip.

Now we are going to create some buttons to tell the content movie clip how to go to the corresponding label. On the button layer, select the rectangle tool and draw a rectangle on stage using the same color as the background.

Convert the rectangle into a movie clip by pressing F8 and call it “BT background”.
We can now use the instance of BT background movie clip for each button. So copy and paste it besides the first one, do it for 3 times, since we have created 3 web pages (About, Portfolio, Services) then convert the first movie clip into another button symbol by pressing F8 and call it “about”, this button will be used to tell the content movie clip to go to the ‘about’ label, repeat the same process for the portfolio page as well as the services page as shown below.

Double click on the first button symbol and create a new layer and add the text ‘about’ , repeat the same procedure for portfolio and services button, as shown below.

Now create a layer called “script”, above the buttons layer in the main movie clip. Open up the Actions panel and add the action script as shown below. This script gives each button functionality, so that when they are pressed, the content movie clip goes to the corresponding pages.

And now for the final stage of the tutorial to create a basic Flash website, we are going to create a pre-loader for the website, go back to root of the time, where the ‘Main’ movie clip is, and move the first frame, to frame 2 as shown below.

Now make a text field on the first frame, with the text “loading”, and convert the text field by pressing F8 to a movie clip called ‘loader’. Double click on the ‘loader’ movie clip and create a second text field on the right, with the text “99%”. From the properties panel the text has been made “dynamic”, and a var (variable) has been given to it called “percent”. When the website is preloading, this variable will hold the percent value that is loaded so far, and it will be displayed in the dynamic text field.

Now go back to the root timeline, instead of placing the code on a frame in the timeline, put it on the loader movie clip by clicking on it, opening up the Actions Panel, and then entering the code, shown below. This block of action script will check to see how much of the website has loaded and display the percentage in the text, using the variable. Once all of it is loaded, the timeline will go to frame 2, and the site will be displayed.

Last but not the least, on the first frame of the root timeline (Scene1) insert a layer called script and place a stop() action in the action script as shown below.

That’s it, you now know how to create a basic website in flash CS4.

How to create a scroll bar in Flash CS4.

When you want to create a scroll bar in flash CS4, first go to the place where you want the scroll bar to show, click on that item and you can create one by clicking on windows in the main menu-> Components-> UIScrollBar as shown below:

You can resize the scroll bar by clicking on the properties window and increasing or decreasing the height and width of it.

That’s it, you now know how to create a scroll bar in Flash CS4.

How to make an image big on rollover in flash CS4.

First of all you need to have the same image of two different sizes and save it in your directory.

Open flash CS4, and import an image on the centre stage, by going to the main menu file-> Import -> Import to Stage, as shown below,

In this case I have imported the smaller sized image to the stage. You can save your file, in this case I have saved it as rollover and it will by-default be saved as a .fla file.

Now click on the image and Press F8 to create a button, call it a name and press ok!

You will see a blue outlined with a small circle in the middle of the image as shown below.

Double click on the button, you will enter the button mode as shown below.

Your button mode will have something like this shown below, your layer will be called by-default Layer1, and you will have an up, over, down and hit area in the button.

Click on the over and right click your mouse and create a blank keyframe like this shown below

Repeat the same for the hit area also, now as you scrub the timeline over all the four modes you will be able to see the orange tag moving with it.

Now click on the hit area and draw a rectangle in the centre of stage as shown below.

Now click on the Over area and import the bigger image to the centre of stage as shown below.

Now test the movie by going to the control menu on the main menu and selecting the test movie or you can also press Ctrl+Enter, a .swf file will be created, in this case rollover.swf will be created and you will notice that the image becomes larger on rollover.

That’s it, you now know how to make an image big on rollover in flash CS4.

How to put your favorite icon in the browser.

First of all you need to have an icon for your website to put in your browser.
Then go to this site below:

http://www.favicon.cc/

On your left side you will see Create New Favicon, click on the Import Image button.

Then browse to where your file is, it could be a jpg, gif or a png, it could be any size. After you select your image, check on keep dimensions and click on upload, as shown below:

After your image has been uploaded, just below the Import Image, you will find Preview, now click on the Download Favicon button and save it. By default it will be saved as favicon.ico, you can call it any name you want, now go to ftp and upload the favicon.ico.

That’s it, you now know how to create a favorite icon on your browser.

How to get an url in a blank window in a xml file

Open the XML file in Notepad or Dreamweaver CS4, I prefer to open in Dreamweaver CS4

Save the XML file and run the index.html in your browser, you will notice that the url ie;bestwebdesignz.com will open in a new window.

Put down the following code inside “<>“:
a href=”http://www.bestwebdesignz.com/” target=”_blank”BESTWEBDESIGNZ.COM

You will have to create an button by pressing F8 and put the action script in the actions frame.

on (release) {
getURL(“http://www.bestwebdesignz.com”,”_blank”);
}

Run movie clip and test it, when you click on the button you will be directed to the website described in the getURL function ie; bestwebdesignz.com which opens in a blank window.

How to create a pop up window in flash CS4 using javascript

We are not going to focus on the simple pop-up window in flash, there is a way in your action script that you can watch a very simple pop-up window but you don’t have any control over the properties of that window, you can’t adjust the width and height, you can’t turn off the scroll bars or the menu bar.
So using flash CS4 let us draw a simple button as shown below.

and let us call the instances of the button click_btn as shown below.

on one layer and call that layer button,

Now go to our actions layers and click on frame1 and press F9 to open up our actions we have this code written

As you can see the click_btn is the instance of the button and then onRelease means that when you click on it, you will run this function ie;  geturl http://bestwebdesignz.com.

In simple words, anything within the curly bracket {} is going to be executed when clicked on the button.
Well if you want bestwebdesignz.com to open up in a different window, you have to write it with a coma after the bestwebdesignz.com and in quotes “_blank” like you see above. This would open up the bestwebdesignz.com in a brand new pop-up window.

But as we told you before  you don’t have any control over the properties of that window, you can’t adjust the width and height, you can’t turn off the scroll bars, location bar or the menu bar etc.,

So to do all of this we have to use JavaScript, unfortunately you cant do it in flash cs4 along, so we have to use flash cs4 in conjunction with JavaScript, so we will rewrite our action script, instead of writing the http://bestwebdesignz.com, _blank etc.,

So we are using the same url function, but in-between our quotation marks we are not typing in just the url, but we are typing in a JavaScript function and later on we are going to publish the swf file and the html file and in that html file we are going to write a java script function and in that getURL function we are going to call the JavaScript function  the name of our function click, and we are going to send our function to an url which is bestwebdesignz.com

Before we go further let us go ahead and save this file and lets us call this popup.fla
Now go to file on the main menu in flash cs4 and select the publish settings and check on flash and html boxes and click on publish and ok.

Now we need to go to our html function, so open up notepad and go to the directory, you will see a swf, fla and html files and open selecting all files and click on the popup.html file, you will see codes written.

Go to the code where the title ends and the head starts and insert some blank spaces and insert our function, so in order to type in your JavaScript into your html, we first need a script tag and language=JavaScript, write JavaScript in quotation marks and skip a couple of lines and close the script tag. Now inside the script tags we will write our functions, it is pretty much similar to the way you declare a function in action script, so type in function and write the name of your function, in this instance it is click and inside the click function, we are going to create a variable, because this click function is receiving a variable, we will call  the variable page.

Now just like action script any function should be within a curly bracket so we are going to create a java script to open up in a new window, so we will create another variable and call it openwin and set this equal to this open which is used to open a new window and in corenthesis you must call for the url ( ie: bestwebdesignz.com) so type in page first, then type in the title of the page in quotation, and then a list of all the properties that the new window we are opening up in quotations. Then lets us say we want to turn off the tool bar, so type in toolbar=no, then turn off the menu bar, so type in menubar=no, you also want to turn off the scroll bar, to type in scrollbars=no, if you want to turn off the location bar, type locationbar=no, and now type in your width and height, to type in width=550 and lets say you want the height=250, and also if you want to specify where you want your popup to appear on your screen you can type top=250 and left=250.

So remember the open function is expecting three things, first is the page variable which is the url, secondly the title of your url, and finally our properties variable.

After this you need to upload this file to your server and test this movie clip, we need to upload this because of security sense in flash, that is why we cannot test it locally.

So save the popup.html file, and upload the html file and swf file to your server, having uploaded, switch to your browser window and type in your url, you will see the page there. You will see the button there, when you click on it, your url will be called for, like in this case, bestwebdesignz.com will popup. That’s it.

We are going to learn how to create pop-up windows in Flash CS4 using Action Script 2.0.

Create a new Flash AS 2.0 document:
File > New > Flash File (ActionScript 2.0)

If you have already created a Flash AS 3.0 file you will need change your publish settings to AS 2.0:
File > Publish Settings > Flash > Script: ActionScript 2.0

Step 1: Create a button symbol and place it on the stage like the one below.

Step 2: Name the instance of the button “launch.btn”, as seen here

Step 3: Now we need to create the action script, 

Create another layer and call it actions, your timeline will look like this below

Let’s now write the action script, so go to actions layer in frame1 and press F9

We will write launch_btn (which is the instance name of the button).onRelease (which on release is going to perform a function as defined).

In the next line getURL (“ “). Now in-between these quotes we are going to call a java script that will publish the swf file and the html file.

In the html file we are going to write a javascript function. So in the getURL function we are going to call the java script function, so in-between the quotes we are going to call a java script function

So type javascript; and type the function we are going to call, lets go and call this function launch, and in brackets we are going to send this function to an URL that its going to take us to, so type bestwebdesignz.com in single quotes, so your action script will look like this below.

Now save the file by going to the main menu File> Save As>call it popup.fla.
At this point we have finished all that we need to do in flash, we now need to publish the file, so go to the main menu File > Publish Settings, and make sure that the flash (.swf) and the html(.html) boxes are checked and click on publish and click ok like this below.

Step 4: Now we need to go into our html file and need to add that javascript function. So open the notepad and open the popup.txt file and you need to add a function in between the title and the head as shown below,

In this script you  are basically calling a function called launch in a new page and this will open an URL as defined in the page function with no toolbars, no menubar, no scrollbars, no location, with width =550 pixels and height =250 pixels and to show from the top=250 and from the left =250 .
Now we need to upload the files to the server and test your movie, so go and save your file and  upload the .swf and html files to the bestwebdesignz server. Having uploaded the swf files and html files, switch to the browser window and type in the name here “bestwebdesignz.com, you will see that button which we designed earlier and when you click on the button, it will call the java script and load the bestwebdesignz.com site for you.