Share
Deux fois par mois, nous revoyons certains des articles préférés de nos lecteurs dans l’histoire d’Activetuts +. Ce tutoriel a été publié pour la première fois en juillet 2009..
Les précharges sont indispensables dans vos applications Flash. Ils disent à l'utilisateur que le programme est en cours d'exécution mais ne peuvent afficher aucun contenu tant qu'ils ne sont pas suffisamment chargés. Dans ce tutoriel, je vais vous aider à créer un MovieClip préchargé inspiré par Apple et à vous expliquer comment afficher certaines informations de chargement. Tout cela en utilisant Flash et ActionScript 3.0.
Jetons un coup d'œil au résultat final sur lequel nous allons travailler:
Nous allons créer un MovieClip préchargé à l'aide d'outils Flash tels que l'outil Rectangle Primitive et d'un élément très important pour obtenir le bon alignement: l'option Aligner sur les objets. Le clip aura son mouvement dans la timeline et nous construirons le code en deux classes. La première classe s'occupera du préchargeur et l'autre sera la classe de document, où nous commencerons le préchargeur..
Ouvrez Flash et créez un nouveau fichier Flash (ActionScript 3)..
Définissez la taille de la scène aux dimensions souhaitées et ajoutez une couleur de fond. J'ai utilisé une taille de 600 x 300 pixels et ajouté un dégradé radial gris (# 666666, # 333333).
Ce préchargeur est composé d’une forme simple qui est répétée 12 fois.
Sélectionnez l'outil Rectangle primitif et définissez le rayon de l'angle sur 15. Assurez-vous de verrouiller le contrôle du rayon de l'angle afin que chaque coin soit arrondi de manière égale..
Définissez la couleur en blanc et dessinez un rectangle de 25 x 85 pixels, n'utilisez pas de trait.
Ça y est, c'est la forme de base qui sera la partie principale de notre préchargeur.
Utilisez le panneau Aligner pour définir la forme créée précédemment en haut au centre de la scène..
Dupliquer la forme (Cmd + D) et l’aligner sur le centre-bas.
Dupliquez les deux formes, puis sélectionnez Modifier> Transformer> Rotation 90.?.
Voici la partie la plus délicate, sélectionnez l’outil de transformation libre et assurez-vous que vous avez sélectionné l’option Aligner sur les objets (c’est l’icône de l’aimant dans la barre d’outils ou vous pouvez aller dans Affichage> Capture> Alignement sur les objets). Commencez à faire pivoter les formes du haut et du bas. Vous remarquerez que la rotation s’arrête à chaque angle déterminé. Nous allons utiliser deux butées pour séparer les formes l’une après l’autre, pour aboutir à l’objet suivant:
Nous allons changer la propriété alpha des formes pour obtenir l'effet "suivre" que nous recherchons. Il y a 12 formes, c'est un peu plus que 8, mais pour éviter l'utilisation de décimales, définissons 9 en 8 multiples et pour les 3 dernières, nous en ajouterons 10. Cela nous donne des valeurs alpha de 8, 16, 24? 72, 80, 90, 100. Jetez un coup d'oeil à l'image pour avoir l'idée.
Convertissez toutes les formes en un seul MovieClip et nommez-le "Preloader". Cochez la case Exporter pour Actionscript et écrivez "classes.Preloader" dans le champ de texte de la classe. Double-cliquez sur le clip pour accéder à sa timeline. Le processus d'animation est très simple. ajoutez une nouvelle image clé et faites pivoter les formes jusqu'à ce que la forme 100% alpha se trouve à la position où se trouvait la forme 8% alpha. Répétez cette opération jusqu'à ce que vous obteniez l'animation complète. Les cadres doivent être dans cet ordre:
Puisque l'animation est basée sur la chronologie, la vitesse dépendra du nombre d'images par seconde de votre film, le mien est de 25 images par seconde et j'ai utilisé 2 images par état..
Notre précharge a une taille de 300 x 300 pixels, normalement, elle n’aurait pas été aussi grande, mais c’est bien d’avoir l’option. Choisissez une taille appropriée pour votre préchargeur et centrez-la sur la scène. J'ai choisi 48 x 48px.
Créez un champ de texte dynamique et nommez-le "info". Cela affichera le nombre total de Ko à charger, la quantité actuellement chargée et le pourcentage qu'il représente. Écrivez du texte pour avoir une idée de la taille qu'il va utiliser et centrez-le.
Créez un nouveau fichier ActionScript et commencez à importer les classes requises:
classes de package import flash.display.MovieClip; import flash.text.TextField; import flash.events.Event; import flash.events.ProgressEvent;
public class Preloader étend MovieClip
Étant donné que notre préchargeur est un MovieClip et qu'il utilise un scénario, nous allons étendre cette classe à l'aide de la classe MovieClip..
Nous n'avons besoin d'utiliser qu'une seule variable dans cette classe. Cette variable stockera le nom d'instance du champ de texte que nous utilisons pour afficher les informations de chargement..
private var dataTextField: TextField;
fonction publique start (dataTextField: TextField): void this.dataTextField = dataTextField; // Définit la variable dataTextField sur la valeur du paramètre / * L'objet loaderInfo est chargé du processus de chargement. Dans ce code, nous ajoutons des écouteurs pour vérifier la progression et lorsque le film est complètement chargé * / this.loaderInfo.addEventListener (ProgressEvent. PROGRESS, on Progrès); this.loaderInfo.addEventListener (Event.COMPLETE, onComplete);
fonction privée onProgress (e: ProgressEvent): void / * Nous utilisons ici des variables locales pour améliorer la lecture du code * / var LoadBytes: int = Math.round (e.target.bytesLoaded / 1024); var totalBytes: int = Math.round (e.target.bytesTotal / 1024); var pourcent: int = (e.target.bytesTotal / e.target.bytesLoaded) * 100; / * Définit les données de chargement sur le champ de texte * / dataTextField.text = String (LoadBytes + "of" + totalBytes + "KB Loaded \ n" + percent + "% Complete");
Accentsconagua
fonction privée onComplete (e: Event): void / * Supprimer les écouteurs * / this.loaderInfo.removeEventListener (ProgressEvent.PROGRESS, onProgress); this.loaderInfo.removeEventListener (Event.COMPLETE, onComplete); // Ici vous pouvez ajouter une fonction pour faire quelque chose de spécifique, je viens d'utiliser une trace * / trace ("Loaded!"); Créez un nouveau fichier ActionScript et commencez à écrire:
classes de package import flash.display.MovieClip; classe publique Main étend MovieClip fonction publique Main (): void / * Démarre le préchargeur, "préchargeur" est le nom d'instance du clip * / preloader.start (info);
Ce code sera la classe du document, alors retournez dans le fichier .Fla et ajoutez "classes.Main" au champ de classe du panneau de propriétés..
Vous pouvez toujours changer la couleur du préchargeur pour l’utiliser avec différents arrière-plans. Pour cela, un moyen facile de changer la valeur de la teinte dans les propriétés du clip, essayez-le.!
Merci de votre lecture, n'hésitez pas à laisser des commentaires et des questions.
