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.

CSS Tutorial – Roll Over Button

Pre-loaded Hover-state Images

In this XHTML CSS tutorial you’ll learn how to create a button for a web page using Photoshop, XHTML and CSS. More specifically, you’ll learn how to create a button who’s hover state image is preloaded. The advantage to this technique is that upon hovering over your button, the user won’t have to wait for it’s hover state image to appear; there’ll be no ‘graphic-less’ moment while the image loads, all without a single line of JavaScript.

Open up a blank XHTML document with a style statement within the <head> tags. This is where we’ll place out CSS code.

We’ll begin by setting out the XHTML markup for our button, between the <body> tags:

Notice the button has been given the class of ‘button’.

Now we’ll set up some basic CSS to establish some styles in our document. Place the following between the <style> tags:

Now some attributes for what will be our button, identifiable by it’s class ‘button’. Firstly, it has a width of 100px, a height of 20px and some extra padding to increase it’s dimensions further.

The above statement dictates that the button has padding of 15px at the top, 20px on the right, 10px at the bottom and 45px on the left. This extra padding on the left will make room for an icon on our button. The total dimensions of our button are now 160px wide and 45px high. You’ll also see that I’ve given any text within the button a color of #666666, that it’s displayed as ‘block’ (making it adhere to the dimensions we’ve set) and that I’ve removed the default underline by stating that there will be no text decoration. Now lets make a graphic for it with Photoshop.

Open up a new document in Photoshop with the dimensions of our button.

Copy a design something along the lines of what you see below. I’ve chosen to use one of the many icons freely available from famfamfam.com and placed it on the left.

Now alter your canvas size (Image > Canvas Size…). Double it’s height to 90px from the top edge. This will give you the following result:

Now duplicate all the elements you’ve drawn and position them at the bottom of your canvas. This copy will be your button’s hover-state.

Your two button images need to be different in some way – perhaps a completely different color, different icon or perhaps something more subtle. I’ve chosen to alter the transparency of my top image making it fainter than the hover-state. The button will appear darker when hovered over.

When you’re satisfied with your image, save (File > Save for Web & Devices…) in whatever format you choose.

Now let’s use this image as a background for our button by further defining our ‘button’ class in the CSS.

This states that the image we’ve chosen will be used as the background for our button, that the image won’t be repeated (it won’t be tiled), that it will be positioned 0px from the left and 0px from the top. Of course, when the page is loaded and the button background is also loaded, the whole thing is placed in your browser’s cache, even the part of your button image which isn’t yet visible. Check your button in a web browser, it should look like this:

Now we need to add the final CSS statement, defining what happens when our button is hovered over.

This simple statement dictates that the hover-state of our ‘button’ link will have a slightly darker color of #333333 and that the background image will be our button.jpg. The difference this time is that the background position has been set at 0px from the left and -45px from the top – or, said in another way, that the background image is raised 45px. Our hover-state graphic will therefore instantly fill the button when hovered over. Try it yourself! Finished CSS Example

XHTML Tutorial CSS Tabbed Menu

Tabbed menu

One hugely useful way of displaying your menu items is in the form of tabs. The following tutorial will take you through some simple steps to build your own tabbed menu, without so much as a .gif or line of JavaScript in sight…

Open up a blank XHTML document with a style statement within the <head> tags. This is where we’ll place out CSS code.

Now let’s set out the XHTML markup for our menu, between the <body> tags:

This is a straight-forward unordered list which we’ve given the class of ‘menu_tabbed’. Within it are four list items, each one of which contains a link.

That’s it for the markup, now let’s set up some CSS to give our document some basic styles. Place the following between the <style> tags:

This just gives our document a default text color (#333333), font and font size. I’ve also just given the documents ‘body’ a padding of 30px in order for our menu to be held away from the page edges. This will make it all slightly easier to view on our part.

Now some attributes for our unordered list, identifiable by it’s class ‘menu_tabbed’. Firstly, it has no list-style. This removes the bullet points from the list items – in all circumstances, in all browsers. Secondly it has a solid border along it’s bottom edge of 1px and the color #999999. Lastly some padding at the bottom in order to hold the border away from our tabs as we’ll soon see.

Test it in a browser, your menu should now look something like this:

Now let’s style our list items, identifiable as ‘li’ within the ‘ul’ which has a class of ‘menu_tabbed’.

We’ll display the list items ‘inline’ which will distribute them horizontally across the page. Each one has a margin on the right of 5px in order to hold it away from the previous list item. Now your menu should now look something like this:

Having dealt with our list and the list items within it, we can now turn our attention to the links, identifiable as the ‘a’ within the ‘li’ within the ‘ul’ which has a class of ‘menu_tabbed’. Place the following within your CSS code:

}

