Imprimer

[RMistral (Wisi)]

Bonjour,



Je vous propose ici une réflexion sur l'architecture d'un site Full Flash. Il ne s'agit pas d'un tutorial mais d'une comparaison, sur la base d'un même site factice, sur les 3 méthodes de conception.

Cette réflexion s'adresse à des gens ayants déjà le vocabulaire propre à Flash et une petite expérience avec le logiciel. (Graphiste non développeur ou développeur débutant, créateur de bannière, créateur micro site full Flash, créateur de jeux...)

Lisez les pages à l'intérieur des sites exemples pour comprendre comment ils sont architecturés. N'hésitez pas à prendre des notes et à me solliciter pour un complément d'information.

Architecture Mono Fichier

Cette conception est la suite logique pour un développeur habitué à faire des bannières en Flash.

 C'est la plus mauvaise façon de réaliser un site Full Flash.

Le site factice le démontre amplement. Sont poids est de 184Ko dans un seul fichier pour 5 pages. Il n'y a pas de barre de préload car j'ai pas trop le temps alors un peu de patience au téléchargement.

Architecture Multi Niveaux (Pensez à déplacer les "barres niveau" pour visualiser clairement l'architecture du site.)

Ici le même site est scindé en X fichiers SWF. Les différents éléments s'empilent sur des Niveaux. Chaque fichiers est plus petit et ne demande donc pas de barre de préload. Cette méthode est à choisir si vous êtes débutants car elle requiert peu de code et est très simple à mettre en œuvre. De plus associé avec le composant loader elle permet l'externalisation des photos. Avec un minimum de code supplémentaire il est aussi envisageable d'externaliser le texte dans des fichiers textes.

Architecture MovieClip (A venir en fonction de vos réactions et de vos questions...)

Cette organisation s'adresse à des gens ayants la maitrise des niveaux et souhaitant faire des sites plus ambitieux. Elle requiert une bonne compréhension des bases de la programmation ActionScript. Ici avec une connexion à une base de données (Access, My SQL) les sites dynamiques, marchands, sont réalisables.

C'est la meilleure méthode pour faire un site Full Flash.



Et après ? (A venir en fonction de vos réactions et de vos questions...)

Nous entrons dans le domaine des spécialistes de Flash. Création de classe d'objet, travail en équipe, gros voir très gros projet.... Vous devez avoir acquis les notions de POO (programmation orienté objet). Et la gestion d’une base de données n’est plus un problème pour vous.



Maintenant à vous de juger et bonne lecture ..........

[Chrys]

C'est clair, la deuxième solution me parait plus facile a gérer (je ne dis pas plus facile à faire :/).
En ayant toutes les parties séparer, j'imagine que cela est plus simple par la suite, pour faire des mises a jour, ou transformation sur certaines pages, etc …

Mais j'imagine aussi, GROS travail de préparation !!

J'attends la suite

/Chrys

[RMistral (Wisi)]

Bonjour,

Le travail préparatoire pour l'architecture multi niveaux consiste principalement à une élaboration sous la forme d'un gabarit sous Photoshop. Ouvrir un nouveau fichier Photoshop à la taille du futur site puis dessiner sur des calques les différents niveaux  de manière sommaire pour les éléments vectoriels réalisable directement sous Flash, plus détaillé voir complètement pour les autres éléments. (L’idéal est d’avoir une tablette).
Le principe à respecter est :

Le niveau 0 (premier niveau chargé) contient les éléments fixes du décor du site.

Le niveau 1 lui est réservé à l'affichage des pages de contenu. Il est recommandé de ne pas utiliser le niveau 2 pour le cas ou l'affichage d'une fenêtre est nécessaire. (En cas de doute il suffit de travailler de 10 en 10. Niveau 0, niveau10, niveau 20 .... Il est alors possible d'utiliser les niveaux intermédiaires en cas de besoin. Niveau 11, niveau12 etc...)

Le niveau 2 ou 3 contient éventuellement un premier plan.

