Beginners Flash Tutorial MovieClips

Using MovieClips in Flash

This Flash tutorial introduces the use of MovieClip symbols in Flash and how they function within the main Timeline.

The Timeline is key to understanding how Flash movies work. If you open Flash and create a new document you should see the Timeline running across the top of the screen (choose Window > Timeline from the menubar if it isn’t visible):

When you create a .fla document and export a .swf movie from it, the .swf when opened will start at Frame 1 on the main Timeline and present the viewer with each successive frame with content on it (unless ActionScript code instructs it to do otherwise), looping back to the start each time it reaches the last frame. The frames are numbered on the header above the Timeline as you can see and all frames with content will be coloured in some way.

MovieClip symbols additionally have their own Timeline. When placed on the main Timeline in a Flash movie, a MovieClip will similarly start at its first frame and run continuously presenting all content on its frames (unless instructed otherwise by code).

To demonstrate this, choose Insert > New Symbol from the menubar (or CTRL+F8); give the symbol a name and choose Movie clip as the type:

Flash has now taken you inside the new MovieClip symbol:

The area at the top of the Timeline indicates your current location within the Flash movie (where it reads Scene1 and myclip). The cross in the centre of the stage is the position 0, 0 (x, y) within the new MovieClip.

To add some content to the clip, draw a shape and postion it at 0, 0 (x, y) – with the shape selected enter 0 into the X and Y fields on the Properties panel (Window > Properties > Properties or CTRL+F3 if it isn’t visible):

Still with the shape selected, Press F8 (or choose Modify > Convert to Symbol); choose a name and Graphic as the type:

We will use this shape to create a simple animation inside the MovieClip; select frame 10 on the Timeline by clicking on it. Make this frame a keyframe by pressing F6 or choosing Insert > Timeline > Keyframe:

Now, on this frame, move the shape to another position on the stage. Select Frame 1 again and create a Motion Tween by choosing Motion from the Tween drop-down list on the Properties panel or by right-clicking (or CTRL+click) on the frame and choosing Create Motion Tween:

The timeline now indicates the tween on the frames:

If you’re unfamiliar with tweening, what we have done here is position the shape on the first and tenth frames, then instructed Flash to create a transition between the two; the Motion Tween moving the shape along the distance between the two points so that it progresses evenly along its course. To see the effect, place the playhead on the first frame by clicking on it and press Enter; you should see the animation on the stage as the playhead moves along the timeline.

Now go back to the main Timeline by pressing the backward arrow button on the Timeline header:

All that we’ve done so far is create a MovieClip in the Flash document’s library, meaning that we’ve defined exactly what should happen within the clip and prepared it for use in our movie, but we haven’t actually placed it in the movie yet. To do this, select the MovieClip symbol in the library (Window > Library if it isn’t visible) and drag it onto the stage:


Now test your movie (press CTRL+Enter or choose Control > Test Movie); you should see the animation in your clip looping continuously. To make the clip play only once, we need to edit the MovieClip; to do this right-click (or CTRL+click) it in the Library and select edit, or double-click on the instance of the clip on the stage. Select frame 10 and open the Actions Panel (F9, click on the Actions tab or choose Window > Actions), enter the following code:

 stop(); 

Now test your movie again, the clip should play only once. By placing the stop action here, you have instructed only that particular MovieClip to stop; any other activity on the main Timeline will continue, as the MovieClip operates according to its own Timeline.

Beginners Flash Tutorial – Working with MYSQL and PHP

Flash with PHP / MySQL

The code used in this tutorial is mainly ActionScript 2.0, with notes for using ActionScript 3.0 – basic knowledge of databases (particularly MySQL) and server-side scripting concepts is assumed, for users who require an a tutorial on Beginners PHP and MySQL we recomend the Beginners PHP Training Video

Given that Flash is used primarily on the Web, database driven components are a common requirement. In order to use data in this way within your Flash movies, you will need to use some sort of server-side scripting language, such as PHP. We use server-side scripting to communicate with a data source on the server, and Flash has some built-in capabilities for handling the data at the client-side.

To demonstrate, we will create a simple database-driven Flash movie using PHP and MySQL. This example will need to be deployed on a server with PHP and MySQL installed.

In MySQL, create a database called ‘flashtest’, with one table in it called ‘flashdata’; in the table create just one field (for simplicity – the details of the database are not important), name the field ‘flash_text’ and choose VARCHAR as the data type. Enter a few rows of data into the table, any strings of text will be fine.

Now we need PHP code to connect to and query your database. Create a file called get_data.php in the directory you intend to put your Flash file in – this will need to be on the same server as the MySQL database for the following code to work. In get_data.php enter the following code (replacing username and password with your own):