There’s a little more styling involved here as most of the visual effects are tied to the links. First give the text a faint color of #999999 and remove the underline by stating no text-decoration. Then give a background of #f7f7f7 and a solid 1px border of #CCCCCC. There’ll be no border on the bottom, as this is catered for by the border on the bottom of our unordered list.

Lastly, give the links some padding; 10px at the top and bottom and 14px left and right. The 10px padding at the bottom will allow the links’ bottom edge to meet with the bottom edge of the unordered list which we also gave a padding of 10px.

Check your menu again in a browser:

Now let’s give our tabs some styling for their hover state, one simple line of CSS:

This padding overrides the padding for the links which we’ve previously set. It differs only by giving an extra 4px padding at the top which gives the tabs the impression of being lifted like so:

Finally we’re going add some style for when one of the menu items is selected. Add the class ’selected’ to your second list item:

Now let’s add some CSS to determine what the selected tab looks like:

We’ve darkened the text to make it stand out, the background is white, as is it’s bottom border. This will cover the bottom border of the unordered list giving the impression that the tab is ‘connected’ to the page underneath. The padding will match the padding we’ve given to the link hover state; slightly raising the tab.

That’s it! Check your final menu in a browser!

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.

PHP Tutorials – Arrays Part 2

Advanced PHP Arrays

This tutorial covers creating Arrays – Suitable for all versions of PHP

Don’t let the word advanced worry you. You are simply advancing along in your knowledge about how to use these amazing data structures.

Arrays are like tables in that they have columns and rows. And, thanks to the array functions PHP makes available, they can be manipulated like tables in many ways.

In the introduction to PHP Arrays tutorial , you learned about how to create indexed and associative arrays. I wrote that arrays were powerful tools, especially when combined with the foreach function and with the other functions designed especially for manipulating the data within arrays.

In this lesson, I’ll show you some practical uses for arrays and how to get them working their hardest for you.

Displaying All Elements in an Array

In the previous tutorial we created these two arrays:

$mystaff = array(0=>’Matthew’,
1=>’Mark’,
2=>’Luke’);

$salaries=array(“Matthew”=>65000,
“Mark”=>75000,
“Luke”=>100000);

Let’s create an array that lets us store the staff member’s name and salary together. Then we’ll use PHP’s foreach function to display them.

$mystaff[‘Matthew’]=65000;
$mystaff[‘Mark’]=75000;
$mystaff[‘Luke’]=100000;

This array structure may look odd, but all we have done is to create an associative array and use the name of each staff member as the key.

This is a great little trick that will play right into the hands of the foreach loop below. We’ll look at the syntax first and then I’ll explain the logic.

Foreach Syntax

foreach( $mystaff as $Name => $salary){
echo “Name: $Name, Salary: $ $salary “;
}

Name: Matthew, Salary: $65000
Name: Mark, Salary: $75000
Name: Luke, Salary: $10000

How It Works

The foreach statement above translates to this:

For each element of the $mystaff associative array I want to call the key by the name of $Name and the value that’s related to that key by the name $salary.

Then I want to print each of those values, one set at a time, until I reach the end of the array.

The foreach statement I provided uses the as modifier, and the as modifier uses the “=>” operator. Just think of this as a finger pointing from the key to the value.

Create a new PHP document and name it foreach.php. Copy the code below into the document and upload it to your web server and open the page in a browser.

Select All

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//
EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Arrays</title>
</head>
<body>
<?php   $mystaff[‘Matthew’]=65000;   $mystaff[‘Mark’]=75000;
$mystaff[‘Luke’]=100000;   foreach( $mystaff as $Name => $salary){
 echo "Name: $Name, Salary: $ $salary ";   }
echo 'I have '. count($mystaff). ' Staff members.';   ?>
</body>
</html>

PHP Array Functions

Here are examples of how PHP array-specific functions provide quick ways to enhance the power of arrays in your PHP programs.

Counting Array Elements

Count() returns the number of elements in an array. Use the Count() function to see how many staff members there are.

echo ‘I have ’. count($mystaff). ’ Staff members.’;

Sorting Array Elements

To sort the names alphabetically before displaying them, use the asort() function.

asort($mystaff);

Array Element Math

To calculate the total payroll for your staff, use the array_sum() function.

Echo ‘The total salary paid to my ‘ .count($mystaff). ’ Staff members =’ . array_sum($mystaff).’’;

Adding Array Elements

