FullScreen et intéraction d'une animation en plein écran

FullScreen et intéraction d'une animation en plein écran.

Tutorial : Lancer une page en fullscreen selon le navigateur et gestion d'une interface (Stage)
Auteur : ekameleon
Mail : ekameleon@flash-forum.net
(il est préférable pour toute question d'utiliser la salle intégration HTML du forum).

Contenu : 6 fichiers ->
- index.html, index.fla et index.swf
- interface.html, interface.fla et interface.swf

Principe : Voici un exemple de popup fullscreen plus classique avec l'utilisation d'un script Javascript contenu dans la page HTML contenant une animation FLASH.
Nous allons réaliser un bouton dans une animation flash qui va permettre de lancer une page HTML en fullscreen (popup) contenant une autre animation HTML. Pour l'exemple nous considérons que l'animation contenu dans le fullscreen sera l'interface d'un site.

1 - INDEX.FLA et INDEX.HTML

Pour des mesures d'intégration nous allons commencer par gérer l'affichage de notre animation servant d'accueil à notre site en fullscreen avec le code suivant :

Action Script


Stage.align = ""; // Animation toujours complètement centrée dans la page
Stage.scaleMode = "noScale";  // L'animation ne peut pas se redimensionner.
Stage.showMenu = false; // on ne permet pas l'affichage du menu étendu (bouton droit)

Sur la scène est placé un bouton ayant pour nom d'occurence "bouton" et qui permet d'éxécuter une fonction javascript nommée PleinEcran().
La fonction PleinEcran() est une fonction contenue dans la page HTML qui contient l'animation principale.
Voici le code javascript placé dans entre les balises <head> et </head> de la page "index.html" :

Code

Ce code est pratique car il fait une reconnaissance de l'OS (MAC ou PC) et du navigateur pour permettre dans la situation d'un navigateur autre que Internet Explorer d'ouvrir tout de même un popup qui prendra toute la taille de l'écran.

Remarques
- Seul InternetExplorer (version PC) permet un affichage réel en fullscreen.
- Il est possible d'étendre ce script pour une reconnaissance plus accrue des différents navigateurs et adapter au mieux ainsi les paramètres du popup. Pour toute question à ce sujet veuillez utiliser la salle Javascript de Dreamweaver Forum, merci

Revenons maintenant à notre animation principale et le code exacte que l'on doit mettre sur la scène principale pour notifier l'événement onPress du bouton :

Action Script


_root.bouton.onPress = function () {
	getURL ("java script:PleinEcran('interface.html')");
}

1 - INTERFACE.FLA et INTERFACE.HTML

Comme dans l'animation principale nous commençons par placer sur la scène principale un bouton qui servira de bouton pour fermer le popup et le "logo" flash forum qui permettront d'illustrer comment utiliser l'objet Stage dans un site de type fullscreen pour placer à tout moment les éléments de l'interface à leur place.

Soit les clips "fermer" et "logo" nous tapons le script suivant :

Action Script


Stage.align = "TL";

Stage.showMenu = false;

Stage.scaleMode = "noScale";

Stage.addListener(_root);


init = function () {

	_root.clip_Fermer._x = Stage.width - _root.clip_Fermer._width  -  20;

	_root.clip_Fermer._y = 20;

	_root.logo._x =  Stage.width - _root.logo._width  -  15;

	_root.logo._y =  Stage.height - _root.logo._height  -  15;

}


_root.onResize = init;

_root.onLoad = init;


_root.clip_Fermer.bouton_Fermer.onPress = function () {

	getURL ("java script:fermer()");

}

Explication :
- Stage.align = "TL" va permettre de centrer l'animation sur le coin "haut/gauche" de la fenêtre

- Stage.showMenu = false permet de neutraliser le menu étendu du flash player (bouton droit sur l'animation)

- Stage.scalMode = "noScale" permet de bloquer l'animation pour qu'elle ne se redimensionne jamais.

- Stage.addListener (_root) permet d'appliquer un écouteur sur la scène principale qui permet d'écouter à tout moment si la scène se redimensionne ou pas.

- init () est une fonction qui permet d'intégrer tous les événements qui se réaliseront quand la scène change de taille. Ici on place le bouton fermer en haut à droite à tout moment (consulter le dictionnaire link:actionscript pour tous les termes de ces expressions que vous ne comprenez pas) et le clip "mediabox" en bas à droite.

- _root.onResize = init ; permet d'invoquer la fonction init() à chaque redimensionnement de la scène.

- _root.onLoad = function permet dans le cas qu'il n'y ait pas de redimensionnement au lancement de l'animation de positionner correctement les clips malgré tout.

- Enfin on attribue un événement sur le bouton "fermer" pour fermer le popup, tout ceci est expliqué dans le tutorial : Fermer la page HTML de votre animation (MX)

Remarques importantes

- Sur Internet Explorer 6 il y a un problème sur les popups en général car il affiche souvant en transparent la barre de scroll à droite du navigateur, pour remédier à cela il suffit d'ajouter une petite ligne de code dans la balise <BODY> de la page HTML du popup comme ceci :

Code

<BODY scroll=no ...

(voir page html)

- Je vous conseille vivement d'ouvrir avec dreamweaver, ou le bloc note (tout éditeur de texte) les 2 pages HTML contenues dans ce tutorial et de bien les examiner. Tout le reste est expliqué dans les différents link:html du forum.

Pour toute question au sujet de ce tutorial veuillez utiliser la salle intégration HTML du forum, merci.

[Edit par Lilive] J'ai reformaté la présentation pour compatibilité avec les changements du forum [edit]

Fichier(s) joint(s)

index.zip (0octets)
Nombre de téléchargements: 6325

Adobe Flash: Formations & Forums: FullScreen et intéraction d'une animation en plein écran - Adobe Flash: Formations & Forums