Select All

<?php

//connect to the local MySQL
mysql_connect("localhost", "username", "password");

//select your database
mysql_select_db("flashtest");

//query the database
$query="select * from flashdata";
$result=mysql_query($query);

//find out how many entries there are
$num=mysql_num_rows($result);

//write variable out - this is what the Flash document will retreive
echo "&num=".$num;

//keep count
$count=0;

//loop through and write the data into variables for the flash document
while($row=mysql_fetch_array($result))
{
   //write out each entry as a variable
    $entry=$row["flash_text"];
    echo "&t".$count."=".$entry;
    //increment the count variable
    $count++;
}

?>

Tip: you can test your PHP at this stage by fetching get_data.php in a Web browser – it should look something like this:

Now to use the data within a Flash movie, create a new Flash document and save it on the server also. The Flash document is able to access the variables written out by your PHP script via the GET variable. Open the Actions panel for Layer 1 and enter the following code (replacing ‘filepath’ with the path to your PHP script):

Select All

      //load the variables into a MovieClip by calling the server-side script
var data_mc:MovieClip=_root.createEmptyMovieClip("data_mc", _root.getNextHighestDepth());
     //loadVariables parameters: url, movieclip, method
loadVariables("http://localhost/filepath/get_data.php", data_mc, "GET");

    //create the function for using the data
