Share
Dans ce didacticiel, nous allons créer un fichier SWF qui se précharge lui-même, ce qui signifie que le préchargeur et le contenu se trouvent dans le même fichier. Nous verrons comment faire les choses correctement et éviter les pièges.
L'idée du préchargement SWF unique est que vous avez un objet Flash qui se précharge lui-même. Cela signifie que le préchargeur, avec ses fonctionnalités et ses ressources associées, est incorporé ensemble dans le même fichier SWF que l'ensemble du film ou de l'application Flash..
Nous allons commencer ce didacticiel avec quelques notions théoriques et terminer avec la création d’un fichier FLA ainsi que d’une classe de préchargement que vous pourrez utiliser dans les projets futurs. Au cours du didacticiel, nous aborderons les pièges courants et les considérations importantes..
De plus, maintenant qu'Activetuts + a commencé à se concentrer sur les classes de documents et, généralement, à conserver les éléments dans les fichiers de classe, nous le ferons dans la partie pratique de ce tutoriel. Découvrez le conseil: Comment utiliser une classe de document dans Flash si vous devez apprendre les bases.
Assurez-vous de disposer d'une version mise à jour de Flash CS3 ou de Flash CS4.. Je sais avec certitude qu'une mise à jour ultérieure de CS4 a modifié la façon dont les classes sont chargées et que cela peut faire toute la différence ici!
Je vais tout de suite admettre que ce tutoriel est assez long pour ce sujet étroit, mais il contient tout ce que vous devez savoir, alors attachez-vous et passons à autre chose.!
L'idée d'un préchargeur est assez évidente: vous voulez vous assurer que l'utilisateur reçoit un retour visuel indiquant que l'objet Flash est en cours de chargement. L’incorporation d’un fichier Flash volumineux nécessitant 10 secondes de chargement peut faire toute la différence entre les utilisateurs séjournant ou quittant le site Web, si le préchargeur ne dit pas à l’utilisateur de s’accrocher à la tâche..
Le processus de création de fichiers Flash "auto-préchargés" présente certains problèmes. Il existe d'autres techniques de préchargement qui sont vraiment faciles à assembler, telles que le préchargement d'un fichier SWF et l'ajout à la scène une fois chargé..
Alors pourquoi s'embêter? Eh bien, il y a des situations où vous n'avez pas le choix.
Par exemple, vous pouvez créer des jeux Flash que vous espérez diffuser sur autant de portails de jeux Flash que possible. La plupart de ces portails ne prennent en charge que les jeux sous forme d'un fichier SWF unique, ce qui ne vous laisse pas d'autre choix que de vous assurer que votre jeu se précharge correctement à l'intérieur de lui-même..
En plus de ces exemples évidents, l’argument consistant à avoir un produit complet dans un seul fichier facilite la gestion..
Lorsque votre navigateur rencontre un objet Flash et commence à le charger, il commence au début de la timeline. Il charge les cadres les uns après les autres. Dès que la première image est chargée, elle peut être affichée.
Notre approche consiste ici à placer un préchargeur sur la première image pour que l’utilisateur voie quelque chose se passer pendant que le navigateur continue à charger le reste du fichier. Nous écrivons du code pour vérifier la progression globale et quand c'est terminé, nous continuons au contenu principal du fichier..
Le défi consiste à réduire au minimum la taille de la première image. Si vous laissez le code et les sons s'empiler dans la première image, il se peut que le préchargement devienne invisible une fois que vous avez chargé environ 60% du film..
Un bon conseil pour utiliser un compteur de pourcentage affichant des chiffres consiste à utiliser une police dont la taille en octets est petite. Mais cela ne vous mène que loin. Malheureusement, nous devons travailler un peu plus fort pour que les choses se passent à notre façon!
Cela a été dit plusieurs fois auparavant et cela vaut la peine de le répéter:
Preloaders, la tâche la plus difficile en Flash…
Un certain nombre de facteurs affecteront ce qui sera mis dans quel cadre, tels que:
Le principal problème auquel nous sommes confrontés est contrôler ce qui finit sur la première image, parce que, comme mentionné ci-dessus, tout le cadre doit être chargé avant que le préchargeur puisse être affiché.
En dehors de cela, il existe des différences entre le fonctionnement de Flash CS3 et celui de CS4. Dans la prochaine étape, je ferai un certain nombre d'énoncés bien documentés auxquels vous pourrez vous référer si nécessaire. Ce devrait être une excellente ressource si vous souhaitez résoudre rapidement votre préchargement afin de comprendre pourquoi il ne se comporte pas comme prévu..
Je vais essayer de rendre les déclarations un peu plus tangibles en faisant référence à TweenLite, une excellente bibliothèque de tweening de Jack Doyle sur greensock.com. Nous utiliserons TweenLite dans la partie pratique de ce didacticiel, ce qui sera donc plus logique..
Ces instructions sont valables pour Flash CS3 et CS4, sauf indication contraire. "Importer TweenLite" signifie essentiellement "importer et utiliser TweenLite" - les résultats peuvent être différents si vous n'utilisez pas le code, car le compilateur Flash ignore les importations inutilisées. Taper simplement une instruction d'importation ne veut pas dire utiliser le code.
Les trois instructions suivantes font référence au scénario dans lequel un MovieClip est exporté pour ActionScript, à l'aide d'un fichier de classe externe, qui importe TweenLite dans le fichier de classe..
Les trois prochaines instructions font référence au scénario dans lequel un MovieClip est exporté pour ActionScript en tant que "CustomClass", qu’il utilise ou non un fichier de classe externe, qui est instancié et ajouté à la scène à partir d’un MovieClip placé sur la ligne de scénario ( comme le MovieClip des trois déclarations précédentes.) Cette CustomClass est seulement instancié et n'existait pas auparavant sur la timeline principale.
Avec toutes ces restrictions, considérons au moins cette déclaration positive:
En voici un très intéressant:
Oui, tu l'as bien lu. Je suppose qu'il est juste de supposer qu'Adobe souhaite que les utilisateurs passent à CS4. Alors, que faire si vous êtes coincé avec CS3 et que l’herbe est plus verte de l’autre côté? Je vous le dirai dans la prochaine étape.
Cette étape ne concerne que ceux qui utilisent Flash CS3..
Si vous lisez toutes les instructions de l’étape précédente, vous vous rendrez compte que de nombreux MovieClips sont exportés pour ActionScript. Ceux-ci devront tous être chargés dans la première image ou ne pas être disponibles. Heureusement, ces déclarations étaient basées sur l'hypothèse que ces actifs n'avaient jamais été placés dans le calendrier principal, ce qui s'avère être notre solution! (C’est aussi le seul moyen de charger des sons autres que dans la première image…)
Voici comment cela se fait:
Cela fera charger tous vos actifs dans la deuxième image. La solution est un peu collante, mais ce n’est pas aussi difficile que de devoir acheter un nouveau logiciel pour résoudre ce problème particulier..
(Bravo à 8bitrocket pour cette astuce!)
Une chose que je devrais mentionner avant de commencer à travailler est le profileur de bande passante. C'est un outil essentiel pour résoudre vos problèmes de préchargement. Lorsque vous prévisualisez un film, vous pouvez y accéder, puis choisir le profileur de bande passante. Ou appuyez simplement sur Ctrl + B.
Ici, vous pouvez basculer entre les graphiques image par image et les graphiques en continu. Vous pouvez également simuler le téléchargement du film à la vitesse de connexion de votre choix en le choisissant dans le menu Affichage ou en appuyant de nouveau sur Ctrl + Entrée (modifiez la vitesse de téléchargement simulée à l'aide du sous-menu Affichage> Paramètres de téléchargement). Cela est essentiel pour savoir à quoi ressemblera votre préchargeur, sans avoir à vous soucier de le télécharger et de limiter votre bande passante. Cependant, dans ce cas précis, je peux recommander Firefox Throttle..
Outre l'outil très utile qu'est le profileur de bande passante, il existe la possibilité de générer un rapport de taille. Appuyez sur Ctrl + Maj + F12 pour ouvrir la boîte de dialogue Paramètres de publication..
Allez dans l'onglet Flash, et dans la section Avancé se trouve une case à cocher intitulée "Générer un rapport de taille". Lorsque cette case est cochée, la prévisualisation ou la publication de votre film générera un fichier texte dans le même dossier que votre fichier FLA, contenant des informations utiles sur les éléments constituant la taille totale du film..
Enfin, nous pouvons commencer à créer une animation Flash avec un joli préchargeur autonome!
Nous allons utiliser une technique de "préchargement à trois images". Sur la première image, nous allons mettre un MovieClip préchargé qui a sa propre classe "Preloader". Sur le deuxième cadre, nous chargeons toutes les classes et sur le troisième cadre, nous chargeons et affichons le contenu. Nous allons placer le contenu dans un MovieClip nommé Application avec une classe associée "Application". Ceci est où la viande de l'application va.
Commencez par créer un nouveau document AS3. Je le fais 600x400px, fond gris foncé, 24 FPS. Ces paramètres n'ont pas d'importance.
Définissez la classe de document sur Main et cliquez sur OK..
Accédez à Fichier> Paramètres de publication, à l'onglet Flash, puis aux paramètres d'ActionScript 3.0. Tapez "frame 2" dans le champ "Export classes in frame".
De toute évidence, la conception d'un préchargeur n'affectera pas la fonction. Je vous donnerai des instructions pas à pas, mais n'hésitez pas à sauter ces parties et à adopter votre propre approche si vous le souhaitez. Assurez-vous simplement de noter les parties auxquelles je me réfère dans le code ultérieurement.
Dessinez un rectangle avec des coins arrondis et donnez-lui un dégradé bleu. Puis transformez-le en un symbole MovieClip, appelez-le Preloader. Choisissez de l'exporter pour ActionScript et appelez la classe Preloader..
Au sein de ce nouveau MovieClip, tracez un nouveau rectangle à coins arrondis avec un dégradé de gris, transformez-le en un autre MovieClip et attribuez-lui le nom d'occurrence progressArea..
Allez de l'avant et faites correspondre la disposition des calques que je présente dans l'image ci-dessus. Créez ensuite une copie de la dernière forme et placez-la dans le calque Barre de progression au-dessus de la zone de la barre de progression. Donnez-lui un dégradé bleu clair, transformez-le en MovieClip et donnez-lui le nom d'occurrence de progressBar. Activez les guides pour la mise à l'échelle en 9 découpes et assurez-vous de conserver les bords arrondis gauche et droit à l'extérieur.
Enfin, créez un champ de texte dynamique avec un nom d’instance de pourcentageText. Faites le texte aligné à droite. De cette façon, le signe de pourcentage ne bougera jamais, seuls les chiffres (qui changent quand même). Allez dans l’intégration des caractères et assurez-vous d’intégrer les chiffres et le signe de pourcentage (%). Pour faire un très petit préchargeur, j'utilise un petit pixelfont appelé Pixel Mix de dafont.com. Je lui donne aussi une lueur bleue juste parce que je peux.
Assurez-vous que tout le MovieClip préchargé est placé dans la première image et que le nom de son préchargement est attribué. Créez un nouveau calque appelé "AS" et mettez un stop (); dans le premier cadre. Conservez le préchargeur dans son propre calque, "Preloader". Créez une autre couche appelée "Application". C’est là que nous garderons le contenu principal à la fin.
Créez un nouveau fichier ActionScript et enregistrez-le dans le même répertoire que votre fichier FLA. Nommez-le Main.as:
package import flash.display.MovieClip; import flash.events.Event; classe publique Main étend MovieClip fonction publique Main () preloader.addEventListener (Event.COMPLETE, onPreloaderComplete); preloader.setLoaderInfo (loaderInfo); fonction privée onPreloaderComplete (e: Event): void gotoAndStop (3);
Créez un nouveau fichier ActionScript et enregistrez-le dans le même répertoire que Preloader.as:
package import flash.display.LoaderInfo; import flash.display.MovieClip; import flash.events.Event; import flash.events.ProgressEvent; classe publique Preloader étend MovieClip fonction publique Preloader () fonction publique setLoaderInfo (ldrInf: LoaderInfo): void ldrInf.addEventListener (ProgressEvent.PROGRESS, onProgress); ldrInf.addEventListener (Event.COMPLETE, onComplete); fonction privée onProgress (e: ProgressEvent): void var pour cent: int = Math.round (e.bytesLoaded / e.bytesTotal * 100); progressBar.width = pourcent / 100 * progressArea.width; pourcentageText.text = pourcentage + "%"; fonction privée onComplete (e: Event): void dispatchEvent (e);
Alors, que font ces deux classes?
Dans le constructeur de Main, nous appelons la méthode personnalisée setLoaderInfo () de notre préchargeur et transmettons l'objet LoaderInfo associé à Main..
Preloader reçoit cet objet et y ajoute deux écouteurs d'événement. ProgressEvent déclenche la fonction onProgress, dans laquelle nous calculons le pourcentage d'octets chargés par rapport au nombre total d'octets à charger. Le pourcentage est utilisé pour définir la largeur de la barre de progression et le texte de notre champ de texte.
L'événement complet est simplement renvoyé à Main, qui passe ensuite à la troisième ligne du scénario principal lors de la réception de l'événement..
Pour que le préchargeur fonctionne correctement, j'ajoute une belle photo macro d'un chat appelé Runa, prise par un de mes amis. Vous pouvez trouver l'image dans les fichiers source fournis avec ce tutoriel. J'ai importé le bitmap et je l'ai transformé en un MovieClip appelé "Cat".
N'hésitez pas à utiliser l'image que vous jugez appropriée. Donnez au clip un nom d'occurrence de "chat".
Comme vous pouvez le voir sur la capture d'écran ci-dessus, j'ai placé le Cat MovieClip sur la troisième image de la couche Application. Prenez n'importe quel MovieClip que vous avez fabriqué, chat ou pas, et appuyez de nouveau sur F8 pour l'insérer dans un nouveau MovieClip appelé Application. Exporter ceci pour ActionScript en tant qu'application.
Créez la classe Application en démarrant un nouveau fichier AS et en l'enregistrant sous le nom "Application.as". Demandez à la classe d'application de ressembler à ceci:
package import com.greensock.TweenLite; importer com.greensock.easing.Sine; import flash.display.MovieClip; Classe publique Application extension MovieClip fonction publique Application () TweenLite.to (cat, 7, scaleX: 4, scaleY: 4, onComplete: tweenBack, easy: Sine.easeInOut); fonction privée tweenBack (): void TweenLite.to (cat, 3, scaleX: 1, scaleY: 1, onComplete: reTween, facilité: Sine.easeInOut); fonction privée reTween (): void TweenLite.to (cat, 7, scaleX: 4, scaleY: 4, onComplete: tweenBack, easy: Sine.easeInOut);
Cela animera indéfiniment le chat afin que vous puissiez toujours vous souvenir des détails de la fourrure de son nez. Comment ce cours fonctionne n'est pas important est L'important est que nous importons et utilisons TweenLite, nous assurant ainsi que ce sera une partie du fichier SWF une fois exporté..
Revenons sur le banc d'école pour une minute.
Ce film se compile bien dans CS4. L'application MovieClip est configurée pour exporter sur l'image 2, à moins que vous ne l'ayez modifiée. Si vous l'avez changé, vous remarquerez peut-être quelque chose d'étrange. Plus à ce sujet dans la prochaine étape.
Si vous êtes sur CS3, ce paramètre est vraiment important. Assurez-vous de décocher la case "Exporter dans la première image" dans les propriétés de l'application MovieClip, sinon tout se chargera dans la première image.!
Ce n'est pas le seul problème. Si vous essayez de compiler, vous obtiendrez une erreur de type 1046 indiquant que le type TextField n'est pas disponible. Comme vous pouvez le deviner, CS3 fait les choses un peu différemment. Que ce passe-t-il? Eh bien, vous essayez d'utiliser un TextField dans le MovieClip de Preloader mais vous ne l'avez pas importé. Dans CS4, cela est géré automatiquement pour vous, mais pas dans CS3..
Heureusement, la solution est simple, ajoutez simplement:
import flash.text.TextField;
à votre classe Preloader, et vous êtes tous ensemble.
Certains d'entre vous ont peut-être déjà pensé que j'aurais dû étendre Sprite pour ma classe Preloader au lieu de MovieClip. Eh bien, c'est la raison pour laquelle je ne l'ai pas fait; Je voulais attendre jusqu'à ce point pour en parler. Comme le symbole Preloader contient à la fois "ProgressArea" et "ProgressBar", qui sont tous deux MovieClips, vous auriez le même type d'erreur 1046.
La même solution est possible ici aussi bien sûr. En fait, vous devriez maintenant changer le Preloader pour étendre Sprite au lieu de MovieClip, et si vous utilisez CS3, assurez-vous d'importer également la classe Sprite à l'intérieur de la classe Preloader..
J'ai mentionné un événement étrange dans la dernière étape. Si vous décochez la case "Exporter dans l'image 2" d'Application et exécutez un téléchargement simulé, le préchargeur disparaîtra, à moins que vous n'ayez étendu l'image clé du préchargeur pour couvrir également la deuxième image..
Alors qu'est-ce qui se passe réellement? En termes simples, le premier arrêt (); déclaration ne compte pas. Comment est-ce pour une planification de flux de travail évidente? Notez que si vous mettez une instruction de trace dans la première image après le stop (); appeler, il trace. Important: notez que ce problème ne se manifeste que lorsque nous simulons un téléchargement!
La leçon apprise ici est ne faites pas confiance au téléchargement simulé! Cela ne vous montrera pas exactement comment les choses vont se charger et fonctionner. Vous pouvez simplement garder le stop (); et le préchargement dans le premier cadre et tout ira bien pour le déploiement. Toutefois, il peut être difficile de prévisualiser, sauf si vous avez défini Application pour exporter sur l'image 2. Et ce n'est que pour ce scénario spécifique.
Dans CS3, vous devez décocher la case d'exportation dans l'Application MovieClip, sinon le chargement se fera dans la première image. Mais si vous faites cela, vous rencontrerez ce problème. Alors allez-y et étendez le préchargeur à la deuxième image.
Allez-y et prévisualisez le film. Lancez un téléchargement simulé à basse vitesse et profitez du préchargement magistral * (* ne s'applique magistralement que si vous avez suivi mes instructions à la lettre).
Si vous examinez le graphique image par image ou le rapport de taille généré, vous verrez que le code est chargé dans la deuxième image. La première image ne fait que 4 Ko et comprend la classe Preloader et les glyphes de police incorporés. Maintenant, 4kb est assez abordable en ce qui concerne le temps d’attente avant de voir le préchargeur, vous ne pensez pas?
Vous pouvez voir différentes tailles sur CS3 et vous verrez certainement différentes tailles avec des polices différentes. Ou des chats.
Vous avez peut-être l’idée que vous voudriez utiliser TweenLite pour atténuer le préchargement en interpolant l’alpha sur 0 - mais vous ne souhaitez pas charger TweenLite dans la première image car cela ajoute 8 Ko supplémentaires au téléchargement initial..
Il y a plusieurs façons de le faire et nous allons le résoudre en plaçant un MovieClip sur la troisième image qui capture le préchargeur et le tweens. Une fois terminé, il passera à la quatrième image, où nous aurons déplacé Application vers.
La raison pour la placer dans la troisième image est que nous ne pouvons pas la placer dans la deuxième image sans avoir TweenLite chargé dans la première image..
Nous nous éloignons maintenant de la technique standard de préchargement à trois images..
Ajoutez un nouveau calque appelé "Capteur de préchargement". Assurez-vous de mettre stop (); appels sur les trames un, deux et trois. Ceci permet d'éviter la prévisualisation gâchée lors de la simulation d'un téléchargement, comme mentionné précédemment..
Continuez et déplacez l'application vers la quatrième image, ainsi que l'extension de Preloader vers la troisième image..
Assurez-vous que vous avez une image clé sur la troisième image de la couche de récepteur Preloader. Accédez à ce cadre, tracez une petite forme et définissez l'alpha de la couleur de remplissage à 0%. Ceci est supposé être un MovieClip invisible. Transformez-le en un symbole MovieClip appelé PreloaderCatcher ou quelque chose de similaire..
Exportez le MovieClip en tant que PreloaderCatcher. Si vous utilisez CS4, peu importe si vous l'exportez pour l'image 2 ou non, car il sera chargé dans cette image, quoi qu'il arrive. Ça change une chose, tu te souviens? Que ce soit ou non le forme est chargé sur l'image 2. Essentiellement, peu importe la taille de fichier pratiquement inexistante pour cette forme. Vous pourriez aussi bien décocher pour bonne habitude si.
Créez un nouveau fichier de classe appelé PreloaderCatcher.as:
Accentsconagua
package import com.greensock.TweenLite; import flash.display.MovieClip; import flash.display.Sprite; import flash.events.Event; importer un préchargeur; Classe publique PreloaderCatcher étend Sprite fonction publique PreloaderCatcher () addEventListener (Event.ADDED_TO_STAGE, onAdded); fonction privée onAdded (e: Event): void removeEventListener (Event.ADDED_TO_STAGE, onAdded); var preloader: Sprite = MovieClip (parent) .getChildByName ("preloader") en tant que Sprite; TweenLite.to (préchargeur, 0.5, alpha: 0, onComplete: function (): void MovieClip (parent) .nextFrame ();); Comme vous pouvez le constater, cette classe fonctionne d'abord en obtenant le préchargeur en convertissant le parent en tant que Sprite et en appelant getChildByName ("préchargeur"), où préchargeur est le nom de l'instance. Le préchargeur est également un Sprite, puis TweenLite est utilisé pour le réduire en fondu..
Lorsque l'interpolation est terminée, la fonction onComplete de TweenLite convertit le parent en tant que MovieClip, ce qui permet d'appeler la méthode nextFrame..
Comme je l'ai dit précédemment, nous nous sommes éloignés de la technique de préchargement à trois images. Ce n’est pas en soi un blasphème, mais je suis sûr que certains d’entre vous se demandent pourquoi nous l’avons fait. Au lieu de cela, nous aurions pu gérer l'interpolation du préchargeur dans le clip d'application…
Dans ce cas, vous avez parfaitement raison! La raison pour laquelle j'ai utilisé quatre cadres ici était pour vous montrer comment faire en gardant les choses séparées. Détournement du préchargeur; Cela appartient-il à la partie préchargement ou à la partie application? Preloader, bien sûr, mais dans ce cas, nous ne voulions pas le charger dans la première image. Par conséquent, nous nous retrouvons avec cette classe "attrape" supplémentaire.
Rappelez-vous simplement que tout cela est facultatif. Une fois que vous savez tout faire, vous pouvez facilement décider quelle que soit votre situation..
À l'étape 7, je vous ai parlé des problèmes de chargement d'actifs dans CS3. Comme ce didacticiel s’adresse aux utilisateurs de CS3 et de CS4, nous utiliserons le plus petit dénominateur commun et utiliserons l’approche AssetHolder. Si vous utilisez CS4, vous pouvez effectuer les étapes suivantes de la même manière et le même fonctionnement sera identique. Vous pouvez également ignorer l’approche AssetHolder..
Commencez par importer le son "music.wav" des fichiers sources dans votre FLA..
Allez-y et exportez-le pour ActionScript et assurez-vous de décocher la case "Exporter dans la première image" dans CS3. Pour CS4, cela ne fera pas beaucoup de différence. J'utilise Flash CS4, ce que vous avez probablement déjà compris, donc les captures d'écran montrent la boîte de dialogue CS4. Si vous le souhaitez, vous pouvez passer de la compression MP3 par défaut à quelque chose de plus agréable. De cette façon, ça ne sonnera pas terrible.
Passons maintenant à quelques étapes supplémentaires, en ajoutant du texte au film et en mettant tout cela dans un AssetHolder MovieClip.!
Appuyez sur Ctrl + F8 pour créer un nouveau symbole MovieClip. Nommez-le TextHolder et exportez-le pour ActionScript, encore une fois (dans CS3) en veillant à décocher la case "Exporter dans la première image"..
