Flash/L'interface - Partie 1

Début de la boite de navigation du chapitre

fin de la boite de navigation du chapitre

Introduction

Adobe Flash © est une application disponible sur Windows et Mac OS X, permettant le développement d'animation plus ou moins complexe. Elle permet de développer, d'un côté l'aspect graphique, et de l'autre un aspect plus informatique : la programmation. Ces deux aspect étant intimement liés.

Avant de commencer à se servir de l'application, nous allons commencer par expliquer son interface, ce qui est indispensable pour comprendre de quoi on parle.

Les captures d'écrans disponible dans cette leçon ont été faite sur Mac OS X, et Adobe Flash CS3 ; il se peut qu’il y ait de légères différences avec l'interface de Windows, ou une autre version de Flash, mais fondamentalement, les boutons sont à la même place.

Dans ce cours, les actions que vous devrez faire seront écrites comme ceci :

Cliquez sur Fichier Flash (AS 2.0)

Tandis que les lignes de codes seront rédigées comme ceci :

ActionScript

01 > var a:Number = 5;

02 > trace (a);

Obtenir Adobe Flash CS3

Vous pourrez vous procurer la version d'évaluation d'Adobe Flash CS3 sur le site d'Adobe ici.

Une fois téléchargé, suivez les instructions pour l'installer. Si vous avez pris la version d'évaluation, vous en disposerez durant 30 jours. Après quoi, vous devrez acheter la version complète. Il existe cependant une alternative : le flex SDK, gratuit, disponible sur le site d'Adobe ici. Comme il faut faire un choix, ce cours sera écrit pour Adobe Flash CS3 uniquement.

L'inscription est nécessaire pour pouvoir télécharger une application sur le site d'Adobe.

Au démarrage

Une fois installée, lancez l'application. Après le chargement, vous arriverez sur un panneau de bienvenue :

Voir l'image 1

• A : Liste des derniers fichiers ouverts, permettant une ouverture rapide. La première fois, vous ne devriez rien voir.
• B : En cliquant sur "Ouvrir..." vous pourrez ouvrir un fichier Source déjà créé.
• C : La catégorie "Créer" permet de créer rapidement un fichier source vierge. Dans Adobe Flash CS3, l'AS1 (ActionScript 1) a été supprimé, bien qu'encore compatible avec l'AS2 (ActionScript 2). Il est préférable de commencer directement avec l'AS3 (ActionScript 3), bien que plus compliqué, il offre aussi d'avantage de possibilité.
• D : Cette catégorie permet de créer rapidement un fichier selon un modèle prédéfini.
• E : Le Flash Exchange est une banque de ressources en ligne, certaines gratuites, d'autres payantes.
• F : Aide et informations supplémentaires, n'hésitez pas à y jeter un coup d'œil.
• G : Accédez au "store" d'Adobe.

Pour commencer, nous allons créer un nouveau fichier FLA, qui correspond aux sources. Ce fichier va contenir toutes les informations de votre animation. Il est à différencier d'un fichier SWF qui sera créé après compilation, et qui ne contiendra que le strict minimum pour faire fonctionner votre animation. C'est ce format SWF qui sera lisible sur internet.

Cliquez sur Fichier Flash (AS 2.0)

Vous venez de créer un fichier FLA, même si celui-ci n'existe pas encore physiquement sur votre disque dur. Nous allons maintenant expliquer chacun des éléments présents à l'écran, ainsi que ceux, plus discrets, cachés dans les méandres des menus.

Interface

Voir l'image 2

Si vous ne voyez pas la même chose :

Cliquez sur Espace de travail puis Par défaut

La scène

Voir l'image 3

La scène est l'élément central de toute animation, y compris les animations entièrement programmées. C'est le support de tous vos objets. Si vous voulez afficher quelque chose, il faut quoi qu’il arrive que ça apparaisse sur la scène. Vous ne pourrez pas vous en passer.

On se servira suffisamment de la scène ensuite pour que vous compreniez son utilité. Quoi qu’il en soit, gardez à l'esprit que TOUT tourne autour de la scène.

La Timeline (Scénario)

Voir l'image 4

La timeline va vous permettre de créer une véritable animation, c'est-à-dire créer un changement dans le temps. De plus, elle va vous permettre de gérer les calques de votre animation.

Insérer un calque

Dans le coin inférieur gauche de la timeline, se trouve l'icône d'une petite feuille à demi retournée.

Cliquez sur l'icône indiquée

Un nouveau calque vient de se créer. Il se superpose automatiquement aux autres. Vous pouvez bien sûr le déplacer, en maintenant enfoncé le bouton gauche de votre souris, et en le déplacement au dessus, ou en dessous.

Double-cliquez sur Calque 2

Entrez un nom quelconque pour le calque

Appuyez sur ENTRER

Vous venez de changer le nom du calque. Ceci n'est utile que pour votre propre organisation, les noms de calques étant ignorés lors de la compilation.

Les calques fonctionnent de la même manière qu'un empilement de papier calque dans la réalité. C'est-à-dire que celui du dessus passera devant celui d’en dessous.

Guide de mouvement

Nous reviendrons plus tard sur cette fonctionnalité. Sachez qu'un guide de mouvement permet de forcer un élément de votre animation à suivre un trajet, sans avoir à le positionner image par image.

Insérer un dossier de calques

Les dossiers de calques ne sont utiles que pour l'organisation. Par exemple, un dossier concernera l’ensemble des éléments du premier plan, un autre l’ensemble des éléments du second plan, et ainsi de suite. Ca n'est bien sûr absolument pas obligatoire, mais devient vite indispensable pour de grosse animation.

Là encore, les dossiers du dessus passeront devant les dossiers du dessous. Pour placer un calque dans un dossier, déplacez simplement le calque sur le dossier. Celui-ci se décalera légèrement sur la droite, signe qu’il est bien inclut au dossier parent.

Supprimer le calque

Cette petite icône en forme de corbeille est explicite. En cliquant dessus, vous supprimerez le calque sélectionné (pour sélectionner un calque, cliquez simplement dessus). Cette action fonctionne aussi sur les dossiers.

Options des calques

Sélectionnez le calque : "Calque 1" en cliquant dessus

Vous pouvez voir que le calque sélectionné possède, de gauche à droite :

• Un nom
• Un crayon (signe qu’il est bien sélectionné)
• Un point noir. En cliquant sur ce point noir, vous masquerez le calque. Celui-ci existe toujours, mais devient invisible. Pour le rendre visible, cliquez simplement au même endroit.
• Un second point noir. Celui-ci va vous permettre de bloquer un calque. Celui-ci restera visible, mais ne pourra plus être modifié. Pour pouvoir le modifier, cliquez simplement au même endroit.
• Un carré de couleur. En cliquant sur ce carré, vous n'afficherez que les contours des dessins. Pour afficher le contenu, cliquez simplement au même endroit.

Pour masquer tous les calques, cliquez sur l'œil, au dessus de la première colonne de points noirs. Pour bloquer tous les claques, cliquez sur le cadenas, au dessus de la seconde colonne de points noirs.