Explore the Premium Content

Creating springs with ActionScript

Welcome to the fifth tutorial in this series on scripted motion. In this tutorial, we’ll look at an effect that you may have seen in some Flash movies - a spring. The spring effect allows you to drag a movie clip that springs backwards and forwards and finally settles back in its original position. This effect is much easier to achieve than you might think and I’ll show you how in this tutorial. We’ll work through some examples, create a function and a text heading that uses a spring on each letter. You’ll learn about multi-dimensional arrays and calling functions at specified time intervals using setInterval.

Earlier tutorials have looked at motion in a straight line and in a circle, fades and rotations and adding inertia and gravity effects. You won’t need to have completed them before moving on to this tutorial. I've assumed that you are using Flash MX or Flash MX 2004 and that know how to add ActionScript to a movie. I've used ActionScript 1.0 for the examples.

You can download the source files for the tutorial from the blue Properties box that contains the article PDF. There's a heading titled Code Download and you can click the Details link next to it to get the zip file. The download includes the starter files you'll need as well as the completed files.

Note: If you have difficulties downloading the source files or PDF, you might have a problem with your cookies. Delete the cookies from your machine and try again. In Internet Explorer, you can do this by choosing Tools > Internet Options… and clicking the Delete Cookies… button on the General tab.

Read More

Scripted motion and inertia

Scripted motion and inertia                                                  

This is the fourth article in the series on creation movement in Flash with ActionScript. So far we’ve looked at moving an object in a straight line and in a circle using ActionScript. We’ve also looked at fading and rotating with code.

In this article, we’ll look at creating more realistic straight line motion. So far, the movement that we’ve created has used a constant speed. This is not very realistic as most of the motion in the real world consists of acceleration and deceleration. When an object moves, there is often inertia slowing it down. If you drove a car without your brakes on, inertia would decrease the speed of the car as you moved further away from your starting point. Similarly, when you drop an object from a height, gravity speeds it up as it gets closer to the ground.

By working through this tutorial, you’ll learn how to add inertia and gravity to your Flash objects. We’ll create functions that allow you to reuse your code throughout your Flash projects.

I've assumed that you are using Flash MX or Flash MX 2004 and that know how to add ActionScript to a movie. I've used ActionScript 1.0 for the examples.

You can download the source files for the tutorial from the blue Properties box that contains the article PDF. There's a heading titled Code Download and you can click the Details link next to it to get the zip file. The download includes the starter files you'll need as well as the completed files.

Note: If you have difficulties downloading the source files or PDF, you might have a problem with your cookies. Delete the cookies from your machine and try again. In Internet Explorer, you can do this by choosing Tools > Internet Options… and clicking the Delete Cookies… button on the General tab.

Read More

Scripting fades and rotation

This is the third article in the series on creation movement in Flash with ActionScript. In the first article, I looked at how you could move an object in a straight line using ActionScript. The second article covered circular movement.

In this article, I'll show you how to create fade in and fade out effects with ActionScript. I’ll introduce you to the concepts and then we’ll load an external photo and fade it in. I’ll also show you how you can rotate objects with ActionScript.

I've assumed that you are using Flash MX or Flash MX 2004 and that know how to add ActionScript to a movie. I've used ActionScript 1.0 for the examples.

You can download the source files for the tutorial from the blue Properties box that contains the article PDF. There's a heading titled Code Download and you can click the Details link next to it to get the zip file. The download includes the starter files you'll need as well as the completed files.

Note: If you have difficulties downloading the source files or PDF, you might have a problem with your cookies. Delete the cookies from your machine and try again. In Internet Explorer, you can do this by choosing Tools > Internet Options… and clicking the Delete Cookies… button on the General tab.

Read More

No-database Flash-PHP chat. Part V: Emoticons

This is the final article of the No-database Flash-PHP chat series (see Part I, Creating Basic Chat Functionality, Part II Security and Usability features, Part III Security and Usability features (continued) and Part IV, Usability and nice-to-have features)

