Comment créer une animation flash. Comment créer un nouveau fichier (document) dans Flash CS6
Beaucoup d’entre nous aiment passer le temps en jouant à de petits jeux flash, mais peu de gens réfléchissent à la façon dont ces œuvres d’art virtuelles sont créées. Entre-temps, cette technologie existe depuis la fin des années 90. Son créateur est la société américaine Macromedia (aujourd'hui Adobe Systems). Ce système est activement utilisé non seulement pour le développement de jeux, mais également pour le web mastering. La plupart des sites Web sur Internet fonctionnent en Flash (même si certains passent déjà au HTML 5). L'idée originale d'Adobe Systems est également un programme permettant de créer des applications Macromedia Flash. Tout le monde peut le maîtriser, même ceux qui sont éloignés de l’informatique. Cependant, avant de commencer à parler de la façon de créer des jeux, examinons les principaux avantages et inconvénients de cette plateforme.
Avantages d'Adobe Flash
- Il existe un certain nombre d'avantages qui distinguent cette technologie des autres plates-formes logicielles et la rendent excellente pour la création de contenu de jeu amateur :
- Premièrement, c'est la vitesse de développement. Contrairement à d'autres plateformes, Flash vous permet de créer n'importe quel jeu en seulement une heure. Macromedia Flash ne dérange pas le développeur avec de longs morceaux de code, fournissant un outil de travail prêt à l'emploi
- Deuxièmement, cette technologie offre de nombreuses possibilités de travailler avec d'autres contenus multimédias. Vous n'avez pas à perdre de temps et d'efforts à convertir un fichier en un autre. La technologie vous permet d'intégrer n'importe quel fichier graphique, sonore et vidéo dans le jeu sans tracas inutiles. De cette façon, vous pouvez inclure des artistes, des compositeurs et des éditeurs dans le travail sur le projet et créer un produit vraiment unique.
- Troisièmement, Macromedia dispose de commandes intuitives et d'un ensemble de fonctions qui simplifient grandement le travail dans cet environnement logiciel. La fonctionnalité glisser-déposer, le menu de commandes Action Script, les barres d'outils et les info-bulles conviviales rendent le travail avec Adobe extrêmement agréable.
- Quatrièmement, la fonctionnalité de la plateforme est extrêmement pratique en termes de soumission et de distribution de contenu. Grâce à l'extension Web Adobe Player, les applications créées sur la base de cette technologie peuvent facilement être placées sur n'importe quel site Web en insérant un simple code sur la page. La technologie prend également en charge la création d'applications autonomes au format swf, qui peuvent être facilement reproduites sur n'importe quel système d'exploitation.
- Enfin, cinquièmement. Cette technologie permet de créer des jeux colorés avec une animation très fluide et une grande interactivité. À bien des égards, la beauté d’une application dépend du talent de l’artiste et non du programmeur. Grâce à cette propriété, cette plateforme attire les débutants qui souhaitent s'essayer à la création de jeux.
Inconvénients de Flash Player
- Comme tout autre programme, celui-ci présente également un certain nombre d'inconvénients dont quiconque souhaite commencer à travailler avec des applications Flash doit être conscient :
- Lien vers la chronologie. Essentiellement, la création d'applications Flash implique d'organiser des images séquentielles sur une chronologie, puis de les lire. Ainsi, ce système est idéal pour créer des animations. Cependant, la non-linéarité, qui est une tendance actuelle pour la plupart des jeux, ne sera pas atteinte.
- Performance. Malheureusement, ce n'est pas très différent travail rapide. Par conséquent, les jeux coopératifs et les arcades avec un grand nombre d'objets similaires ne sont pas créés sur cette base.
- Pas de support 3D. Un inconvénient important est que la technologie Flash ne prend pas en charge la création et l'utilisation de modèles tridimensionnels et de scènes environnementales, et pour la plupart des jeux modernes, il s'agit d'une norme inébranlable. D'un autre côté, le navigateur Jeux en ligne Ils utilisent principalement Flash, en raison de certaines restrictions typiques des jeux en ligne.
- Plateforme fermée. Adobe Macromedia ne prend pas en charge l'ajout de nouvelles fonctionnalités. Dans d'autres environnements logiciels (par exemple Java), vous pouvez ajouter de nouvelles propriétés. Ici, seuls les développeurs eux-mêmes peuvent le faire. Et malgré le fait qu'ils mettent constamment à jour le programme en tenant compte des avis des utilisateurs, ses fonctionnalités restent limitées.
Malgré ces inconvénients, le flash est indispensable pour créer de petits mini-jeux amateurs.
Comment créer un jeu Flash : aspects de base
Créer des animations sur le moteur rappelle un passe-temps d'enfance, lorsqu'une image était dessinée sur les coins des pages image par image et lorsqu'elle était rapidement retournée, elle commençait à bouger. L'essence des animations Flash est la même : vous placez les objets graphiques image par image sur la timeline et lorsqu'ils sont lus, ils commencent à bouger. C'est plus difficile avec les jeux. Pour les créer, vous devez maîtriser le langage de programmation ActionScript 3.0. Vous pouvez l'étudier à l'aide de livres et de manuels spéciaux (par exemple, le livre de Colin Mook « ActionScript 3.0 for Flash »). Il existe également de nombreuses vidéos pédagogiques sur YouTube. Il suffit d'un petit effort pour maîtriser ce programme. Cela fait, il est peu probable que vous ayez des questions sur la façon d'écrire un jeu Flash.
- Lors de la création d'un jeu flash, il est important de respecter une certaine structure :
- Fenêtre de titre (écran de démarrage)
- Règles
- Fenêtre de fin de partie
Vient d’abord la « Fenêtre de titre ». Il s'agit d'un écran de démarrage qui devrait faire une première impression sur le joueur. Ici, il est important de montrer tout votre talent artistique et votre imagination.
L'étape suivante consiste à créer la page Règles. Malgré le fait que certains développeurs ignorent cette étape, il est toujours préférable de formuler les règles du jeu, le rendant plus compréhensible et convivial. Parfois, ils sont rédigés sur une page externe ou dans une fenêtre séparée.
« Arrière-plan » est l'environnement sur lequel les objets graphiques seront situés. Dans certains cas, les objets occupent tout l’écran. L'arrière-plan du jeu peut être créé à l'aide des outils Adobe Macromedia ou à l'aide de programmes tiers (par exemple, Ogmo Editor est excellent pour créer des scènes en deux dimensions). Il est important qu'il soit thématique et complète le concept global du jeu.
La fin du jeu marque la « fenêtre de jeu terminée ». Le jeu peut se terminer dans différents cas- lorsque le joueur gagne, perd ou manque simplement de temps/de munitions. Pour chaque cas, une fenêtre distincte est créée avec le contenu animé correspondant. Parfois, une liste des gagnants est insérée dans cette fenêtre.
Ainsi, après avoir étudié Adobe Flash, n'importe qui saura créer un jeu. Il suffit de comprendre les mécanismes de fonctionnement de base et vous serez bientôt en mesure de créer des jeux simples. Comme dans toute entreprise, l'essentiel ici est de faire preuve de suffisamment de persévérance et d'intérêt, et le résultat ne se fera pas attendre.
Vous êtes-vous déjà demandé ce qui se cache derrière la belle animation des bannières sur Internet ? Ou les dessins animés inédits créés à l’aide de la technologie informatique ? Le plus souvent, ils sont basés sur la « chair », ou plus précisément traduits de nom anglais Technologies Flash. Aujourd'hui, nous allons parler de l'animation flash pour le site internet :
Technologie Flash
Le cadre multimédia a été développé par Macromedia. Mais après son absorption (fusion), tous les droits sur la technologie ont été transférés au nouveau propriétaire - Adobe Systems.
Domaine d'application moderne d'Adobe Flash :
- La création d'applications Web est une direction relativement nouvelle. Implique l'utilisation totale ou partielle de Flash pour créer des sites Web. Lorsqu'elle est partiellement appliquée, cette technologie crée des éléments de conception individuels : divers menus interactifs, boutons animés, etc.
Par rapport aux ressources HTML conventionnelles, les sites Flash possèdent certaines fonctionnalités qui limitent leur utilisation. Ceux-ci incluent le coût de développement élevé, les exigences en matière de ressources du serveur, les longs temps de chargement avec une connexion Internet lente et quelques autres aspects :
- Mise en œuvre de capacités multimédias - pour écouter de l'audio et lire des vidéos sur des sites Web, des lecteurs multimédias créés sur la base de Flash sont souvent utilisés. Leur développement inclut l'utilisation de l'un des langages de script (généralement JavaScript) :
- Dans la publicité en ligne, la technologie est le plus souvent utilisée pour créer des bannières animées. Ils impliquent non seulement la diffusion de publicités multimédias, mais également une sorte d'interaction avec l'utilisateur sur une base ludique.
Bases et outils de développement Flash
Pour créer une animation flash, les outils traditionnels d'Adobe sont le plus souvent utilisés :
- Adobe Flash Professional – un programme pour créer une animation interactive (animateur) ;
- Adobe Flash Builder – un environnement pour créer des interfaces d'applications Web ;
- Adobe Flash Player est un lecteur intégré au navigateur pour lire Flash.
En plus de cela, un certain nombre d'applications tierces peuvent lire du contenu multimédia de ce type. Les plus populaires sont Gnash, QuickTime et quelques autres :
Cette technologie permet d'afficher tout type de graphiques ( raster, vecteur, 3D). Il prend également en charge le relais en streaming de données audio et vidéo. En particulier pour appareils mobiles une version allégée, Flash Lite, a été développée.
Le principal standard pour les fichiers Flash est l'extension SWF. L'abréviation signifie Petit Format Web. La vidéo enregistrée en Flash porte les extensions de fichier FLV, F4V.
Le développement d'animations interactives en Flash repose sur des graphiques vectoriels. C'est grâce à cela qu'il a été possible de mettre en œuvre le support d'une plateforme multimédia et l'indépendance de la qualité d'animation par rapport à la résolution de l'écran.
La taille du fichier de l'application Flash est la même pour tous les utilisateurs, quel que soit leur caractéristiques techniques résolution d'écran).
L'animation interactive dans Flash est basée sur le morphing (type vectoriel), dans lequel il y a un flux lent entre les images clés. Pour lire les données, on utilise un lecteur Flash dont le fonctionnement est à bien des égards similaire à celui de la machine virtuelle JavaScript. Le composant logiciel de la technologie est implémenté à l'aide du langage ActionScript.
Les inconvénients de la technologie incluent les points suivants :
- Forte charge sur le processeur central de la machine client. Cela est dû à la faible efficacité de la machine virtuelle Flash, qui est intégrée au navigateur de l'utilisateur avec le lecteur ;
- Forte probabilité d'erreurs - la lecture d'une animation Flash peut se produire avec une forte probabilité d'erreurs. De plus, les échecs de lecture Flash affectent négativement le fonctionnement de l'ensemble de l'application client (navigateur). Cela est dû à un contrôle insuffisant sur la tolérance aux pannes du code du programme lors de la création d'applications Flash ;
- Échec de l'indexation - Tout le contenu textuel affiché dans le contenu Flash n'est pas indexé. Cette limitation est particulièrement problématique pour les ressources créées sur la base de cette technologie.
Revue des logiciels de création Flash tiers
Sothink SWF Quicker a été considéré comme une application prototype sur laquelle nous démontrerons les bases de la création de Flash. Selon de nombreux professionnels, le programme est le plus compréhensible et le plus simple à apprendre.
En plus de créer et d'éditer, l'éditeur flash « peut » fonctionner avec tous les autres types d'animation web (GIF, HTML et autres standards) :
Après l'installation, accédez à l'interface conviviale du programme. Malheureusement, après avoir parcouru tous les coins et recoins, nous n'avons pas trouvé de commutateur de langue d'interface.
Afin de comprendre comment créer une animation flash dans cette application, nous utiliserons les modèles intégrés. La boîte de dialogue « Nouveau à partir d'un modèle » apparaît immédiatement après le démarrage du programme. De plus, il peut être appelé via l'élément du menu principal "Fichier". Parmi les options proposées, nous avons choisi de créer une bannière :
Dans la fenêtre suivante de l'assistant, dans la liste déroulante, vous devez sélectionner un modèle selon lequel l'animation sera créée. En dessous se trouve un petit cadre dans lequel le modèle sélectionné est joué :
Dans les étapes suivantes, vous devez définir les dimensions de la bannière et saisir 5 phrases de texte qui seront jouées dans l'animation. De plus, vous devez préciser l'adresse de la ressource vers laquelle l'utilisateur sera dirigé en cliquant sur le bandeau :
Après avoir compilé le projet et fermé la fenêtre de l'assistant, vous pouvez visualiser la vidéo résultante dans le lecteur intégré. Pour cela, cliquez sur la flèche verte en haut :
Après avoir fermé le lecteur, regardons de plus près l'interface de l'application. Veuillez noter qu'il se compose de deux fenêtres principales : celle du haut sert à éditer la période de temps de la vidéo et celle du bas est une fenêtre normale. éditeur graphique. Chacun des éléments est situé sur un calque distinct, qui peut être modifié à l'aide des outils standards situés dans la barre latérale :
L'animation flash créée pour le site peut être publiée. Vous pouvez sélectionner la méthode de publication en cliquant sur le bouton « Publier » en haut. Vous avez le choix entre trois options, notamment l'insertion dans le code HTML. Les paramètres détaillés de ce processus sont disponibles dans une fenêtre « Paramètres de publication » distincte.
* Programmes utilisés: Flash CS3, Photoshop CS3
* Complexité: moyenne
* Temps de réalisation approximatif: 3 heures
Un site Web de portfolio est d'une grande importance pour tout artiste, photographe, designer et même musicien moderne. Il fait preuve d'une approche sérieuse des affaires et de professionnalisme. Aujourd'hui, nous allons montrer comment créer un portfolio de photos original et élégant basé sur système moderne Gestion de contenu Flash Moto CMS.
Nous utiliserons la version autonome de Moto CMS, qui contient différents utilitaires, composants, exemples intégrés et modèles de sites vierges avec différentes structures. Et nous utilisons le modèle le plus simple, c'est-à-dire que nous créerons un site Web de portfolio de photos à partir de zéro.
Dans ce guide, nous aborderons les sujets suivants :
* Création de conteneurs.
* Création de slots (bouton Fermer, bouton simple).
* Création de modules (lecteur de musique et galerie d'images).
* Modification du préchargeur du site
* Créer des pages de sites Web et les remplir de contenu.
Nous vous parlerons également des capacités et des fonctionnalités du panneau de configuration Moto CMS.
Nous aurons besoin:
* Adobe Photoshop;
*Adobe Flash CS3 ;
* Version autonome de Moto CMS (essai gratuit) ;
* Conception de sites Web. Format PSD.
Aperçu du résultat final
Étape 1 : Téléchargez les fichiers Moto CMS
Pour commencer à créer notre site Web de portfolio de photos, vous devez télécharger la version autonome de Moto Flash CMS. Afin de répéter toutes les étapes de ce guide et de comprendre les capacités de Moto CMS, une version d'essai suffira.
Étape 2 : Bref aperçu des fichiers Moto CMS
Ici brève revue Fichiers et dossiers Moto CMS :
* Composants. Ce dossier contient les composants mxp gérés par Adobe Extension Manager.
* Panneau de contrôle. Contient tous les fichiers du Panneau de configuration.
* Documents. Ce dossier contient la documentation de l'API.
* Exemples. Contient 4 exemples de sites flash prêts à l'emploi, du plus simple au plus complexe, avec un module galerie, un module actualités, un lecteur musique et vidéo, un formulaire de contact, etc.
* Modèles. 5 modèles pouvant être utilisés pour créer un site Web basé sur Moto CMS. Chaque modèle possède l'ensemble de fichiers nécessaire et diffère par sa structure. Aujourd'hui, nous allons utiliser l'un de ces modèles, en particulier le modèle n°1, comme base de notre portfolio de photographies.
* Fichier Lisez-moi, qui décrit comment commencer à créer un site Web avec Moto CMS.
Étape 3 : Exécuter sur un hébergement local
Notre prochaine étape sera de lancer le modèle de site Web, sur lequel nous allons baser notre site Web de portfolio. Pour cela, nous avons besoin d'un serveur Web local. Nous utilisons WampServer. Il permet de créer des applications web avec des bases de données Apache, PHP et MySQL.
Pour lancer le modèle de site Web n°1, téléchargez simplement le contenu du dossier sur votre serveur local modèle_01 du répertoire /templates/, ainsi que le contenu du dossier Panneau de contrôle.
Après cela, nous allons au panneau de configuration Moto CMS en entrant notre URL dans la barre d'adresse du navigateur, en ajoutant /admin à la fin.
Note: Vous ne pourrez pas consulter le site pour le moment car il ne contient pas encore de pages. Une page avec une erreur 404 apparaîtra.
Étape 4 : Modification du fichier config.xml
Tout ce que nous avons à faire est de modifier la largeur et la hauteur du site et de définir la couleur d'arrière-plan.
La taille de notre projet est de 980x800 pixels. Pour que la taille change sur un grand écran, il faut régler "100%" pour la largeur et la hauteur du site. Et pour qu'il s'affiche correctement sur un écran à faible résolution, il faut préciser la largeur et la hauteur minimales du site (des barres de défilement apparaîtront). Couleur de l'arrière plan noir (#000000).
Étape 5 : Changer le style.css
Nous devons maintenant ouvrir le fichier style.css et spécifier la couleur d'arrière-plan (noir). Tout le reste peut être modifié à l'aide du panneau de configuration Moto CMS.
Étape 6 : Créer un préchargeur
Les fichiers sources moto.xfl et website.xfl se trouvent respectivement dans les dossiers flamoto et faillebsite.
Le préchargeur du site doit être créé dans moto.xfl. Le préchargeur peut être un simple clip composé de 100 images.
Dans le panneau Actions de ce clip, nous écrivons : « Stop (); » pour la première image. Ensuite, nous animons le reste des images à notre guise.
Nous écrivons également « Stop (); » dans les actions de la première image de la timeline en Floride.
N'oubliez pas de préciser les dimensions du site (largeur et hauteur minimales) dans les propriétés du fichier moto.fla.
Notre prochaine étape consiste à créer une belle animation pour que le préchargeur disparaisse. Sur la dernière image, nous devons lancer le site Web en activant la fonction « showWebsite() ».
Ouvrez le fichier website.xfl et mettez à jour le préchargeur.
Étape 7 : Contexte du site Web
Ouvrez la bibliothèque multimédia Moto CMS (Paramètres > Bibliothèque multimédia) et, avec les autres images requises (pour la page d'accueil, les pages principales ou la galerie), téléchargez une image d'arrière-plan à l'aide du bouton « Ajouter un média ».
Après cela, retournez au Panneau de configuration, créez une nouvelle page et insérez une image d'arrière-plan à l'aide du bouton « Photo ». Faites glisser l'image et centrez-la.
Le gestionnaire de polices permet aux utilisateurs de gérer les polices du site, qui sont stockées sous forme de fichiers SWF et peuvent être téléchargées.
Avant de télécharger une police, nous devons d'abord la convertir au format SWF. Pour cela nous utiliserons Créateur de polices en ligne- pratique candidature en ligne, développé par l'équipe MotoCMS, qui vous permet de convertir facilement des fichiers TTF et OTF en SWF. Tout ce que nous avons à faire est de sélectionner le fichier de police requis avec l'extension .TTF ou .OTF, de l'ajouter à Online Font Creator, de cliquer sur le bouton « Créer une police » et de télécharger le fichier SWF terminé, après quoi nous pourrons l'utiliser sur notre site Web de portfolio. .
Création d'un nom de site et d'un slogan
Une fois la nouvelle police téléchargée, vous pouvez créer un nom de site et un slogan à l'aide de l'outil Texte et en appliquant la police souhaitée. Pour créer un slogan, nous utilisons la police Tahoma, taille : 10, couleur : # 727272. Après cela, ajustez le nom et le slogan du site conformément au design dans le .PSD.
Étape 9 : ajouter une image à la page d'accueil
Nous placerons l’image de la galerie sur la page principale du site. Pour ce faire, sélectionnez une image dans la médiathèque en cliquant sur « Photo » dans la barre d'outils de gauche. Si nécessaire, ajustez son emplacement en fonction de la conception de la page principale.
Étape 10 : Créer un menu inférieur
À l’aide de l’outil Forme, créez un rectangle étroit gris et à l’aide de l’outil Texte, créez des boutons dessus. Ajustez tout en fonction du design de votre site.
Enregistrez toutes les modifications et voyez le résultat en cliquant sur « Aperçu ».
Vous pouvez également utiliser le module de menu intégré pour créer un menu.
Étape 11 : Créer des conteneurs de contenu
Note: Les conteneurs sont des clips dans website.fla où le contenu peut être ajouté dynamiquement. Ils peuvent être de 4 types : 1) un conteneur avec des objets visibles sur tout le site, 2) un conteneur avec des objets de mise en page ; 3) conteneur avec des objets de page ; 4) conteneur avec des objets de fenêtre contextuelle.
Le modèle de site n°1, que nous avons choisi, comporte deux conteneurs par défaut : un conteneur avec des objets visibles sur tout le site et un conteneur avec des objets de page. Si nous ouvrons le fichier website.fla, nous les verrons :
Ces conteneurs sont écrits dans le fichier structure.xml. Assurez-vous que la largeur est de 980 et la hauteur de 800 pixels.
Un conteneur avec des objets visibles sur tout le site :
Conteneur avec des objets de page :
Pour créer des éléments de site tels que l'arrière-plan, le titre du site, le slogan et le menu inférieur avec un rectangle gris visible sur toutes les pages, nous devons les placer dans un conteneur contenant des objets à l'échelle du site. Nous pouvons facilement le faire en utilisant le panneau de configuration Moto CMS. Cliquez simplement sur l'élément souhaité et sélectionnez son emplacement - Site Web. (Sur tout le site).
Étape 12 : Créer une page À propos de nous
Créer une page blanche
Dans le coin supérieur gauche, cliquez sur le bouton « Créer », qui nous permettra de créer une nouvelle page.
Connexion des boutons de menu nécessaires à la nouvelle page
Pour ce faire, revenez à la page principale et connectez le bouton de menu à la nouvelle page. Mettez simplement en surbrillance le texte du bouton de menu et cliquez sur l'icône de lien à droite pour ouvrir l'éditeur de liens. Dans notre cas, le bouton de menu « Portfolio » renvoie à la page principale du site, et le bouton « À propos de nous » renvoie à la page « À propos de nous ».
Ajout d'une image d'arrière-plan à la page À propos de nous
Nous avons décidé d'ajouter un fond noir à la page. Pour ce faire, allez dans la Médiathèque en cliquant sur le bouton « Photo » sur le panneau de gauche, là nous sélectionnons une image préchargée (un rectangle noir ordinaire) et ajustons son emplacement sur la page en fonction du design.
Ajout de texte à la page « À propos de nous »
Ajoutez des informations textuelles à la page à l'aide de l'outil « Texte ». L'éditeur WYSIWYG intégré vous montre tout ce que vous faites, le formatage du texte est donc un jeu d'enfant. L'ajout d'une adresse de contact est également assez simple, il vous suffit d'ouvrir l'éditeur de liens et de saisir l'adresse e-mail.
Une fois que vous avez terminé, n'oubliez pas de placer les éléments de la page À propos de nous dans le conteneur Objets de page. Sélectionnez chaque élément un par un et sélectionnez l'emplacement : Page (contenu de la page).
Étape 13 : Modifier l'image du préchargeur
Vous avez peut-être remarqué des préchargeurs circulaires blancs lors de la navigation dans les pages. Pour les configurer, ouvrez le fichier website.fla et accédez à la bibliothèque. Faites un clic droit sur le préchargeur et sélectionnez Propriétés.
Dans la fenêtre des propriétés du symbole, vous pouvez sélectionner l'élément « Modifier la classe de base », puis animer le préchargeur comme vous le souhaitez. Nous laisserons le préchargeur vide et supprimerons l'image graphique.
Étape 14 : Animation du site Web
Enfin, arrivons à la partie la plus intéressante de notre guide : l’animation du site web. Sur ce moment, comme vous l'avez peut-être déjà remarqué, le site est statique, puisque pas un seul conteneur n'est animé. Notre prochaine étape sera donc d’animer les conteneurs et d’ajouter d’autres animations pour donner vie à notre site.
Animation des conteneurs par défaut
Le conteneur de contenu est facile à animer le long de la chronologie. Ouvrez le fichier website.fla et créez une animation de fondu entrant pour chaque conteneur.
Tout d’abord, animons le conteneur principal avec des objets visibles sur tout le site. Il s'agit de la couche website_holder_1. Nous faisons une animation simple avec transparence, mais nous allons décorer son apparence avec quelque chose. Créez une deuxième image clé sur le calque, définissez Alpha 0% pour la première image clé (rendez-la transparente), créez une image intermédiaire de la première à la seconde, puis ajoutez un adoucissement.
Créons la même animation pour le conteneur avec les objets page (couche page_1_holder_2), mais faisons-la apparaître un peu plus tard.
Nous allons donc ajouter deux images clés supplémentaires sur le calque, rendre le conteneur transparent sur la première et la deuxième images et créer une image intermédiaire avec adoucissement de la deuxième image clé à la troisième.
Lorsque nous compilerons et chargerons le site, nous verrons que chaque élément apparaît avec une animation. Mais lorsqu'on passe d'une page à une autre, il n'y a pas d'animation, seulement des clignotements inhabituels. La deuxième partie de la chronologie en est responsable.
C'est ainsi que nous animons l'apparition et la disparition du contenant.
Étant donné que la police du texte provient des polices système, nous devons changer le mode de fusion du calque normal au niveau pour toutes les instances de movieclip sur les calques conteneurs.
Nous créons des conteneurs supplémentaires et les animons.
Pour un bon site flash, cette animation ne suffit pas, nous allons donc animer d'autres parties du site, par exemple la partie supérieure (surlignée en jaune dans l'image ci-dessous), la partie inférieure (surlignée en vert) et le contenu. lui-même (dans l'image dans un cadre rouge).
Les parties haute et basse étant au niveau de l'ensemble du site, nous ajouterons deux conteneurs pour ces deux parties. Avant d’ajouter des conteneurs, il faut déterminer leur taille et leur emplacement. C'est facile à faire en utilisant l'outil Slice de Photoshop.
La partie supérieure a les dimensions suivantes : x=0, y=0, largeur=980, hauteur=120.
Zone inférieure : x=0, y=765, largeur=980, hauteur=35.
Le conteneur supérieur contiendra le nom du site, le conteneur inférieur contiendra le menu et ils seront affichés différemment. De plus, ils resteront respectivement en haut et en bas de l’écran lors du passage en mode plein écran.
Après avoir déterminé les tailles des conteneurs, nous ouvrons le fichier structure.xml et ajoutons de nouveaux conteneurs (au niveau du site), en précisant leurs coordonnées, largeur, hauteur et profondeur.
Après avoir ajouté des conteneurs au fichier .xml, nous devons les créer dans le fichier website.fla. Ouvrez le fichier website.fla et créez de nouveaux calques pour nos conteneurs. L'ordre des calques doit correspondre aux valeurs de profondeur que nous avons définies dans le fichier XML.
Nous pouvons copier le movieclip vide de la couche website_holder_1 et le coller dans website_holder_3 et website_holder_4.
Dans le clip, nous définissons les mêmes coordonnées que celles spécifiées dans le fichier structure.xml.
Pour le 3ème conteneur : x = 0, y = 0 ;
Pour le 4ème conteneur : x = 0, y = 765.
Depuis que nous avons copié le clip, les anciens noms sont restés. Nous les modifions en fonction de leur pièce d'identité afin qu'ils soient faciles à trouver.
Il faut faire de même pour le conteneur 4.
Sur la timeline, nous définissons la première image clé des conteneurs 3 et 4 afin qu'ils commencent à apparaître plus tard que le conteneur contenant les objets de l'ensemble du site. Nous créons ensuite les deuxièmes images clés et l'animation interpolée. Les premières images clés contiennent la position de départ des conteneurs et les secondes images clés contiennent la position finale des conteneurs sur le site. Le conteneur principal apparaît en haut de l'écran, nous le déplaçons donc vers la première image clé ; le conteneur inférieur se trouve sur le côté inférieur, nous le déplaçons donc également vers la première image clé. Et nous ajoutons également des assouplissements pour animer les images intermédiaires.
Voici ce que nous avons obtenu :
Après cela, nous devons ajouter le code suivant sur la couche d'actions au niveau de la première image clé de l'animation de nos conteneurs.
Ensuite, nous compilons le site et mettons à jour le panneau de configuration.
Placer des objets dans des conteneurs
Lorsque vous sélectionnez un objet, vous verrez que deux nouveaux conteneurs sont apparus dans la liste des emplacements possibles dans le menu déroulant : haut et bas.
Le nom du site avec un slogan doit être placé dans le conteneur supérieur et le menu du site avec un rectangle gris en bas.
Changer le contenu du conteneur inférieur
Il est désormais souhaitable que le conteneur inférieur colle au bas de l'écran sur un grand écran. Pour ce faire, nous devons déplacer l'animation du conteneur vers un autre clip, car comme vous le savez, nous ne pouvons pas déplacer un clip animé par programme (l'animation ne fonctionnera pas). Appelons ce clip website_holder_4_c.
Après cela, passons à la scène principale, cliquons sur les premières images clés des conteneurs 3 et 4 et éditons le code.
Une fois le site compilé, vous pouvez voir que le conteneur inférieur colle au bas de l'écran, quelle que soit la façon dont nous redimensionnons l'écran. Si la résolution de l'écran est trop petite, le conteneur inférieur ne chevauchera pas le contenu du site et restera en place.
Étape 15 : Animer le conteneur de contenu du site
Afin d'animer le contenu du site, nous devrons animer le conteneur avec les objets de l'ensemble du site de la même manière que nous l'avons fait pour les conteneurs supérieur et inférieur.
Étape 16 : Créer une page de contact
Avant de créer une nouvelle page, mettons à jour le modèle de page. Faisons du modèle pour toutes les nouvelles pages une page "À propos de nous". Cliquez avec le bouton droit sur la page À propos de nous et sélectionnez Mettre à jour le modèle de page.
Après avoir mis à jour le modèle de page, cliquez sur le bouton « Créer », saisissez le nom de la page, le titre, attribuez une URL et sélectionnez son emplacement dans la structure de votre site, comme indiqué ci-dessous dans la capture d'écran.
La page Contact est prête. Il ne reste plus qu'à éditer son contenu à l'aide d'un éditeur WYSIWYG pratique et à utiliser l'éditeur de liens pour le connecter au bouton de menu correspondant.
Étape 17 : Créer un emplacement simple
Dans Moto Flash CMS, les slots jouent le rôle d'objets animés. Un slot peut contenir un grand nombre de fonctions animées contrôlables directement depuis le Control Panel.
Nous allons d’abord essayer de créer un slot simple puis de l’améliorer.
Commençons par le bouton "Fermer", ajoutez-le au site sous forme d'image, appliquez-lui quelques effets et attribuez l'action "Aller à la page" -> "Accueil".
Animons le bouton "Fermer", ce n'est pas difficile du tout, car nous le ferons en utilisant un slot. Créons un emplacement dans le fichier website.fla. Pour cela, importez l'image du bouton « Fermer » dans la bibliothèque. Dans la section Slots, nous devons créer un nouveau movieclip et l'appeler CloseButtonSlot.
Définissons la classe comme CloseButtonSlot. Il n'est pas nécessaire de créer une nouvelle classe, il suffit d'hériter de la classe AbstractMotoSlot. Copiez simplement : com.moto.template.shell.view.components.AbstractMotoSlot et collez-le dans le champ Classe de base.
Nous ajoutons ensuite l'image du bouton de fermeture à la scène (CloseButtonSlot MovieClip doit être ouvert) et la convertissons en un clip appelé CloseButtonIcon. Puisque nous avons hérité de notre slot de la classe AbstractMotoSlot, cela nous donne l'animation principale. Nous allons maintenant créer un bel effet d'agrandissement/réduction.
L'étape suivante consiste à créer un nouveau calque et à créer des images clés dans lesquelles placer « Stop(); ». Plaçons les marques principales « over » (entre les première et deuxième images clés d'arrêt) et « out » (entre les deuxième et troisième images clés d'arrêt) - voir capture d'écran :
Nous créons les mêmes images clés et images intermédiaires sur le calque avec notre clip.
Par exemple, notre bouton « Fermer » tournera dans le sens des aiguilles d'une montre lorsque le curseur de la souris passe dessus et dans le sens inverse des aiguilles d'une montre lorsqu'il est supprimé.
Ajoutons de la luminosité à la rotation et de l'adoucissement pour animer le mouvement.
Une fois l'animation terminée, nous compilons le fichier website.fla avec notre nouveau slot (Ctrl + Entrée).
Afin de travailler avec un slot à l'aide de Moto CMS, nous devons préciser ses paramètres dans le fichier : structure.xml :
librarySymbolLinkage=" " – exporte l'emplacement du movieclip (nom de la classe).
animation=”true” – un attribut qui indique si la machine à sous est animée ou non.
redimensionnable=”false” – s’il existe ou non une logique pour redimensionner l’emplacement.
verrouillé=”false” – si l’emplacement doit être affiché ou non dans le panneau de configuration.
– valeurs par défaut pour toutes les propriétés du slot, vous devez ajouter l'attribut alpha=" " - transparence du slot, de 0 à 1.
Dans notre cas, voici ce qui s'est passé :
Après cela, accédez au Panneau de configuration et ouvrez n'importe quelle page. Dans la section « Slot », vous verrez tous les emplacements disponibles. Sélectionnez l'emplacement du bouton Fermer et placez-le sur la page à la place de l'image du bouton Fermer.
Lorsqu'un emplacement est sélectionné, un panneau de propriétés apparaîtra sur la droite. Allez dans « Actions » → « lorsque vous cliquez dessus », cochez la case « Activer » → « Aller à la page » → « Accueil ».
Copiez ensuite l'emplacement et collez-le sur d'autres pages où un bouton Fermer est nécessaire. Enregistrez les modifications et vérifiez le résultat.
Étape 18 : Créer un emplacement plus complexe
Créez un clip SimpleButtonSlot. Modification du fichier structure.xml
Dans notre cas, la complexité d'un slot réside dans l'ajout de paramètres changeant dynamiquement. Créons un bouton slot avec quelques paramètres variables. Pour ce faire, ouvrez le fichier website.fla, créez un nouveau clip et appelez-le SimpleButtonSlot. La classe de base est écrite de la même manière qu'à l'étape 17.
Classe de base : com.moto.template.shell.view.components.AbstractMotoSlot.
Ensuite, nous ajoutons un champ de texte appelé « Label » et un plan avec ce bouton. Convertissez le plan en un clip nommé « ButtonLabelPlane ».
Pour plus de commodité, nous allons convertir le Label en un clip vidéo et l'appeler « labelHolder », puis convertir le ButtonLabelPlane en un autre clip vidéo et l'appeler « planeHolder ».
Ouvrons le fichier structure.xml et ajoutons un nouveau slot avec deux propriétés. Copiez et collez simplement le code suivant dans la section slots :
Créer la classe SimpleButtonSlot
Pour gérer ces deux propriétés, la classe Base ne suffit pas. Nous devons donc créer une nouvelle classe. Créez un nouveau fichier ActionScript dans le dossier src/slots, appelez-le SimpleButtonSlot.as et ajoutez le code suivant :
Revenons maintenant au clip SimpleButtonSlot et spécifions une autre classe :
slots.SimpleButtonSlot.
Après cela, il faut importer le clip ici :
Pour que les deux propriétés soient traitées, nous devons remplacer la fonction updateProperty(). Dans l'extrait de code suivant, PropertyVO apparaît avec sa valeur, son type, son paramètre et sa fonction getParameter(). Nous utilisons la structure « switch » car nous avons deux propriétés : htmlText et Color.
Décrivons maintenant notre TextField (labelHolder) et notre plan (planeHolder).
Après cela, nous devons ajouter la fonction AutoSize :
Puisque notre emplacement est redimensionnable, centrons le texte sur le plan. Pour ce faire, nous devons remplacer la fonction SetSize(). De plus, nous devons redimensionner le plan en fonction de la largeur de l'étiquette de texte. Nous devons appeler la fonction SetSize() sur updateProperty() lorsque la propriété label est mise à jour.
Compilez le site pour enregistrer vos modifications.
Animer la machine à sous
Ouvrez le fichier website.fla, accédez à la scène principale, puis au clip SimpleButtonSlot. Sur Layer3, nous créons trois images clés et insérons Stop ();. Nous plaçons les marques principales « over » (entre les première et deuxième images clés d'arrêt) et « out » (entre les deuxième et troisième images clés d'arrêt).
Animons le planeHolder (c'est-à-dire l'arrière-plan). Par exemple, il peut s'envoler et s'arrêter. Sur la timeline, cela ressemblera à ceci :
Compilez le site et voyez les changements qui en résultent. Nous pouvons maintenant travailler avec l'emplacement d'objet. En utilisant le panneau de contrôle du slot (à droite), nous pouvons modifier les propriétés du slot et lui appliquer divers effets.
Voici un bon exemple de la façon dont vous pouvez utiliser cette machine à sous sur notre site. Nous l'avons utilisé sur la page À propos de nous lors de la fourniture d'une adresse e-mail.
Étape 19 : Créer un lecteur flash de musique
Note: Les modules sont des éléments animés dérivés d'emplacements disponibles dans la bibliothèque ou pouvant être chargés à partir d'un fichier SWF externe. Ils disposent d’un ensemble de propriétés qui permettent aux utilisateurs de les gérer facilement. Par rapport aux slots, les modules ont un gros avantage : chaque module possède son propre panneau de contrôle. Moto Flash CMS propose cinq types de panneaux de contrôle pour créer vos propres modules personnalisés. Cela signifie que les développeurs Flash peuvent créer l'interface, puisque le reste a déjà été créé par les développeurs Moto CMS.
Par exemple, le modèle n°1 que nous utilisons possède un module intégré avec un lecteur de musique. Vous pouvez facilement ajouter ce module à n'importe quelle page et ouvrir le panneau de configuration en double-cliquant dessus.
Création d'un clip MusicPlayerModule. Modification du fichier structure.xml
Créons un simple lecteur de musique avec une fonctionnalité marche/arrêt. Ouvrez le fichier website.fla et créez un nouveau clip, appelez-le « MusicPlayerModule » et précisez classe de base: modules.MusicPlayerModule. Ensuite, nous l'ajoutons à la scène et le convertissons en un clip « musicPlayerIcon ».
Ouvrez le fichier structure.xml et ajoutez un nouveau module. Dans la section modules, ajoutez le code suivant :
Créer la classe MusicPlayerModule
Créez un nouveau fichier ActionScript dans le dossier src/modules appelé MusicPlayerModule et ajoutez le code suivant pour créer un wrapper vide pour la classe :
Compilez le site et rechargez le panneau de configuration Moto CMS. Dans le panneau de gauche, recherchez Modules, sélectionnez le lecteur de musique et placez-le sur la page.
Double-cliquez sur un module pour ouvrir le panneau de configuration et charger quelques pistes (via le bouton Ajouter). Maintenant, vous pouvez entendre la musique, mais vous ne pouvez pas l'arrêter.
Pour résoudre ce problème, allons au clip MusicPlayerModule et créons un formulaire. Transformons-le en une vidéo appelée « Button ». Nous l'utiliserons pour gérer les événements de clic et activer/désactiver le son.
Étant donné que le module Music Player utilise une logique « d'objet commun » et se souvient si le son est activé ou désactivé, lorsqu'il est allumé, le module doit vérifier si la musique est jouée ou non.
Étape 20 : Créer une galerie d'images Flash
Cette étape est très étendue. Nous allons maintenant décrire comment insérer rapidement une galerie, en fournissant tous les fichiers sources nécessaires.
Ouvrez le fichier structure.xml et insérez le module galerie.
Une fois le module ajouté, il devrait apparaître dans le panneau de configuration. Mais pour travailler avec, vous devez créer trois classes : GalleryModule.as, Monitor.as et Scroll_bar.as, qui se trouvent dans le dossier /gallery_sources/.
Chargez ces classes (GalleryModule.as, Monitor.as et Scroll_bar.as) dans le dossier src/modules.
Vous pouvez également trouver le fichier gallery.fla dans l'archive zip. Copiez la galerie movieclip de gallery.fla vers website.fla.
Une fois que tout est téléchargé sur votre serveur local, vous pouvez commencer à travailler avec la galerie. Dans le panneau de gauche, cliquez sur Module, sélectionnez une galerie d'images et placez-la sur la page. Double-cliquez sur le module pour ouvrir le panneau de configuration. Ajoutons plusieurs photos en utilisant le bouton "Ajouter".
Vous pouvez spécifier un titre et un Alt pour chaque image, ajouter une description ou lier l'image à n'importe quelle page du site, fenêtre contextuelle ou même une URL externe.
Enregistrez les modifications et consultez le site.
Conclusion
Nous avons donc terminé l'histoire de la création d'un site Web de portfolio de photos à partir de zéro à l'aide de Moto Flash CMS. souviens-toi, ça CMS Moto fournit de nombreux modules et widgets supplémentaires, sur la base desquels vous pouvez créer vos propres modules, ce qui vous permet de gagner du temps et de réduire les coûts. De plus, ce CMS Flash fournit également tous les outils de référencement nécessaires qui peuvent vous aider à optimiser votre site Web pour qu'il soit mieux classé dans les SERP.
Et dans notre boutique en ligne, vous trouverez plus de 80 produits professionnels, fonctionnels et beaux. modèles de sites Web Flash .
Bonne chance dans votre développement.
Création d'un site web flash ndash ; la question est assez compliquée. Cela nécessite des connaissances dans de nombreux domaines : la programmation, l'infographie, les bases de l'optimisation et de la promotion de sites Web, et enfin, il faut bien connaître le flash lui-même, tant au niveau de la connaissance de l'environnement de développement que du langage de programmation action script 2.0. ou action script 3.0, qui est actuellement une priorité plus élevée.
Les applications Flash sont développées dans Adobe Flash Professional ndash ; est un programme multimédia utilisé pour créer du contenu tel que des applications Web, des films, des jeux, des applications pour appareils mobiles et autres appareils intégrés.
Flash et tiret ; un phénomène unique. Auparavant, ce produit s'appelait « Macromedia Flash », après avoir été acquis par Adobe, ce programme est devenu connu sous le nom de « Adobe Flash » en 2005. L'animation Flash est utilisée pour diffuser des pages Web. Parfois affleurant ndash ; Cela fait partie d'une page html, mais il arrive que la page entière soit entièrement réalisée en Flash ou que l'intégralité du site soit créée avec son aide. Les fichiers Flash résultants sont des fichiers spéciaux au format swf (« ShockWave Flash ») qui nécessitent des plugins de navigateur gratuits spéciaux pour visualiser le contenu ; ils peuvent être téléchargés et installés facilement et rapidement à partir du site officiel d'Adobe. L'avantage des films flash est très chargement rapide et travailler avec l'animation vectorielle avec interactivité. Flash peut être chargé avant que la vidéo entière ne soit affichée à l'écran, c'est-à-dire que vous pouvez implémenter l'option lorsque vous commencez à regarder l'animation et que les « flux » restants sont chargés sur l'écran en arrière-plan.
Les graphiques flash utilisés dans le code vectoriel et le code du programme vous permettent de créer une application complète qui peut remplacer certains raster, fragments vidéo, codes de programme, mais faites-le de manière beaucoup plus optimale, moins de bande passante est utilisée pour les flux et moins de puissance du processeur est consommée. . En plus du rendu vectoriel, Flash Player (le lecteur requis pour visualiser les animations Flash) comprend une machine virtuelle (ActionScript Virtual (AVM)) pour prendre en charge les scénarios d'interaction d'exécution, et prend également en charge la vidéo, le mp3.
Examinons les types de graphiques existants et soulignons les avantages des graphiques vectoriels, avec lesquels Flash fonctionne directement.
Tous les graphiques peuvent être divisés en trois types : raster, vectoriel, 3D. Dans les graphiques raster, comme sur un moniteur de télévision, chaque image est constituée d'un ensemble de petits éléments ndash ; pixels et tiret ; Il s'agit d'une abréviation d'élément d'image.
Le principe du graphisme par points est très simple : tout comme un enfant à l'école dessine par cellules, sauf qu'ici ces cellules sont beaucoup plus petites. Ce type de graphisme est facile à mettre en œuvre, à traiter et à présenter, il est techniquement pratique à mettre en œuvre, à automatiser la saisie ou la numérisation des informations visuelles.
Mais les graphiques raster présentent des inconvénients : ils sont volumineux, le poids du fichier obtenu est important et lorsque l'image est réduite ou agrandie, la qualité du dessin est perdue.
Le codage des informations graphiques dans les graphiques vectoriels est différent : toutes les images sont spécifiées sous forme de contours et de tirets ; objets mathématiques. Ces contours sont un objet indépendant qui peut être déplacé, redimensionné, mis à l'échelle autant de fois que vous le souhaitez. Les lignes sont spécifiées par des points de départ, des formules indiquant les lignes elles-mêmes. Grâce à cela, lors du changement de design, les proportions sont toujours conservées avec précision. Les graphiques vectoriels sont également des graphiques orientés objet, car le dessin est constitué d'objets individuels - lignes droites et courbes, ellipses, rectangles, formes fermées et ouvertes, etc., qui ont leurs propres caractéristiques d'épaisseur de contour, de couleur, de style de ligne, etc. d.
Les graphiques vectoriels sont économiques en termes de ressources, les informations les concernant sont stockées sous forme de formules, plutôt que d'informations pour chaque point, les descriptions de couleurs n'augmentent pas de manière significative la taille du fichier. Les graphiques vectoriels peuvent être facilement modifiés sans pratiquement aucune perte de qualité d’image. Il existe des domaines graphiques dans lesquels il est important de conserver des contours clairs, par exemple lors de la création de logos, de polices, etc.
Le vecteur utilise tous les avantages de la résolution de tous les périphériques de sortie, par exemple une imprimante. L'image semble toujours de haute qualité et claire, tout dépendra uniquement de l'imprimante elle-même.
Un autre avantage des graphiques vectoriels est qu’ils peuvent facilement être transformés en graphiques raster, mais pas l’inverse ! Et il peut inclure des objets graphiques raster, bien qu'il ne puisse pas être traité par les mêmes moyens.
Un sérieux avantage des graphiques vectoriels réside dans la possibilité d'intégrer du texte et des images, une approche de ceux-ci et, par conséquent, la possibilité de créer le produit final. Les éditeurs de graphiques vectoriels les plus populaires : CorelDRAW, Adobe Illustrator et bien sûr Adobe Flash.
Le vecteur est limité lors de la création d’images réalistes : ndash net et caricatural ; oui, mais voici comment définir un pin ou un nuage avec la formule. Un problème se pose également lors de la saisie des informations graphiques : par exemple, le scanner transmet des informations sur l'image pixel par pixel : la localisation et la couleur de chaque point en fonction de la réaction du faisceau lumineux. Elle ne peut pas couvrir objet par objet, et toutes les images, comme je l’ai écrit plus haut, ne peuvent pas être formalisées.
Flash est devenu populaire partout ; Des images de dessins animés appelées bannières apparaissent sur presque toutes les pages Web. Ils sont interactifs, lisent des animations et occupent peu d'espace disque, ce qui est important lorsque l'on travaille en ligne.
L'animation est créée en affichant chaque image flash pendant une période de temps spécifique. Lorsqu’il y a plusieurs images, l’illusion du mouvement est créée. Avant la technologie Flash, les animations GIF sont apparues, mais les capacités de Flash sont beaucoup plus larges. Ainsi, avec son aide, vous pouvez créer des éléments de navigation, des dessins animés, des logos animés, des calculatrices, des sites entiers avec un ensemble de divers éléments interactifs, et quels miracles d'animation peuvent être créés en flash : ils ont l'air très impressionnants et d'autres technologies pour le le Web ne peut pas se vanter de telles capacités.
Les vidéos animées créées par Flash sont appelées films. Les capacités d'animation ne se limitent pas à l'animation, divers objets sont animés : menus, images, liens, textes.
Lorsque vous démarrez le programme, une fenêtre s'ouvre avec espace de travail et une barre d'outils, ainsi que des fenêtres supplémentaires pouvant être connectées pendant le travail. Des onglets permettant de travailler avec la chronologie, les paramètres de vérification des erreurs, etc. sont également affichés. Dans le programme, les films sont créés en dessinant ou en important des dessins prêts à l'emploi, ils sont placés dans une zone spéciale de la fenêtre de travail ndash ; scène (Stage) et les images sont créées à l'aide de Timeline (timeline).
Il peut y avoir plusieurs scènes dans un film ; au démarrage de la vidéo, elles sont jouées dans l'ordre dans lequel elles ont été créées, à moins que cet ordre n'ait été volontairement modifié. Cela vous permet de modifier facilement et rapidement les épisodes individuels et de modifier leur ordre.
L'animation elle-même se fait en changeant les images qui se succèdent, en changeant leur contenu, c'est-à-dire les objets avec les paramètres nécessaires. Les objets sur la scène peuvent être pivotés, modifiés leur position, leur couleur, définir leur transparence, leur forme, leur taille, la même chose peut être faite avec n'importe quel autre objet.
L'animation peut être créée des manières suivantes :
Animation image par image ; le dessin dans chaque cadre est réalisé à la main et les cadres sont consécutifs ;
calculé (animation interpolée) ndash ; seules les images initiales et finales sont créées (appelées images clés), et entre elles, le programme lui-même construit des images ; deux types de telles animations : le mouvement (Motion Tweening, lorsque les paramètres de mouvement changent de rotation, de taille, de position), les formes (Shape Tweening) ;
par programmation ndash ; lorsque les paramètres de modification d'objet sont spécifiés à l'aide des commandes du langage de programmation Action Script.
Lorsque vous travaillez sur un film, les données source sont enregistrées dans un fichier spécial avec l'extension .fla. Cela inclut également la scène avec tous les objets, Options supplémentaires sur les objets qui n'étaient pas inclus dans le film, mais qui y ont été créés, ainsi que les options sonores, les commentaires, les codes de script, les paramètres du programme, etc. Après avoir créé une telle source, il est nécessaire de la traduire dans un format adapté à Internet ; à savoir SWF, nous publions donc le film ou compilons le code. Cela supprimera les informations du fichier qui ne sont pas nécessaires pour lire le film dans le format souhaité. Ainsi, la taille du fichier devient minime et est rapidement téléchargé par l'utilisateur. Un tel fichier peut être ouvert séparément ndash ; le lecteur le jouera, mais vous pouvez le connecter à n'importe quelle page HTML en tant qu'objet.
Le film est créé à partir d’éléments prêts à l’emploi ; normes (Symboles) ou symboles. Un standard est une image, un bouton, une animation ou un clip vidéo utilisé à plusieurs reprises dans une vidéo. Ils peuvent être créés et importés. Une fois créés, les symboles sont stockés dans un stockage spécial ; Bibliothèque. Au cours du processus d'assemblage du film, aux endroits où cela est nécessaire, des instances précises (Instance) des standards (qui sont stockées dans la bibliothèque) sont insérées, et non complètement à chaque fois. Et vous pouvez les insérer autant de fois et n'importe où que vous le souhaitez. Dans ce cas, vous pouvez modifier les paramètres de l'instance à votre guise : emplacement, taille, échelle, rotation, courbure, transparence, ton, etc., mais les symboles de référence eux-mêmes ne changent pas. C'est très pratique, ndash ; vous n'avez pas besoin de recréer un élément à chaque fois ni de le copier, il n'y a qu'un seul élément et il y a autant de modifications que vous le souhaitez. Et pendant le processus de publication, le fichier vidéo final, qui est créé au format swf, est assemblé de manière à ce qu'à un endroit il y ait une référence directe à l'objet, et à tous les autres endroits - ndash ; seulement des indications vers cela. Imaginez à quel point le poids de la vidéo est ainsi réduit par rapport à la copie d'éléments presque identiques.
Les normes sont :
taureau; Clip vidéo ndash ; comprend du son, des graphiques, des animations et peut être contrôlé par programme par un script ;
taureau; Graphique (Graphique) ndash ; dessins statiques, animations, sons, mais non contrôlés par programme ;
taureau; Bouton (bouton) - comprend des images, du son ; Comparé à d'autres types de symboles standard, il ne comprend que quatre cadres, qui affichent les changements d'état du bouton lorsque divers événements de souris se produisent.
Avant de créer directement un symbole standard, vous devez définir son type ; il pourra ensuite être modifié.
En plus des symboles standards et de leurs instances, la vidéo peut contenir des images provenant de fichiers et de polices externes.
La vidéo entière est en Adobe Flash ndash ; Il s'agit d'une séquence d'images (Frames), elles sont affichées une par une à une vitesse spécifiée. Vous travaillez avec eux à l'aide de la chronologie. A gauche de l'échelle se trouvent les calques dont les noms doivent être précisés, à droite un tiret ; un ensemble de cadres vides qui sont remplis au fur et à mesure que les objets sont créés et placés sur la scène. Une fois le cadre rempli d’objets, il change de couleur en gris. Les images clés sont indiquées par un point noir. Sur la timeline, l'image actuelle est marquée d'un marqueur rouge ; une tête de jeu à travers laquelle passe verticalement une fine ligne rouge, qui traverse toutes les couches et laquo;seesraquo; la trame actuelle dans chacun d’eux. Ce sont ces images, c'est-à-dire leur contenu sous forme de clips vidéo, qui sont affichés à l'écran.
Pour mettre en œuvre l'interactivité et la possibilité de créer des sites Web à part entière, Adobe Flash utilise le langage de programmation Action Script.
Pour rendre un film interactif, Flash utilise des programmes de script (scripts de script), ils contiennent un ensemble d'instructions (actions) en ActionScript et sont exécutés lorsque certains événements se produisent : l'utilisateur appuie sur un bouton, atteint une certaine image du film, réagit au déplacement de la souris, de sa molette, au placement du pointeur sur une certaine zone et bien d'autres. Les commandes de script déterminent la réponse de Flash à un événement.
Les commandes de script exécutées lors de la mise en œuvre d'un événement particulier sont indiquées pour un clip, une image, un bouton, et cela se fait dans un onglet spécial en bas de l'écran Actions (Commandes) (Cadre d'actions, Clip d'action d'actions), bouton d'actions.
Événements possibles :
Appuyez sur la touche ndash ; Lorsque l'utilisateur appuie sur une touche du clavier, le paramètre de fonction est le nom de la touche.
Roulez sur ndash ; lorsque le pointeur de la souris est sur un objet, mais que la souris n'est pas enfoncée ;
Relâchez ndash ; si le bouton de la souris est relâché lorsque le pointeur est sur le bouton programmé, c'est-à-dire si l'utilisateur clique avec la souris ;
En appuyant sur (Appuyez) sur ndash ; si le bouton de la souris (gauche) est enfoncé alors que le pointeur est sur le bouton qui a été programmé. Dans ce cas, c'est la zone de déclenchement qui est prise en compte, et non son image visible, celle-ci étant déterminée dans le cadre Hit ;
Suppression (déploiement) ndash ; il y avait un pointeur de souris au-dessus du bouton, il n'a pas été enfoncé et la souris a été éloignée du bouton programmable ;
Glisser vers l'extérieur - le bouton de la souris est placé sur l'objet, enfoncé et éloigné ;
Libérer à l'extérieur ndash ; si le bouton de la souris a été appuyé sur un objet puis relâché par un utilisateur extérieur à l'objet ;
Retour (glisser) ndash ; un pointeur est placé sur un objet, le bouton gauche de la souris est enfoncé et n'est pas relâché, mais le pointeur est déplacé derrière l'objet puis renvoyé.
ActionScript 3.0, comparé à ActionScript 2.0, est plus moderne dans le sens où il repose sur les principes fondamentaux de la programmation orientée objet. Où les concepts principaux sont une classe, un objet, ses attributs ou propriétés, ainsi que les méthodes inhérentes à cet objet.
ActionScript s'exécute à l'aide d'une machine virtuelle (Virtual Machine ActionScript), qui fait partie de Flash Player.
La base de tout code de programme est une variable qui, dans ActionScript, est définie comme ceci : var ndash ; une commande Flash spéciale, ce qui signifie que dans cette section une variable est désignée et son type est déterminé ; nom ndash; nom de variable, spécifié au format texte-numérique, mais ne commençant pas par un nombre ; tapez ndash ; indication du type de variable (numérique - Nombre, tiret logique ; Booléen, texte - Chaîne, etc.). c'est-à-dire que vous spécifierez : Var x: String;
N'oubliez pas d'inclure deux points après le nom de la variable et un point-virgule à la fin de la ligne. Lors de l'exécution du code, la valeur et, par conséquent, le type de la variable peuvent être modifiés.
Une variable contenant une grande quantité de données est appelée un tableau. Dans AC 3.0. il est spécifié avec le type Array : Var Mas : Array.
Tous les éléments du tableau sont numérotés à partir de 0, donc pour accéder, par exemple, au premier élément, vous devez spécifier Mas. Autrement dit, entre crochets, vous indiquez la position de l'élément souhaité dans le tableau.
Le code lui-même sera composé de fonctions qui décrivent la séquence de commandes qui se produisent lors d'un événement particulier ; clic de souris, appui sur une touche, atteinte d'une certaine valeur, etc.
Une fonction est spécifiée à l'aide du mot réservé function, puis vous spécifiez son nom - nom - n'importe quel nom texte-numérique, mais ne commence pas par un nombre, puis entre parenthèses () vous pouvez spécifier les paramètres de la fonction ndash ; ce qui lui est fourni en entrée, ils peuvent être absents, puis un deux-points et le type de données que la fonction renvoie ou annuler ndash ; quand une fonction ne renvoie rien. Après cela, placez tout le code de fonction entre accolades ( ). Et vous accédez à la fonction en indiquant son nom et ses paramètres, si nécessaire : name()."Conditions dans AS 3.0. sont spécifiés via l'instruction if : if(x==y), c'est-à-dire que la condition de comparaison elle-même doit être indiquée entre parenthèses. Les boucles sont spécifiées à l'aide de for(), où ses paramètres sont spécifiés entre parenthèses : une variable compteur, l'étape de sa modification.
Chaque objet est caractérisé par ses propres paramètres ou propriétés ; vous pouvez attacher des écouteurs d'événements aux objets dans Flash à l'aide de la fonction addEventListener. Cet écouteur traitera les événements survenant avec l'objet et si les réactions à ceux-ci sont décrites dans la fonction par le programmeur, le programme réagira en conséquence.
Ceci n'est qu'une petite partie de ce que vous devez savoir lorsque vous commencez à créer un site Web Flash. Vous n’êtes pas obligé de créer un site Web à partir de zéro, il existe des modèles spéciaux que vous pouvez acheter et modifier en fonction de vos besoins (par exemple, le site Web templatemonsters). La conception a déjà été entièrement développée, vous devez modifier le contenu et dans la mise en œuvre du logiciel, tout ce qui sera nécessaire peut être reprogrammé. Ensuite, vous devez acheter un domaine et un hébergement, placer le fichier html dans lequel le swf est connecté.
Lisez des livres (par exemple, pour le travail et les articles, le livre laquo ; 100 % tutoriel M.Flash MXraquo ; m'a aidé), apprenez de vos collègues sur les forums (demiart, flasher.ru), et aussi, quel devrait être votre tout premier assistant - c'est l'aide sur le site officiel d'Adobe. le langage ActionScript est très détaillé, des exemples sont présentés et le matériel est également présenté en russe.
Après avoir créé une vidéo, elle doit être publiée. Les paramètres de publication du programme peuvent être définis dans l'élément de menu Fichier Options de publication. Il indique dans quels formats télécharger la vidéo, quels sont les paramètres graphiques et de qualité sonore, et bien d'autres. Une fois que vous recevez le fichier swf, vous pouvez l'utiliser comme une application prête à l'emploi à part entière. Pour modifier ou mettre à jour la vidéo créée, vous devez modifier le ndash source ; fla et publiez-le à nouveau.
Heureusement, les internautes les plus actifs peuvent créer un jeu flash. Les débutants peuvent en bénéficier même s'ils possèdent des compétences de base en programmation (les acquérir, d'ailleurs, n'est pas si difficile - si seulement vous en aviez l'envie). Certes, vous aurez besoin d'un certain temps pour maîtriser l'un des nombreux concepteurs de jeux Flash spéciaux (par exemple, Macromedia Flash).
De nombreux sites de logiciels contiennent, entre autres, de tels constructeurs. En règle générale, leur installation sur un ordinateur ne pose aucun problème particulier à l'utilisateur. N'oubliez pas que le programme sélectionné doit être enregistré et que toutes les modifications nécessaires sont installées - il vous servira alors fidèlement, c'est-à-dire sans interruption. La plupart des concepteurs de jeux utilisent langue anglaise, mais vous pouvez rechercher un crack ou une version russe. Souvent, dans les paramètres eux-mêmes, il y a une fenêtre dans laquelle vous pouvez définir votre langue maternelle.
Comment créer un jeu flash : préparation préalable
Avant même de vous asseoir pour maîtriser le kit de construction, vous devriez déjà avoir défini un scénario de jeu et un scénario approximatifs. C'est une bonne idée de penser à l'animation et au design à l'avance - cela vous fera gagner beaucoup de temps. Avant de créer votre propre jeu flash, décidez du type souhaité. Pour vous inspirer, visitez des sites Web proposant des bibliothèques de jeux flash.
Les professionnels recommandent aux débutants de commencer par créer applications simples, comme les arcades. Et alors seulement, vous pourrez passer à des types de jeux plus complexes et même créer vos propres stratégies. Vous pouvez sélectionner le type de futur jouet chez le même concepteur, où tous les genres sont commodément triés. On active par exemple l'arcade (en double-cliquant).
Comment créer un jeu flash : travailler dans le game designer
Ouvrez le modèle et faites-y glisser les objets nécessaires, situés dans les sections « Objets d'animation » et « Objets statiques ». Créez un arrière-plan en choisissant une texture et une couleur. Sélectionnez les couleurs des objets à l'aide d'une palette de couleurs. Utilisez le lecteur d'animation pour vérifier quelles autres fonctions ne sont pas utilisées. Dans les paramètres, définissez les niveaux de mouvement des personnages du jeu (dans les arcades) ou des objets (dans les jeux de logique).
Une fois que vous avez fait tout le nécessaire, lancez le débogueur. Dans ce mode, vous pouvez jouer à votre propre jeu, à partir de n'importe quel niveau - ceci est important pour tester sa fonctionnalité. Éliminez toutes les erreurs trouvées et vérifiez à nouveau le jeu flash. Si tout va bien, enregistrez les modifications.
Comment créer un jeu flash : penser au jeu
Vous pouvez maintenant trouver un nom original pour votre création flash et rédiger un bref résumé. Utilisez le concepteur d'économiseur d'écran pour créer un économiseur d'écran impressionnant pour votre jeu. Enregistrez toutes les modifications que vous avez apportées.
Parcourez votre propre jeu flash du début à la fin afin d'y trouver (ou non) des erreurs et des dysfonctionnements, et en général, cela ne fait pas de mal de jeter un regard critique sur votre travail. Il est très important que le jeu comporte des parties logiques et clairement définies, comme bon bouquin ou un film : début, déroulement des événements, fin.
Envoyez la version épurée de votre jeu à vos amis - laissez les critiques les plus honnêtes évaluer les résultats que vous avez obtenus. Eh bien, après cela, vous pouvez déjà télécharger le jeu flash sur Internet.
Comment créer un jeu flash si vous en avez l'envie, mais aucune connaissance ?
Aux nombreux utilisateurs si préoccupés par cette question, nous souhaitons certainement apporter une réponse. N'oubliez pas qu'aucune connaissance ne peut venir de nulle part. Toute nouvelle entreprise doit commencer quelque part. Au fil du temps, vous commencerez à comprendre exactement quelles connaissances vous manquent pour créer des jeux. Vous commencerez à demander des conseils, à rechercher des recommandations, à lire de la littérature pertinente, grâce à laquelle vous commencerez à progresser de plus en plus dans vos compétences. N'ayez pas peur des nouveautés, sinon vous n'obtiendrez jamais ce que vous voulez. Bonne chance!