Share
Dans ce tutoriel, je vais vous expliquer comment construire un spectre de calcul 3D. Nous allons utiliser Away3D pour le moteur 3D et utiliser un exemple de chanson de la bibliothèque d'actifs Envato..
Créer un nouveau fichier ActionScript3.
Dans le panneau Propriétés, appuyez sur le bouton Modifier..
Choisissez le profil de Flash Player 9 et cliquez sur OK..
Enregistrez votre fichier sous "Compute Spectrum.fla" dans le dossier Compute Spectrum. Vous devez maintenant télécharger le moteur Away3D à partir de Téléchargements Away3D. Nous utiliserons la version 2.3.3 pour Flash Player 9. Décompressez une archive et copiez tous les dossiers dans le dossier Compute Spectrum..
L'animation nous préparera des mouvements en fonction de la voix. Nous devons donc choisir notre chanson correctement. Le public doit vraiment ressentir; "woow cela bouge dans le son". Si vous téléchargez le fichier source, vous verrez song.mp3. Copiez-le dans votre dossier Compute Spectrum. Votre dossier devrait maintenant ressembler à ceci:
OK, nous sommes prêts à commencer à coder. Nous allons remplir les premières lignes en important nos classes:
importez les caméras absentes3d. *; importer les conteneurs away3d. *; importer des matériaux absents3d. *; importer away3d.primitives. * importer away3d.lights.DirectionalLight3D
Après avoir importé nos classes, nous définissons nos variables à utiliser lors des prochaines étapes..
scène var: Scene3D; caméra var: HoverCamera3D; var view: View3D; var light: DirectionalLight3D;
var bars_up: Array = new Array (); var bars_down: Array = new Array () var soundbyte: ByteArray = new ByteArray (); var soundforces: Array = new Array () var scaleoffset_low: Number = 15; var scaleoffset_mid: Number = 150; var scaleoffset_hig: Number = 150; var i: int; var t: nombre;
Les premiers sont pour Away3D. bars_up tableau détient nos barres principales. bars_down est pour les barres réfléchies. soundforces et soundbyte sont pour le spectre de calcul. finalement, scaleoffsets sont pour les barres d'échelle.
Maintenant, nous devons construire Away3D.
fonction initAway3D (): void scene = new Scene3D ();
camera = new HoverCamera3D (); camera.distance = 300
light = new DirectionalLight3D (color: 0xFFFFFF, ambient: 0.25, diffuse: 0.75, spécular: 0.9) scene.addChild (light) view = new View3D (scene: scene, camera: camera); view.x = stage.stageWidth / 2; view.y = stage.stageHeight / 2; addChild (voir);
La première ligne de notre fonction crée notre scène 3D. Nous y ajoutons ensuite des objets 3D. Pour l’appareil photo, nous avons choisi HoverCamera3D, car j’estime que c’est le meilleur moyen de transformer l’appareil photo en objets. En fait, vous n'avez pas besoin d'utiliser light pour ce projet, mais cela améliore légèrement l'animation :) Enfin, nous créons la vue et la plaçons au milieu de la scène..
function createBarUp (color: Number, x: Number): void var bar: Cube = nouveau Cube (width: 30, height: 50, depth: 30) bar.material = new ShadingColorMaterial (color, alpha: 0.5 ) bar.x = x // bar.blendMode = BlendMode.ADD bars_up.push (bar) scene.addChild (bar) function createBarDown (couleur: Number, x: Number): void barre var: Cube = nouveau Cube ( width: 30, height: 50: bar.material = new ShadingColorMaterial (color, alpha: 0.1) bar.x = x // bar.blendMode = BlendMode.ADD bars_down.push (bar) scène .addChild (bar)
Comme vous pouvez le constater, il existe 2 fonctions pour créer des barres. Le premier concerne les barres principales et le second les barres réfléchies. Le second réduit encore la valeur alpha des barres.
Nous allons d'abord créer un cube. Nous avons choisi ShadingColorMaterial, car nous utilisons des couleurs claires et solides. Les fonctions ont 2 paramètres: le premier dicte la couleur de la barre et le second sa position x.
Nous allons également ajouter blendMode aux cubes, simplement parce que cela leur donne une apparence cool. Après cela, nous ajoutons un cube à son tableau et à la scène.
function createBars (): void createBarUp (0x00CCFF, 0) createBarUp (0xFF3300, -45) createBarUp (0xF9C806, + 45) createBarDown (0x00CCFF, 0) createBarDown (0xFF3300, -45) createBarDown (0xF9C806).
Ici, nous créons 3 barres principales et 3 barres réfléchies. Comme vous pouvez le constater, leurs couleurs et leurs positions sont les mêmes. Nous allons définir leurs positions comme dans le diagramme ci-dessous:
fonction render (e: Event): void view.render (); SoundMixer.computeSpectrum (soundbyte, true); soundforces [0] = 0 soundforces [1] = 0 soundforces [2] = 0 pour (i = 0; i<300; i+=2) t=soundbyte.readFloat(); if (i>= 0 && i<100) soundforces[0]+=t*scaleoffset_low; if (i>= 100 && i<200) soundforces[1]+=t*scaleoffset_mid; if (i>= 200 && i<300) soundforces[2]+=t*scaleoffset_hig; scaleBarUp(bars_up[0],soundforces[0]) scaleBarUp(bars_up[1],soundforces[1]) scaleBarUp(bars_up[2],soundforces[2]) scaleBarDown(bars_down[0],soundforces[0]) scaleBarDown(bars_down[1],soundforces[1]) scaleBarDown(bars_down[2],soundforces[2]) light.x = camera.x light.y = camera.y light.z = camera.z camera.targetpanangle = stage.mouseX/stage.stageWidth*360 camera.targettiltangle = stage.mouseY/stage.stageHeight*30 camera.hover();
C'est la partie la plus délicate. Dans la fonction de rendu, nous rendons d'abord la 3D. Nous utilisons ensuite SoundMixer pour obtenir des valeurs sonores (computeSpectrum en est la méthode). Nous égalisons les 3 premiers éléments de soundforces à 0, réinitialisant ainsi les valeurs de son. Après cela, une boucle pour vient.
faibles valeurs: songforces [0]
valeurs moyennes: songforces [1]
hautes valeurs: songforces [2]
Après avoir obtenu les valeurs de la chanson, nous mesurons nos mesures. Nous utilisons 2 fonctions pour cela. Le premier concerne les barres principales et le second les réflexions. Ces fonctions ont 2 paramètres; le premier est la barre à mettre à l'échelle et le second est la valeur de hauteur cible de la barre.
Nous égalisons ensuite la position de notre lumière à la position de la caméra. Cela rend notre lumière dynamique et notre animation plus efficace. Nous utilisons la vraie proportion en mathématiques pour changer les positions de la caméra par rapport à mouseX et mouseY.
function scaleBarUp (bar: cube, hauteur: nombre): void bar.height + = (height - bar.height) * 0.3 bar.y + = (hauteur * 0.5 - bar.y) * 0.3 fonction scaleBarDown (bar: Cube, hauteur: Nombre): void bar.height + = (height - bar.height) * 0.3 bar.y + = (-height * 0.5 - bar.y) * 0.3
Nous utilisons une technique simple pour l'animation, ce diagramme montre un exemple:
OK, on balance nos barres. Mais nous devons également en modifier la valeur y. Ce diagramme montre pourquoi nous devons les changer:
Dans la première fonction, la valeur y des barres est positive et dans la seconde, elle est négative. Les barres principales glissent vers le haut, les barres réfléchies glissent vers le bas.
function startToRender (): void addEventListener (Event.ENTER_FRAME, rendu);
Accentsconagua
function startToPlay (): void son var: Sound = nouveau Sound (); sound.load (new URLRequest ("song.mp3")); sound.play (); initAway3D (); createBars (); startToRender (); startToPlay (); Dans ces fonctions, nous commençons à exécuter la fonction de rendu et chargeons notre fichier "song.mp3". Ensuite, nous appelons toutes nos fonctions une par une. Maintenant, vous pouvez tester votre film et regarder les barres sauter :)
Dans cette leçon, nous avons appris à utiliser la réflexion dans Away3D et à obtenir des données sonores. La chanson est la clé de ces types d’effets: vous devez choisir la meilleure chanson possible pour que l’animation fonctionne vraiment. Essayez-le avec vos propres pistes MP3 :)
J'espère que vous avez aimé ce tutoriel, merci d'avoir lu!
