Comment créer des barres de chargement
barres de chargement affichent la progression d'un téléchargement ou d'un procédé. La barre de chargement donne aux utilisateurs une compréhension visuelle de l'état d'avancement est long à venir. Chaque langage de programmation a sa propre méthode pour créer des barres de progression. Les choix les plus populaires sont Flash et Ajax. Création d'une barre de chargement nécessite une image de charge bar qui vous pouvez faire vous-même ou télécharger à partir d'un générateur d'images. La barre de chargement nécessite un code qu'il informe combien de progrès ont été réalisés.
Instructions
• Téléchargez une barre de chargement du générateur gif gif Ajax (voir Ressources). Choisissez un style dans le menu "Type Indicator" déroulant puis cliquez sur "Générer". Cliquez sur "Télécharger It!" sous l'aperçu. Un dialogue de téléchargement se affiche. Accédez au répertoire de votre chargement -bar projet, nommez le fichier «loading.gif" puis appuyez sur "Entrée". Alternativement, si vous êtes un éditeur graphique, vous pouvez construire votre propre barre de progression. Assurez-vous que ce est une animation avec l'extension de fichier "gif".
• Téléchargez la bibliothèque jQuery (voir Ressources). Un fichier de code JavaScript se ouvrira. Cliquez sur "Fichier", "Enregistrer". Lorsque la boîte de dialogue Enregistrer se affiche, sélectionnez le répertoire de votre projet de chargement-bar et appuyez sur "Entrée".
• Lancez un éditeur de code ou Notepad. Pour le Bloc-notes, cliquez sur "Démarrer", "Tous les programmes", "Accessoires", "Bloc-notes".
• Copiez et collez le code suivant au fichier vide: <html> <head> <script type = "text / javascript" src = "jquery.js"> </ script> <script type = "text / javascript"> $ (fenêtre) .load (function () {$ ("# chargement") cacher ();.}) </ script> <style = "text / css"> #loading {position: absolute; width: 300px; top: 0px; gauche: 50%; margin-left: -150px; text-align: center; padding: 7px 0 0 0; police: 11px gras Arial, Helvetica, sans-serif; } </ Style> </ head> <body> <div id = "chargement"> Télécharger en cours, se il vous plaît attendre .. <img src = "loading.gif" alt = "loading .." /> </ div> </ body> </ html>
• Enregistrez le fichier. Cliquez sur "Fichier", "Enregistrer", lui donner un nom à la "" extension (comme "html loadbar.html") et appuyez sur "Entrée".
• Lancez ne importe quel éditeur de Flash.
• Créez trois nouveaux cadres avec en cliquant sur "Insérer", "Frame".
• Dans le panneau "Cadres" (généralement sur la gauche de l'éditeur Flash), clic droit sur le cadre supérieur et sélectionnez "Renommer". Nommez-le "actions". Utilisez la même procédure pour nommer le deuxième cadre "siteloader," le troisième cadre "contours" et la dernière image "bar".
• Verrouillez les "actions" et "cadres de contour". Faites un clic droit chacun des noms des cadres et sélectionnez "Lock."
• Définissez les couleurs et "remplir" "AVC". La couleur «remplir» est celui à côté de la benne. La couleur "de course" est la couleur à côté du crayon. Assurez-vous que les couleurs contrastent l'autre de sorte que la course sera clairement visible sur le fond.
• Créer un rectangle de la barre de chargement. Cliquez sur l'outil rectangle dans la boîte à outils, réglez la frontière à la largeur désirée et dessinez un rectangle sur le cadre "bar". Ce rectangle agira comme votre barre de chargement. La couleur "de remplissage" va remplir la barre de chargement que le téléchargement progresse.
• Déplacez le contour de la couche "bar" à la couche "contour". Double-cliquez sur le contour de la barre de charge pour sélectionner le contour seulement. Appuyez sur "Ctrl" et "x" simultanément pour découper le contour de la barre de charge. Clic droit sur le mot «bar» et sélectionnez «Lock." Clic droit "contours" et sélectionnez "Déverrouiller." Cliquez sur "Modifier", "Coller sur place».
• Faire le chargement bar un clip. Clic droit "contours" et sélectionnez "Lock." Clic droit "bar" et sélectionnez "Déverrouiller". Cliquez sur le rectangle, puis "Modifier", "Convertir en symbole". Tapez "loadbar" comme nom puis cliquez sur le bouton radio pour "Movie Clip" et appuyez sur "Entrée".
• Créer une instance ActionScript. Cliquez sur "Propriétés". Dans la zone de texte à côté de "Nom" type "de loadingBar."
• Mettre en place le site chargeur. Verrouillez le calque "bar" et déverrouiller la couche «siteloader". Cliquez sur "Insérer", "Nouveau symbole,« nommez-le "site", sélectionnez "clip vidéo" et appuyez sur "Entrée". Cliquez sur "Fenêtre", "Bibliothèque". Cliquez sur "site" et faites-le glisser sur la scène (le panneau principal de l'éditeur Flash). Cliquez sur "Propriétés". Dans la zone de texte par "Nom" type "siteLoader."
• Programme de l'ActionScript. Cliquez sur "Fenêtre", "Actions". Un éditeur de code apparaît sur l'écran. Copiez et collez le code suivant à l'éditeur de code: siteLoader.loadMovie ("<ce qui est CHARGÉ>"); loadingBar._xscale = 1; loadingBar.onEnterFrame = function () {kBytesLoaded = this._parent.siteLoader.getBytesLoaded () / 1024; kBytesTotal = this._parent.siteLoader.getBytesTotal () / 1024; pourcentage = Math.round (kBytesLoaded / kBytesTotal * 100); this._xscale = pourcentage; if (pourcentage == 99) {supprimer this.onEnterFrame; }} Remplacer "<ce qui est CHARGÉ>" avec le chemin du fichier ou la page Web qui est chargé alors que la barre de chargement progresse.
• Enregistrez le projet sous "loadbar.swf."
Articles Liés
- Comment attacher ensemble des barres d'armature
- Comment l'espace des barres d'armature dans un plancher en béton
- Comment créer des barrières sonores
- Comment installer des barres de mise à niveau de charge dans une remorque Voyage
- Comment faire pour installer des barres d'armature pour une dalle de béton
- Comment installer des barres d'armature dans les fondations en béton
- Comment faire une barre de chargement en VB.NET
- Comment installer des barres d'accident
- Comment faire des barres de sécurité pour Windows