In this last iteration we will concentrate on a topic that is definitely more fun than security or user tracking. Today we will talk about “Emoticons” or how they also call them “Smileys”. According to Merriam-Webster dictionary an emoticon is “a group of keyboard characters (as :-)) typically representing a facial expression or an emotion or otherwise conveying tone or attitude that is used especially in computerized communications (as e-mail)”.  We could add to that instead of “a group of keyboard characters” it could be an image, or in case with Flash … animation (yummy!).

There is a good and bad news. The good news is you CAN make really cool looking Flash emoticons with sound, video and all the effects Flash has in its arsenal. The bad news is Flash seems to be having troubles with positioning movie clip within a TextField or TextArea component inline with the text.  The only workaround I found was to display emoticons on the next line. If this doesn’t bother you – proceed to the next paragraph, otherwise I would suggest waiting for the next version of Flash player. Hopefully this bug will be fixed.

Read More

Creating circular movement with Flash

Welcome to the second article in our series on Flash motion using ActionScript. In the first article, I looked at how you could move an object in a straight line using ActionScript. In this article, I'll look at creating circular motion - moving an object in a circle around another object. By the end of this article, you'll be able to create a function that you can reuse throughout your movies. Read More

No-database Flash-PHP chat. Part IV: Usability and nice-to-have features

In this article we will continue working on our Flash-PHP chat application (see Part I, Creating Basic Chat Functionality, Part II Security and Usability features and Part III Security and Usability features (continued))

Today we will cover the following topics:

  • Using unique colours for each user’s messages
  • Displaying timestamp with each message
  • Automatically placing keyboard focus in the nickname field on the log-in form
  • Log-in by pressing “Enter” key
  • Send and format messages by pressing “Enter” Key
Read More

Moving objects with ActionScript part 1

You're probably familiar with motion tweens and using them to create movement in a Flash movie. Motion tweens move objects around the Stage, rotate them and fade them in and out. What you might not know is that you can achieve the same effect using ActionScript. This approach gives you much more flexibility and you can write functions that you can reuse in your Flash projects.

This is the first in a series of articles looking at scripted motion in ActionScript. In this article, we'll start by creating simple motion in a straight line. We'll look at how you can bounce an object off the walls of a movie clip.

The other articles will be on:

  • Circular motion
  • Fades and rotations
  • Inertia and gravity effects
  • Creating springs
  • Tweening and Transition classes

By the end of each article, you'll be able to create a function that you can reuse throughout your movies. I

I've assumed that you are using Flash MX or Flash MX 2004 and that know how to add ActionScript to a movie. I've used ActionScript 1.0 for my examples.

You can download the source files for the tutorial from the blue Properties box that contains the article PDF. There's a heading titled Code Download and you can click the Details link next to it to get the zip file. The download includes the starter files you'll need as well as the completed files.

Note: If you have difficulties downloading the source files or PDF, you might have a problem with your cookies. Delete the cookies from your machine and try again. In Internet Explorer, you can do this by choosing Tools > Internet Options... and clicking the Delete Cookies... button on the General tab.

Read More

Flash Classes: Let it snow, the Flash way

The article is about the Snow class that is available together with this document and can also be downloaded from http://www.flzone.com/go?9496. The article will explain the functionality of the Snow class and can be used as an introduction to classes and strict data typing in ActionScript 2.0.

Why make a class for the snow effect? It can be easily reused and is fully customizable. You can set the number of snowflakes you want on the screen, the speed the snow falls down the screen and even the wind speed that affects the snow. This and many more options are possible with the Snow class and make it a reusable code that can be applied in many ways.

Read More

Querying Amazon with Flash

You've probably heard the term Web services and wondered what all the fuss was about. A Web service is a way for you to request information from another computer system. They work over the Internet and use XML to deliver their content. You send off a request and you receive the results in an XML format. You can use Web services to look up lots of different types of information including currency exchanges, television guides, movie reviews and weather updates.

In this tutorial, we'll look at how you can query the Amazon Web services using Flash. This tutorial assumes that you have Flash MX 2004 Professional. You'll need this version, because we're going to use the XMLConnector component to load the data. The tutorial assumes that you have a basic understanding of XML files. You'll also need some kind of Web server and server-side language to make the request. I'll be using IIS with ASP.NET in my examples.

