Exemples et Tutoriaux Animation Flash avec swishmax Horloge avec date suit le curseur souris

Une horloge avec date suit le curseur souris

L'exemple proposé provient d'un membre du forum qui a rencontré un problême avec l'exécution du script.
Il s'agit d'une horloge avec la date du jour. Celle-ci suit le mouvement de la souris.
J'ai repris l'exemple tel quel en apportant quelques modifications mineures pour que l'ensemble fonctionne correctement.

⇒ animation ⇐

Les différentes étapes vont être décrites maintenant.

Création des objets

1 - Définissez les dimensions générales 720x540. La couleur de fond à votre libre choix.
Frame rate = 25.
Dans Movie Properties (accessible par CTRL J) , cochez Stop playing at end of movie

2 - Créez un texte dynamique comme indiqué ci-aprés :

texte horloge analogique

Convertissez le en Movie Clip, appelé letter.

Le Script

Dans le MovieClip letter, entrez :

onSelfEvent (load) 
{
     // clock size
    clockDiameter = 80;
     // close position relative to mouse
    clockOffsetY = 0;
    clockOffsetX = 100;
     // rate of easing for mouse follow
    easingRate = 0.75;
     // date rotation rate
    dateRotationStep = 0.03;
    dateRotation = 0;
     // size of hands
    HandHeight = clockDiameter/4.5;
    HandWidth = clockDiameter/4.5;
     // current date and time
    const dayNames = 
          ["DIMANCHE","LUNDI","MARDI","MERCREDI","JEUDI","VENDREDI","SAMEDI"];
    const monthNames = 
    	  ["JANVIER","FEVRIER","MARS","AVRIL","MAI","JUIN","JUILLET",
           "AOUT","SEPTEMBRE","OCTOBRE","NOVEMBRE","DECEMBRE"];
    var now = new Date();
    var day = now.getDate();
    var year = now.getYear();
    if (year < 2000) {         year += 1900;     }
    var todaysDate =" "+dayNames[now.getDay()]+" "+day+" "+monthNames[now.getMonth()]+" "+year;
     // date characters
    D = todaysDate.split('');         // display  ,S,A,M,E,D,I, ,2,9, ,M,A,R,S, ,2,0,1,4        for instance
     // hands for hour minute and second
    H = '...';
    H = H.split('');      // display .,.,.
    M = '....';
    M = M.split('');        // display .,.,.,.
    S = '.....';
    S = S.split('');        // display .,.,.,.,.
     // numbers for face
    F = '12 1 2 3 4 5 6 7 8 9 10 11';
    F = F.split(' ');       // display 12,1,2,3,4,5,6,7,8,9,10,11
     // work out position of date and face characters around the clock
    FaceDeltaAngle = 360/F.length;
    DateDeltaAngle = 360/D.length;
    HandY = 0;
    HandX = 0;
     // init positions of hand and date
    yHand = new Array();
    xHand = new Array();
    for (var i  =0; i < F.length; i++) {         yHand[i] = 0;         xHand[i] = 0;     }
    yDate = new Array();
    xDate = new Array();
    for (var i = 0; i < D.length; i++) {         yDate[i]=0;         xDate[i]=0;     }

// create duplicate sprites for each character
    j = 1;
    for (var i = 0; i < D.length; i++) 
    {
        ch = duplicateMovieClip(Letter, "chDate"+i,j);  
        j++;
        eval("chDate"+i).text = D[i];     // init dynamic text ex : S A M E D I  2 9  M A R S  2 0 1 4        
    }
    for (var i = 0; i < F.length; i++) 
    {
        ch = duplicateMovieClip(Letter,"chFace"+i,j);   
        j++;
        eval("chFace"+i).text = F[i];    //  init dynamic text ex : 12 1 2 3 4 5 6 7 8 9 10 11
    }
    for (var i = 0; i < S.length; i++) 
    {
        ch = duplicateMovieClip(Letter,"chSeconds"+i,j);   
        j++;
        eval("chSeconds"+i).text = S[i];       //  init dynamic text ex : . . . . .
    }
    for (var i = 0; i < M.length; i++) 
    {
        ch = duplicateMovieClip(Letter,"chMinutes"+i,j); 
        j++;
        eval("chMinutes"+i).text = M[i];      //  init dynamic text ex :  . . . .
    }
    for (var i = 0; i < H.length; i++) 
    {
        ch = duplicateMovieClip(Letter,"chHours"+i,j);    
        j++;
        eval("chHours"+i).text = H[i];       //  init dynamic text ex :  . . .
    }

// hide the original Letter sprite
    Letter._visible = false;    
}

