Flash - Creating a dragable Dynamic Text window

In this tutorial I'll be demonstrating how to create a very simple dragable Flash text window. This is a hands on approach to learning basic Actionscript (Flash's programming language) although there is very little Actionscript involved so no need to worry.

Above is the end product click and drag the mouse where it says Click to Drag and see what happens. Okay so here's how to create it yourself.

The first step is to draw a simple rectangle on the main stage.

Then ensure that Snap to Objects is unchecked ( Ctrl-Shift-/ )

and then drag out another rectangle within the first giving you your frame shape. The reason why Snap to Objects must be switched off is that when you try to draw the second rectangle it will try to snap the edges of it to the first which isn't what you want.

Once you have your basic frame shape then select all the objects on the stage (Ctrl-A)

Then press F8 to Convert to Symbol and a dialogue box will appear

Name the instance MyWindow (or any name you feel is more suitable) and ensure you have Behaviour set to Movie Clip then click OK. This has created your frame shape as Movie Clip and although you can see it on the Main Stage it's editable level has been moved to a level called My Window we need to go to this edit level in order to continue creating our window. In the right corner of the stage is an button with a picture of a collection of shapes click on this will reveal the list of objects you have created - in this case only the MyWindow movie clip object click this link to bring you to the MyWindow level.

Once your at the MyWindow Movie Clip level create a new layer on the time frame by clicking the Insert Layer icon

Select Layer 1 again and click the inner rectangle of your window shape to select it as demonstrated in the above example. Then select Edit>Cut (Ctrl-X) click on Layer 2 and select Edit>Paste in Place (Ctrl-Shift-V) this places the inner screen of your window above the frame you may wish to drag Layer 2 below Layer 1 on the timeline to put it behind the frame ensuring the edges of the frame shape are all visible - but don't worry too much about it. Now you have 2 layers one is the screen shape of the window the other is the frame shape of the window - you can decorate them how you like now you have seperated them. I chose to change the Alpha (opacity) of the screen to 75% so that when displayed against the backdrop of your website it will be partially transparent. You can change the alpha value, the colour, or the Fill type in the Colour Mixer Palette (Shift-F9) have a play around to get the feel of it.

Anyhow back to the tutorial -

Create another layer between the Screen shape and the Frame shape layer and drag out a dynamic text frame

ensure that it fits within the boundaries of Frame shape and type in your message

We'll be using a Dyanmic Text frame rather than a Static text frame because you may want to develop your window to included html links, perhaps a dynamic navigation menu, all of which you can do with a Dynamic Text frame that you can't with a Static Text frame.

The next thing is to make you Window object dragable to do this we'll start my selecting an area of the frame that we can use as a Button Instance. Firstly lock the Text Frame and Screen shape layers by clicking the padlock symbol on their respective layers(see example below). Using the Arrow Tool (V) drag out a selection rectangle to encompass the top edge of the frame - if you have correctly locked the bottom two layers then only parts of the Frame shape layer will be selectable.

Once you have selected the top edge of the frame press F8 to bring up the Convert to Symbol dialogue box.

Ensure you have selected Behaviour as Button and type in a name for this instance - I've somewhat comically called it DragBar - (it's a bar and you can drag it, pffft)

Now go to the Edit Symbols Button on the top right of the stage and select DragBar to take you to its level.

You may add some text or graphics to the bar to indicate it's dragable, in this case I simply added a Static Text layer with the words "Click to Drag"

However, you may want to change the colour or do something more special with it, I'll leave the artistic license to you.

Go back to the Main Stage area now by pressing (Ctrl-E) and select your window object by either clicking on it or (Ctrl-A) to Select All.

Press (Ctrl-F3) to bring up the Properties Inspector and type in the name of your window to give it a Movie Clip id (this is import for the Actionscript to work so ensure you copy this name correctly).

Just below where it says Movie Clip, in the box with the ghosted words <instance Name> type in the name "MyWindow_mc" - without the quotes.

This gives the Window movie clip an Instance Name that the Actionscript can locate.

Next go back to the MyWindow movie clip level by clicking the Edit Symbols Button and selecting MyWindow.

Here comes the Actionscript

Now select the newly created DragBar button which will be the top edge your frame shape as illustrated below and then right mouse click to bring up the objects menu and select Actions.

This opens up the Actions dialgoue box for you to enter the Actionscript code

Cut and paste this code (below) into the Actions dialgoue box as illustrated above.

on (press) {
startDrag("_root.MyWindow_mc");
}
on (release) {
stopDrag();
}

Now go back to the Main Stage area now by pressing (Ctrl-E) and run the movie by pressing (Ctrl-ENTER) or by selecting Control>Test Movie from the menu bar.

All being well you should have the same result as the flash movie shown at the start of this tutorial.

Return to Tutorial Page