Sujets sur : flash as3 page swfadress
Cours ActionScript 3 ‘flash as3 page swfadress’
Utiliser l’historique du navigateur dans Flash avec les boutons précédent / suivant

Nous allons apprendre comment utiliser les boutons suivant / précédents de votre navigateur (Firefox, Internet Explorer…) dans vos applications Flash.
Le script SwfAddress gère l’utilisation des boutons suivant / précédent de votre navigateur (Firefox) avec votre application Flash.
Il permet également d’accéder directement à une page de votre application avec une url. C’est très pratique pour donner le lien direct d’une page (ou interface) de votre site flash.
Les fonctionnalités de SWFAddress
SWFAddress est librairie Open Source sous forme de plugin à SWFObject.
SWFAddress offre les possibilités suivantes :
- Les boutons suivant, précédant et rafraichir du navigateur sont pris en compte par votre application flash.
- Un meilleur référencement de votre site flash avec une prise en compte SEO des moteurs de recherche.
- Vous avez un accès direct aux différentes interfaces de votre site flash, avec une url du type
- Vous pouvez également modifier le titre de la page du navigateur directement à partir de votre application flash. Cela permet d’optimiser le référencement.
Utilisation de SWFAddress
Pour utiliser SWFAddress, votre contenu Flash doit être ajouter dans votre page web (html ou php) avec le script SWFObject. Pour cela, consultez le tutoriel : Afficher du Flash avec SWFObject.
Ensuite, téléchargez la dernière version du script SWFAddress depuis le site de l’Auteur (Download SWFAddress 2.4).
Détails des fonctions possibles
SWFAddress.getValue()
Cette méthode renvoie le paramètre situé dans la barre d’adresse du navigateur de votre internaute. Ce paramètre correspond au contenu placé après le symbole #
Avec votre code ActionScript, SWFAddress.getValue() renvoie la dernière valeur donnée par SWFAddress.setValue(param:String).
SWFAddress.setValue(param:String)
Cette méthode met à jour l’url de votre navigateur. Elle conserve également une reférence dans votre application Flash qui peut ètre récupérée avec SWFAddress.getValue().
SWFAddress.setTitle(param:String)
Cette méthode permet de mettre à jour le titre de la page actuelle du navigateur de votre internaute.
SWFAddress.getTitle() permet de récupérer le titre de la page actuelle, à tout moment dans votre application Flash.
SWFAddress.setStatus(param:String)
Cette méthode modifie le texte qui apparait dans la barre de statut du navigateur de votre internaute.
SWFAddress.resetStatus() efface le texte de la barre de statut du navigateur.
SWFAddress.addEventListener(SWFAddressEvent.CHANGE, handleSWFAddress)
En ActionScript 3, SWFAddress permet d’écouter les évènements diffusés à chaque changement page. C’est à dire, à chaque fois que votre application Flash change de page ou appelle SWFAddress.setValue(param:String), l’évènement SWFAddressEvent.CHANGE est diffusé.
Améliorer son référencement avec SWFAddress
En utilisant les fonctionnalités de SWFAddress, vous pouvez paramétrer l’adresse, le titre et l’historique du navigateur à chaque changement de page. Ainsi, votre application Flash affiche le nom de la page courante où se situe l’utilisateur.
De plus, il est possible d’accéder directement à une page du site Flash via son URL statique. En tapant par exemple , l’utilisateur est redirigé directement sur la page « interface1 » du site. Cette méthode est très pratique pour mettre une page du site Flash directement dans les Favoris.
En utilisant cette méthode pour créer un fichier sitemap.xml (lisez cet article sur le référencement d’un site Flash),vous pouvez ajouter toutes les urls menant aux différentes interfaces de votre site Flash.
Vous améliorez significativement le référencement de votre site Flash, puisque toutes les adresses (interfaces) sont disponibles dans l’index des moteurs de recherches et renverront directement sur la page concernée avec son nom affiché dans la barre d’adresse.
Exemple AS3 avec SWFAddress
Vous avez téléchargé le fichier zip SWFAddress contenant l’ensemble du code source, des exemples et de la documentation. Dans mon tutoriel, je reprends l’exemple SEO pour vous montrer les améliorations possibles du référencement de vos Applications Flash.
Création du fichier .htaccess
A l’aide de votre client FTP (FileZilla par exemple), modifiez le fichier .htaccess à la racine de votre site.
Renseignez les informations suivantes :
- le répertoire de base contenant le fichier qui lance votre application flash. En règle général, c’est / ou /site.
- le nom du fichier qui lance votre application Flash. Dans la majorité des cas, c’est le fichier index.php.
[codesyntax lang= »apache » title= »htaccess » bookmarkname= »htaccess »]
1 2 3 4 5 6 | # Sets the base folder pour SWFAddress RewriteBase /ressources RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule .* swfaddress_exemple.php |
[/codesyntax]
Création du fichier datasource.php
Ce fichier contient la version HTML de votre site Flash. Si un internaute ne possède pas le plugin flash installé sur son navigateur web, une version HTML de votre site Flash est alors affichée.
Renseignez dans les case : tous les noms des pages de votre site Flash. Ce sont les mêmes noms utilisés dans votre code ActionScript 3.
[codesyntax lang= »php » title= »datasource.php » bookmarkname= »datasource.php »]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <?php header('Content-Type: text/xml;charset=utf-8'); $swfaddress = preg_replace('/^(.+)\/$/', '$1', $_GET['swfaddress']); $base = strtolower(substr($_SERVER['SERVER_PROTOCOL'], 0, strrpos($_SERVER['SERVER_PROTOCOL'], '/'))) . '://' . $_SERVER['SERVER_NAME'] . substr($_SERVER['PHP_SELF'], 0, strrpos($_SERVER['PHP_SELF'], '/')); switch($swfaddress) { case '/': echo('<p>Quisque libero mauris, ornare in, faucibus ut, facilisis nec, quam. Mauris quis felis ac nisl laoreet adipiscing. Nunc libero.</p>'); break; case '/a-propos': echo('<p>Suspendisse vitae nibh.</p>'); break; case '/demo': echo('<p>Fusce at ipsum vel diam ullamcorper convallis. Morbi aliquet cursus lacus. Nunc nisi ligula, accumsan sit amet, condimentum nec, ullamcorper a, lectus. Vestibulum ut lectus.</p>'); break; case '/demo/1': echo('<p><img src="' . $base . '/images/1.png" alt="Portfolio 1" width="400" height="300" /><br />'); echo((isset($_GET['desc']) && $_GET['desc'] == 'true') ? 'Atlantic Hit Mix Calendar<br />' : ''); echo((isset($_GET['year']) && $_GET['year'] != '') ? $_GET['year'] . '<br />' : ''); echo('<br /><a href="http://www.sergeevstudio.com">Photos by Lyubomir Sergeev</a></p>'); break; case '/demo/2': echo('<p><img src="' . $base . '/images/2.png" alt="Portfolio 2" width="400" height="300" /><br />'); echo((isset($_GET['desc']) && $_GET['desc'] == 'true') ? 'Atlantic Hit Mix Calendar<br />' : ''); echo((isset($_GET['year']) && $_GET['year'] != '') ? $_GET['year'] . '<br />' : ''); echo('<br /><a href="http://www.sergeevstudio.com">Photos by Lyubomir Sergeev</a></p>'); break; case '/demo/3': echo('<p><img src="' . $base . '/images/3.png" alt="Portfolio 3" width="400" height="300" /><br />'); echo((isset($_GET['desc']) && $_GET['desc'] == 'true') ? 'Atlantic Hit Mix Calendar<br />' : ''); echo((isset($_GET['year']) && $_GET['year'] != '') ? $_GET['year'] . '<br />' : ''); echo('<br /><a href="http://www.sergeevstudio.com">Photos by Lyubomir Sergeev</a></p>'); break; case '/editeur-AS3-FDT': echo('<p>Nulla nec nunc id urna mollis molestie. Suspendisse potenti. Aliquam vitae dui. In semper ante eu massa. Praesent quis nunc. Vestibulum tristique tortor.</p>'); break; default: echo('<p><!-- Status(404 Not Found) -->Page not found.</p>'); break; } ?> |
[/codesyntax]
Création du fichier index.php
Dans mon exemple, j’ai appelé ce fichier swfaddress_exemple.php.
Il vous suffit de copier-coller l’ensemble du code php ci-dessous dans votre fichier.
[codesyntax lang= »php » title= »index.php » bookmarkname= »index.php »]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 | <?php // SWFAddress code fully compatible with Apache HTTPD $swfaddress_value = '/'; $swfaddress_path = '/'; $swfaddress_parameters = array(); $swfaddress_content = ''; function is_msie() { return strstr(strtoupper($_SERVER['HTTP_USER_AGENT']), 'MSIE'); } function swfaddress() { global $swfaddress_value, $swfaddress_path, $swfaddress_parameters, $swfaddress_content; $base = swfaddress_base(); session_start(); if ('application/x-swfaddress' == (isset($_SERVER['CONTENT_TYPE']) ? $_SERVER['CONTENT_TYPE'] : (isset($_SERVER['HTTP_CONTENT_TYPE']) ? $_SERVER['HTTP_CONTENT_TYPE'] : ''))) { $swfaddress_value = preg_replace('/&hash=(.*)$/', '#$1', $_SERVER['QUERY_STRING']); $_SESSION['swfaddress'] = $swfaddress_value; echo('location.replace("' . $base . '/#' . $swfaddress_value . '")'); exit(); } if (isset($_SESSION['swfaddress'])) { $swfaddress_value = $_SESSION['swfaddress']; unset($_SESSION['swfaddress']); } else { $page = substr($_SERVER['PHP_SELF'], strrpos($_SERVER['PHP_SELF'], '/') + 1); $swfaddress_value = str_replace($base, '', (strpos($page, '.php') && $page != 'index.php') ? $_SERVER['REQUEST_URI'] : str_replace($page, '', $_SERVER['REQUEST_URI'])); } $query_string = (strpos($swfaddress_value, '?')) ? substr($swfaddress_value, strpos($swfaddress_value, '?') + 1, strlen($swfaddress_value)) : ''; if ($query_string != '') { $swfaddress_path = substr($swfaddress_value, 0, strpos($swfaddress_value, '?')); $params = explode('&', str_replace($swfaddress_path . '?', '', $swfaddress_value)); for ($i = 0; $i < count($params); $i++) { $pair = explode('=', $params[$i]); $swfaddress_parameters[$pair[0]] = $pair[1]; } } else { $swfaddress_path = $swfaddress_value; } $url = strtolower(array_shift(explode('/', $_SERVER['SERVER_PROTOCOL']))) . '://'; $url .= $_SERVER['SERVER_NAME']; $url .= swfaddress_base() . '/datasource.php?swfaddress=' . $swfaddress_path; $url .= (strpos($swfaddress_value, '?')) ? '&' . substr($swfaddress_value, strpos($swfaddress_value, '?') + 1, strlen($swfaddress_value)) : ''; $fh = fopen($url, 'r'); while (!feof($fh)) { $swfaddress_content .= fgets($fh, 4096); } fclose($fh); if (strstr($swfaddress_content, 'Status(')) { $begin = strpos($swfaddress_content, 'Status(', 0); $end = strpos($swfaddress_content, ')', $begin); $status = substr($swfaddress_content, $begin + 7, $end - $begin - 7); if (php_sapi_name() == 'cgi') { header('Status: ' . $status); } else { header('HTTP/1.1 ' . $status); } } if (is_msie()) { $if_modified_since = isset($_SERVER['HTTP_IF_MODIFIED_SINCE']) ? preg_replace('/;.*$/', '', $_SERVER['HTTP_IF_MODIFIED_SINCE']) : ''; $file_last_modified = filemtime($_SERVER['SCRIPT_FILENAME']); $gmdate_modified = gmdate('D, d M Y H:i:s', $file_last_modified) . ' GMT'; if ($if_modified_since == $gmdate_modified) { if (php_sapi_name() == 'cgi') { header('Status: 304 Not Modified'); } else { header('HTTP/1.1 304 Not Modified'); } exit(); } header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400) . ' GMT'); header('Last-Modified: ' . $gmdate_modified); header('Cache-control: max-age=' . 86400); } } function swfaddress_base() { return substr($_SERVER['PHP_SELF'], 0, strrpos($_SERVER['PHP_SELF'], '/')); } function swfaddress_title($title) { if (!is_msie()) { $names = swfaddress_path_names(); for ($i = 0; $i < count($names); $i++) { $title .= ' / ' . strtoupper(substr($names[$i], 0, 1)) . substr($names[$i], 1); } } echo($title); } function swfaddress_resource($resource) { echo(swfaddress_base() . $resource); } function swfaddress_link($link) { echo(swfaddress_base() . $link); } function swfaddress_content() { global $swfaddress_content; echo($swfaddress_content); } function swfaddress_path() { global $swfaddress_path; return $swfaddress_path; } function swfaddress_path_names() { global $swfaddress_path; $names = explode('/', $swfaddress_path); if (substr($swfaddress_path, 0, 1) == '/') array_splice($names, 0, 1); if (substr($swfaddress_path, count($swfaddress_path) - 1, 1) == '/') array_splice($names, count($names) - 1, 1); return $names; } function swfaddress_optimizer($resource) { global $swfaddress_value; $base = swfaddress_base(); echo($base . $resource . (strstr($resource, '?') ? '&amp;' : '?') . 'swfaddress=' . urlencode($swfaddress_value) . '&amp;base=' . urlencode($base)); } swfaddress(); ?> |
[/codesyntax]
A la suite de code, vous appelez les 3 fichiers javascript, avec une fonction php, pour configurer le fonctionnement de votre application flash.
Pensez à modifier les chemins d’accès javascript en fonction de leur emplacement sur votre serveur web (/js/ dans mon exemple).
[codesyntax lang= »php » title= »swfaddress » bookmarkname= »swfaddress »]
1 2 3 4 5 6 | <script type="text/javascript" src="<?php swfaddress_optimizer('/js/swfaddress-optimizer.js?flash=8'); ?>"></script> <title><?php swfaddress_title('AS3 facile'); ?></title> <script type="text/javascript" src="<?php swfaddress_resource('/js/swfobject.js'); ?>"></script> <script type="text/javascript" src="<?php swfaddress_resource('/js/swfaddress.js'); ?>"></script> |
[/codesyntax]
Ensuite, il vous reste à afficher votre application flash avec SWFObject.
[codesyntax lang= »php » title= »SWFObject » bookmarkname= »SWFObject »]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <script type="text/javascript"> var flashvars = { }; var params = { menu: "false", scale: "noScale", allowFullscreen: "true", allowScriptAccess: "always", bgcolor: "#F8F8FF" }; var attributes = { id:"AS3facileSWFAddress" }; swfobject.embedSWF("swfaddress_exemple.swf", "altContent", "550", "400", "10.0.0", "expressInstall.swf", flashvars, params, attributes); </script> |
[/codesyntax]
Création du code source AS3
Une fois l’initialisation de votre application effectuée, vous ajoutez un écouteur sur les évènements diffusés par SWFAddress.
Cela permet à votre application Flash de se mettre à jour automatiquement en fonction des évènements reçus par SWFAddress (en javascript ou flash).
Dans notre exemple, la fonction handleSWFAddress sera appelée à chaque évènement reçu.
[codesyntax lang= »actionscript3″ title= »SWFAddress.as » bookmarkname= »SWFAddress.as »]
1 | SWFAddress.addEventListener(SWFAddressEvent.CHANGE, handleSWFAddress); |
[/codesyntax]
C’est la fonction handleSWFAddrress qui, en fonction du paramètre reçu dans e.value, affiche l’interface choisi par votre internaute.
[codesyntax lang= »actionscript3″ title= »SWFAddress.as » bookmarkname= »SWFAddress.as »]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | /** * Fonction servant à écouter le changement de page avec SWFAddress. * On appelle la fonction permettant de créer l'interface appelée par l'utilisateur * * @param e Evenement de type SWFAddressEvent */ function handleSWFAddress(e:SWFAddressEvent) : void { Logger.debug("Appel de handleSWFAddress : "+e.value); clearAllScreen(); try { if (e.value == '/' || e.value == A_PROPOS) { buildAProposScreen(); } else if (e.value == DEMO) { buildDemoScreen(); } else if (e.value == DEMO_1) { buildDemo1Screen(); } else if (e.value == DEMO_2) { buildDemo2Screen(); } else if (e.value == DEMO_3) { buildDemo3Screen(); } else if (e.value == EDITEUR) { buildEditeurScreen(); } } catch(err:Object) { //gotoAndStop('$/error/'); } var title:String = 'ActionScript-Facile.com'; for (var i:Number = 0; i < e.pathNames.length; i++) { title += ' / ' + e.pathNames[i].substr(0,1).toUpperCase() + e.pathNames[i].substr(1); } SWFAddress.setTitle(title); SWFAddress.setStatus(title); Logger.debug("title de SWFAddress : "+title); } |
[/codesyntax]
Récupération des paramètres de l’url
Avec SWFAddress, il est possible de récupérer les variables transmises dans l’url du navigateur. Cela est très pratique pour transmettre des valeurs à votre application Flash.
J’ai ajouté un exemple de code AS3 dans la fonction handleSWFAddress qui écoute tous les évènements.
[codesyntax lang= »actionscript3″ title= »paramètres de l’url » bookmarkname= »paramètres de l’url »]
1 2 3 4 5 6 7 8 9 10 11 12 | // pour récupérer les paramètres transmis dans l'url du navigateur var parameters:String = ''; var name:String; var valueParam:String; for (var p in SWFAddress.getParameterNames()) // parcours le tableau de tous les paramètres { name = SWFAddress.getParameterNames()[p];// le nom du paramètre valueParam = SWFAddress.getParameter(SWFAddress.getParameterNames()[p]) as String; // la valeur du paramètre parameters += '&' + name + '=' + valueParam; Logger.debug("parameters "+name+" de SWFAddress : "+valueParam ); } Logger.debug("parameters de SWFAddress : "+parameters); |
[/codesyntax]
Téléchargement code source AS3 de SWFAddress
Vous trouverez ci-dessous un exemple complet avec SWFAddress et le Framework de Composants AS3 Facile.
Télécharger “SWFAddress Exemple” swfaddress_framework_actionscript-facile.zip – Téléchargé 878 fois – 93,74 KoTestez l’Application Flash de notre tutoriel.
Naviguez et regardez la barre d’adresse, de statut et le titre de la page.
Essayer les boutons précédent / suivant de votre navigateur.
Cliquez sur une des url ci-dessous pour afficher directement une interface précise :
- Interface Démonstration 3
- Interface Éditeur AS3
Code source AS3 commenté de notre exemple avec SWFAddress
- SWFAddressExample.as
[codesyntax lang= »actionscript3″ title= »SWFAddressExample.as » bookmarkname= »SWFAddressExample.as »]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 | package { import com.asual.swfaddress.SWFAddress; import com.asual.swfaddress.SWFAddressEvent; import com.as3facileexemple.skin.classic.DefaultButtonSkin2; import com.as3facileexemple.skin.classic.DefaultButtonSkin; import org.osflash.thunderbolt.Logger; import flash.events.MouseEvent; import flash.display.Sprite; import com.actionscriptfacile.ui.button.Button; import com.actionscriptfacile.ui.text.UITextField; /** * Exemple d'utilisation des fonctionnalités de SWFAddress avec des Composants du Framework AS3 ActionScript-Facile. * * @author Matthieu */ public class SWFAddressExample extends Sprite { private var oTextApropos:UITextField; private var oTextDemo : UITextField; /** listes des url vers les différentes pages **/ static private const A_PROPOS:String = "/a-propos/"; static private const DEMO:String = "/demo/"; static private const DEMO_1:String = "/demo/1/?desc=yes&label=Button1"; static private const DEMO_2:String = "/demo/2/?desc=no&label=Button2"; static private const DEMO_3:String = "/demo/3/?desc=order&label=Button3"; static private const EDITEUR : String = "/editeur-AS3-FDT/"; private var buttonDemo1 : Button; private var buttonDemo2 : Button; private var buttonDemo3 : Button; public function SWFAddressExample() { // construction du menu var buttonAbout:Button = new Button(); buttonAbout.label = 'A Propos'; buttonAbout.applySkin( new DefaultButtonSkin2() ); // on écoute les changements qui interviennent sur le bouton buttonAbout.addEventListener(MouseEvent.CLICK, showApropos ); buttonAbout.resize( 120, 30 ); buttonAbout.x = 10; buttonAbout.y = 10; addChild( buttonAbout ); // acccès au composant de type UITextField (labelField) buttonAbout.labelField.alignCenter(); // centre le texte buttonAbout.labelField.changeFormat("color", 0x000000);// changement de la couleur du texte buttonAbout.labelField.changeFormat("size", 14);// changement de la taille de la police du texte buttonAbout.labelField.changeFormat("font", "Arial");// changement de la police du texte var buttonDemo:Button = new Button(); buttonDemo.label = 'Exemples'; buttonDemo.applySkin( new DefaultButtonSkin2() ); // on écoute les changements qui interviennent sur le bouton buttonDemo.addEventListener(MouseEvent.CLICK, showDemo ); buttonDemo.resize( 120, 30 ); buttonDemo.x = buttonAbout.x + buttonAbout.width + 10; buttonDemo.y = 10; addChild( buttonDemo ); // acccès au composant de type UITextField (labelField) buttonDemo.labelField.alignCenter(); // centre le texte buttonDemo.labelField.changeFormat("color", 0x000000);// changement de la couleur du texte buttonDemo.labelField.changeFormat("size", 14);// changement de la taille de la police du texte buttonDemo.labelField.changeFormat("font", "Arial");// changement de la police du texte var buttonEditeur:Button = new Button(); buttonEditeur.label = 'Éditeur AS3'; buttonEditeur.applySkin( new DefaultButtonSkin2() ); // on écoute les changements qui interviennent sur le bouton buttonEditeur.addEventListener(MouseEvent.CLICK, showEditeur ); buttonEditeur.resize( 120, 30 ); buttonEditeur.x = buttonDemo.x + buttonDemo.width + 10; buttonEditeur.y = 10; addChild( buttonEditeur ); // acccès au composant de type UITextField (labelField) buttonEditeur.labelField.alignCenter(); // centre le texte buttonEditeur.labelField.changeFormat("color", 0x000000);// changement de la couleur du texte buttonEditeur.labelField.changeFormat("size", 14);// changement de la taille de la police du texte buttonEditeur.labelField.changeFormat("font", "Arial");// changement de la police du texte /* * ATTENTION : dans une application flash robuste et optimisée, nous n'utiliserons pas cette méthode. * Plutôt le Design Pattern Modèle Vue Controller avec PureMVC par exemple. * * Les pages ou interfaces seraient (en fonction de la taille de l'application flash) : * soient chargées en mémoire mais non affichées dans la display list. * soient créées à chaque appel. * * Nous verrons cela dans un prochain article. */ // lance la construction de toutes les pages buildAllScreen(); // initialisation de SWFAddress SWFAddress.addEventListener(SWFAddressEvent.CHANGE, handleSWFAddress); } /** * Construit toutes les interfaces, sans les afficher dans la display list */ private function buildAllScreen() : void { // Page A Propos oTextApropos = new UITextField(); oTextApropos.x = 5; oTextApropos.y = 70; oTextApropos.width = oTextApropos.maxWidth = 500; oTextApropos.height = oTextApropos.maxHeight = 350; oTextApropos.selectable = false; oTextApropos.multiline = true; // pour la balises html <br /> oTextApropos.changeFormat("font", "Arial");// changement de la taille de la police du texte oTextApropos.changeFormat("color", Math.random() * 0X00FFFFFF);// changement de la couleur oTextApropos.wordWrap = true;// retour à la ligne automatique addChild(oTextApropos); // Page Demo oTextDemo = new UITextField(); oTextDemo.x = 5; oTextDemo.y = 70; oTextDemo.width = oTextApropos.maxWidth = 500; oTextDemo.height = oTextApropos.maxHeight = 350; oTextDemo.selectable = false; oTextDemo.multiline = true; // pour la balises html <br /> oTextDemo.changeFormat("font", "Arial");// changement de la taille de la police du texte oTextDemo.changeFormat("color", Math.random() * 0X00FFFFFF);// changement de la couleur oTextDemo.wordWrap = true;// retour à la ligne automatique addChild( oTextDemo ); // Création des bouttons Demo 1, Demo 2 et Demo 3 // boutton demo1 buttonDemo1 = new Button(); buttonDemo1.label = '1'; buttonDemo1.applySkin( new DefaultButtonSkin() ); // on écoute les changements qui interviennent sur le bouton buttonDemo1.addEventListener(MouseEvent.CLICK, showDemo1 ); buttonDemo1.resize( 25, 25 ); buttonDemo1.x = 155; buttonDemo1.y = 40; addChild( buttonDemo1 ); // acccès au composant de type UITextField (labelField) buttonDemo1.labelField.alignCenter(); // centre le texte buttonDemo1.labelField.changeFormat("color", 0x000000);// changement de la couleur du texte buttonDemo1.labelField.changeFormat("size", 14);// changement de la taille de la police du texte buttonDemo1.labelField.changeFormat("font", "Arial");// changement de la police du texte buttonDemo1.visible = false; // boutton demo2 buttonDemo2 = new Button(); buttonDemo2.label = '2'; buttonDemo2.applySkin( new DefaultButtonSkin() ); // on écoute les changements qui interviennent sur le bouton buttonDemo2.addEventListener(MouseEvent.CLICK, showDemo2 ); buttonDemo2.resize( 25, 25 ); buttonDemo2.x = buttonDemo1.x + buttonDemo1.width + 5; buttonDemo2.y = 40; addChild( buttonDemo2 ); // acccès au composant de type UITextField (labelField) buttonDemo2.labelField.alignCenter(); // centre le texte buttonDemo2.labelField.changeFormat("color", 0x000000);// changement de la couleur du texte buttonDemo2.labelField.changeFormat("size", 14);// changement de la taille de la police du texte buttonDemo2.labelField.changeFormat("font", "Arial");// changement de la police du texte buttonDemo2.visible = false; // boutton demo3 buttonDemo3 = new Button(); buttonDemo3.label = '3'; buttonDemo3.applySkin( new DefaultButtonSkin() ); // on écoute les changements qui interviennent sur le bouton buttonDemo3.addEventListener(MouseEvent.CLICK, showDemo3 ); buttonDemo3.resize( 25, 25 ); buttonDemo3.x = buttonDemo2.x + buttonDemo2.width + 5; buttonDemo3.y = 40; addChild( buttonDemo3 ); // acccès au composant de type UITextField (labelField) buttonDemo3.labelField.alignCenter(); // centre le texte buttonDemo3.labelField.changeFormat("color", 0x000000);// changement de la couleur du texte buttonDemo3.labelField.changeFormat("size", 14);// changement de la taille de la police du texte buttonDemo3.labelField.changeFormat("font", "Arial");// changement de la police du texte buttonDemo3.visible = false; } /** * Fonction servant à écouter le changement de page avec SWFAddress. * On appelle la fonction permettant de créer l'interface appelée par l'utilisateur * * @param e Evenement de type SWFAddressEvent */ private function handleSWFAddress(e:SWFAddressEvent) : void { Logger.debug("Appel de handleSWFAddress : "+e.value); clearAllScreen(); // en fonction de la valeur reçu dans l'évènement, nous affichons l'interface demandée par l'utilisateur try { if (e.value == '/' || e.value == A_PROPOS) { buildAProposScreen(); } else if (e.value == DEMO) { buildDemoScreen(); } else if (e.value == DEMO_1) { buildDemo1Screen(); } else if (e.value == DEMO_2) { buildDemo2Screen(); } else if (e.value == DEMO_3) { buildDemo3Screen(); } else if (e.value == EDITEUR) { buildEditeurScreen(); } } catch(err:Object) { // il est possible d'afficher un message d'erreur à l'internaute //gotoAndStop('$/error/'); } // configure le titre de la page dans votre navigateur var title:String = 'ActionScript-Facile.com'; for (var i:Number = 0; i < e.pathNames.length; i++) { title += ' / ' + e.pathNames[i].substr(0,1).toUpperCase() + e.pathNames[i].substr(1); } SWFAddress.setTitle(title); SWFAddress.setStatus(title); Logger.debug("title de SWFAddress : "+title); /* * Permet de récupérer l'url de l'interface appelée */ var path:String = e.path; if (path.substr(path.length - 1) != '/') { path = path + '/'; } Logger.debug("path de SWFAddress : "+path); // pour récupérer les paramètres transmis dans l'url du navigateur var parameters:String = ''; var name:String; var valueParam:String; for (var p:String in SWFAddress.getParameterNames()) // parcours le tableau de tous les paramètres { name = SWFAddress.getParameterNames()[p];// le nom du paramètre valueParam = SWFAddress.getParameter(SWFAddress.getParameterNames()[p]) as String; // la valeur du paramètre parameters += '&' + name + '=' + valueParam; Logger.debug("parameters "+name+" de SWFAddress : "+valueParam ); } Logger.debug("parameters de SWFAddress : "+parameters); // SWFAddress.popup('http://www.sergeevstudio.com','lyubomirsergeev', '"toolbar=0,location=0,status=0,menubar=0,scrollbars=0,resizable=1,width=960,height=620,left=" + (screen.width - 960)/2 + ",top=" + (screen.height - 620)/2', 'popup.focus();'); } private function buildEditeurScreen() : void { oTextApropos.htmlText = "<font color='#ff0000' face='arial, time' size='22'><b>Comment utiliser le plus " + "abouti des Éditeurs ActionScript en moins de minutes ?</b></font><br /><br />" + "Avec un Éditeur ActionScript performant, il est possible de se simplifier énormément la" + " programmation en ActionScript Flash." + "<br /><br />" + "Le logiciel FDT permet de développer des applications ActionScript (AS3, AS2, MXML, Flex et haXe) avec beaucoup plus de rapidité." + "<br /><br /><font color='#0000FF' face='arial, time' size='18'>" + "<a href='http://bonus.actionscript-facile.com/comment-developper-facilement-en-actionscript' target='_blank'>" + "Téléchargez gratuitement votre exemplaire du <b>guide Éditeur ActionScript FDT PowerFlasher</b></a></font>"; oTextApropos.visible = true; } private function buildDemo3Screen() : void { buttonDemo1.visible = true; buttonDemo2.visible = true; buttonDemo3.visible = true; oTextDemo.htmlText = "<img src='https://e6msyji6epr.exactdn.com/wp-content/uploads/2010/09/list_exemple.swf' " + "hspace='3' height='200' width='450' id='idimag' align='left'/>"; oTextDemo.visible = true; } private function buildDemo2Screen() : void { buttonDemo1.visible = true; buttonDemo2.visible = true; buttonDemo3.visible = true; oTextDemo.htmlText = "<img src='https://e6msyji6epr.exactdn.com/wp-content/uploads/2010/09/button_exemple.swf' " + "hspace='3' height='250' width='250' id='idimag' align='left'/>"; oTextDemo.visible = true; } private function buildDemo1Screen() : void { buttonDemo1.visible = true; buttonDemo2.visible = true; buttonDemo3.visible = true; oTextDemo.htmlText = "<img src='https://e6msyji6epr.exactdn.com/wp-content/uploads/2010/09/tooltip_exemple.swf' " + "hspace='3' height='200' width='450' id='idimag' align='left'/>"; oTextDemo.visible = true; } private function clearAllScreen() : void { oTextDemo.visible = false; oTextApropos.visible = false; buttonDemo1.visible = false; buttonDemo2.visible = false; buttonDemo3.visible = false; } private function buildDemoScreen() : void { buttonDemo1.visible = true; buttonDemo2.visible = true; buttonDemo3.visible = true; oTextDemo.htmlText = "<font color='#ff0000' face='arial, time' size='22'><b>Des exemples de swf" + " utilisant le Framework de Composants AS3 Facile" + " simplement et avec efficacité.</b></font><br /><br />" + "Choisissez le composant que vous souhaitez visualiser avec les boutons 1, 2 et 3 du menu.<br /><br /><br /><br />" + "<font color='#0000FF' face='arial, time' size='10'>Pour le composant du Bouton N°1, merci de patienter quelques secondes," + " le temps d'initilisation du composant.</font>"; oTextDemo.visible = true; } /** * Construit l'interface A Propos * */ private function buildAProposScreen() : void { oTextApropos.htmlText = "<font color='#ff0000' face='arial, time' size='22'><b>Avec le Framework de Composants AS3 Facile, programmez en ActionScript" + " simplement et avec efficacité.</b></font><br /><br />" + "Le <b>Framework ActionScript-Facile</b> est développé en pure AS3.<br /><br />" + "Vous pouvez créer et utiliser les composants suivants : <br />" + " <b>Un Button</b> : comme son nom l’indique – un bouton.<br />" + " <b>Une ScrollBar Verticale </b>: la classique barre de défilement.<br />" + " <b>Une List </b>: la fameuse liste d’éléments.<br />" + " <b>Une ComboBox</b> : une liste déroulante.<br />" + " <b>Un TextField </b>: gestion facilité du Texte dans Flash.<br />" + " <b>Un ToolTip </b>: une infos bulle ou bulle d’information.<br />" + " <b>Un changement de skin en « live » </b>: tout l’intérêt de Flash avec un changement à la volée du graphisme!" + "<br /><br />" + "<font color='#0000FF' face='arial, time' size='18'>" + "<a href='http://bonus.actionscript-facile.com/bibliotheque-flash-de-composants-as3-facile' target='_blank'>" + "<b>Téléchargez gratuitement la dernière version du Framework AS3 Facile</b></a></font>"; oTextApropos.visible = true; } /** * Fonction servant à écouter les click de l'utilisateur sur le boutton A Propos du menu. * Définit la valeur de SWFAddress pour générer un évènement et construire l'interface à propriée. * * @param e Evenement de type MouseEvent.CLICK */ private function showApropos(e:MouseEvent) : void { Logger.debug("Intéraction sur le menu : "+e.target.label);// récupère l'objet Button cliqué par l'internaute SWFAddress.setValue(A_PROPOS);// créé un évènement dans SWFAddress pour afficher l'interface demandée par l'internaute } private function showDemo(e:MouseEvent) : void { // Récupère l'objet Button et ses propriétés (label, le texte du bouton) Logger.debug("Intéraction sur le menu : " + e.target.label); SWFAddress.setValue(DEMO); } private function showDemo1(event : MouseEvent) : void { SWFAddress.setValue(DEMO_1); } private function showDemo2(event : MouseEvent) : void { SWFAddress.setValue(DEMO_2); } private function showDemo3(event : MouseEvent) : void { SWFAddress.setValue(DEMO_3); } private function showEditeur(event : MouseEvent) : void { SWFAddress.setValue(EDITEUR); } } } |
[/codesyntax]
Montrez moi vos applications flash utilisant SWFAddress
Ou peut être utilisez-vous une autre technique plus simple ?
Partagez votre technique dans les commentaires ci-dessous.