data_mc.onData=function()
{
    //get the total number of entries
    var numEntries:Number=data_mc.num;
      //loop through the entries
   for(var i:Number=0; i

Now test your movie, it should look something like this:

For Flash MX and above, you can alternatively use the LoadVars object with the following syntax:

Select All

//create LoadVars object
var lv:LoadVars=new LoadVars();
//load the data
lv.load("http://localhost/filepath/get_data.php");
//setup load function
lv.onLoad=function(success)
{
//get the data
var numEntries:Number=lv.num;
//otherwise syntax is the same as above
};

If you’re using ActionScript 3.0, the syntax will be slightly different; you need to use the URLRequest and URLLoader objects to load the data into Flash.

Basic Flash Tutorial – Loading XML Data

Flash with XML Loaded Data

This Tutorial has been prepared with relation to Flash 8, although the principles covered apply to all versions; the code used is mainly ActionScript 2.0 with notes for using ActionScript 3.0

This tutorial introduces the use of externally loaded XML data in Flash; basic knowledge of XML structures is assumed.

Creating Flash components using data stored in XML format is a common task. For example, Flash galleries are often designed in such a way that the selection of images can be changed without having to alter the .fla source file itself; loading the image data in via XML is an ideal solution in this case. ActionScript has built-in libraries for processing XML documents, although there are significant differences between ActionScript 2.0 and 3.0 in this regard.

To demonstrate, we will load some text into Flash from an XML document and display it.

The XML document has the following structure and is called mydata.xml:

Select All

<data> <note colour="0xFF0000">
some red text </note> <note colour="0x00FF00"> some green text </note>
<note colour="0x0000FF"> some blue text </note>
</data>

Create the above document and then create a new flash document in the same directory (remember to save your .fla to the directory before testing it). Select the default layer (Layer 1) and open the Actions Panel (press F9 or choose Window > Actions).

Your approach now will differ according to whether you are using ActionScript 2.0 or 3.0. For 2.0 you use the XML class to load and process the data, whereas with 3.0 the methods of loading external data have changed in general, and as such you use URLRequest and URLLoader objects to actually load the data, then pass it to an XML object for processing; please note however that the XML class is different in AS3, while the AS3 XMLDocument class provides much the same processing functionality as the XML class in AS2.

For ActionScript 2.0, type the following code into the Actions panel:

Select All

//create the XML object
var my_xml:XML=new XML();
//tell it to ignore whitespace in the document
my_xml.ignoreWhite=true;  

//define the function to execute when the data has been loaded
my_xml.onLoad=function(success)
{
if (success)
{
	//first get the data from my_xml into an array
	//'this' is my_xml - the object on which the onLoad function is being called
	var my_array:Array=this.firstChild.childNodes;

	//setup textformat object for text colour
	var tf:TextFormat=new TextFormat();

	//each element in the array will be a <note> element - loop through
	for(var i:Number=0; i<my_array.length; i++)
	{
		//create textfield for each element (name, depth, x, y, width, height)
		_root.createTextField(("field"+i+"_txt"),
			_root.getNextHighestDepth(), 10, ((i+1)*20), 100, 50);

		//assign the value (firstChild) of the current 'note' element to the textfield
		_root["field"+i+"_txt"].text=my_array[i].firstChild.toString();

		//get the element's 'colour' attribute
		var colourAttribute:Number=Number(my_array[i].attributes["colour"]);

		//assign the colour
		tf.color=colourAttribute;

		//format the textfield
		_root["field"+i+"_txt"].setTextFormat(tf);
	}
}
};
 //load the data - this will call the above function
 my_xml.load("mydata.xml");

This code will load the XML document and trigger the function for processing. To process the XML, we write each ‘note’ element into a textfield and colour the text according to its ‘colour’ attribute. To access the root node (<data>) we use my_xml.firstChild; to access the children (<note> elements) we use .childNodes, which are returned in an Array. To access the attributes of a given element, we use the property: attributes[attribute name]. movie, it should look something like this:

Please note: depending on your own XML file, you may also need to strip out the newline characters, you can do this as follows:

Select All

 var plain_data:String = loseReturns(my_array[0].firstChild.toString());

function loseReturns(xml_str:String):String
{
	var plain_str:String = xml_str.split("\n").join("");
	return plain_str.split("\r").join("");
}

For ActionScript 3.0, you use the URLLoader and URLResource classes to load the XML data into Flash, then pass it to an XML object (and optionally to an XMLDocument object – see above). The URLLoader object fires an event on loading the data; as such you need to create a function for processing it, passing this to an event listener.

Beginners Flash Tutorial – Tweening Objects

Creating Motion with Flash

This Adobe Flash tutorial has been prepared with relation to Flash 8, although the principles covered apply to all versions of Adobe Flash.

This Flash tutorial introduces the fundamentals of using Tweening to create the concept of motion.

Basic Tweening in Flash

This resource has been prepared with relation to Flash 8, although the principles covered apply to all versions

This tutorial introduces Shape and Motion Tweening in Flash.

Tweening is one of the basic building blocks of animation. An animation is basically a sequence of images combined and displayed in a way that makes it appear to the human eye like a moving image. Tweening is one of the processes used to accomplish this.

When creating an animated sequence, a set of still images represent different stages in the animation. The illusion of a moving image is achieved by showing the images in fast succession, for example, the default speed for a movie created in Flash is normally 12 frames per second, meaning that the movie presents 12 still images to the viewer every second.

To achieve such effects manually, animators basically have to create each of the images in turn (one for each frame), which is obviously very labour-intensive. This is where digital tools like Flash can prove extremely useful, as they have built-in functions to create some of the frame images using computation. The idea here is that you just create the images at key points in the animation (keyframes) and use Tweening to get Flash to work out the frames ‘in-between’.

Let’s create a simple animation to demonstrate:

Open Flash and create a new document. Draw a shape on the stage, select it using the select tool

(either double click on the shape or click and drag the area around it).

Convert the shape to a graphic symbol either by pressing F8 or choosing Modify > Convert to Symbol. Give the symbol a name and select the Graphic radio button for the type; press OK.

Now click on Frame 10 and create a Keyframe there by pressing F6 or choosing Insert > Timeline > Keyframe:

Still on Frame 10, move your Graphic symbol to another position on the stage. Test your animation by clicking on Frame 1 and pressing Enter, you’ll see that the shape remains in it’s original position until Frame 10, when it ‘jumps’ to the new position. To achieve a smoother transition between these two images, we’re going to apply a Motion Tween. Click on Frame 1 and choose Motion from the drop-down list on the Properties panel (Window > Properties > Properties if it isn’t visible):

The purple area with the arrow on the Timeline indicates that a Motion Tween is operating between the two Keyframes.

Now select Frame 1 and press Enter again, you’ll see that Flash has animated the sequence by calculating what should appear on each of the frames along the way.

Experiment with the Ease Tween setting (on the Properties panel when you select Frame 1), which controls the amount of acceleration/ deceleration in the movement.

Now to try a Shape Tween, create a new layer in your movie – use the new layer button

or choose Insert > Timeline > Layer, then lock the first layer:

On your new layer, create another shape; this time don’t convert it to a symbol. Select Frame 10 on the new layer and insert a Keyframe (as above). At Frame 10, delete your shape and draw a different one in its place (e.g draw a circle on the first frame and a square on the tenth). Now select Frame 1 and choose Shape Tween from the Properties panel:

The green area on the Timeline indicates the Shape Tween. Now, select Frame 1 and press Enter to see your animated effect.

Again, you can experiment with the Tween controls to explore the various Shape Tween settings.

Beginners Flash Tutorial – Creating Dynamic Text

Creating Dynamic Text with Flash

This tutorial has been prepared with relation to Flash 8, although the principles covered apply to all versions; the code included is based on ActionScript 2.0

This Flash tutorial introduces the creation, editing and formatting of dynamic text and embedding fonts.

There are two main ways to create a dynamic text field in Flash, one using the flash interface and the other using ActionScript, this flash tutorial will give you a fundemental understanding of this works.

Create a textfield using the interface

 my_txt.text="new text" 

1. Select your dynamic textfield on the stage and click the Embed button on the Properties panel, then choose Basic Latin (select OK):
   
2. On the library panel (Window > Library if it isn’t open) select the options button:
   
   Select New Font and enter the following details:

   

   Press OK and you’ll see your font appear in the library. Right-click (CTRL+Click for Macs) on the font in the library and choose Linkage. Click the checkbox next to ‘Export for ActionScript’:

   

   This allows you to refer to the font in your ActionScript code (the procedure is the same for any library item that you want to control using ActionScript). Select your code (‘actions’) layer and enter the following code (after your existing line)

   :

   
   Select All

    my_txt.embedFonts=true var tf:TextFormat=new TextFormat() tf.font="myfont" my_txt.setTextFormat(tf) 

   

Tutorial on Creating a dynamic textfield using ActionScript

 var other_txt:TextField = _root.createTextField("other_txt", _root.getNextHighestDepth(), 20, 20, 200, 50) other_txt.text="other text" 

 createTextField(instanceName, depth, xPosition, yPosition, width, height) 

Try not to be put off by the code if you’re not familiar with ActionScript. A good way to familiarise yourself with it is to experiment by changing some of the parameters (e.g. change the y position to 100 and you’ll see the text appear further down). To format this text, you need to use the ActionScript approach outlined above.

Beginners Adobe Flash Tutorial – Timeline Basics

The Flash Interface – Using the Timeline

This tutorial covers Flash 8, CS3 & CS4

When you open the Flash authoring environment, you’ll see a number of different sections displayed. In addition to the default display, various other controls are accessible if you choose the Window menu from the top toolbar. Don’t feel overwhelmed by the interface, to begin creating Flash movies you’ll really only need to worry about a few parts of it; the rest you’ll gradually familiarise yourself with as you work along.

The Stage

The main area you should see in the centre of the screen is the stage area, which will look like a white rectangle:

You can use the scrollbars to the bottom and right of the stage to view the various parts of your stage. Use the zoom control above the stage area at the top right of the central section; select from the drop-down list or type in a percentage amount, default is 100%:

To modify the size of your Flash Movie, select Modify > Document from the top toolbar:

Use this to specify the dimensions and framerate (number of frames per second – leave this at the default to begin with). The settings that you specify here will determine the properties of your final exported SWF file.

Be a little wary of specifying the background colour here, as if your Flash movie is going to be deployed on the Web, this will not always be displayed consistently across browsers.

The Flash Timeline

The Timeline is the key to creating animated effects in Flash. You’ll see it running across the top of the main panel:

The red square with the line pointing downward is the Playhead, and the white squares under it are the frames in your movie. When the movie plays, whatever is on the stage when the Playhead is over a certain frame is what will be visible while that frame is playing. Whenever you export an SWF movie, it will automatically start at the first frame on the root timeline (the default) and play until it either reaches the end or receives some command telling it to stop. Additionally, it will play the SWF continuously on a loop while the movie is open.

Try it out by using the following steps:

Draw a circle on the stage: select the oval tool from the left-hand-side ;

click and drag on the stage (keep within the white area as this is the area that will be visible in the final movie):

-you’ll see that Frame 1 of the current layer (Layer 1) has turned grey, indicating that there’s something on it Next create a Keyframe by clicking on the second frame (to the right of the grey one) and pressing F6:

-flash has automatically carried your circle onto the second frame of the movie.

Move the circle by clicking and dragging on the centre of it – move it to another area of the stage; this is where the circle will appear on Frame 2.

Now to see the effect of what you’ve done, place the Playhead at the first frame by clicking at Frame 1, either on or above Layer 1. Press enter and your movie will play – it’s a bit boring at the moment but should give you a basic understanding of how the Timeline works.

Now export your movie either by pressing CTRL+Enter or choosing Control > Test Movie from the menu. You’ll see that your effect loops over and over again as the SWF continually returns to the start each time it finishes.

Experiment with the Timeline by selecting a frame further along (e.g. 10) and creating a keyframe there, then moving the circle again. You’ll quickly see that some sort of transition between the different stages in your movie is going to be necessary for smooth animation – this is where Tweening comes in! Which will be covered in-depth in another tutorial.