Animated line showing route from one button to the next in flash 8

Posted on 2006-06-10
Last Modified: 2012-05-05
I am creating an interactive map with hot spots of 10 locations, I would like to create an animated line that would join up the dots from previous hotspot (button) clicked to current button clicked. This would show the path from one location to the next. How would I go about coding this using action script - can this be done using the drawing API in flash8 ?

Any information or pointers would be great.

Question by:surfjoe
  • 2

Expert Comment

ID: 16880618
here is an tutorial that will do what you want:)

The Drawing API

LVL 14

Expert Comment

ID: 16880629
It should be possible but I can only give a rough idea on how it would be done since I myself haven't touched the drawing API (but i know what it can do from reading tutorials and stuff). Basically you'd have some sort of global object that would keep track of the last button clicked (particularly the location). When the next button is clicked, you'd have a call to the global object to check if a previous button was clicked and if so, draw a line from 1 point to the other. Another thing I would suggest is to store the line MCs in an array so that you can delete them later on when needed (like when you implement a "clear lines" button).

What you'll be needing is a class (let's call it LineController) that would have functions which the buttons on stage would call.
class LineController{
       private var prevx:Number;
       private var prevy:Number;
       private var newx:Number;
       private var newy:Number;
       private var prevclick:Boolean; //used to determine if there was a click before
       private var lineArray:Array; //container for all our lines
       private var lineCounter:Number; //used for counting how many lines we have

       function LineController(){
              prevclick = false;
              lineArray = new Array();
              lineCounter = 0;

       function btnClicked(int x, int y):Void{
                     prevx = x;
                     prevy = y;
                     prevclick = true;
                     newx = x;
                     newy = y;

       function DrawLine():Void{
              //using the coordinates stored, we draw the line from prev points to new points then add the movieclip to the array

              //increment the lineCounter
              //this one is for assuming you want a connect the dots function instead of connect 2 dots only
              prevx = newx;
              prevy = newy;

       function ClearLines():Void{
              for(var i = 0; i<lineArray.length; i++){

1st fram of your _root timeline, you'd have something like this:
_global.lcontrol = new LineControl();

Then your buttons would have this:
       _global.lcontrol.btnClicked(this._x, this._y);

You'll just have to fill in the drawing part since I'm not that familiar with it ^-^; Chances are that you'll also have to be careful with the array since I have a feeling that it could get buggy...


Expert Comment

ID: 16886375
Okie surfjoe let's make a simple point to point

supose u have 2


Supose the start point begins from but1

on the frame

var startpoint_x = but1._x + (but1._height/2)
var startpoint_y = but1._y + (but1._width/2)

now, on the button make a event

      this.createEmptyMovieClip ("new_line", 1)
      with (new_line)
               lineStyle (1, 0xFFFFFF, 50); // define the line
            moveTo (startpoint_x,startpoint_y); // put the start of the line at the position
            lineTo ( but2._x + (but2._height/2), but2._y + (but2._width/2)); // draw the line

Accepted Solution

furmiga earned 500 total points
ID: 16886935
Now, to join points supose u have 4 buttons:


I dont know how you going to do with the start location but You can add a option so the user can choose from where he is going to start.

in the frame

var startpoint : Number = 1; // If the user don't choose a start point it will be the first button.
var nextpoint  : Number = 1; // used to set the all points
var positions : Array = new Array(); // Array to manage all positions
var count : Number = 1; // number of lines to create (accordind to the number of points)

// populate the array with  X and Y values from each button (CENTER POSITION)
// this is a multi array --- array with arrays ---
// the positions[1] refers to the but1
// the positions[1][0] refers to the center X of the but1
// the positions[1][1] refers to the center Y of the but1

positions[1]= [but1._x + (but1._height/2),but1._y + (but1._width/2)];
positions[2]= [but2._x + (but2._height/2),but2._y + (but2._width/2)];
positions[3]= [but3._x + (but3._height/2),but3._y + (but3._width/2)];
positions[4]= [but4._x + (but4._height/2),but4._y + (but4._width/2)];

function jumpto(final:Number) // this make things happen
      // delete previous lines
      for (i=1;i<5;i++)
      // Lets see if the button clicked is not the start point "duhh" :)
      if (final <> startpoint)
            count = 1 // sets the count to 1 for next usage
            nextpoint = startpoint // let the startpoint alone :)
            while (final <> nextpoint)
                  this.createEmptyMovieClip ("new_line"+count, count) // this creates an empty MC
                  with (eval("new_line"+count)) // this calls the MC created
                           lineStyle (1, 0xFFFFFF, 50);  // set the line degin
                        // put the "pencil" over the start position
                        moveTo (positions[nextpoint][0],positions[nextpoint][1]);
                        // now lets see if the line goes to the begining or to the end of our buttons sequence
                        if (final > nextpoint)
                        // Draw the line
                        lineTo (positions[nextpoint][0],positions[nextpoint][1])
                  count++ //incress the count

in each button just add

jumpto(X) // where X is the number of the button

ie. button4

      jumpto(4)// this will call the function and draws lines comming from the start point to this button

I hope this helps :)

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There are times in your Flash CS4 application when you want more than a simple pointer or a hand, and it's hard to find an ideal walk-through to tell you what to do.  I spent a few days recently learning my way around making custom cursors in Flash,…
The last time I worked with Flash and Socket connections was in AS1. A recent project required flash connecting to a Socket, and sending receiving information - we figured it would be easy enough - we all know about the socket policy documents and c…
In this tutorial viewers will learn how to create a basic motion tween animation in Flash Open a new document in Flash: Draw/import an image: Press CTRL + F8 to convert it into a graphic symbol: Select a frame (how long you want the tween to last): …
In this tutorial viewers will learn how to create a basic shape tween animation in Flash including shape hints for smooth animation Open a new document in Flash: Draw a shape: Select another frame (how long you want the tween to be): Right click and…

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question