You could add a new employee quickly using the array_push() function.

array_push($mystaff[‘John’], 55000);

John would be added to the end of the array. Calling asort(), after array_push(), would alphabetize the array properly.

Deleting Array Elements

If John was hired to replace Matthew, the unset function would send Matthew to the unemployment line and asort() would restore the array’s sorted order.

unset($mystaff[‘Matthew’]);
asort($mystaff);

Tutorial Summary

These are just a few of the 75 functions PHP makes available for working with arrays. You can find the entire list, along with their syntax, by visiting PHP’s online Array Function Manual. If you would like to learn more about PHP and Arrays we offer a extremely comprehensive PHP video tutorial that offers indepth, step-by-step instructions.

PHP Tutorials – Arrays Part 1

PHP Arrays – Basics

This tutorial covers creating Arrays – Suitable for all versions of PHP

Introduction to the PHP Array

The array data structure provides a convenient way to store multiple values in a single variable. An Array uses pointers or index keys to map each value stored within it. The type of pointer, and the syntax for accessing it, varies depending upon the array type used. An array is permitted to store other arrays as values. Here is a look at both of PHP’s array types and how they are created and used.

Indexed Array
An indexed array uses integers as the key. The Array index begins at 0. PHP imposes no limit on the maximum number of elements an array may contain, so there is no maximum ending integer. Of course, array size is subject to the memory limitations established in the PHP.ini file as well as of the server where PHP is running.

Associative Array

Associative arrays use string values as keys.

Creating an Indexed Array

An array can be created simply by storing a value to a variable that uses the array structure.

Example:

Select All

$mystaff[0]=’Matthew’;

The above method creates an indexed array. This method is often used when the array will be built with values that can not be pre-determined or that will be created on the fly.

If the values of the array are known ahead of time, you could use this syntax:

Example:

Select All

$mystaff = array(0=>’Matthew’, 1=>’Mark’, 2=>’Luke’);

In the above example, the array has 3 elements, even though the last element’s key is the integer 2. New PHP programmers may forget the indexed array key structure is zero-based, hence the 3rd element in the above example is referanced by 2 and not 3.

Both indexed array creation methods are interchangeable. You do not have to use one method under any particular circumstance.

Displaying an Indexed Array

The value of an indexed array element is displayed by referencing the array element by its key.

Example:

Select All

echo "The names of my three staff members are:
$mystaff[0] . ", " . $mystaff[1] . ", " . $mystaff[2];

Give it a try, create a new document enter the following code

Select All

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//
EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<title>Arrays</title>
</head>
<body>
<?php   $mystaff = array(0=>’Matthew’,   1=>’Mark’,   2=>’Luke’);
 <p>echo "The names of my three staff members are: ".   $mystaff[0] . ",
" . $mystaff[1] . ", " . $mystaff[2]; ?>
</body> </html>

>and save it as array-test.php, upload it to your web server and view it.

Creating an Associative Array

An associative array uses a string value as the key. Where an indexed array is typically used to store strings, an associative array is typically used to store numeric values. However, it is entirely up to you which array type you use. These are guidelines, not rules.

In this example below, we will create an associative array containing salary information for those three staff members we created in the indexed array example above.

Example

$salaries["Matthew"] = 65000;
$salaries["Mark"] = 75000;
$salaries["Luke"] = 100000;

Instead of declaring each array value on its own line, you could also use this syntax:

Select All

$salaries=array("Matthew"=>65000, "Mark"=>75000, "Luke"=>100000);

Displaying an Associative Array

Select All

echo "Matthew’s salary is: $" . $salaries["Matthew"] . "". "Mark’s salary is:
$" . $salaries["Mark"] . "".
"Luke’s salary is: $" . $salaries["Luke"];

Give it a try, delete the contents of your array-test.php page and replace it with the follow:

Select All

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//
EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<title>Arrays</title>
</head>
<body>
<?php   $salaries=array("Matthew"=>65000,   "Mark"=>75000,
"Luke"=>100000); echo "Matthew’s salary is: $" . $salaries["Matthew"] . "".
 "Mark’s salary is: $" . $salaries["Mark"] . "".
  "Luke’s salary is: $" . $salaries["Luke"]; ?>
</body>   </html>

After saving your page, upload to your webserver and view. You know have a fundamental knowledge of creating and displaying Arrays in PHP.

Summary

Arrays are powerful tools, especially when used with the for and while functions. There are other PHP functions designed especially for working with arrays. They provide convenient methods for sorting, transversing, and manipulating arrays. We’ll look at these in next PHP Array tutorial.