Embedding Flash Progress Animations

Adobe Flash files can present interactive media content to website visitors. If you have a Flash file you want to load additional content into, you can let your users know how the loading process is progressing using a progress animation. For example, you may load images, media items or another Flash movie into your file. Including a progress animation in Flash requires a small amount of ActionScript code in conjunction with Flash symbols and layer masking. Including a progress animation makes users more likely to remain on your Flash Web page.

1.
Create or open a Flash file in Adobe Flash Professional. Add a new layer to your file and enter a filled rectangle shape on it. Make the shape 100 pixels wide. Select the shape and make it a symbol by choosing "Modify" then "Convert to Symbol" or pressing F8. Choose Movie Clip as the symbol type. In the main timeline of your file, make sure the new symbol is selected on the stage and give it a name by entering "progress_mc" in the Instance Name text-field of the Properties panel.

2.
Double-click your new Movie Clip to edit it. Select the shape and copy it using "Edit," "Copy." Enter a new layer above the existing layer and paste the copied shape onto it by choosing "Edit" then "Paste in Place." Convert the new, top layer to a Mask by right-clicking it and choosing "Mask." Lock the masked layer, which should be the bottom layer, and unlock the mask layer, which should be on top. Select the shape on the mask layer and convert it to a Movie Clip symbol. Give the new Movie Clip "mask_mc" as its instance name and place it at an X position of -100. Lock the mask layer and unlock the masked layer. Select the shape on the masked layer and move it to an X position of zero. Make sure both shapes are at the same Y position.

3.
Back in your main timeline, create a new layer for code. Select the new layer and open the Actions panel. The code you enter will depend on what you are loading into the file and where you plan on loading it. To load a second Flash file, start by entering the following code:

var movieRequest:URLRequest = new URLRequest("filename.swf");
var movieLoader:Loader = new Loader();
movieLoader.load(movieRequest);

Alter the file-name to reflect the name and location of the file you want to load.

4.
Update the file by displaying loading progress. The existing ActionScript code loads the specified file, but you need additional methods to check loading progress. After the loading ActionScript code, use the following function:

Loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadProgressing);
//progress function
loadProgressing (e:ProgressEvent):void{
var percentLoaded:Number = e.target.bytesLoaded / e.target.bytesTotal * 100;
progress_mc.mask_mc._x = percentLoaded-100;
}

This instructs the movie to place the mask shape on the X axis according to the percentage loaded, so that the shape under it will be revealed gradually as loading occurs.

5.
Check for completion of loading. If you also want to detect when the file has completely loaded, you can do so with an additional function. Add it after your progress function:

Loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadingComplete);
loadingComplete (e:Event):void{
//respond to completion of loading
}

At this point you can implement whatever you want to happen when loading is complete, including hiding the loader animation.

Notes

• Your loading process will be clearer if you include a textual indicator of load progress in conjunction with your animation. You can do this by including a text-field in your file and updating it as part of the progress function.
• If your Flash files contain large resources that take a long time to load there is a danger that your users will browse away from the page.

Playing an SWF On Click

When you include an SWF file within a Web page, in most cases it will automatically play when the Flash movie loads. You can prevent embedded SWF files from loading using HTML and JavaScript code in the Web page, but this is not always reliable. If you need an SWF movie not to play straight away but to play when the user clicks it, the most reliable method is to implement this using the ActionScript code within the Flash file itself.

1.
Open the source FLA file for your SWF in Adobe Flash Professional. If the file already has a layer for ActionScript code, select it and open the Actions panel. If it doesn't have an code layer, add a new layer, select it and open the Actions panel. To stop your home timeline from playing when the Flash movie is loaded, add a stop function:

stop();

If you have code on different keyframes in the home timeline, add the stop function on the first frame. If your SWF includes Movie Clips which play in the first frame of the home timeline, you will need to add a stop function to them as well. You can stop Movie Clips using their instance names as follows:

myClip_mc.stop();

Alternatively you can add the stop function to the first frame inside a Movie Clip.

2.
Detect clicks on the SWF. After stopping the movie from playing automatically, you need to prepare your Flash file to detect clicks, so that you can start playback when such clicks occur. Add the following ActionScript code:

stage.addEventListener(MouseEvent.CLICK, startPlayback);

This code instructs the SWF to detect mouse clicks on the stage area, which is the area of the file users can see. When a click on the stage occurs, the function listed as second parameter to the "addEventListener" function, "startPlayback" in this case, will execute.

3.
Play the movie when clicks occur. After adding the mouse event listener to the SWF stage, add the specified function to execute when the user clicks the movie:

function startPlayback(event:MouseEvent):void {
play();
}

This will cause the SWF's main timeline to begin playback. You can remove the mouse event listener inside this function if you do not want to continue detecting clicks after playback begins:

