Skip navigation
Currently Being Moderated

Help Needed: "Meter" Interface

Sep 23, 2012 1:11 PM

Hi guys,

 

I am very new to Adobe flash(Just started using last week). I am currently working on something that is similar to the meter shown in the very short video in this post. I made a guess that I may have to use Actionscript and spent the past week watching tutorials on actionscript and Flash but to no avail. I still have no idea how to start working on the Meter. Do I use sprites or objects + motion tweens? If more information is required, I will be taking connecting Phidgets to Flash, taking the values from the sensors connected, and applying formulas to end up with the final value to be displayed.

 

Anyone could help point me in the right direction which i should be working towards? Any help or advise would be greatly appreciated!

 

 
Replies
  • Currently Being Moderated
    Sep 23, 2012 3:08 PM   in reply to HanNamja

    For all that video shows, all you should need is a textfield and some code to assign values to it.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 24, 2012 10:45 AM   in reply to HanNamja

    Internet here is very limited (a bank). I think what you mean, but I apologize if I'm wrong.

    Create the "donut" complete with a circle and then another circle in the center.

    After a new movie clip is divided into four segments donut.

    Place the first segment in frame 1, after 25 frames placed the second, then 25 after the third and finally the fourth 25 (missing the value from 0 to 25, but you can make once you understand after operation)

      apply a shape tween (right click on the timeline) and placed

     

    stop();

    var val:int;

    function init(v:int):void{

        val=v;

        addEventListener(Event.ENTER_FRAME, goFrame);

    }

     

    function goFrame(e:Event):void{

        if(currentFrame>=val)

        stop();

    }

     

    in the first frame


    Finally to start the animation used:

    nameOfMovieClipInTheStage.init (value);

    Where nameOfMovieClipInTheStage is ... the name you give to the movie clip
    and value is the number of percentage that reached the meter

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 24, 2012 11:12 AM   in reply to HanNamja

    What you can do is center a 'rainbow-shaped' mask above the top edge of a rectangle (think of a padlock shape, an arc over a rectangle), where the reigistration mark of the rectangle is centered at the top edge.  Then you vary the rotation property of the rectangle between 0 and 180 degrees.  Only the part that is covered by the mask will be visible.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 25, 2012 4:21 AM   in reply to HanNamja

    You have the right idea, you just need to make the rectangle larger so that it doesn't leave a blank space behind it like you show.

     

    The registration point of the rectangle shgould be centered at the top of it, and the rectangle should butt up to the arc above it as best you can.  If you make the registration point of the arc at the bottom center you can use the align tool to get them perfectly aligned.

     

    I would not use a tween, though you could if you want to specify a frame number for whatever value you wish to represent.  Instead use code to vary the rotation property of the rectangle as I stated in my last posting.  That way you will have more flexibility for accuracy if that is necessary.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 25, 2012 12:09 PM   in reply to HanNamja

    The registration marks of the rectangle is the axis where it will rotate.  You need to place that at the top center of the rectangle (third time)

     

    Try using a classic tween instead of the new type.

     

    To rotate with code you just assign the rectangle an instance name and change its rotation property, as in... rectName.rotation = 20;

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 25, 2012 1:16 PM   in reply to HanNamja

    ok, the shape tween only work with lines... but may be you can use a half donut like a mask to do your workmeterA.JPGmeterB.JPG

     

    https://www.dropbox.com/s/4ctfay17sz7wba5/meter.fla

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 26, 2012 4:16 AM   in reply to HanNamja

    A for loop loop processes instantaneously.  You would want to use a Timer or an ENTER_FRAME event handler to manage a gradual change.

     

    stage.addEventListener(Event.ENTER_FRAME, adjustRotation);

     

    function adjustRotation(evt:Event):void {

         if(donut.rotation <180) donut.rotation++;

    }

     

    I would think that if you intend to use this as a meter you would base the position of it on data and not just want to animate it for the sake of just showing it moving.

     

    stage.addEventListener(Event.ENTER_FRAME, adjustRotation);

     

    function adjustRotation(evt:Event):void {

         donut.rotation = some_meaningful_value;

    }

     

    There is no reason to have to use a donut shape for this.  The rectangle would do the same thing if the yellow area were  a mask.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 26, 2012 7:59 AM   in reply to HanNamja

    You can add to the moviclip in my file

     

    stop();

    var val:int;

    function init(v:int):void{

        val=v;

        addEventListener(Event.ENTER_FRAME, goFrame);

    }

     

    function goFrame(e:Event):void{

        if(currentFrame>=val)

        stop();

    }

     

    and use the init function to indicate where is the stop of teh animation

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 26, 2012 11:03 AM   in reply to HanNamja

    The ENTER_FRAME event is dispatched at the frame rate of your swf file, so there should be no problem with it keeping up with anything. It is not a function.  The function that you assign to handle the event is where the work gets done as far as dealing with your meter.

     

    The function that is handling the ENTER_FRAME event is executed at the frame rate of your file.  So if you used either of the version I showed ealier it would execute that function at the frame rate of your file.  If your frame rate is 24 fps, then the function will execute every 1/24 of a second (approximately).

     

    When you remove the event listener, that is when the function will no longer be called.

     

    THe reason the shape keeps rotating is because you are telling it to.  In the version I provide I put a condtion to stop it at 180 degrees, but for what you just showed there is no condition.

     

    You will want to end up using the second version of what I offered earlier... you will need to replace the "some_meaningful_value" part of it with some value that is based on the value you want to show relative to the range of rotation you want the meter to have.

     

    If you want the meter to display the watts for the generator then you would have the minimum to maximum wattage be represented as 0 to 180 degrees rotation for the meter.  If you were looking at a range 0 to 100 watts, then at 50 watts you would have the meter shape at 90 degrees rotation.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 26, 2012 11:22 AM   in reply to HanNamja

    This is the code:

     

     

    import flash.events.Event;

    import flash.events.MouseEvent;

     

    var currentValue:Number;

    var unidad:Number=180/100; //1.8

    var speedMark:int=10; //1 is instant 10 is slow;

    var more:Boolean;

     

    function init(n:Number):void {

        removeEventListener(Event.ENTER_FRAME, changeValue);

        currentValue=n;

        if(dona.rotation/unidad<currentValue)

        more=true;

        else

        more=false;

       

        addEventListener(Event.ENTER_FRAME, changeValue);

    }

     

    function changeValue(e:Event):void {   

        if(more){

            dona.rotation=dona.rotation+(unidad*currentValue)/speedMark;

        }else{

            dona.rotation=dona.rotation-(unidad*currentValue)/speedMark;

        }

       

        if(dona.rotation>=unidad*currentValue && more){

            dona.rotation=unidad*currentValue;

            removeEventListener(Event.ENTER_FRAME, changeValue);

        }

        if(dona.rotation<=unidad*currentValue && !more){

            dona.rotation=unidad*currentValue;

            removeEventListener(Event.ENTER_FRAME, changeValue);

        }   

        v.text=String(dona.rotation/unidad);

    }

     

     

     

     

    btn.addEventListener(MouseEvent.CLICK, activateMeter);

    function activateMeter(e:MouseEvent):void {

        init(numero.value);

    }

     

     

     

    this is the file:

     

    https://www.dropbox.com/s/4ctfay17sz7wba5/meter.fla

     

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 26, 2012 12:55 PM   in reply to HanNamja

    var currentValue:Number;

    var unidad:Number=180/100; // <----------------------------- 100 is the maximal valu, you can change it

    var speedMark:int=10; //1 is instant 10 is slow;

    var more:Boolean;

     

    function init(n:Number):void {

        removeEventListener(Event.ENTER_FRAME, changeValue);

     

         // HERE YOU CAN TYPE THE EQUATION

         //currentValue=n;  //  <------- before

        

         currentValue=0+n*1+20-20;  // <------------ where n is the value from the sensor (this is an example) 

     

        if(dona.rotation/unidad<currentValue)

        more=true;

        else

        more=false;

       

        addEventListener(Event.ENTER_FRAME, changeValue);

    }

     

     

    numero values is captured here:

     

    btn.addEventListener(MouseEvent.CLICK, activateMeter);

    function activateMeter(e:MouseEvent):void {

        init(numero.value);  // <-----  captured and sended to init function

    }

     

     

    theoretically you need to import events work

     

     

    import flash.events.Event;

     

    is to use:

     

    Event.ENTER_FRAME (to execute the code every time the frame change)

     

    and

     

    import flash.events.MouseEvent;

     

    to use;

     

    MouseEvent (in the button)

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 26, 2012 1:03 PM   in reply to HanNamja

    You want to provide the value of the rotation where I show "some_meaningful_value" in the code earlier.  You can have the calculation right there in place of that, or you can have it in a separate function that you call on to calculate the value and return it.  The first option will probably be easier.

     

    When you are working in Flash writing code in the Actions panel, there are classes that you do not need to import, such as Event classes and many more.  Flash knows where to find them without requiring you to tell it where.  There are a few that still need to be imported though.  When you work using class files (.as files), then you need to use import statekents for all classes that are not top level classes... the Event classes are not top level classes.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 27, 2012 4:32 AM   in reply to HanNamja

    Just so you get a clearer understanding, the ENTER_FRAME event frame is not dispatched every frame, it is dispatched at the frame rate of your file.  You do not need to change frames for it to occur. They probably chose a bad name for it... some people take it literally and think it executes when you enter a frame.

     

    You do not need to change frames at all for what you are doing.  You could control the visible property (true/false) of movieclips that display what you wish to have appear at different times.

     

    You can store values into variables, including arrays, which you can use to store information from different stages if that is what you want.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 27, 2012 10:16 AM   in reply to HanNamja

    Yes, the frame rate is frames per second, and when though of in terms of the ENTER_FRAME event, it  occurs at the same rate.

     

    How often you log is up to you.  You could probably just keep a running average and not store any values.

     

    If the page is a new stage, it is a new file.  Just create a movieclip or sprite symbol of the other content you want to display and make it visible or not when you need it showing or not.  You can also just place it on another frame instead of controlling its visibility.

     

    You should learn more about creating with Flash while you are waiting for your sensors to arrive.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 27, 2012 11:38 AM   in reply to HanNamja

    If you have no use for individual readings,  then keeping a running average would be all you need.  You could accomplish it by continually adding each reading to a total and then dividing by the number of readings.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points