Enfin le niveau 4 contient le menu de l'application.

Une fois le gabarit réalisé, il faut par niveau raisonner sur papier en termes de graphique, movieclip, composant pour définir le contenu de la bibliothèque de chaque niveau.

L'étape suivante est la réalisation pratique sous Flash. Il faut ouvrir autant de nouveau fichier que de niveau puis définir la même dimension de scène pour chacun.

A l’aide des règles et des traits de construction il faut alors créer ou/et importer les différents éléments constituant chaque niveau et les mettre en place.

Enfin écriture des lignes de codes dans chaque niveau toujours sur un calque à part sur la scène et jamais directement dans un MovieClip ou un composant.


Je vous conseille de réaliser au moins 5 sites avant d'envisager de passer à la technique suivante.

[Lux]

Excellent! cet excellent tuto tombe a pique!
Je suis sur le point de commencer mon premier site "Full flash"! Mais je suis un pur amateur^^

Merci pour les conseils !

[Zeb]

Bravo RMistral pour cette petite mise au net, moi qui suis un graphiste non (mais essaye de le devenir un peu) développeur, c'est très clair et instructif.

Et j'attends avec impatience, le niveau 3 et 4 !

[Chrys]

Bonjour,

Je suis en train d'essayer ce que tu proposes.

Tu dis :
"Les deux reproches principaux sont l'éclatement du code AS dans chaque fichier SWF …"

Mais ne serait t'il pas possible d'utiliser un fichier AS indépendant, en mettant comme code sur le fichier de base :

code:

Code: [Sélectionner]

#include "monbofichier.as"Et ainsi se trouver avec un seul fichier pour le code ?

/Chrys

[RMistral (Wisi)]

Bonjour,


Le problème est que Flash fonctionne en mode asynchrone. C'est-à-dire qu’entre le moment où tu demande quelque chose par exemple par un loadMovieNum et le moment ou le fichier demandé est disponible il se passe un certain temps dont tu n’as pas la maitrise. Le temps est fonction du poids du fichier demandé et du débit Internet qui par nature est variable en permanence.

Prenons un exemple :

Imaginons le fichier menu.swf contenant l’ensemble des boutons de l’application et décor.swf contenant le support graphique du site.

Si j’appelle à partir du fichier décor.swf par loadMovieNum le menu et que je programme mes boutons de menu dans décor.swf juste après l’appel à menu.swf, j’explique à Flash ce qu’il doit faire sur des boutons qui n’existe pas encore. Donc quand menu.swf est enfin disponible mes boutons ne fonctionnent pas.

C’est un peu le même genre d’erreur que je vois régulièrement sur le forum quand les Wisinautes demandent de l’aide sur des boutons. Très fréquemment, le code est inscrit sur une image clé avant l’image clé contenant les boutons. De fait même si le code est bon il ne fonctionne pas.

Le principe est que je ne peux coder que des MC disponibles sur la scène sur la même image clé que le code ActionScript chaque MC devant avoir un nom unique.

Donc pour ne pas rencontrer un tel cas de figure est vue que je n'ai pas la maitrise du temps de chargement, du moins dans cette organisation, je suis obliger de mettre le code relatif à tel ou tel MC directement dans le fichier contenant ce MC sur la même image clé sur un calque ActionScript indépendant sur la scène.


Bon code...

[Chrys]

Oui, je comprends le cheminement.
Un fichier AS réunissant tout le code … Ouais, ben nan, c'est déjà assez compliqué comme ça !!

Dans ton exemple en bas de page a droite, tu as placé un lien (mailto) qui je pense doit être un bouton à la base.
Celui ci change de couleur au passage de la souris.

Je sais mettre un lien a l'intérieur d'un texte, mais comment faire pour que celui ci change d'aspect au passage de la souris ?

Merci

/Chrys

[RMistral (Wisi)]

Bonjour,


Il s'agit d'un texte de quel type ?

