Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox



Inserer une page html

Compatible ActionScript 2. Cliquer pour en savoir plus sur les compatibilités.Par k-ny

Article écrit le 10/04/2007 11:40.
Par k-ny ( Blog ).



Une question récurente, que l'on voit revenir assez souvent sur le forum:

Comment inserer une page html dans une animation flash ?

Et bien c'est impossible !

Enfin dans le sens strict du terme, flash ne peut pas simuler le comportement d'une iframe ! Mais je vous rassure, on peut tout de mème réussir à charger une page html et a en affiché le contenu. Par contre, votre animation ne reconnaitra que les balises natives de Flash. Donc aucunes balises exotiques, ni de div personnalisées, juste la base …

Mais on peut quand mème réussir à manipuler le code source de la page chargée, pour en isoler certaines infos, ou pour se faire sa propre mise en forme pour palier aux manques de balises de flash.

Au programme

Preface

Pour l'exemple

Dans les 2 exemple ci-dessous, j'ai utilisé un fichier “test.html” se trouvant dans le mème dossier que mon swf. Il faut savoir que pour pouvoir charger un fichier distant (autre domaine), il vous faudra ruser en passant soit par un fichier php, soit par crossdomain.xml. Cette methode de contournement, je l'explique dans cette autre tuto: Charger un fichier distant

Utilisation de loadvars

Pour recuperer le code source de notre page html, on va evidement utiliser la classe loadvars, qui permet de loader casi n'importe quel fichier dans flash.

Usuellement, si vous vous ètes déjà servi de loadvars, vous savez que l'on se sert de l'evenement “onLoad” pour savoir si le fichier a bien été chargé, et executé notre code seulement à partir de ce moment.

Et bien dans notre cas, on va utiliser un autre evenement, car “onLoad” va interpéter les données chargées (comme les variables de type ”&mavar=montexte&autrevar=autre texte&”), ce qui evidement ne nous interèsse pas, etant donné que notre but c'est de recuperer le code sources de la page sans aucune interpretation.

Donc pour mes exemple, je vais utiliser l'evenement “onData”:

  "Invoqué lorsque les données ont été totalement téléchargées à partir du serveur ou 
  lorsqu'une erreur se produit au cours du téléchargement des données à partir d'un serveur. 
  Ce gestionnaire est invoqué avant l'analyse des données et peut être utilisé pour appeler 
  une routine d'analyse personnalisée au lieu de celle intégrée à Flash Player"



(La routine integrée à Flash est l'evenement “onLoad”)

Exemple n°1: recuperation d'une page html dans un champs de texte html

/********************************************************
 
  Creation et paramètres du champs de texte recepteur
 
*********************************************************/
//Creation du champs de texte
var txt_html:TextField = this.createTextField("txt_html", this.getNextHighestDepth(), 0, 0, Stage.width, Stage.height);
//Champs de texte multiligne
this.txt_html.multiline = true;
//On active le retour à la ligne automatique
this.txt_html.wordWrap = true;
//On supprime les blancs inutiles
this.txt_html.condenseWhite = true;
//On active le rendu html
this.txt_html.html = true;
/********************************************************
 
  Chargement de la page html et traitement des données
 
*********************************************************/
//On crée une reference à _root (pour le ciblage)
var root:MovieClip = this;
//On crée une nouvelle variable de chargement
var lorem_lv:LoadVars = new LoadVars();
//lorsque "lorem" est invoqué
this.lorem_lv.onData = function(src:String):Void  {
	if (src != undefined) {
		//si le fichier html est chargé alors...
		root.txt_html.htmlText = src;
	} else {
		//et si le ficher html n'est pas trouvé
		root.txt_html.htmlText = "Impossible de charger le fichier";
	}
};
//Url a charger
this.lorem_lv.load("test.html");

Cet exemple va donc creer un champs de texte au format html, et y placer le contenu de la page ”test.html
Vous allez vite vous rendre compte des limites de l'interpretation html de flash.
La casi totalité de la mise en forme à disparue, et en plus les images sont alignés à gauche.

Exemple n°2: recuperation de certaines données contenu dans une page html

/********************************************************
 
  Creation et paramètres du champs de texte recepteur
 
*********************************************************/
//Creation du champs de texte
var txt_html:TextField = this.createTextField("txt_html", this.getNextHighestDepth(), 0, 0, Stage.width, Stage.height);
//Champs de texte multiligne
this.txt_html.multiline = true;
//On active le retour à la ligne automatique
this.txt_html.wordWrap = true;
//On supprime les blancs inutiles
this.txt_html.condenseWhite = true;
//On active le rendu html
this.txt_html.html = true;
/********************************************************
 
  Chargement de la page html et traitement des données
 
*********************************************************/
//creation du tableau qui va stocker les liens
var lien:Array = new Array();
//On crée une reference à _root (pour le ciblage)
var root:MovieClip = this;
//On crée une nouvelle variable de chargement
var lorem_lv:LoadVars = new LoadVars();
//lorsque "lorem" est invoqué
this.lorem_lv.onData = function(src:String):Void  {
	if (src != undefined) {
		//si le fichier html est chargé alors...
		root.txt_html.htmlText = "Liste des liens: <br /><br />";
		//recuperation des liens
		root.lien = src.split("<a href=\"");
		//boucle sur le nombre de liens, on les insère dans notre champs de texte en les nettoyant
		for (var i:Number = 0; i<root.lien.length; i++) {
			//nettoyage
			root.lien[i] = root.lien[i].split("\"", 1)[0];
			//insertion
			root.txt_html.htmlText += "<a href='"+root.lien[i]+"'>"+root.lien[i]+"</a>";
		}
	} else {
		//et si le ficher html n'est pas trouvé
		root.txt_html.htmlText = "Impossible de charger le fichier";
	}
};
//Url a charger
this.lorem_lv.load("test.html");

Dans cette exemple, je recupère tous les liens se trouvant dans le code source de ma page ”test.html” via la fonction split. Puis je les insère dans notre champs de texte.
Donc à vous de ruser pour retirer les infos dont vous avez besoin.

Download

En savoir plus