Accueil | Tutoriaux

Tutoriaux : Ouverture de différentes pages dans une pop-up à l'aide de boutons flash
 

1. Introduction
 
Vous voulez intégrer dans les pages de votre site web une animation flash dans laquelle se trouvent des boutons qui permettent de faire apparaître le contenu de différentes pages web dans une pop-up. Nous allons utiliser à la fois ActionScript et Javascript : pour avoir une idée de ce que l'on cherche à réaliser, cliquez sur ce lien.
 
2. Flash et ActionScript
 

- Ouvrez le logiciel flash, créez un nouveau document. Dans votre bibliothèque, créez un bouton quelconque. Déposez sur la scène principale 4 occurrences de ce bouton et à l'aide du panneau "propriétés" nommez les btn0, btn1, btn2, btn3.
- Dans le même répertoire que votre animation créer 4 pages avec des contenus bien différentiables et nommez ces pages fractales.html, vangogh.html, mondrian.html et devinci.html. J'ai pris le soin de ne pas nommer ces pages mapage0.html, mapage1.html... afin de vous montrer que ces noms n'ont pas besoin d'être formatés ! Pour simplifier le tutoriel je vous propose de placer ces 4 pages dans le même répertoire mais ceci n'est pas une obligation : il suffira de modifier le code qui se trouve dans l'animation flash.
 
Dans le panneau "actions" de l'image clé n°1, placez le code suivant :
  
url = new Array(); 
url[0] = "devinci.html";
url[1] = "fractales.html";
url[2] = "vangogh.html";
url[3] = "mondrian.html";
 
for(var i = 0; i < 4; i++) {
var btn = _root["btn"+i];
btn.idpage = i;
btn.onPress = function() {
var adresse = "javascript:ouvrirpopup('"+url[this.idpage]+"')";
getURL(adresse);
}
}
 
Publiez votre animation au format flash. Un clic sur le bouton n°1 ouvrira une pop-up dans laquelle se trouvera le contenu de la page fractales.html tandis qu'un clic sur le bouton n°3 ouvrira une pop-up dans laquelle se trouvera le contenu de la page mondrian..html.
 
3. Dreamweaver et JavaScript
 
Si vous avez également publié votre animation au format html, à l'aide de votre éditeur de pages web préféré (pour ma part, il s'agit de Dreamweaver), ouvrez la page web contenant votre animation. Sinon, créez une page web nommée "mapage.html" et intégrez à l'intérieur de cette page votre animation flash. Repérez les balises html "<head>" et "</head>" dans le code source de votre page et placez entre ces deux balises le code JavaScript suivant :
  
<script language="javascript">
function ouvrirpopup(url) {
config = "width=350, height=250, ";
config += "toolbar=no, location=no, directories=no, ";
config += "status=no, menubar=no, scrollbars=no, resizable=no";
f = window.open(url,"", config);
}
</script>
 
Ce script permet d'ouvrir la page web dont l'adresse correspond à la chaîne de caractères url dans une fenêtre de 250 pixels de hauteur et de350 pixels de largeur. La chaîne url est un argument de la fonction ouvrirpopup. La valeur de cet argument dépend du bouton flash sur lequel vous allez cliquer.
 
4. Problèmes...
 

Si malgré mes explications les fenêtres ne s'ouvrent pas correctement c'est peut être à cause d'une ligne de code mal saisie ! En effet, soyez très vigilant lorsque vous tapez la ligne qui permet de définir la variable adresse dans l'animation flash :

var adresse = "javascript:ouvrirpopup('"+url[this.idpage]+"')";

Mettez vos lunettes ! Deux caractères de la ligne ci-dessus sont en rouge : si vous oubliez ces 2 caractères, les problèmes sont garantis. Comme quoi, parfois, la réussite ne tient pas à grand chose ={: -)
 
Accueil | Tutoriaux