event.currentTarget.removeEventListener(MouseEvent.CLICK, startPlayback);

If your SWF file has Movie Clips you want to start playing when user clicks occur, list them inside the function and call the play method on them:

myClip_mc.play();

Notes

• You can detect other various user events on the stage, including moving the mouse over and off it.
• If you have interactive elements within your Flash file, adding a click mouse event listener to the entire stage may interfere with them, especially if you are using other click listeners.

What is an XML File?

What is an XML File?

An XML file, or document, is a file saved with ".xml" extension, in which structured data is stored. XML files store data within markup structures, similar to the HTML markup used to structure Web pages. XML is used in conjunction with many different technologies, for websites and applications running over the Internet as well as software applications running on desktop, laptop and mobile computing devices. XML is a data storage technology, with XML files acting as databases.

Uses

XML data is used in many different types of project, including websites and software applications. The nature of XML is that it can be extended to form other languages based on the same structural rules. For example, many news feeds you see on websites are structured in RSS, which is based on XML. Similarly, the XHTML variant of HTML is XML-structured. For this reason you will find XML files stored on Web servers for use within websites and applications.

Software programs also use XML. An XML document can act as a database, with programs querying, inserting and updating data in conjunction with a user interface. Many of the programming languages in use benefit from tools for processing XML data - these are often referred to XML parsing libraries. XML is prevalent in mobile technology too, with Android applications structuring data, design layouts and shape definitions in XML documents stored within an app structure.

Structure

XML files store data values in markup structures. The following example demonstrates a simple XML structure:

 
  Mary Smith
  John Jones
 
 
  Sarah Mitchell
 
 
  Margaret Cooper
  Mark Simpson
  Paul Hunter
 

This data models the departments and employees in a company. Each element, or node, in an XML document is preceded by an opening tag and followed by a closing tag, which is the same as the opening tag except for a leading slash "/" character. Elements can contain other elements inside them. The opening tag of an XML element can also include attributes, such as "name" in the department element above. Each attribute is listed using a name and a value, which is enclosed in quotation marks. Attributes provide additional information about an element.

XML is tree-structured, with a root node (company in the example) acting as parent to all other nodes in the tree. This is similar to a family tree, except that in XML, an element can have only one direct parent. In the example above, each employee node is a child of a department node and in some cases a sibling of other employee nodes. XML data values can include various data types, such as text strings, numbers and dates.

Tools

XML is a straightforward language to work with in most cases. You can create and edit XML files in a standard text editor program. There are also various XML development and editing software tools available, some free and some commercial. These XML editors are typically equipped with formatting and validating tools, and can sometimes prompt you with code excerpts as you write your markup. XML validators check XML files for markup errors. You can access such XML validation tools through software programs and websites, allowing you to make sure your XML documents are well-formed before you attempt to use the data in them.

Will I Lose Emails If I Change Web Hosts?

When you change Web hosts, you will lose emails unless you take steps to retain them. You can keep email addresses when you change Web host as long as you transfer your domain name to your new host. Once you are set up with the new host you can create the same addresses you had at the original host. However, retaining an email address does not retain received and sent email messages at that address. You can take steps to retain this data, as well as other email-related data such as the addresses of your contacts. Preserving your email address ensures that people are still able to contact you even after a Web host change.

Email Address

An email address is associated with a domain name. If your domain name is registered through your existing Web host and you want to keep it, you will need to transfer it to your new host. You can then set up the same email address (or addresses if you have more than one) with your new host. When the domain transfers to your new host, the new version of your email address will continue to receive emails as the old one did. This means that you can continue to use the same email address to send mail and that people can continue to contact you on it. If you do not transfer your domain name and set up the email address again with your new host, you will lose that email address.

Export

Although you can transfer your email address to the new host along with your domain name, this does not mean that the mail associated with your email address will also be transferred. If you do not export emails while you still have a functioning account with your existing host, you will lose those mail messages. When exporting mail, you may need to consider how your mail folders are organized and make sure you export from all relevant mail folders, including any you have in your inbox and sent mail. You may also wish to export email addresses for your contacts if you have an address book.

Import

If you choose to set up your existing email address at your new host, when you access your email account it will not display previously sent and received emails at the address. However, depending on the email client you are using, you may be able to import the mail data you exported from the old host. If you had multiple folders in your mail, for example in the inbox, you may need to manually create these again in the new account before you can import data. Depending on the program you are using, you may be able to import sent mail as well as mail in the inbox folders.

Issues

Although it is possible to retain mail data while transferring a domain and email address from one host to another, you may encounter issues during the process. For example, your new host will become responsible for the details of managing your domain, including domain registration. When a domain changes to a new host or server, it can take some time for the domain to function correctly at its new location. This includes email addresses associated with the domain, so there may be a gap between your email continuing on the old hosting account and becoming available on the new one.

