|
Vous n'avez pas à être un expert en Flash pour créer des prototypes. La flexibilité du programme permet le prototypage avec une connaissance limitée de ActionScript 3 . Le prototypage rapide permet aux utilisateurs de visualiser le produit final. Flash vous permet de créer des prototypes de divers fidélité ( à quel point le prototype ressemble au produit final) , ce qui facilite la mise à jour des couches interactifs et des concepts de conception de structures filaires simples à détaillées , les dessins terminés. Instructions
Préparation
1 créer des images qui représentent les écrans et les états nécessaires , en utilisant un logiciel tel que Fireworks , Photoshop ou Corel . La fidélité de vos images peut être n'importe où à partir de fil de fer de conceptions visuelles (voir référence 2).
2 Ouvrez Flash et cliquez sur «Fichier», puis cliquez sur " Nouveau" puis cliquez sur "Fichier Flash (ActionScript 3.0) "dans le menu qui s'ouvre. Cliquez sur "Fenêtre " dans le menu principal , puis cliquez sur "Propriétés" puis cliquez sur "Propriétés" dans le menu à nouveau gigogne. Tapez " 1024px " dans le champ "W" et " 768px " dans le champ "H".
3 Enregistrez votre fichier en cliquant sur " Fichier" dans le menu principal , puis en cliquant sur " Enregistrer sous ", en tapant un nom (comme " proto " ) et cliquez sur" Enregistrer ".
4 importer vos images en cliquant sur" fichier ", puis en cliquant sur « Importer » , puis en cliquant sur" importer dans la bibliothèque . " Accédez à l'endroit où vos images sont ensuite cliquez sur «Ouvrir». Si vos images sont dans l'ordre , Flash permet d'importer automatiquement les images-clés successives dans le calque sélectionné , sinon vous devrez ajouter des images clés en cliquant-droit sur le cadre, puis en cliquant sur "Insérer une image-clé " dans le menu déroulant pour chaque image (voir référence 3).
5 Nommez le calque "Wire " en double- cliquant sur " Layer 1" et en appuyant sur "Entrée" de votre clavier. Ajouter des images clés entre les images sur la timeline en cliquant sur la première image-clé et en appuyant sur la touche "F5 " sur le clavier à quatre reprises ( voir référence 2).
6 Donner votre image noms des cadres en cliquant sur "Fenêtre" dans la menu principal, puis en cliquant sur "Propriétés" puis en cliquant sur "Propriétés" dans le menu à nouveau gigogne. Avec un cadre d'image en surbrillance, tapez le nom de l'image dans le champ " Etiquette de l'image " . Répétez cette procédure pour les autres images (voir référence 2).
7 Créez un nouveau calque en cliquant sur " Insérer une couche " en bas de la timeline et en le nommant " AS3 . " Faites un clic droit sur l'image 1 du calque " AS3 " , puis cliquez sur "Action" dans le menu gigogne. Tapez le code suivant :
arrêt de ();
( . Voir référence 2 )
Bouton
8 Double- cliquez sur " Couleur de remplissage " de la barre d'outils, puis cliquez sur "None" pour la couleur ( ce sera la boîte avec une ligne diagonale rouge ) . Double -cliquez sur " Couleur de trait " dans la barre d'outils et entrez une valeur de "3" pour " Course Hauteur », puis cliquez sur n'importe quelle couleur (voir référence 2).
9 Cliquez sur l'outil "Rectangle " dans la barre d'outils , tout en maintenant votre souris , faites glisser sur la scène pour dessiner un rectangle . Le rectangle doit être d'une taille appropriée pour les zones cliquables. Cliquez sur l'outil "Rectangle " , puis dans le menu principal, cliquez sur " Modifier ", puis cliquez sur " Convert to New Symbol" dans le menu gigogne. Cliquez sur la case "Bouton" radial et tapez " Button_btn " pour le nom (voir référence 2).
10 Double- cliquez sur le bouton pour entrer dans son calendrier . Faites un clic droit sur l'image intitulée "Hit ", et choisissez "Insérer une image-clé . " Changez la couleur du bouton . Faites de même pour " Over". Supprimer la couleur pour "Up ". Cela vous donnera un bouton invisible qui seront mis en évidence lorsque l'utilisateur mouses dessus. Cliquez sur " Scene 1 " au bas de la timeline pour quitter la chronologie du bouton. Supprimer le bouton de la scène (voir référence 2).
11 Créez un nouveau calque en cliquant sur " Insérer une couche " en bas de la timeline, et nommez le nouveau calque "Boutons ". Insérer des images clés dans la couche "Boutons" sur les mêmes numéros d'image que les images dans le calque " Wire" (voir référence 2).
12 Faites glisser un "Button" de la bibliothèque et le placer sur l'étape. Cliquez sur "Fenêtre " dans le menu principal , puis cliquez sur "Propriétés" puis cliquez sur "Propriétés" dans le menu à nouveau gigogne. Avec le bouton encore souligné , entrez un nom d'instance unique , comme le nom de la page, il va naviguer, par exemple , " page1_btn » (voir référence 2).
13 Faites un clic droit l'image 1 de la couche " AS3 " , puis cliquez sur "Action" dans le menu gigogne. Tapez le code suivant , en remplaçant " page1 " pour vos noms de marque de châssis :
page1_btn.addEventListener ( MouseEvent.CLICK, onPage1 , false, 0 , true);
fonction onPage1 (evt : MouseEvent ) : . void {
gotoAndStop ( " page1 "); }
14 Répétez le processus pour d'autres pages
< br >
|
