Charger une page html dans une animation flash

Télécharger le projet
Commenter

Description

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.

Pour l'exemple:
---------------
Dans les 2 exemples du zip, 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 par un fichier php.
Cette methode de contournement, je l'explique dans cette autre billet: Charger un fichier distant

Je vous invite à lire le billet en question après avoir assimilé ce billet-ci ;)

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 exemples, 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")

Source / Exemple : 


/********************************************************
 
  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");

Conclusion :


Je joint un zip avec 2 exemples. Celui ci dessus, et un autre plus complexe qui permet par exemple de sortir et d'afficher tous les liens contenu dans le code source d'une page html

1er exemple (ci-dessus):
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.

2ème exemple (dans le zip):
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 ;)

Ps: Plus d'infos sur http://blog.ka-studio.net/index.php?2007/02/10/26-flash-loading-loader-charger-afficher-page-html

Ps2: un tuto sur comment charger un fichier d'un autre domaine en passant par dessus la securiète interdomaine de flash arrive dans quelques minutes ...
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (cs_x_mec)