Share
Vous êtes-vous déjà demandé comment le gourou du design Joshua Davis crée ces images choatic? J'ai fait. Inspiré par son art, j'ai pris une tasse de café et je me suis mis à imiter son style. Ce tutoriel est destiné aux concepteurs et aux débutants flash. Il décrit mon processus d'obtention de quelque chose de similaire aux premières compositions de Joshua..
Jetons un coup d'œil au résultat final sur lequel nous allons travailler:
Vouloir prendre un autre regardez le résultat final sur lequel nous allons travailler? Cliquez sur le film flash (pour vous assurer qu'il est au point) et appuyez sur n'importe quelle touche pour regarder le chaos au travail!
Créer un nouveau fichier ActionScript 3.
Vous êtes assez libre pour modifier les paramètres comme vous le souhaitez, j'ai laissé le mien par défaut et viens de changer la couleur de fond en noir.
Ouvrez votre bibliothèque (si elle n'est pas affichée, vous pouvez "crtl + l"). Cliquez avec le bouton droit de la souris sur la liste vide et sélectionnez "Nouveau symbole"..
Nous allons ajouter un MovieClip contenant les formes que nous voulons voir apparaître dans la composition finale. Nous devrons être en mesure de l'installer à partir de la bibliothèque; nous y parvenons en disant que le symbole que nous venons de créer est une classe à part qui étend la classe d'un MovieClip.
En faisant cela, nous pouvons créer un nouvel ensemble d'objets en écrivant simplement var object = new Objects ();
Lorsque vous créez un nouveau symbole à l'aide de cette méthode, Flash l'ouvre automatiquement sur la scène et vous permet de l'éditer. Laissez libre cours à votre créativité et ajoutez un tas de formes, chacune dans sa propre image clé. Voici quelques-unes des miennes:
Ne vous inquiétez pas pour les couleurs, nous les ferons au hasard dans une palette que nous définirons plus tard lors du codage..
Il est maintenant temps de définir le code. Accédez à votre scénario principal (qui devrait être vide avec une seule image clé vide) et ouvrez votre panneau Actions (ou utilisez F9 comme raccourci)..
// paramètres de composition; var count: Number = 100 // ceci est la quantité de formes que nous allons ajouter à notre composition var maxscale: Number = 10 // ceci est la valeur d'échelle maximale que nos formes seront autorisées à obtenir pour var minscale: Number = 1 / / c’est la valeur d’échelle minimale que nos formes seront autorisées à obtenir. maxrotation var: Number = 180 // valeur de rotation maximale pour nos formes var offsetX: Number = 100 // le décalage est la valeur qui déclenchera la différence de votre composition. var offsetY: Number = 100 // var marginX: Number = 100 // il s'agit de la marge pour l'axe x var marginY: Number = 100 // il s'agit de la marge pour y axix
Nous devons encore ajouter de la couleur à notre composition. Je le fais, pas en essayant de trouver une palette assez bonne à utiliser, mais en utilisant une palette que je savoir est assez bon. J'utilise kuler.
Allez sur kuler.adobe.com et téléchargez la dernière version de l'application kuler air.
Ce que cela vous permettra de faire (en plus de la recherche des palettes que vous aimez) est de copier les couleurs hexadécimales sous forme de valeurs séparées par des virgules, en cliquant simplement sur ce bouton:
Retournez à votre fichier Flash, ouvrez votre panneau ActionScript et ajoutez cette ligne de code:
var colorPalete: Array = []
À l'intérieur de ce tableau, vous pouvez ajouter les valeurs de la planchette que vous avez prises depuis l'application kuler's air.
var colorPalete: Array = [191919,182828,60702D, AAB232, E6FA87]
N'oubliez pas de les éditer pour obtenir de vrais nombres hexadécimaux. Votre palette finale sera un tableau qui devrait ressembler à ceci:
var colorPalete: Array = [0x191919,0x182828,0x60702D, 0xAAB232,0xE6FA87]
Notre composition est configurée avec quelques règles, nous devons donc maintenant les appliquer. Créons une fonction qui générera la composition pour nous.
Note de l'éditeur: Je crains que le code ActionScript de cette étape ne provoque la surchauffe de Firefox par notre surligneur de syntaxe (cela se produit parfois et je ne sais pas pourquoi). Pour le moment, il est préférable de le télécharger. Désolé pour le dérangement.
Vous pouvez tester l'œuvre d'art en l'état, même si vous remarquerez que, malgré votre apparence, il manque quelque chose. Oui, le fond dégradé.
Pour créer un fond dégradé, ajoutez cette petite fonction:
// paramètres de dégradé de fond; type de var: String = GradientType.LINEAR; couleurs var: Array = [0x990000, 0x220000]; var alphas: Array = [1, 1]; ratios variables: tableau = [0, 255]; var matr: Matrix = new Matrix (); var sprMethod: String = SpreadMethod.PAD; var bg: Sprite = new Sprite (); var g: Graphics = bg.graphics; // Fonction de création d'arrière-plan createBackground () // démarre une zone de dégradé matr.createGradientBox (500, 440, 90, 0, 0); // donne au dégradé la taille de votre scène, définit la rotation à 90 degrés // commence le remplissage g.beginGradientFill (type, couleurs, alphas, ratios, matr, sprMethod); // dessine le rectangle g.drawRect (0, 0, 500, 440); // veille à bien dessiner le rectangle à la taille de ta scène // ajoute à la scène addChild (bg);
Assurez-vous d’ajouter un appel à cela dans la première ligne de votre fonction createComposite ().
Cela fonctionne simplement en parcourant les objets enfants de l'étape et en les supprimant..
function removeComposite () while (numChildren> 0) // élimine tous les objets enfant du scénario principal removeChildAt (0)
Pour créer des compositions au moment de l'exécution, j'utiliserai le clavier comme déclencheur. J'ajouterai un auditeur KEY_DOWN à la scène pour que chaque fois qu'une touche est enfoncée, la composition sera modifiée..
stage.addEventListener (KeyboardEvent.KEY_DOWN, onKeyPress) fonction onKeyPress (e) removeComposite (); createComposite ();
C'est la partie la plus délicate. Pour enregistrer votre composition, vous devez l'imprimer dans un fichier. J'utilise bullzip pdf printer pour cela.
Allez sur bullzip.com et téléchargez leurs pilotes d’imprimante. Suivez les instructions d'installation.
Lancez votre swf, générez des compositions en appuyant sur n’importe quelle touche jusqu’à ce que vous obteniez celle qui vous convient.
Faites un clic droit sur l'image et sélectionnez "Imprimer".
Sélectionnez l’imprimante bullzip et cliquez sur Imprimer..
En "format" choisissez ce que vous préférez.
Cependant, si vous choisissez PDF, vous obtiendrez toutes les formes vectorielles, ce qui signifie que vous êtes libre de les redimensionner et de les modifier ultérieurement..
Comme vous pouvez le constater, il s’agit d’une approche assez simple pour obtenir la sensation que Joshua apporte à son travail (ce qui est évidemment beaucoup plus complexe que cela)..
J'espère que vous avez aimé ce tutoriel, n'hésitez pas à laisser des commentaires et des questions. Merci d'avoir lu!
Remarque: Si vous souhaitez utiliser le code de Joshua, assurez-vous de consulter le cadre HYPE récemment publié de Joshua Davis et Branden Hall à l'adresse hype.joshuadavis.com.
Accentsconagua