Externe ou interne au format html

Interne dynamique

Interne statique

[Chrys]

Bonjour,

Interne au format HTML

Je suis d'ailleurs en train de regarder comment fonctionne le CSS dans un texte html avec Flash.
Je suis en train de suivre l'exemple proposé dans la notice de Flash, c'est vraiment loin d'être clair (pour moi).

Si quelqu'un a tenté l'aventure, ça m'intéresserai de voir comment son monté les fichiers !!
Parce que la, pataugeage puissance 5 !

Chrys

[RMistral (Wisi)]

Encore moi !!!!

Bon voilà comment résoudre ton problème.

Le principe :

L'idée est de charger dans un objet spécialisé "StyleSheet" une feuille de style CSS externe puis d'appliquer sur un texte html les styles de cette feuille d'une manière traditionnelle html.

L'organisation :

Un fichier texte nommé : style.css avec les styles suivants :

Code: [Sélectionner]

p {  
color: #000000;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;  display: inline;
}

a:link {  
color: #0000FF;
text-decoration: underline;
}

a:hover{
color: #FF0000;
text-decoration: none;
}

.entete{
color: #0000FF;
font-family: Arial,Helvetica,sans-serif;
font-size: 18px;
font-weight: bold;
display: block;
}
.signature {
color: #666600;
font-style: italic;
font-weight: bold;
display: inline;
}Le fichier style.css est enregistré dans le même dossier que le fichier Flash dans cet exemple.

Fichier Flash

Une image clé avec :

Un calque contenant une zone de texte dynamique multiligne nommé : ZnTexte
Un calque contenant une zone de texte dynamique simple ligne nommé : alerte
Un calque ActionScript contenant le code suivant :

Code: [Sélectionner]

//Texte html interne
texteExemple = "

Utiliser les feuilles de style

";
texteExemple += "

par RMistral
";
texteExemple += "1 - Créez une feuille de style externe comme en html
";
texteExemple += "2 - Dans le fichier Flash ecrire le code ActionScript
";
texteExemple += "3 - Et voilà ça fonctionne
";
texteExemple += "Aexpmil Studio

";
//importation de la classe externe feuille de style
import TextField.StyleSheet;
//Création d'une occurrence de feuille de style
var Style:StyleSheet = new StyleSheet();
//fonction de chargement de la feuille de style externe
Style.onLoad = function(disponible:Boolean):Void  {
if (disponible) {
ZnTexte.styleSheet = Style;
ZnTexte.text = texteExemple;
} else {
alerte.text = "La feuille de style n'est pas disponible";
}
};
//Appel de la feuille de style
Style.load("style.css");Et voilà le travail !!! Merci qui

[Chrys]

Merci MIMI,

Chez moi sa marche bien, seulement je peux voir le résultat exclusivement en ligne .

Voili

Bon ben moi, je vais aller voir mes lecteurs audio

Chrys

[RMistral (Wisi)]

Coucou,


Normalement le code fonctionne même en local. Bien sur il faut que le fichier Flash soit enregistré avant d'essayer sinon un fichier temporaire est créé mais pas dans le même dossier que le fichier style.css. Dans un tel cas effectivement cela ne fonctionne pas.

[Chrys]

Ben écoute !!!

Il y a un truc qui m'étonne, est ce que chez toi le lien est actif ? (celui dans ton exemple).

Car même, en ayant fait un copier/coller de tout les codes CSS et As que tu propose, tout fonctionne sauf que le lien n'est pas actif en ligne.

Chrys

[RMistral (Wisi)]

Salut,

Bon ben après vérification je me suis trompé dans le code pour le lien.

Remplace :

Code: [Sélectionner]

ZnTexte.text = texteExemple;par :

Code: [Sélectionner]

ZnTexte.html = true;
ZnTexte.htmlText = texteExemple;La première ligne indique que la zone de texte doit être traitée avec rendu html la seconde que le texte est du texte contenant des balises html.

bon courage...