Share
Dans ce didacticiel, je vais vous montrer comment accéder aux mêmes données sauvegardées dans des applications Flash et JavaScript distinctes, en les stockant dans HTML5 LocalStorage et en utilisant ExternalInterface pour y accéder avec AS3. Nous allons créer la même application en JavaScript et en Flash pour démontrer qu'elle est indépendante de la plate-forme..
Le stockage local est une partie intéressante de HTML5 qui vous permet d'effectuer un stockage persistant côté navigateur, c'est-à-dire qu'il dure entre les sessions du navigateur. Il ne disparaît que lorsque l'utilisateur efface le cache de son navigateur.
C'est une API très facile à utiliser, utilisant de simples paires clé-valeur pour stocker des données, et pouvant être utilisée de différentes manières. Une façon est d'utiliser localStorage.setItem ('clé', 'valeur'), et localStorage.getItem ('clé'). Une autre méthode consiste à utiliser la notation d'objet: localStorage [clé] = valeur définir une valeur, et theValue = localStorage [clé] pour le récupérer. Et, si cela ne suffisait pas, il existe encore une troisième solution - la notation par points: localStorage.key = valeur pour le définir, et theValue = localStorage.key pour le récupérer.
J'opte pour la troisième façon dans ce tutoriel, mais si vous préférez l'une des autres façons, vous pouvez modifier le code et cela devrait fonctionner correctement. Le stockage local a quelques autres méthodes, mais ce sont les deux seules dont nous avons besoin: une pour définir une valeur et une pour récupérer cette valeur..
Nous allons d'abord créer l'application JavaScript. Vous devez développer à la fois ce projet et le projet Flash sur un serveur actif, sinon vous rencontrerez des problèmes. J'utilise WAMP sur ma machine comme environnement d'hébergement local.
Créez un dossier dans lequel stocker votre projet. Dans ce dossier, créez deux nouveaux dossiers. Nommez l'un d'eux "js" et l'autre "styles".
Dans le dossier "styles", créez un nouveau fichier et nommez-le "style.css". Dans le dossier "js", créez un nouveau fichier et nommez-le "externalinterface.js". Enfin, à la racine de votre dossier de projet, créez un nouveau fichier et nommez-le "index.html".
Entrez le code suivant dans le fichier "index.html" que vous avez créé à l'étape ci-dessus..
Stockage local avec interface externe Le score aléatoire est:
Ici, nous définissons la structure de notre fichier "index.html". Nous incluons le "style.css" et le "externalinterface.js" que nous avons créés à l'étape ci-dessus. le scotché sera mis à jour lorsque nous atteindrons un nouveau score élevé, et le randomscorediv sera mis à jour chaque fois que nous générons un nouveau score (cliquez sur le bouton pour générer un score aléatoire).
Entrez les informations suivantes dans le "style.css" que vous avez créé à l'étape ci-dessus.
#wrapper width: 400px; hauteur: 400px; marge: 0 auto; #scorewrapper width: 400px; hauteur: 200px; couleur de fond: #FFFFFF; #randomscorediv visibilité: caché; body background: # f2f2f2; text-align: center; rembourrage: 20px;
Ici, nous définissons l'application pour qu'elle soit centrée sur la page, définissons le Couleur de fond du score wrapper div, et régler le randomscorediv être initialement caché (invisible). Lorsque nous cliquons sur le bouton, nous allons définir le randomscorediv à visible.
Entrez le code suivant dans le fichier "externalinterface.js" que vous avez créé à l'étape ci-dessus..
Accentsconagua
window.onload = function () alert ("Fenêtre chargée"); Lorsque vous devez lier des éléments de votre page Web, vous devez vous assurer que la fenêtre a été chargée en premier. Puisque nous devons nous attacher au bouton, nous utilisons le window.onload fonction fournie par JavaScript. Ici, nous ne faisons qu’afficher une alerte avec les mots "Window Loaded". Si vous testez la page, vous devriez voir qu'elle fonctionne.
Dans cette étape, nous allons coder le setScore () fonction qui initialise le score à 0. Entrez le code suivant dans "externalinterface.js".
window.onload = function () function setScore () if (! localStorage.score) localStorage.score = 0;
Ici, nous vérifions si le localStorage.score existe, et si ce n'est pas le cas, nous initialisons sa valeur à 0. Lorsque l'utilisateur exécute l'application pour la première fois ou après avoir effacé son cache, cette valeur n'existerait pas - nous devons donc la créer..
Appelez maintenant cette fonction immédiatement après l'avoir créée et testez-la en la mettant en alerte..
window.onload = function () function setScore () if (! localStorage.score) localStorage.score = 0; setScore (); alerte (localStorage.score);
Nous avons un moyen de définir notre score, nous avons maintenant besoin d’un moyen de le récupérer. C'est ce que le getScore () fonction va accomplir. Entrez ce qui suit sous le setScore () fonction que vous avez créée à l'étape ci-dessus.
fonction getScore () if (localStorage.score) return (localStorage.score);
Ici on vérifie que localStorage.score existe, et si c'est le cas, nous retournons simplement la valeur qu'il détient. Supprimez l'alerte de l'étape précédente et ajoutez l'alerte suivante sous le getScore () une fonction.
fonction getScore () if (localStorage.score) return (localStorage.score); alert (getScore ());
Si vous testez maintenant, l'alerte devrait à nouveau afficher le score "0".
Maintenant que nous avons un moyen de définir et d’obtenir notre score, nous avons besoin d’un moyen de le mettre à jour. C'est exactement ce que le updateScore () la fonction réalise. Ajouter ce qui suit sous le getScore () fonction que vous avez créée à l'étape ci-dessus.
function updateScore (newScore) if (localStorage.score) localStorage.score = newScore
Ici nous passons en paramètre un newScore; on met ensuite le localStorage.score égal à cette valeur. Supprimez l’alerte de l’étape précédente, puis ajoutez le texte suivant sous le updateScore () fonction que vous venez de créer.
function updateScore (newScore) if (localStorage.score) localStorage.score = newScore; updateScore (10); alerte (getScore ());
Si vous testez maintenant, vous devriez voir "10" alerté, car à la ligne 6, nous avons mis à jour le score à 10.
Maintenant que toutes nos méthodes sont en place pour manipuler la partition, voyons-la maintenant. Entrez ce qui suit sous le updateScore () fonction que vous avez créée à l'étape ci-dessus.
function showScore () var scoreText = document.getElementById ('marquéiv'); scoreText.innerHTML = "Le score élevé actuel est" + getScore (); Ici, nous obtenons une référence à la scotché, et modifier sa innerHTML propriété pour afficher le score actuel.
Appelez cette fonction immédiatement après l'avoir créée..
function showScore () var scoreText = document.getElementById ('marquéiv'); scoreText.innerHTML = "Le score élevé actuel est" + getScore (); showScore (); Si vous testez la page maintenant, vous devriez voir les mots "Le meilleur score actuel est de 10".
Nous voulons exécuter une fonction lorsque l'utilisateur clique sur le bouton. Ajouter ce qui suit sous le showScore () bouton que vous avez créé à l'étape ci-dessus.
var scoreBtn = document.getElementById ('scorebtn'); scoreBtn.addEventListener ('clic', getRandomScore, false); Ici nous avons une référence au bouton que nous avons donné à l'ID scorebtn. Nous ajoutons ensuite un EventListener de type Cliquez sur, qui appelle le getRandomScore () fonction que nous allons créer à l'étape suivante.
le getRandomScore () fonction est où la logique de cette application a lieu. Ajouter ce qui suit sous la ligne scoreBtn.addEventListener ('clic', getRandomScore, false); vous avez entré dans l'étape ci-dessus.
fonction getRandomScore () var randScoreText = document.getElementById ('randomscorediv'); randScoreText.style.visibility = 'visible'; var randScore = Math.floor (Math.random () * 200000); var currentScore = Number (getScore ()); randScoreText.innerHTML = "Le score aléatoire est" + randScore; if (randScore> currentScore) alert ("Nouveau meilleur score !!"); updateScore (randScore); showScore (); Ici, nous obtenons d’abord une référence à la randomscorediv et réglez-le pour qu'il soit visible. Nous générons ensuite un score aléatoire en appelant Math.floor (Math.random () * 200000), ce qui crée un nombre compris entre 0 et 200 000. Nous utilisons notre getScore () fonction pour définir la variable score actuel (en nous assurant que nous le plaçons en nombre), et définissons le innerHTML du randScoreText au randScore.
Enfin, nous vérifions si randScore est supérieur à score actuel, et si c'est nous montrons un alerte ("Nouveau meilleur score !!") puis mettez à jour le localStorage.score en appelant notre updateScore () méthode et passage dans le randomScore. Nous utilisons ensuite showScore () pour montrer le nouveau score.
Ceci termine l'application JavaScript - vous pouvez le tester ici. Dans la prochaine étape, nous commencerons à développer la version Flash.
Dans cette étape, nous allons configurer le projet Flash.
Créez un dossier pour stocker vos fichiers de projet. Maintenant, dans ce dossier, créez un dossier nommé "js" ce dossier créer un fichier et nommez-le "externalinterface.js". À la racine du dossier de votre projet, créez un fichier nommé "index.html". Enfin, créez un nouveau projet Flash et enregistrez-le dans le dossier racine en vous assurant de le nommer "externalInterface.fla". Donnez-lui un fond blanc et définissez la taille sur 400x200px.
Ajoutez les éléments suivants au fichier "index.html" que vous avez créé à l'étape ci-dessus..
Tuts + Premium: Démo
Ici nous avons créé notre fichier "index.html". Nous incluons le "externalinterface.js" créé à l’étape ci-dessus et intégrons le fichier SWF dans le fichier objet étiquette. Si vous avez décidé de nommer votre FLA de manière différente, il est important d'indiquer la valeur correcte pour le fichier SWF, le cas échéant..
Ajoutez ce qui suit au fichier "externalinterface.js" que vous avez créé à l'étape ci-dessus..
fonction setScore () if (! localStorage.score) localStorage.score = 0; function getScore () if (localStorage.score) return localStorage.score; function updateScore (newScore) localStorage.score = newScore
Ce sont les mêmes fonctions que nous avons utilisées dans l’application JavaScript, je ne les expliquerai donc pas ici. Il est important de noter que j'ai enlevé le window.onload, toutefois.
Dans cette étape, nous allons configurer l'interface utilisateur de la FLA créée au cours des étapes ci-dessus..
Sélectionnez l'outil Texte et assurez-vous que les propriétés suivantes sont définies dans le panneau "Caractère"..
Maintenant, faites glisser un TextField sur la scène et donnez-lui les propriétés suivantes.
Donnez-lui le nom d'instance "currentScore_txt" et assurez-vous que le type est défini sur "Texte classique" et "Texte dynamique" respectivement.
Maintenant, faites glisser un autre TextField sur la scène et donnez-lui les propriétés suivantes.
Donnez-lui le nom d'instance "randomScore_text".
Accédez au panneau Composants et faites glisser un bouton sur la scène. (Vous pouvez accéder au panneau Composants en allant dans Fenêtre> Composants ou simplement en appuyant sur CTRL + F7.)
Donne au bouton les propriétés suivantes.
Donnez-lui le nom d'instance "scorebtn".
Dans le panneau "Paramètres des composants", modifiez l'étiquette en "Générer le score"..
Sélectionnez l'outil Rectangle et donnez-lui une couleur de remplissage de "#CCCCCC" et aucun trait..
Maintenant, faites glisser un rectangle sur la scène. Cliquez pour sélectionner le rectangle et lui donner les propriétés suivantes.
Maintenant, faites un clic droit sur le rectangle et choisissez "Convertir en symbole"; nommez-le "alertBox".
Double-cliquez sur le rectangle pour passer en mode édition. Ouvrez le panneau Composants et faites glisser un bouton dans ce MovieClip. Donnez au bouton les propriétés suivantes.
Donnez-lui le nom d'instance "alertBox_btn" et modifiez le libellé en "OK".
Faites glisser un TextField dans le MovieClip et donnez-lui les propriétés suivantes.
Tapez les mots "New High Score !!" dans le TextField, puis fermez ce MovieClip.
Créez un nouveau fichier ActionScript et enregistrez-le sous le nom "Main.as". Puis, dans votre fichier FLA, définissez Main comme classe de document..
Ajoutez les éléments suivants dans le fichier "Main.as" que vous avez créé à l'étape ci-dessus..
package import flash.display.Sprite; importer flash.events. *; import flash.external.ExternalInterface; Classe publique Main Etend Sprite Fonction publique Main ()
Ici, nous importons les classes dont nous aurons besoin et codons notre fonction constructeur.
Ajouter ce qui suit dans Principale().
fonction publique Main () addEventListener (Event.ADDED_TO_STAGE, setup);
le ADDED_TO_STAGE L'événement est exécuté lorsque le film est complètement chargé. Ici, il appelle un installer fonction que nous créerons ensuite.
Ajouter ce qui suit sous le Principale() fonction constructeur.
configuration de fonction privée (e: événement): void trace ("MOVIE READY"); Si vous testez maintenant, vous verrez que "MOVIE READY" est tracé dans le panneau de sortie..
Vous avez peut-être remarqué que la boîte d’alerte que nous avons créée s’affichait au début du film; cachons-le. Entrez les informations suivantes dans le installer() une fonction.
configuration de fonction privée (e: Event): void alertBox.visible = false;
Ici, nous définissons la boîte d’alerte pour qu’elle ne soit pas visible. Allez-y et testez le film.
Dans cette étape, nous utiliserons la classe External Interface pour appeler notre setScore () fonction que nous mettons en place dans le code JavaScript. Entrez ce qui suit sous le installer() fonction que vous avez créée dans les étapes ci-dessus.
fonction privée setScore (): void ExternalInterface.call ("setScore"); Ici nous utilisons le appel() méthode de la classe ExternalInterface pour exécuter le setScore () fonction qui est dans notre code JavaScript. le appel() méthode prend en paramètre le nom de la fonction JavaScript à exécuter (sous forme de chaîne). Si nous avions des paramètres dans notre setScore () fonction, nous les aurions inclus ici aussi.
Nous voulons que cette fonction soit exécutée au tout début du film, ajoutez-la donc à la installer() une fonction.
configuration de fonction privée (e: Event): void alertBox.visible = false; setScore ();
Dans cette étape, nous aurons la partition à afficher dans notre film Flash. Le JavaScript enverra le score à Flash, et pour ce faire, nous utiliserons la méthode d'interface externe. addCallback () pour rendre la fonction accessible.
Ajouter ce qui suit dans le installer() une fonction.
configuration de fonction privée (e: Event): void alertBox.visible = false; setScore (); ExternalInterface.addCallback ("getScore", getScore); le addCallback prend deux paramètres: le nom d'une fonction que vous voulez rendre accessible via JavaScript (en tant que chaîne) et une fonction AS3 à laquelle cet appel sera lié (en tant que rappel de fonction AS3). Ici, nous voulons faire l'AS3 getScore () fonction disponible pour notre code JavaScript en premier; pour simplifier on lui donne le nom getScore () également accessible via JavaScript.
Nous allons maintenant coder cette getScore () Fonction AS3. Ajouter ce qui suit sous le setScore () fonction que vous avez créée à l'étape ci-dessus.
fonction privée getScore (score: String): int var theScore: int = int (score); renvoyer theScore;
Ici nous établissons notre getScore () une fonction. Comme nous allons recevoir une chaîne en retour du JavaScript, nous définissons le paramètre en tant que chaîne et nous renvoyons un entier. A l'intérieur de cette fonction, nous avons créé une variable nommée le score et le jeter à un int; nous revenons ensuite le score.
Dans cette étape, nous affichons la partition actuelle dans l'animation Flash. Entrez ce qui suit sous le getScore () fonction que vous avez créée à l'étape ci-dessus.
fonction privée showScore (): void currentScore_txt.text = "Le score élevé actuel est:" + ExternalInterface.call ("getScore"); Ici nous définissons le currentScore_txt.text pour afficher le score actuel. Nous utilisons ExternalInterface.call ("getScore") appeler le getScore fonction dans le code JavaScript, ce qui déclenche à son tour la getScore () fonction dans notre code ActionScript. Rappelez-vous, cela renvoie le score.
Maintenant, ajoutez ce qui suit dans le installer() une fonction.
configuration de fonction privée (e: Event): void alertBox.visible = false; ExternalInterface.addCallback ("getScore", getScore); setScore (); showScore (); Si vous testez le film maintenant, vous devriez voir la partition affichée.
Nous avons besoin d’un moyen d’ajouter des écouteurs à nos boutons, de sorte que lorsque l’utilisateur clique dessus, il fasse quelque chose. Ajouter ce qui suit sous le showScore () méthode que vous avez créée à l'étape ci-dessus.
fonction privée addButtonListeners (): void scorebtn.addEventListener (MouseEvent.CLICK, getRandomScore); alertBox.alertBox_btn.addEventListener (MouseEvent.CLICK, hideAlertBox);
Ajouter la ligne en surbrillance suivante dans la installer() une fonction.
configuration de fonction privée (e: Event): void alertBox.visible = false; setScore (); ExternalInterface.addCallback ("getScore", getScore); showScore (); addButtonListeners (); Ici nous établissons notre scorebtn appeler une fonction AS3 nommée getRandomScore (), et nous avons mis en place le alertBox_btn c'est dans le alertBox appeler une fonction AS3 nommée hideAlertBox (). Ensuite, nous allons ajouter ces fonctions.
Ajouter ce qui suit sous le addButtonListeners () fonction que vous venez de créer.
fonction privée getRandomScore (e: MouseEvent): void fonction privée hideAlertBox (e: événement): void alertBox.visible = false;
Nous finirons le getRandomScore () fonctionner à l'étape suivante. Tout ce que nous faisons dans le hideAlertBox () la fonction est définie le alertBox ne pas être visible. Nous allons le rendre visible lorsque l'utilisateur obtiendra un nouveau meilleur score..
Dans cette étape, nous allons coder le getRandomScore () fonction, où - comme dans l'application JavaScript que nous avons créée - toute la logique de l'application se déroule. Ajouter ce qui suit dans le getRandomScore () corps que vous avez créé à l'étape ci-dessus.
fonction privée getRandomScore (e: MouseEvent): void var randScore: int = Math.floor (Math.random () * 200000); var currentScore: int = ExternalInterface.call ("getScore"); randomScore_text.text = "Le score aléatoire est:" + randScore.toString (); if (randScore> currentScore) alertBox.visible = true; ExternalInterface.call ("updateScore", randScore); showScore (); Cela fonctionne de manière très similaire à la version JavaScript. Nous générons d’abord un nombre compris entre 0 et 200 000. Ensuite, nous obtenons le score actuel en utilisant ExternalInterface.call ("getScore"). Nous fixons randomScore_text pour lire le score aléatoire. Enfin, nous vérifions si randScore est supérieur à score actuel, et si c'est le cas, nous montrons la boîte d'alerte, mettons à jour le score dans le stockage local en utilisant ExternalInterface.call ("updateScore", randScore), et appelez notre showScore () méthode pour afficher le nouveau score.
Découvrez la démo.
Nous avons utilisé l’interface externe pour accéder à l’API de stockage local à partir de HTML5. J'espère que vous avez trouvé ce tutoriel utile et merci de le lire!
