AS3 eLearning Lesson Animation Exercise

Question

Hi,
I'm a beginner using AS3 and am trying to animate a 300X300 circle on a stage to create a breathing exercise (inhaling/exhaling) for an eLearning lesson. The inhale/exhale exercise would need a script to scale X,Y larger and smaller, inhaling lasting half as long as exhaling with 100 ms delay in between inhale and exhale. A challenge for a beginner!
Even bigger challenge to get my brain around: the exercise scripting is a little more complex, since the user needs to be able to enter the time length of the exercise (15 minutes to 6 minutes) and their starting breaths per minute (BPM) and then have the script, every minute (of the length of exercise that they choose from a range of 15-6), decrease the breaths per minute to one less (than for the previous minute), with the BPM floor being no less than 6 (so if there are several minutes remaining, it would stay at 6 BPM until the time length of the exercise is reached.)
Unfortunately, so far, I've only been able to set up the circle on the stage and figure out from reading the AS3 reference how to scale X, Y.
Any help much appreciated.
Kind Regards,
saratogacoach

Answer 1

Hi Kenneth,
When I tried this, I got error messages.
update: the other item that I forgot, is that when the inhale circle expands, there is an MP3 audio file (can be converted to WAV if needed) which plays an inhaling sound, and it is stopped when the inhale animation is done, each cycle, and when the exhale circle contracts, another different MP3 sound file is played and stopped (no sound during pause), each and every cycle.(Knew I forgot something.)
So, I will need to add this audio as well. (In looking at the script, was not sure where to insert play and stop playing inhale.mp3 and exhale.mp3.)
I'm going to re-post all of the script so you can take a look, see what I'm doing wrong (please also note that I changed the inhale:exhale ratio in the animation to reflect twice as long for exhale as for inhale (_inhale?2:1). I have not adjusted this again based on the newly defined _inhaleDuration, _exhaleDuration. Maybe this should also be corrected? Do other conflicting items need to be removed?)
Here's the current script (which is generating errors):
import fl.transitions.Tween;
import fl.transitions.easing.Regular;
import fl.transitions.TweenEvent;
import flash.utils.Timer;
import flash.events.TimerEvent;
// set initial BPM
var _bpm:uint=10;
// set minimum BPM
var _minBPM:uint=6;
// set maximum minutes to run the app
var _maxMinutes:uint=15;
// how many minutes since started
var _minute:uint;
// how many inhale and exhale animation has run
var _animationCount:uint;
// is this inhaling or exhaling?
var _inhale:Boolean;
// how long inhale/exhale animation should take
var _inhaleDuration:Number = 60*.3;
var _exhaleDuration:Number = 60*.6;
var _pauseDuration:Number = 60*.05;
// is the next animation the new minute?
var _newMinute:Boolean;
// Tween reference
var tX:Tween;
// start new minute
function startMinute():void {
    // the next animation is not new minute
    _newMinute=false;
    // check if this minute is beyond the max minutes
    if (++_minute>_maxMinutes) {
        trace("Excercise completed.");
        return;
    // trace minute and BPM
    trace("Minute: " + _minute + ", BPM: " + _bpm);
    // get inhale duration in second
    _inhaleDuration = (60/_bpm - 2*0.1)/3;
    // get exhale duration in second (2 x inhale duration)
    _exhaleDuration=_inhaleDuration*2;
    // 100ms pause betwen inhale and exhale
       var _timer:Timer=Timer;
       _timer.addEventListener(TimerEvent.TIMER, timeout, false, 0, true);
     _timer = new Timer(_pauseDuration, 1);
    // start animation
    animateCircle();
function animateCircle():void {
    // alternate inhale and exhale
    _inhale=! _inhale;
    // if inhale: scale x 0.5, if exhale: scale x 2 changed 2:1
    tX=new Tween(V1,"scaleX",Regular.easeOut,V1.scaleX,_inhale?2:1,_inhale?_inhaleDuration:_exhaleDu ration,true);
    // react when scaleX is changed
    tX.addEventListener(TweenEvent.MOTION_CHANGE, tweenChange, false, 0, true);
    //  react when inhale/exhale is finished
    tX.addEventListener(TweenEvent.MOTION_FINISH, tweenFinish, false, 0, true);
// when scaleX is changed
function tweenChange(e:TweenEvent):void {
    // set the scaleY to the same value
    V1.scaleY=V1.scaleX;
// when twen is finished
function tweenFinish(e:TweenEvent):void {
    // remove event listeners from the Tween
    tX.removeEventListener(TweenEvent.MOTION_CHANGE,tweenChange);
    tX.removeEventListener(TweenEvent.MOTION_FINISH,tweenFinish);
    // remove reference to the Tween
    tX=null;
    // if the last animation was exhale
    if (! _inhale) {
        // trace the animation count
        trace("Inhale/exhale cycle: " + (_animationCount + 1));
        // if inhale & exhale has run BPM times (run for 1 minute)
        if (++_animationCount==_bpm) {
            // reduce the BPM by 1, but do not let go under the minimum BPM
            if (--_bpm<_minBPM) {
                _bpm=_minBPM;
            // reset the animation count
            _animationCount=0;
            // the next animation is new minute
            _newMinute=true;
    // start the 100ms pause
    _timer.start();
// 100ms pause end
function timeout(e:TimerEvent):void {
    // stop the timer
    _timer.stop();
    // if the next animation is new minute start new minute, if not continue inhale/exhale
    _newMinute?startMinute():animateCircle();
// start the initial minute
//startMinute();
Button1.addEventListener(MouseEvent.CLICK, first);
function first(event:MouseEvent) {
_bpm = parseInt(TF1.text);
startMinute();
Please let me know what I am doing wrong. Thanks much.
Kind Regards,
saratogacoach