onSelfEvent (enterFrame) 
{
     // get position of the clock (offset from the mouse)
    yClock = _ymouse+clockOffsetY;
    xClock = _xmouse+clockOffsetX;
    yDate[0] += (yClock-yDate[0])*easingRate;
    xDate[0] += (xClock-xDate[0])*easingRate;
    for (var i = 1; i < D.length; i++) 
    {
        yDate[i] += (yDate[i-1]-yDate[i])*easingRate;
        xDate[i] += (xDate[i-1]-xDate[i])*easingRate;
    }
    yHand[0] += (yClock-yHand[0])*easingRate;
    xHand[0] += (xClock-xHand[0])*easingRate;
    for (var i = 1; i < F.length; i++) 
    {
        yHand[i] += (yHand[i-1]-yHand[i])*easingRate;
        xHand[i] += (xHand[i-1]-xHand[i])*easingRate;
    }
     // get the current time
    var time = new Date ();
    var seconds = time.getSeconds();
    var minutes = time.getMinutes();
    
    var hours = time.getHours();
    var secondsAngle = Math.PI * 2 * (seconds/60-1.25);
    var minutesAngle = Math.PI * 2 * ((minutes+seconds/60)/60-1.25);
    var hoursAngle = Math.PI * 2 * ((hours+minutes/60)/12-1.25);
    for (var i = 0; i < F.length; i++) 
    {
        var faceSprite = eval("chFace"+i);    
        a = (i*FaceDeltaAngle-90)*Math.PI/180;
        faceSprite._y = yHand[i] + clockDiameter*Math.sin(a);
        faceSprite._x = xHand[i] + clockDiameter*Math.cos(a);    
    }
    for (var i = 0; i < H.length; i++) 
    {
        var hoursSprite = eval("chHours"+i);
        hoursSprite._y = yHand[i]+HandY+(i*HandHeight)*Math.sin(hoursAngle);
        hoursSprite._x = xHand[i]+HandX+(i*HandWidth)*Math.cos(hoursAngle);
    }
    for (var i = 0; i < M.length; i++) 
    {
        var minutesSprite = eval("chMinutes"+i);
        minutesSprite._y = yHand[i]+HandY+(i*HandHeight)*Math.sin(minutesAngle);
        minutesSprite._x = xHand[i]+HandX+(i*HandWidth)*Math.cos(minutesAngle);
    }
    for (var i = 0; i < S.length; i++) 
    {
        var secondsSprite = eval("chSeconds"+i);
        secondsSprite._y = yHand[i]+HandY+(i*HandHeight)*Math.sin(secondsAngle);
        secondsSprite._x = xHand[i]+HandX+(i*HandWidth)*Math.cos(secondsAngle);
    }
    for (var i = 0; i < D.length; i++) 
    {
        var dateSprite = eval("chDate"+i);
        dateSprite._y = yDate[i] + clockDiameter*1.5*Math.sin(dateRotation+i*DateDeltaAngle*Math.PI/180);
        dateSprite._x = xDate[i] + clockDiameter*1.5*Math.cos(dateRotation+i*DateDeltaAngle*Math.PI/180);
    }  
    dateRotation -= dateRotationStep;    // rotate date
}

Et voilà! A vous d'améliorer.

Page de Jean-Paul Molina

Matières

Ressources

Conception assistée

Langages

Flash

Systèmes

Réseaux sociaux

Une horloge avec date suit le curseur souris