Share
Deux fois par mois, nous revoyons certains des articles préférés de nos lecteurs dans l’histoire d’Activetuts +. Ce tutoriel a été publié pour la première fois en juillet 2009..
Une mise en page Web fluide utilise 100% de la largeur (et de la hauteur) du navigateur, ce qui permet de placer tous les éléments contenus dans certaines positions. Ceci s’oppose à une disposition à largeur fixe où le contenu reste fixe quelle que soit la taille du navigateur..
Cette technique est populaire dans les sites Web HTML / CSS, mais cette tutoriel vous montrera comment créer un effet de mise en page fluide similaire dans Flash. Chaque élément se repositionnera facilement avec l'animation lorsque le navigateur redimensionnera.
Au cours des étapes suivantes, nous allons créer des classes ActionScript 3 qui rendent notre site Web Flash fluide. Tous nos symboles d'affichage conserveront leur alignement lorsque le Flash sera redimensionné.
Les classes ActionScript créées dans ce tutoriel peuvent être facilement réutilisées dans différents projets..
Comme le montre l'image ci-dessous, tous les éléments qui flottent en fonction de la taille du navigateur seront appelés "objets fluides"..
Chaque objet fluide contiendra des paramètres d'alignement. Les paramètres stockent les valeurs x, y, x offset, y offset de l'objet pour indiquer son alignement..
Si vous affectez x et y à 0, l'objet fluide sera aligné sur le coin supérieur gauche. En assignant x et y à 1, l'objet fluide sera aligné sur le coin inférieur droit. Par conséquent, attribuer une valeur x et y comprise entre 0 et 1 fera flotter l'objet à un pourcentage de la largeur et de la hauteur du navigateur..
Les décalages X et Y décalent la position des objets fluides pendant leur alignement. Le décalage est utile lors du positionnement d'un objet dont le point d'alignement n'est pas au centre. Le décalage est également utile pour faire des marges sur l'alignement.
Créez un répertoire appelé "FluidLayout" dans le répertoire de travail. Ce répertoire stockera toutes les classes liées aux classes de mise en page fluide.
C'est une bonne habitude de placer les fichiers de classe ActionScript dans des répertoires par catégorie. Par exemple, les classes de mise en page fluide seront placées dans le dossier "FluidLayout" dans ce cas.
Veuillez noter que tous les noms de répertoire, noms de fichier et codes sont sensibles à la casse..
Ouvrez un nouveau fichier ActionScript nommé "FluidObject.as". Enregistrez ce fichier ActionScript dans le répertoire "FluidLayout"..
La classe FluidObject stocke les paramètres d’alignement des symboles et les repositionne lorsque le navigateur se redimensionne..
Commençons maintenant à coder le FluidObject.as.
package FluidLayout / * Ajoutez les classes d'importation ici * / public class FluidObject / * Déclarez les variables d'instance ici * / / * Constructeur de la classe * / fonction publique FluidObject (target: DisplayObject, paramObj: Object) / * Fonction qui repositionne l'objet surveillé * / protected function reposition (): void / * Fonction appelée lorsque l'événement RESIZE est déclenché * / protected function onStageResize (e): void
Ajoutez le code suivant où vous voyez: / * Ajoutez les classes d'importation ici * /
/ * classe nécessaire pour redimensionner l'événement * / import flash.events.Event; / * classes nécessaires pour MovieClip et DisplayObject * / import flash.display. *;
Il y a trois variables d'instance pour cette classe:
Il existe également un paramètre pour "_param" permettant de modifier les paramètres d'alignement. Ajoutez le code suivant où vous voyez: / * Déclare les variables d'instance ici * /
/ * paramètres d'alignement * / protected var _param: Object; / * objet cible à surveiller * / protected var _target: DisplayObject; / * instance de phase du document flash * / protected var _stage: Stage; / * Setter pour le paramètre d'alignement * / public function set param (valeur: Object): void _param = valeur; this.reposition ();
Le constructeur initialisera le symbole surveillé cible et stockera les paramètres d'alignement donnés.
/ * Constructeur de la classe * / fonction publique FluidObject (target: DisplayObject, paramObj: Object) / * Affecte les variables d'instance * / _target = target; _param = paramObj; _stage = target.stage; / * ajout du gestionnaire d'événements pour le redimensionnement de la scène * / _stage.addEventListener (Event.RESIZE, onStageResize); / * repositionne l'objet avec le paramètre d'alignement appliqué * / this.reposition ();
La fonction de repositionnement est chargée de calculer la nouvelle position x / y de l'objet fluide surveillé.
/ * Fonction qui repositionne l'objet surveillé * / protected function reposition (): void / * obtenir la largeur et la hauteur actuelles du document flash * / var stageW = _stage.stageWidth; var stageH = _stage.stageHeight; / * met à jour les valeurs x et y de l'objet surveillé * / _target.x = (stageW * _param.x) + _param.offsetX; _target.y = (stageH * _param.y) + _param.offsetY;
La fonction onStageResize est un gestionnaire d’événements appelé lorsque le navigateur redimensionne..
/ * Fonction appelée lorsque l'événement RESIZE est déclenché * / fonction protégée onStageResize (e): void / * repositionne la cible * / this.reposition ();
La classe terminée FluidObject est terminée à cette étape.
package FluidLayout / * classe nécessaire pour redimensionner l'événement * / import flash.events.Event; / * classes nécessaires pour MovieClip et DisplayObject * / import flash.display. *; Classe publique FluidObject / * paramètres d'alignement * / protected var _param: Object; / * objet cible à surveiller * / protected var _target: DisplayObject; / * instance de phase du document flash * / protected var _stage: Stage; / * Setter pour le paramètre d'alignement * / public function set param (valeur: Object): void _param = valeur; this.reposition (); / * Constructeur de la classe * / fonction publique FluidObject (target: DisplayObject, paramObj: Object) / * Assigne les variables d'instance * / _target = target; _param = paramObj; _stage = target.stage; / * ajout du gestionnaire d'événements pour le redimensionnement de la scène * / _stage.addEventListener (Event.RESIZE, onStageResize); / * repositionne l'objet avec le paramètre d'alignement appliqué * / this.reposition (); / * Fonction qui repositionne l'objet surveillé * / protected function reposition (): void / * obtenir la largeur et la hauteur actuelles du document flash * / var stageW = _stage.stageWidth; var stageH = _stage.stageHeight; / * met à jour les valeurs x et y de l'objet surveillé * / _target.x = (stageW * _param.x) + _param.offsetX; _target.y = (stageH * _param.y) + _param.offsetY; / * Fonction appelée lors du déclenchement de l'événement RESIZE * / protected function onStageResize (e): void / * repositionne la cible * / this.reposition ();
Commencez un nouveau document Flash avec ActionScript 3.0 pris en charge et appelez-le "website.fla". Puis définissez la classe Document comme "Site Web".
Si une boîte de dialogue contenant le message suivant apparaît: "Une définition de la classe de document est introuvable dans le chemin de classe, ...", cliquez simplement sur "OK" pour le contourner. Nous allons créer cette classe après avoir dessiné les symboles graphiques.
L'image d'arrière-plan sera sombre dans ce tutoriel (j'ai créé ma propre image semblable à un espace avec Photoshop). Par conséquent, la couleur d'arrière-plan du document Flash doit être définie sur noir. Cliquez sur Modifier> Document pour ouvrir la boîte de dialogue Propriétés du document et modifier la couleur d'arrière-plan..
Il y aura 5 symboles flash sur la scène:
Faisons le titre en premier. L'objectif de ce didacticiel est de créer des symboles flottants dans la mise en page fluide plutôt que de créer des composants de sites Web sophistiqués. Les symboles ne contiendront qu'un champ de texte indiquant uniquement le but.
Pour le symbole du titre, il y a un fond semi-transparent. Afin de s'adapter à différentes largeurs du navigateur, la largeur de l'arrière-plan doit être suffisamment grande.
Une fois le symbole dessiné, cliquez sur Modifier> Convertir en symbole (F8). Cliquez sur le bouton "Avancé" pour afficher les paramètres détaillés du symbole..
Cliquez sur "Exporter pour ActionScript" pour permettre à ActionScript d'accéder à ce symbole. Recherchez ensuite le champ "Classe" dans la boîte de dialogue et définissez la valeur sur "Titre" pour le symbole de titre. Cela signifie que nous avons affecté une nouvelle classe appelée "Titre" à ce symbole. Nous pouvons utiliser ce symbole ultérieurement dans le code ActionScript..
N'oubliez pas de nommer votre symbole pour pouvoir le reconnaître facilement avant de cliquer sur OK. Si une boîte de dialogue contenant le message "Aucune définition de cette classe n'a pu être trouvée dans le chemin d'accès aux classes,…" apparaît à nouveau, cliquez simplement sur "OK" pour la contourner. Comme nous n’ajouterons aucun comportement au symbole, nous laisserons Flash créer une classe vide pour nous..
Supprimer l'instance de symbole "title" sur la scène car elle sera créée ultérieurement par ActionScript.
Nous allons utiliser la même méthode pour dessiner "fond", "menu", "contenu intermédiaire" et "pied de page". Le nom de classe de ces symboles sera Contexte, Menu, Milieu et Bas de page en conséquence.
L'image de fond peut être téléchargée à partir des fichiers source. Les autres symboles sont uniquement des champs de texte.
Créez un fichier ActionScript nommé "Website.as"; ce fichier de classe doit être enregistré dans le même répertoire que le fichier website.fla.
Cette classe doit également partager le même nom que celui défini dans la classe de document (reportez-vous à l'étape 12). Par exemple, la classe de document "Site Web" fait référence à "Site Web.as" dans le même répertoire. Cette classe ActionScript sera chargée juste après le chargement de la mémoire flash..
Voici le squelette de la classe de document:
package import flash.display. *; importer FluidLayout. *; public class Website étend MovieClip public function Website ()
package import flash.display. *; importer FluidLayout. *; public class Website étend MovieClip public function Site Web () / * Définit le mode d'échelle de la scène * / stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; / * Ajoute les symboles à l'étape * / var bg = new Background (); addChild (bg); var title = new Title (); addChild (titre); var menu = new Menu (); addChild (menu); var middle = new Middle (); addChild (milieu); var footer = new Footer (); addChild (pied de page); / * Applique l'alignement à l'arrière-plan * / var bgParam = x: 0, y: 0, offsetX: 0, offsetY: 0 new FluidObject (bg, bgParam); / * Applique l'alignement au titre * / var titleParam = x: 0, y: 0, offsetX: 0, offsetY: 0 new FluidObject (title, titleParam); / * Appliquez l'alignement au menu * / var menuParam = x: 1, y: 0, offsetX: -menu.width - 20, offsetY: 20 new FluidObject (menu, menuParam); / * Appliquez l'alignement au contenu * / var middleParam = x: 0.5, y: 0.5, offsetX: -middle.width / 2, offsetY: -middle.height / 2 new FluidObject (middle, middleParam); / * Applique l'alignement au pied de page * / var footerParam = x: 1, y: 1, offsetX: -footer.width - 10, offsetY: -footer.height -10 new FluidObject (footer, footerParam);
Ouvrez website.fla dans Flash et vérifiez à nouveau avant d'envoyer le film par SMS.
Il n'est pas nécessaire de placer les symboles sur la scène car Website.as créera des instances de symboles à partir de la bibliothèque en utilisant leurs noms de classe. Les noms de classe de liaison des symboles doivent être corrects pour que le script puisse les utiliser. Le nom de la classe de liaison peut être vérifié dans le panneau de la bibliothèque..
Cliquez sur Contrôle> Film texte ou Ctrl (Cmd) + Entrée pour tester le site Web Flash..
Essayez de redimensionner la fenêtre et vérifiez si tous les objets se repositionnent sur le bon alignement.
Chaque objet FluidObject doit désormais avoir des valeurs de propriété x, y, offsetX et offsetY spécifiques. Une nouvelle classe sera créée dans les prochaines étapes pour simplifier le code futur lors de l'ajout de nouveaux objets fluides.
Ouvrez un nouveau fichier ActionScript nommé "SimpleFluidObject.as". Enregistrez ce fichier dans le répertoire "FluidLayout" car il fait partie du package FluidLayout..
Ce fichier étend la classe FluidObject de manière à fournir un alignement simple en utilisant des noms tels que TOP, MIDDLE, BOTTOM_RIGHT au lieu de spécifier les propriétés x, y..
Voici le squelette de la classe:
package FluidLayout import flash.events.Event; import flash.display. *; Classe publique SimpleFluidObject étend FluidObject fonction publique SimpleFluidObject (cible: DisplayObject, paramObj: Object)
package FluidLayout import flash.events.Event; import flash.display. *; Classe publique SimpleFluidObject étend FluidObject fonction publique SimpleFluidObject (cible: DisplayObject, paramObj: Object) / * Indique à la classe parent d'initier le constructeur * / super (cible, paramObj); / * attribue des valeurs d'alignement et de marge selon les paramètres du constructeur * / var alignement = paramObj.alignment; var margin = paramObj.margin; / * Préréglez l'alignement et la valeur de la marge si besoin * / if (alignement == indéfini) alignement = "MIDDLE"; if (margin == non défini) margin = 0; / * convertit l’alignement (par exemple "TOP", "BOTTOM_RIGHT") en x, y, offsetX et offsetY * / var params = new Object (); commutateur (alignement) case "TOP_LEFT": params = x: 0, y: 0, offsetX: margin, offsetY: margin; Pause; case "TOP": params = x: .5, y: 0, offsetX: -target.width / 2, offsetY: margin; Pause; case "TOP_RIGHT": params = x: 1, y: 0, offsetX: -target.width - margin, offsetY: margin; Pause; case "LEFT": params = x: 0, y: .5, offsetX: marge, offsetY: -target.height / 2; Pause; case "MIDDLE": params = x: .5, y: .5, offsetX: -target.width / 2 - margin / 2, offsetY: -target.height / 2 - margin / 2; Pause; case "RIGHT": params = x: 1, y: .5, offsetX: -target.width - marge, offsetY: -target.height / 2; Pause; case "BOTTOM_LEFT": params = x: 0, y: 1, offsetX: margin, offsetY: -target.height - margin; Pause; case "BOTTOM": params = x: .5, y: 1, offsetX: -target.width / 2, offsetY: -target.height - margin; Pause; case "BOTTOM_RIGHT": params = x: 1, y: 1, offsetX: -target.width - margin, offsetY: -target.height - margin; Pause; _param = params; / * repositionne l'objet fluide à la bonne position * / this.reposition ();
Reportez-vous au fichier Website.as et essayez d’utiliser la nouvelle méthode d’alignement pour aligner les objets fluides..
L'ancienne méthode pour appliquer l'alignement au titre:
/ * Applique l'alignement au titre * / var titleParam = x: 0, y: 0, offsetX: 0, offsetY: 0 new FluidObject (title, titleParam);
La nouvelle méthode pour appliquer l'alignement au titre:
var titleParam = alignement: "TOP_LEFT", marge: 0 new SimpleFluidObject (title, titleParam);
Alignements disponibles:
Maintenant, l’alignement des fluides fonctionne sur le "film test" dans Flash IDE, mais il en existe un. clé pointez pour que cela fonctionne sur le navigateur.
Ouvrez website.fla. Allez dans Fichier> Paramètres de publication et assurez-vous que HTML est activé. Cliquez sur l'onglet HTML et remplacez la dimension par "Pourcentage". Assurez-vous que le pourcentage est défini à 100 sur la largeur et la hauteur.
Cliquez sur "Publier" pour publier le site Web sous les fichiers "website.swf" et "website.html"..
Ouvrez maintenant le fichier "website.html" avec votre éditeur de texte préféré et ajoutez le code suivant dans l'en-tête. Ajout du code juste après le tag serait un bon choix.
Ces styles CSS éliminent l’écart entre la partie supérieure gauche du fichier HTML et le fichier SWF..
Un effet d'accélération peut être appliqué lorsque le navigateur redimensionne afin que les objets se déplacent à la position correcte avec un effet de réduction..
Ouvrez "FluidObject.as". Ajoutez les lignes suivantes après "import flash.display. *;". Ces lignes importeront la classe d'animation d'interpolation afin de permettre au code de faciliter les objets..
/ * classes nécessaires pour faciliter l'animation * / import fl.transitions.Tween; import fl.transitions.easing. *;
Recherchez ensuite les lignes suivantes dans le fichier "FluidObject.as". Ils sont dans la fonction "repositionner".
_target.x = stageW * _param.x + _param.offsetX; _target.y = stageH * _param.y + _param.offsetY;
Remplacez-les par le code suivant:
/ * définit la durée de l'animation d'accélération (secondes) * / var duration = 0.5; / * déclare la nouvelle valeur X / Y * / var newX = _target.x; var newY = _target.y; / * calcule la nouvelle valeur X en fonction de l'étape Width * / if (_param.x! = indéfini) newX = (stageW * _param.x) + _param.offsetX; / * calcule la nouvelle valeur Y en fonction de la hauteur de l'étape * / if (_param.y! = non défini) newY = (étapeH * _param.y) + _param.offsetY; / * Indiquez à flash d'interpeller l'objet cible avec la nouvelle position X / Y * / new Tween (_target, "x", Strong.easeOut, _target.x, newX, duration, true); new Tween (_target, "y", Strong.easeOut, _target.y, newY, duration, true);
Testez le film, les objets se relâcheront lorsque le navigateur redimensionnera
Nous venons de créer deux classes chargées des objets fluides flottants. Nous avons également créé un exemple permettant d’aligner différents objets sur la scène à l’aide des classes. Cet exemple n'est qu'un exemple de cas. vous pouvez utiliser votre imagination pour jouer avec les alignements. Par exemple, un symbole peut être interactif et son alignement peut changer de haut en bas lorsque l'utilisateur clique dessus..
La structure de fichier doit être identique à celle décrite ci-dessous après avoir terminé ce didacticiel. Plus précisément, les fichiers FluidObject.as et SimpleFluidObject.as doivent se trouver dans le répertoire "FluidLayout" pour fonctionner.
Profitez de la mise en page fluide!
Accentsconagua