Getting Started with SVG Animation

With HTML5, you can embed SVG images inline in your Web pages. Although the level of support for some of the SVG elements still has a long way to go, there are many advantages to using these graphics. Since you create the SVG code in XML in your pages, you can also implement animation and interaction on the contents of an SVG. SVGs are also scalable at any level, so are ideal for catering to different user environments.

In this tutorial we are going to look at basic animation within SVG elements in HTML5 pages. The results will not work in all modern browsers. Although inline SVG is in itself supported in all current versions of the major browsers, the animation elements are not. You will be able to see some of the effects in both Firefox and Chrome, but the effect in which we animate colour can only be reliably viewed in Chrome at the moment. As is always the case with HTML5 skills, this is more of a preview of what we will be able to do in the near future than a practical guide of techniques you can rely on already, so make sure you include alternatives in your live sites. You can see the demo now for an indicator of what we are working towards.

Create an HTML5 Page

Start by creating a new HTML5 page using the following outline:

<!DOCTYPE html>
<html>
<head>
</head>
<body>

</body>
</html>

We won't be using any scripts or CSS in the head section for this tutorial, however, you can use both to apply effects to the elements inside SVGs.

Create the SVG Element

In the body section of your page, add the SVG element as follows:

The remainder of our code will be placed between these opening and closing tags. The main attributes to pay attention to in the opening SVG tag are the dimensions. You can alternatively specify relative percentage values for the width and height if you have CSS dimensions set for the containing page element.

Add the Definitions

The SVG is going to contain shapes, definitions of gradients and animations. Let's start by defining a couple of gradients. The SVG is going to contain a simplistic representation of the sun rising against a blue sky background. In an SVG, you define re-usable items such as gradients in the dedicated defs section, so add it inside the SVG element first:

Inside this section, place a gradient to represent the sky background:

This is a linear gradient, with an ID so that we can apply it to our shapes when we create them. The x1, y1, x2, y2 attributes represent the start and end co-ordinates of the gradient. In this case we want the gradient to unfold vertically so the start point is the top left corner and the end point is the bottom left corner. The stop elements represent points in the gradient - in this case it is going to go from one shade of blue to another, will full opacity throughout.

Now add a radial gradient for the sun:

In this case we define the central points of the start and end circles of the gradient - it will spread from the center of the circle shape to its outer edges. The first colour stop starts 20% into the gradient, so there will be an area of solid colour at the centre.

Add the Shapes

The SVG is going to display a rectangle background and circular sun. First add the rectangle, after the closing defs tag but still inside the SVG element:

You can include a shape using a single self-closing tag, but we are going to include the animation properties inside the rectangle element, so we separate the opening and closing tags. The rectangle properties include the x and y co-ordinates for its top left corder and the width and height, which we set to cover the whole image. We set the gradient we defined in the defs section by referring to it in the fill attribute.

Now add the circle element for the sun:

The circle is defined using the co-ordinates for its central point and the length of the radius. Again, we specify one of the gradients already defined. The circle will be in the center of the image, occupying 80% of the total width (twice the radius).

Animate Movement

If you open your page now you will see a static image of the sun in front of the sky background. Now we can add some animation using the SVG animation elements, which come from SMIL animation. First, to animate the sun, making it move into the image as though rising from the horizon, add the following animate element inside the circle element:

This element specifies an animation that will move the circle element on the y axis, which we specify by referring to the cy attribute of the circle. The attribute type tells us what type of animation this is. The from and to attributes indicate the desired start and end positions for the circle. The begin attribute indicates that the animation should start immediately and the dur attribute that it should last 5 seconds. Setting the fill attribute to freeze stops the circle from going back to its original position when the animation has elapsed.

Animate Opacity

As well as moving the circle, let's fade it in at the same time. Add the following animation, also inside the circle element:

This time the animation is on a CSS property - the opacity. We want the circle to go from zero to full opacity, to last 5 seconds and to execute once.

Animate Colour

Let's also animate the sky to complement what is happening with the sun. This animation has less browser support at the time of writing, so you may need to view the page in Chrome to see it in action. Add it between the opening and closing rectangle tags:

This is an animateColor element, which animates a change in colour over 5 seconds. The animation uses the same colours we specified in the linear gradient for the sky - browsers without support for the colour animation will simply display the gradient instead.

Conclusion

That's our basic animation complete. Open your page in a supporting browser to see the result. You should see the sun shape rise up into the image while fading in, as the background changes colour from one shade of blue to a darker one. Check out the demo to see what it should look like. This is really just the beginning when it comes to SVG animation, as there are other elements for transformational animations such as rotations and translations. With any luck you'll be able to use them for more and more users as time passes, but for the moment these effects must necessarily be used with caution.