Share
Dans ce tutoriel, je vais vous montrer comment créer une horloge analogique élégante à l'aide d'ActionScript 3.0. Nous utiliserons le film swf obtenu avec Screentime for Flash pour créer un économiseur d’écran entièrement fonctionnel. Temps pour s'amuser…
À l'aide de l'objet Date et de ses propriétés, nous obtenons le jour, les heures, les minutes et les secondes et nous utilisons un simple calcul pour afficher les données obtenues dans une horloge analogique. Les mises à jour seront traitées par un minuteur.
En outre, vous pouvez ajouter une horloge numérique à l’écran de veille en suivant ce tutoriel FlashTuts +.
Ouvrez Flash et créez un nouveau fichier Flash (ActionScript 3)..
Définissez la taille de la scène sur 640x400 et ajoutez un arrière-plan linéaire gris (#DBDBDD, # B3B2B7). Screentime redimensionnera automatiquement le film en plein écran, ce qui évite de devoir définir la scène en pleine résolution..
Nous allons commencer par créer le fond d'horloge.
Sélectionnez l'outil Ovale (O), tracez un cercle de 250 x 250 px et ajoutez un arrière-plan linéaire noir (# 313131, # 000000). Utilisez l'outil de transformation du dégradé (F) pour faire pivoter le dégradé afin qu'il ressemble à l'image suivante:
Créez un autre cercle, cette fois 248x248, avec ce dégradé linéaire (# 595959, # 000000). De nouveau, utilisez l’outil de transformation du dégradé pour faire pivoter et ajuster le dégradé..
Ajoutons maintenant des chiffres à notre horloge.
Sélectionnez l'outil Texte (T), choisissez une police de votre choix et une taille appropriée pour l'horloge. J'ai utilisé Myriad Pro Regular, 22 pts, #DDDDDD.
Écrivez les nombres dans un TextField pour chacun et alignez-les sur l'horloge, cela peut être un peu difficile sans référence, vérifiez les repères dans les images.
Horizontal:
Verticale:
Il est temps de créer les aiguilles de l'horloge.
Sélectionnez l'outil Poly Star (cliquez et maintenez enfoncé dans le bouton Outil Rectangle), puis dans le panneau Propriétés, cliquez sur le bouton Options dans la section Paramètres de l'outil. Changer le nombre de côtés à 3.
Créez un triangle blanc 20x70 px, convertissez-le en MovieClip et nommez-le "hourHand".
Répétez cette procédure pour l'aiguille des minutes, mais changez la hauteur à 110 px. N'oubliez pas de définir le nom de l'instance sur "minuteHand".
Sélectionnez l'outil Ovale et créez un cercle de 26x26 px, convertissez-le en MovieClip et appliquez un filtre comme suit:
Pour la seconde main, combinez un cercle de 8x8 px et un rectangle de 2x116 px. Remplissez-les avec cette couleur # C90303.
Créez un nouveau document ActionScript et enregistrez-le sous "Analog Clock.as"..
Ce sont les classes dont nous aurons besoin:
package import flash.display.Sprite; import flash.utils.Timer; import flash.events.TimerEvent;
Nous allons utiliser des méthodes et des propriétés spécifiques à Sprite afin que nous étendions en utilisant la classe Sprite.
Classe publique AnalogClock étend Sprite
Ce sont les variables que nous allons utiliser, expliquées dans les commentaires.
/ * Un objet Date utilisé pour obtenir l'heure * / var date: Date = new Date (); / * Variables de temps * / var hours: int = date.hours; var minutes: * = date.minutes; var secondes: * = date.seconds; / * Un objet Minuteur qui gérera les mises à jour, exécuté toutes les secondes * / var timer: Timer = new Timer (1000);
Cette fonction est exécutée lorsque la classe est chargée.
fonction publique AnalogClock (): void / * Ce code place les aiguilles de l'horloge dans la bonne position à l'aide des données de l'objet Date * / hourHand.rotation = hours * 30 + (minutes * 0.5); // l'aiguille des heures tourne de 30 degrés en 60 minutes, cela fait 0,5 degré par minute minuteHand.rotation = minutes * 6; // la minute tourne de 6 degrés par minute, soit 360 degrés en 60 minutes - une heure secondHand.rotation = secondes * 6; // la seconde main tourne 6 degrés par seconde, soit 360 degrés en 60 secondes - une minute timer.addEventListener (TimerEvent.TIMER, updateClock); timer.start ();
C'est la fonction qui gère l'horloge. C'est le même code des premières fonctions, exécuté toutes les secondes par le timer.
fonction privée updateClock (e: TimerEvent): void date = new Date (); heures = date.heures; minutes = date.minutes; secondes = date.secondes; hourHand.rotation = hours * 30 + (minutes * 0.5); minuteHand.rotation = minutes * 6; secondHand.rotation = secondes * 6;
Retournez au fichier .fla et dans le panneau des propriétés, ajoutez "AnalogClock" dans le champ Classe pour en faire la classe de document..
Screentime for Flash est un outil de création d'économiseur d'écran, il est rapide et facile à utiliser. Vous pouvez obtenir une version d'essai du site Web. Les démos sont entièrement fonctionnels, à la différence que les écrans de veille qu’ils génèrent expirent une semaine après leur création. Dans ce tutoriel, j'utilise la version Mac pour que l'économiseur d'écran soit uniquement réservé à Mac..
Ouvrez Screentime et dans l'onglet Contenu, sélectionnez votre fichier en cliquant sur le bouton "..." et en naviguant jusqu'au fichier swf. Entrez un nom pour votre économiseur d'écran.
Conservez les onglets Propriétés et Programme d'installation par défaut et, dans l'onglet Publier, nommez le programme d'installation, choisissez les options dont vous avez besoin, puis cliquez sur Créer..
Une fois la construction terminée, ouvrez l'application du programme d'installation et cliquez sur installer. Maintenant, vous pouvez choisir votre économiseur d'écran flashy depuis les Préférences Système..
Vous venez d'apprendre à quel point il est facile de convertir des films ou des applications Flash en économiseurs d'écran, d'explorer l'application Screentime et de créer le vôtre.!
Merci d'avoir lu :)
Accentsconagua