Share
Dans ce tutoriel, je vais vous présenter HYPE, une structure ActionScript 3 publiée par Joshua Davis et Branden Hall le 31 octobre 2009..
Le but de cette introduction n’est pas de plonger dans les subtilités du cadre, mais de vous guider dans un exercice assez simple conçu pour illustrer certaines des possibilités offertes par ce projet Open Source..
Comme beaucoup d'entre vous l'ont peut-être deviné, je ne suis pas un codeur endurcis.
La raison, comme je le dirai à quiconque écoute, est que "le codage n'est pas câblé dans mes gènes". Donnez-moi un panneau ActionScript vierge dans Flash et je le regarderai pendant des heures. Ce qui rend cela étrange, c’est que je peux lire le code quand il m’est donné. Pensez à moi comme étant le genre de gars qui va s'asseoir dans un café en France pour lire un livre en français mais qui ne parle pas la langue.
Je dois vous dire ceci maintenant car il est important que vous sachiez comment j'ai abordé l'exercice. De plus, je tiens à ce que vous compreniez clairement que, même si je connais Josh et Branden depuis plusieurs années, je ne suis même pas près d’être dans leur ligue ou dans leur «machine à battre le battage médiatique». Je suis juste un gars, comme toi, qui est tombé sur quelque chose qui m'a facilité la vie. En tant qu'enseignant, j'ai reçu un outil qui me permet d'enseigner les bases de l'AS3 d'une manière qui donne aux «apprenants visuels» un retour immédiat.
La chose est, je obtenir Ce code, comme l'IDE Flash, est un "support créatif". Ce qui se passe lorsque des artistes et des concepteurs se procurent du code est impressionnant. Parlez-en à des personnes qui utilisent Flash ou qui ont découvert qu’elles avaient besoin de connaître AS3 pour élargir leurs possibilités créatives et vous entendrez "Man, ce genre de choses est difficile". À ce stade, la frustration s'installe et, comme on dit, "maintenant vous connaissez le reste de l'histoire…"
Cela m'amène à Josh et Branden. Ils entendent la même histoire des gens qu’ils rencontrent au cours de leurs voyages. Le fait est que Josh a déjà été à leur place et ce qui le distingue du reste du peloton, c’est qu’il maîtrisait les principes fondamentaux du code tout en mettant ses impressionnants talents des Beaux-Arts au service de son travail. Il ne l'a pas fait seul.
Branden et Josh ont commencé à s’impliquer profondément lors de FlashForward 2000, alors qu’ils étaient à peu près inconnus et que, depuis lors, une relation professionnelle profonde et profonde s’est développée entre eux. Au fil des ans, Josh a eu des idées, Branden les a connectées puis Josh a réarrangé le câblage pour que les travaux atteignent des niveaux inégalés il y a 10 ans..
Ce qui m'a toujours frappé, si vous les avez déjà vus lors d'une conférence ou d'une présentation, c'est leur sens contagieux de "merveille" et de "plaisir" en ce qui concerne leurs collaborations ou leurs efforts en solo.
Avec l'introduction d'ActionScript 3, Josh et Branden ont rapidement compris que "merveille" et "amusement" étaient deux mots qui disparaissaient de la communauté Flash. Les créations évitaient le code en tant que moyen de création car la langue était perçue, au sein de ce groupe, comme trop compliquée ou complexe à maîtriser. La possibilité de jouer à ce que j'appelle les jeux "Et si ..." devenait trop risquée, car les chances de briser le projet étaient presque de 100%, à moins que vous n'ayez une compréhension approfondie de la programmation orientée objet.
Cela explique à bien des égards la montée en puissance du "développeur" dans la communauté Flash au cours des dernières années. Je ne dis pas que c'est une mauvaise chose ou "dissing" les développeurs. En raison de la complexité de la langue, l'équilibre entre le partenariat concepteur / développeur s'est davantage orienté vers le développeur. Branden et Josh, plutôt que d'en parler, ont décidé de faire quelque chose à ce sujet.
Ce que beaucoup de gens ignorent, c’est que la genèse de HYPE était un autre projet, Flow, qui visait essentiellement à faciliter la tâche des concepteurs, mais il est tombé à l’écart simplement parce qu’il était trop en avance sur lui-même. Plutôt que d'abandonner, Branden a réorganisé Flow et, avec l'aide de Josh, il a évolué pour devenir HYPE..
Le projet HYPE a eu raison de dire que les mots "merveille" et "amusement" reviendront si la communauté des créateurs l’appuie. Comme vous êtes sur le point de le découvrir, vous n'avez vraiment pas besoin d'un diplôme en sciences de la fusée pour devenir accro à HYPE. Tout ce dont vous avez besoin est de ne pas avoir peur de jouer avec les chiffres et les valeurs.
Sachez que Branden et Josh vous suggèrent d'installer Flash Professional CS4 avant de commencer, même si ce produit fonctionnera avec CS3..
Décompressez le téléchargement et double-cliquez sur le fichier .mxp pour lancer Extension Manager. Extension Manager installera tout dans ses destinations ultimes. Si vous êtes curieux, explorez le répertoire HYPE - hype_01 - que vous venez de décompresser. À l'intérieur, vous trouverez:
Double-cliquez sur le Setup Classpath.jsfl lancer Flash. Toute cette étape consiste à indiquer à Flash où tout a été placé lors de l'installation.
C'est ça les gars. Maintenant il est temps de jouer.
L’idée de cet exercice est en fait apparue dans un tweet envoyé par Branden environ une semaine avant la sortie de HYPE. Il a dit que Josh avait trop de plaisir à jouer avec SoundAnalyzer dans HYPE et a posté ce lien..
Le tweet a attiré mon attention parce que l’une des choses que j’aime montrer est la visualisation audio en Flash. Je l'utilise comme exemple d'intrépidité autour du code plutôt que comme une leçon complète d'ActionScript… Je m'utilise moi-même comme afficheur et montre comment, en jouant avec les chiffres et en modifiant des choses que je connais, le complexe peut devenir intéressant. Je commence par une visualisation de base, puis passe à un spectacle de lumière complet.
Même si je le trouve intéressant et amusant, si je devais entrer dans le vif du sujet de travailler avec la classe SoundMixer et Byte Arrays, je pourrais aussi bien jeter un paquet de papier d’aluminium au regard brillant que le public regarde maintenant. . Ils auront composé parce que je vais bien au-dessus de leurs têtes. Quand j'ai vu l'exemple de Josh, j'ai immédiatement fouillé dans le code en cherchant ce qui n'était pas là. la complexité.
Reprenons le plaisir de jouer avec l'audio dans Flash:
Ouvrez un nouveau document Flash ActionScript 3.0. Pour vous lancer, prenez un fichier audio mp3. Cet exemple utilise "Busted Chump", une piste de démonstration d'ActiveDen, mais tout fichier audio de votre collection fera l'affaire..
Dessinez un petit triangle rempli sur la scène et convertissez-le en un MovieClip nommé "Triangle". Une fois que vous avez dessiné le triangle et l'avez converti en MovieClip, supprimez-le de la scène..
Cliquez avec le bouton droit sur le symbole dans la bibliothèque et ouvrez les propriétés du symbole. Sélectionnez Exporter pour Actionscript. Votre nom de symbole apparaîtra comme la classe. Cliquez sur OK et ignorez le message d'erreur qui s'affiche..
Comme vous l'avez peut-être deviné, HYPE va extraire le symbole de la bibliothèque et vous permettre de l'utiliser avec ActionScript. N'oubliez pas que HYPE est un terrain de jeu qui offre aux créateurs la possibilité de jouer à des jeux "Et si ..." et de voir les résultats avec un minimum d'effort. Dans le cas de cet exercice, je vais jouer à trois jeux "Et si ...":
Entrez le code ActionScript suivant:
import hype.extended.layout.GridLayout; var numItems: int = 80; var gridLayout: GridLayout = new GridLayout (30, 30, 70, 50, 10); pour (var i: uint = 1; i < numItems; ++i) var clip:Triangle = new Triangle(); gridLayout.applyLayout(clip); addChild(clip); ;
Le premier jeu "Et si" consiste à placer le MovieClip dans une grille et, pour paraphraser Apple, "il existe une classe pour cela". En fait, dans HYPE, il existe un cours pour pratiquement tout ce que vous voulez faire. Sinon, écrivez-en un car HYPE est Open Source..
La ligne suivante indique à Flash que vous souhaitez placer 80 triangles sur la scène. Cela fait, vous déterminez maintenant leur apparence dans la grille en ajoutant les paramètres à l'objet GridLayout. Dans ce cas, je souhaite que la grille commence à 30 pixels de la gauche de la scène et à 30 pixels du haut de la scène. De plus, il doit y avoir 70 pixels d'espace entre les triangles sur l'axe des x et 50 pixels entre les lignes. Le dernier paramètre indique à HYPE que je veux voir ce qui se passe s'il y a 10 colonnes de triangles.
La boucle "for" indique à HYPE comment placer les 80 triangles sur la scène. Vous récupérez le MovieClip dans la bibliothèque, lui donnez un nom d'occurrence, puis, en utilisant la méthode applyLayout () de la classe Gridlayout, déposez les objets dans la grille à l'aide des paramètres de l'objet GridLayout..
Sauvegarder et tester le film.
C'était facile et si je veux changer le look, tout ce que j'ai à faire est de jouer avec les valeurs du numItem variable et la paramètres dans l'objet GridLayout. Vous n'aimez pas le triangle? Ensuite, jetez quelque chose d'autre - une image, par exemple - dans le MovieClip ou créez un MovieClip complètement différent et utilisez-le à la place..
Les triangles sont sur une grille et le moment est venu pour notre prochain jeu "Et si ...". Dans ce cas: Que se passe-t-il si les valeurs alpha et échelle des triangles sont liées à une piste audio? Comme je l’ai dit plus tôt, de nombreux créateurs se tournent maintenant vers la "chose brillante". N'oubliez pas que le but de HYPE est de vous permettre de jouer et non de devenir un codeur endurci. Amusons-nous un peu:
Cliquez sur la ligne 2 du script et ajoutez le code suivant:
import hype.extended.behavior.FunctionTracker; import hype.framework.sound.SoundAnalyzer;
Ces deux classes fonctionnent ensemble dans HYPE. FunctionTracker, en termes très simples, gère les fonctions en cours d'exécution et s'assure qu'elles sont mappées aux propriétés spécifiques de l'objet cible. Dans notre cas, nous allons jouer avec les propriétés alpha et scale du triangle lorsqu'il réagit à la piste audio..
La classe SoundAnalyzer est l'endroit où la magie opère. Ce qu’il fait, encore une fois très simplement, est de transformer un fichier audio en données sur lesquelles vous pouvez ensuite jouer. Ce que j'adore dans cette classe, c'est que je n'ai pas à écrire une tonne de code très complexe pour obtenir des résultats immédiats. J'ai juste besoin de savoir ce que font les paramètres et de commencer à jouer.
Ajoutez les deux lignes de code suivantes après les instructions d'importation:
var soundAnalyzer: SoundAnalyzer = new SoundAnalyzer (); soundAnalyzer.start ();
Toutes ces deux lignes consistent à créer l'objet SoundAnalyzer et à l'activer à l'aide de la méthode start () (comment activer et désactiver ces classes dans HYPE). Pensez à la méthode start () comme rien de plus qu'un interrupteur de lumière.
Ajoutez le code suivant sous la méthode "applyLayout" dans la boucle "pour":
var ranNum: Number = int (Math.random () * 7); var alphaTracker: FunctionTracker = new FunctionTracker (clip, "alpha", soundAnalyzer.getOctave, [ranNum, 0.01, 1]); var scaleTracker: FunctionTracker = new FunctionTracker (clip, "échelle", soundAnalyzer.getOctave, [ranNum, 0.5, 4]); alphaTracker.start (); scaleTracker.start ();
La clé de la visualisation réside dans les trois premières lignes du bloc de code.
La classe SoundAnalyzer utilise les octaves de la piste audio. les valeurs pour les octaves vont de 0 à 7. La première ligne crée donc un nombre aléatoire basé sur la valeur d'octave maximale autorisée. Gardez cela à l’esprit lorsque vous jouez avec cette valeur. Les nombres supérieurs à 7 seront arrondis à 7.
Les deux lignes suivantes utilisent la classe functionTracker pour jouer avec les triangles de la grille. Vous ciblez l'objet, indiquez à FunctionTracker quelle propriété de l'objet vous voulez jouer, quelle fonction doit être exécutée (getOctave) et quelles valeurs utiliser.
Dans ce cas, nous allons jouer avec les valeurs d'octave aléatoires- ranNum - et assurez-vous que les valeurs alpha vont de 1% à 100% alpha en fonction de la "taille" de l'octave de la piste audio. Les petits nombres signifient un alpha faible, les grands nombres signifient un alpha complet. Notez également que ces valeurs doivent être transmises en tant que tableau et que les propriétés modifiées sont des valeurs de chaîne..
Les deux dernières lignes activent les fonctions.
Ajoutez le code ActionScript suivant à la fin du bloc de code:
Accentsconagua
son var: Son = nouveau Son (); sound.load (new URLRequest ("YourAudioTrackGoesHere.mp3")); sound.play (); Sauvegarder et tester le film.
Comme vous l'avez découvert, ces choses-là ne sont pas difficiles et, en fait, en jouant simplement avec des chiffres, vous pouvez vous amuser énormément en "peaufinant" la façon dont ces triangles palpitent et s'effacent. Maintenant que cela fonctionne, jouons notre dernier jeu "Et si ..." et mettons-les en mouvement. Voici comment:
Cliquez une fois à la fin de la liste des classes et ajoutez une autre classe:
import hype.extended.behavior. Oscillateur;
Cette classe est une explosion à jouer car elle place un objet sur une onde oscillante. Voici la meilleure partie: vous n'avez pas besoin d'une formation en trigonométrie pour le faire. En fait, il n'y a pas de calcul impliqué.
Ajoutez le code ActionScript suivant sous les instructions d'importation:
var myWidth = stage.stageWidth; var myHeight = stage.stageHeight; var freq: int = 20;
Tout ce code ne fait que confiner l'animation résultante aux limites de la scène et définir une valeur pour la fréquence d'onde. Il est temps de jouer avec la grille.
Ajoutez le code suivant après la variable "scaleTracker" dans la boucle "pour":
var ypositionOsc: Oscillator = nouvel Oscillator (clip, "y", Oscillator.sineWave, freq, clip.y, myHeight / 3, i / (freq / 2)); var scaleOsc: Oscillator = nouvel oscillateur (clip, "scaleY", Oscillator.sineWave, freq, 5,50, i / (freq / 2)); var rotateOsc: Oscillator = nouvel oscillateur (clip, "rotation", Oscillator.sineWave, freq, 0,90, i / (freq / 2)); yOsc.start (); sOsc.start (); rOsc.start ();
Encore une fois, l'objet Oscillator, comme l'objet FunctionTracker, ne nécessite pas de diplôme en physique des particules. Les paramètres sont vraiment simples:
Dans ce cas, nous appliquons une sinusoïde à trois propriétés - la position y, l’échelle y et la rotation du triangle, puis nous utilisons les trois paramètres restants pour définir l’aspect du mouvement de l’onde..
Les trois lignes restantes activent l’oscillateur. Les valeurs que j'ai utilisées sont tout simplement sorties de "Je me demande à quoi ressemblerait l'animation si j'utilisais ces chiffres?" Rien de plus.
Enregistrez et testez l'animation.
Cet exercice a été conçu pour vous présenter le cadre HYPE et vous donner une chance de casser les pneus. Je vous ai montré comment l’installer, puis j’ai utilisé trois scénarios «Et si…» qui prenaient un simple triangle et le lançaient sur une grille pulsante et ondulante pilotée par une piste audio. Dans un code ActionScript normal, ces tâches, pour beaucoup, seraient une raison de "Fuir. Crier. Dans la nuit".
Au lieu de cela, vous avez découvert que HYPE visait à appeler le côté développeur de l’équation Flash tout en redonnant du plaisir au côté concepteur. Une fois cet exercice terminé, il n’est peut-être pas une mauvaise idée de revoir le code avec un point de vue différent. Que serait-ce? À bien des égards, utiliser HYPE pour élaborer des idées suit beaucoup le processus de création. Cela ne vous engouffre pas dans le code, mais en jouant avec les chiffres et les valeurs, vous faites ce que vous faites le mieux: jouer à des jeux "Et si ...".
