Publié le 5 avril 2009 par Dawlin

Charger HTML ou PhP dans un fichier flash

Bonjour, voici un tutoriel fort pratique qui vous permettra d'afficher le contenu d'une page HTML ou PHP dans FLASH, incluant ainsi images, texte, liens, grâce à une mise en forme CSS, grâce à Action Script 2.

Création du code HTML/CSS

Le HTML

Tout d'abord, le code HTML. ouvrez votre éditeur de code favori et créez votre page HTML presque comme bon vous semble, à ceci près que la structure est celle d'un XML et pas celle d'un HTML...

Je m'explique : un balise <strong></strong> ne sera pas lue par flash comme si c'était du gras, il va falloir la définir dans le CSS. Vous n'aurez pas d'id de texte à marquer, mais directement un nom de balise. vous n'aurez pas non-plus de balise

. Vous gérez tous les retours à la ligne avec des <br /> et vous notez soigneusement, sauf pour lien et images, les noms des balises que vous utilisez.

J'ai fait un exemple de page, disponible ici : Page HTML à charger

Le CSS

Là, vous définissez le CSS en fonction du nom des balises, voir la feuille CSS d'exemple que j'ai créée, et la comparer avec la page HTML disponible plus haut.

Feuille CSS à charger

Voilà, une bonne chose de faite.

Création du code flash

Ouvrez Flash, créez un nouveau document, dans lequel vous placez n'importe quelle mise en page, symboles d'agrémentation comme si c'était un flash normal, avec en plus un champ de texte que nous allons ici prénommer d'occurrence "champ", multiligne, auquel vous faites glisser une scrollbar :

Maintenant créez un nouveau calque pour les actions (personnellement, je préfères séparer mes code du contenu, ce n'est pas obligé mais c'est plus propre. Je mets aussi toujours les noms de calques ActionScript en majuscule) :

Et maintenant, LE CODE !!!

Le code AS2

On commence par créer la variable qui nous servira à accueillir le code CSS :

Code

// Création de la variable de type style css
var style1:TextField.StyleSheet = new TextField.StyleSheet();
// chargement du css dedans
style1.load("style.css");
//application au champ
champ.styleSheet = style1;

Maintenant on défini les paramètres de M. Champ de texte :

Code

//définition des paramètres du champ de texte.
champ.multiline= true;
champ.wordWrap = true;
champ.html = true;

Et pour fini on charge la page et on l'implante :

Code

// On va maintenant charger notre page en tant que XML dans une variable
var page:XML = new XML();
//On ignore les blancs
page.ignoreWhite = true;
// On charge le fichier
page.load("page.html");
page.onLoad = function () {
// et on attribue son contenu au texte "champ"
champ.htmlText = page;
}

Voilà, pour avoir un aperçu du résultat, c'est ici :

Chargement de page HTML dans flash

Pour avoir les sources complètes, c'est là (.zip de 276Ko) : Sources

Juste le .fla : tuto.fla

Voilà, j'espère que ce tutoriel vous a aidé !