Read More

No-database Flash-PHP chat. Part III: Security and Usability features (continued)

In this tutorial we will implement the Logout functionality for the Flash-PHP chat application we have being working on in the two previous articles of the series: Creating Basic Chat Functionality and Security and Usability features.

Before implementing the actual Logout procedure we will quickly cover another important topic: maintaining the visible List of Users, the interface element allowing each user to see the list of all the chat participants. For this purpose we will utilise the Flash MX 2004 … List Component which will be refreshed every time someone logs-in or logs-out.

As most of functionality required for this feature is already in place (we built it in the previous article while working on the on the Log-in procedure), it would only be wise to implement it now as the feature will require only minor code modification in order to work for the Logout method.

Select the Interface layer, then simply drag and drop the List Component from Components Panel to the stage, place it where you think it makes sense, label it and resize to your liking. Name the instance Users_lst.

Read More

No-database Flash-PHP chat. Part II Security and Usability features

Objectives

In the first article of the series we have built some basic functionality for our “No-database” Flash-PHP Chat application. Once the concept has been proven, application security becomes developers’ top priority.

Although the topic is broad and complex, in this case it does not involve much coding. Meanwhile it will require a fair amount of instructions and explanations, mostly because it’s it closely related to another important element – application usability.
To make sure we cover all the aspects the iterations #2 and #3 have both been entirely dedicated to this subject.

In this article you will learn about the following:

  • Server directory Security.
    We will talk about simple measures designed to prevent hackers from uploading, accessing and executing scripts on the server. You will find out how with the aid of PHP Flash can load the content of a file which is not accessible from the web.

  • Application Security.
    We will start talking about user level security, things like preventing simultaneous multiple log-ins by the same users, maintaining the list of active chat users and tracking log-ins.

In the next article we will continue working on the user-level security and will concentrate on the Logout procedure:

  • Tracking  log-outs as well as making sure the application is notified by the server when a user logs-out by closing the browser window. Dramatically titled section “The last wish of Flash” will describe a method allowing to notify the web server when the browser window is being closed.

  • Enforcing log-out if a participant is utilizing more then one browser window for that same chat session.

  • We will add the interface element which will not only display the list of chat participants but will also, if desired, allow for additional functionality such as private messaging.
Read More

Data Components - XML made easy!

Flash MX 2004 Professional comes with a set of data components that allow you to include external content in your Flash movies. You only have to write one line of code to make these components work. They are very easy to configure using the Component Inspector and you can bind them directly to UI components to create simple applications.

In this tutorial, we'll look at the XMLConnector component. It's a very easy way to connect to external XML files. If you've found using the XML Class a little tricky, then this might be a good alternative for you. The component will certainly save you from having to write long paths like myXML.firstChild.childNodes[2].firstChild.nodeValue every time you want to use a value from an XML file!

We'll use the XMLConnector to create a navigation system. The system will use a ComboBox to select and load a URL. Some people call this a jump menu. The URLs will be stored in an external XML file. That way, we can update the navigation system without having to update the Flash movie.

To create the navigation system, we'll load in the XML file , bind it to a ComboBox component and add an event handler that loads the site. And we'll do all of this in only 8 lines of ActionScript!

You'll learn how to add an XMLConnector to your movie and configure it with the Component Inspector. You'll also learn about binding the XML data to other UI components such as a ComboBox and the List component. We won't cover XML documents because that in included in the earlier tutorials.

This tutorial assumes that you have Flash MX 2004. You can't use any other version of Flash because they don't include the data components we'll need. It also assumes that you have a basic understanding of XML files.

You can download the source files for the tutorial from the blue Properties box that contains the article PDF. There's a heading titled Code Download and you can click the Details link next to it to get the zip file. The download includes the XML files you'll need as as well as the completed files.

Note: If you have difficulties downloading the source files or PDF, you might have a problem with your cookies. Delete the cookies from your machine and try again. In Internet Explorer, you can do this by choosing Tools > Internet Options... and clicking the Delete Cookies... button on the General tab.

Read More
Newer articles Older articles