adobe flash strip graph

Posted on 2012-08-23
Last Modified: 2012-08-24
I'm trying to write a strip graph using ActionScript.  I'm wondering the best way to code this.  I'm assuming I setup a background with the X and Y access and then continually redraw a line across this surface.
Question by:PeterTrefren
    LVL 4

    Expert Comment

    I'm assuming that the graph you are trying to create is like this - ?

    To build something like this I would have several rectangular movieclips in the Library - as many as the number of sets of data that you want to show

    I would then define an origin to the graph in terms of the '0' point on the x axis - and set it to the x position on the stage that I want it to appear at (I'll call this variable 'xAxisStart')

    I'd then place the rectangle that represents the first set of data at xAxisStart, then change its width property so that it shows the correct share. Let's call that width 'xWidth1'.

    This now means that the start of the 2nd part of the strip would have a starting x position given by

    xAxisStart + xWidth1

    So you set the 2nd rectangle's x position to this value, then change its width property to reflect its share of the data - let's call that 'xWidth2'.

    Next start point (for the third rectangle) becomes

    xAxisStart + xWidth1 + xWidth2

    ... and so on. (if you see the pattern that's building here)

    Author Comment

    No I'm looking for something that looks like when you get an EKG.
    LVL 4

    Expert Comment

    Ah, ok...

    Do you want the 'drawing point' (the place where the drawing appears) to be static, and the previously drawn parts to move off to the left?

    Or do you want the whole drawing to remain static and the pen / drawing point to move to the right as new stuff is drawn?

    And do you want the drawing to simulate data - i.e. you give it different data and you get a different trace?
    Or does is just need to be random data?
    Or does is just need to be an animation and show the same thing every time? (In which case actionscript may not be the best way to achieve this).

    Author Comment

    I believe what I'm looking for is the first one you described.  What I want is to setup an X axis with time and a Y axis with something like price.  On the left side of the grid (time = 0) you would add a point representing the price at the present time.  As time elapsed the point would move to the right everything else stays fixed.  As more points were added it looks like you have a line scrolling across a grid to the right.  In my example the X axis would represent the relative time passed from when the price was posted.  The points are determined by user input so this is a dynamic representation.
    LVL 4

    Accepted Solution

    Ok. Here's the approach I would take.

    Create an empty movieclip, place it on the stage and give it the instance name of 'ticker'.

    To draw the line I would be using the Flash drawing api - - specifically the 'lineTo' function, though you'll need to use the 'moveTo' first to set the starting point for the line. The x coordinate of your lineTo command would be determined by your time factor, and the y coordinate by your price. The smaller your timeslices, the more your drawn lines will approximate curves rather than straight lines.

    The drawing should be done *inside* the empty movieclip on the stage.

    Now, when the drawing line reaches the point where you want it to be fixed, then you *start moving* the movieclip on the stage. If you use the same 'time' offset to move the movieclip as you were using to do your lineTo commands, then the 'drawing point' should stay fixed, while the whole drawn line continues to scroll.

    I hope all of that makes sense!

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Suggested Solutions

    This is a very simple example to help those of you who are still migrating from AS2 to AS3 understand the redesigned event model in AS3. In AS2.0, event functions (that is, the function to be performed when an event is fired) were stored as a pro…
    Recently, I was asked to recommend a tracking system to be implemented on a clients website. As the entire site was built on flash, my first thought was to suggest custom built tracking system. However, our company at that point of time didn't h…
    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): …
    The goal of the tutorial is to teach the user how to set there setting in Adobe Flash Media Live Encoder and YouTube for optimal video and audio quality.

    758 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

    Need Help in Real-Time?

    Connect with top rated Experts

    13 Experts available now in Live!

    Get 1:1 Help Now