USING 3D SPACE IN FLASH CS4 279 9 Figure 9-38. Setting mouseChildren to false ensures protection against errant mouse clicks. The next step involves ensuring the registration point of the ei]caDkh`an is centered, by positioning the image loader along the x-and the y-axes. The registration point is the point to which Flash attaches the symbol when it’s in motion. In Chapter 7 we changed the reg- istration point of the multiarmed monster so that when its arms moved around they stayed attached to the body. The following code will ensure that the images in your carousel stay in position when the carousel moves them around. 19. Add the following two lines to the end of your current ActionScript code: ei]caHk]`an*t9)$EI=CA[SE@PD+.%7 ei]caHk]`an*u9)$EI=CA[DAECDP+.%7 The following five lines will ensure that the ei]caDkh`an has been added to the ei]caDkh`an array and that the images load correctly. 20. Add the following five lines under the previous code entered, as shown in Figure 9-39: ei]caDkh`ano*lqod$ei]caDkh`an%7 ei]caHk]`an*hk]`$jasQNHNamqaop$ei]ca*qnh%%7  ei]caHk]`an*_kjpajpHk]`anEjbk*]``ArajpHeopajan$Arajp*?KILHAPA( ei]caHk]`a`%7 y y Figure 9-39. Ensuring the images load correctly into the carousel The final three lines that need to be added for this section of the exercise create a function that is called when an image is loaded and update the number of images defined by the XML file, which will then flag when the last image has been uploaded and set up the genosel. THE ESSENTIAL GUIDE TO FLASH CS4 280 21. Add the following code to the ActionScript panel, as shown in Figure 9-40: bqj_pekjei]caHk]`a`$a6Arajp%6rke`w jqi^anKbHk]`a`Ei]cao''7 eb$jqi^anKbHk]`a`Ei]cao99jqi^anKbEi]cao%w Figure 9-40. The final code for this exercise 22. Save your Flash file. We have accomplished what we set out to do—to create the variables that enable the Flash file to call the information in the XML file. Though we haven’t finished creating the 3D carousel yet, we are going to finish this exercise here and continue with this saved file in the next exercise. If you tried to test your movie now, it would throw an output error, and naught would display on the screen. In the next exercise we will remedy that with the creation of the genosel. Displaying the information on stage This second part of the genosel-creation process continues the build of the carousel com- ponent of the genosel. USING 3D SPACE IN FLASH CS4 281 9 1. Add the following code to the end of your saved Flash document from the previ- ous exercise, as shown in Figure 9-41: ejepe]heva?]nkqoah$%7 y y Figure 9-41. Setting up the genosel The next step in this exercise is to create the function that will be used when all of the images have loaded into the genosel. 2. Add the following line of code to line 42 of the ActionScript panel, as shown in Figure 9-42: bqj_pekjejepe]heva?]nkqoah$%6rke`w Figure 9-42. Creating the InitializeCarousel function The next lines of code that you add will determine the angle of the distance between each of the images in radians (the standard unit of a plane angular measure). A radian is the standard international unit of plane angle. 3. The following code is tacked onto the first available line below the rest of the code you have already entered to determine the distance between the images in the carousel: r]n]jcha@ebbanaj_a6Jqi^an9I]pd*LE&$/2,+jqi^anKbEi]cao%+-4,7 To assign the ei]caDkh`an that we created in the previous exercise to a local variable, we must ensure that we space the images evenly and that we loop through them all. 4. The following code is to be inserted below the code from the prior exercise, as shown in Figure 9-43: bkn$r]ne6qejp9,7e8ei]caDkh`ano*hajcpd7e''%w r]nei]caDkh`an6Ikrea?hel9$Ikrea?hel%$ei]caDkh`anoWeY%7 r]nop]npejc=jcha6Jqi^an9]jcha@ebbanaj_a&e7 THE ESSENTIAL GUIDE TO FLASH CS4 282 Figure 9-43. Assigning imageHolders to the local variable, looping through them all, and spacing them evenly via ActionScript 3.0 5. Add the following code to lines 47 through 50 in your ActionScript panel to ensure that the ei]caDkh`ans are positioned correctly on stage: ei]caDkh`an*tlko/@9n]`eqo&I]pd*_ko$op]npejc=jcha%7 ei]caDkh`an*vlko/@9n]`eqo&I]pd*oej$op]npejc=jcha%7 ei]caDkh`an*ulko/@9bhkkn7 ei]caDkh`an*_qnnajp=jcha9op]npejc=jcha7 The next line of code that we are going to enter into the ActionScript panel will calculate the ratio of scale for the ei]caDkh`an; that is, the farther away the image appears, the smaller the scale is going to be. Likewise, as the image appears closer to you, the scale becomes larger. 6. Add the following code below the rest of the code in your ActionScript panel: r]no_]haN]pek9bk_]hHajcpd+$bk_]hHajcpd'ei]caDkh`an*vlko/@% The following code then uses the scale ratio to scale the ei]caDkh`an. 7. Immediately below the code in the preceding step, add the following, as shown in Figure 9-44: ei]caDkh`an*o_]haT9ei]caDkh`an*o_]haU9o_]haN]pek7 Figure 9-44. Calculating the scaleRatio on the x- and y-axes in your genosel The final four lines of code for this exercise will add the ei]caDkh`an to the stage, and position it on 2D coordinates. ei]caDkh`an*t9r]jeodejcLkejpT'ei]caDkh`an*tlko/@&o_]haN]pek7 ei]caDkh`an*u9r]jeodejcLkejpU'ei]caDkh`an*ulko/@& o_]haN]pek7 ]``?deh`$ei]caDkh`an%7 y USING 3D SPACE IN FLASH CS4 283 9 Figure 9-45. The entire exercise code in the ActionScript panel 8. Save your Flash CS4 document. The entire code for this exercise is available to download from the Downloads section of the friends of ED website, dppl6++bneaj`okba`*_ki+. We’re at a junction where we could theoretically see the elements appear on stage, as shown in Figure 9-46, by adding a second y to the bottom of the code to close it. Should you choose to do this, you will need to remember to delete the bracket prior to continu- ing the next exercise. Figure 9-46. The static carousel The final exercise to complete your 3D genosel will show you how to bring your animation to life by rotating it. Rotating your carousel The first exercise in this section set up our XML file, which specified how many images we were going to use in our genosel and the URLs where they were located. The second exer- cise defined variables in ActionScript 3.0 to call the information in the XML file, and the third exercise enabled you to display the information on the stage. This final exercise is going to animate the genosel! THE ESSENTIAL GUIDE TO FLASH CS4 284 The first thing we are going to do is add an AJPAN[BN=IA for the rotation. The AJPAN[BN=IA is a class that enables the creation of animations. Let’s add this now, and we can begin to build the animation! Remember: if you added the } at the end of the last exercise to view the static movie, you must remove it before commencing this exercise! 1. Add the following code to the first free line under the code from the previous exercise, as shown in Figure 9-47: ]``ArajpHeopajan$Arajp*AJPAN[BN=IA(nkp]pa?]nkqoah%7 y bqj_pekjnkp]pa?]nkqoah$a6Arajp%6rke`w Figure 9-47. Adding the ENTER_FRAME class to your ActionScript 3.0 The next line of code we add is going to enable the user to adjust the speed of the carou- sel mousing over the images as the carousel turns. The second line will ensure that this is looped throughout the images. 2. Add the following code to lines 60 and 61 of your ActionScript pane, directly under the preceding code: ]jchaOlaa`9$ikqoaT)r]jeodejcLkejpT%+1,,,7 Once again we are going to assign the ei]caDkh`an to a local variable and update its angle as the genosel rotates. 3. Add the following code to the ActionScript panel, as shown in Figure 9-48: bkn$r]ne6qejp9,7e8ei]caDkh`ano*hajcpd7e''%w r]nei]caDkh`an6Ikrea?hel9$Ikrea?hel%$ei]caDkh`anoWeY%7 ei]caDkh`an*_qnnajp=jcha'9]jchaOlaa`7 Figure 9-48. The code for this exercise, up to step 3 USING 3D SPACE IN FLASH CS4 285 9 4. The following code will set a new position for the ei]caDkh`an as the genosel rotates: ei]caDkh`an*tlko/@9n]`eqo&I]pd*_ko$ei]caDkh`an*_qnnajp=jcha%7 ei]caDkh`an*vlko/@9n]`eqo&I]pd*oej$ei]caDkh`an*_qnnajp=jcha%7 5. Add the following code to calculate the ratio of scaling required as the carousel moves along the 3D axis. We’ll use this information to scale the ei]caDkh`an and then to refresh the ei]caDkh`an’s coordinates as it moves around the carousel: r]no_]haN]pek9bk_]hHajcpd+$bk_]hHajcpd'ei]caDkh`an*vlko/@%7 ei]caDkh`an*o_]haT9ei]caDkh`an*o_]haU9o_]haN]pek7 ei]caDkh`an*t9r]jeodejcLkejpT'ei]caDkh`an*tlko/@&o_]haN]pek7 ei]caDkh`an*u9r]jeodejcLkejpU'ei]caDkh`an*ulko/@&o_]haN]pek7 y 6. The following lines of code will call the function that sorts the images in the geno- sel and ensures they overlap each other correctly, as shown in Figure 9-49: oknpV$%7 y bqj_pekjoknpV$%6rke`w Your ActionScript panel should be displaying as shown in Figure 9-49. Figure 9-49. Ensuring your images overlap each other correctly in your animation 7. The final lines of code ensure that the image that has the highest Z position is dis- played first in the array and defines a new set of child indexes for the images that are called from the XML file. ei]caDkh`ano*oknpKj$vlko/@(=nn]u*JQIANE?x=nn]u*@AO?AJ@EJC%7 bkn$r]ne6qejp9,7e8ei]caDkh`ano*hajcpd7e''%w oap?deh`Ej`at$ei]caDkh`anoWeY(e%7 y y 8. Save your movie. THE ESSENTIAL GUIDE TO FLASH CS4 286 It is now time to test your genosel by selecting Control ¢ Test Movie. What do you see? Familiar creatures from previous chapters in this book rotate serenely around a carousel. Where, though, would you use an application like this? When you are considering planning your website or animation, at all times you must con- sider usability. If your website is commercial, your goal is probably to drive your customer to buy your product, either online or in a store. If your carousel moves too quickly or is confusing for the user to get all of the information that you wish to give them, you may want to reconsider using it, or adjust the settings to slow it down to a usable speed. See Chapter 11 for more usability hints. Flash CS4 and 3D engines A 3D engine provides an easy and efficient way to create 3D interactivity with real-time animation and lighting, material changes, and rendering. Traditionally 3D was faked in Flash by either prerendering from dedicated 3D-modeling software or by using clever mathematical algorithms. 3D engines let you use your imagination without having to worry about how things work. Typically, 3D engines are delivered as part of a download- able library—a collection of ActionScript functions and routines for creating 3D in Flash. Most of the common 3D engines are hosted at _k`a*ckkcha*_ki and are downloaded using a version-control system, such as the Subversion (SVN) tool available from dppl6++ oq^ranoekj*pecneo*knc. Once the libraries are downloaded to your system you can either place the library folders into the same project directory that you are working on, or you can place the library folders on a given local spot on your computer. You then use the Preferences panel in Flash to point to the specific class-path location. For full instruc- tions on downloading and setting up 3D engines and SVN, for both Windows and OSX, please refer to Appendix A. As an alternative you can download the class libraries to the same directory as your proj- ect. The advantage of using the libraries in this way is that you will not need to set up an external path library. The disadvantage is that for every project you will need to copy the same folders to every 3D project you create. Also, 3D engines do get updated regularly, and it is much easier to update one folder rather than a plethora scattered through your work directories. Papervison3D, Sandy 3D, and Away3D There are a heap of 3D engines out there, some free to use, and some that you must buy. Papervision3D is without a doubt the best known—and best of all, it’s free. The other two engines worth a mention are Sandy 3D and Away3D. All engines have advantages and dis- advantages. In this book will discuss Away3D because of its ease of use, great interactive features, and friendly community. If you venture to dppl6++]s]u/`*_ki+ you will see some examples built using the engine that you can interact with to get an idea of the engine’s power. Away3D also has a welcoming user group at dppl6++cnkqlo*ckkcha*_ki+cnkql+ ]s]u/`)`ar. Go there to find an answer to a question, to get feedback, or to speak with like minds. USING 3D SPACE IN FLASH CS4 287 9 Summary In our largest coding exercise so far, we have created carousel in ActionScript 3 and Flash CS4. You have learned about external 3D engines such as Papervision3D, Sandy 3D, and Away3D. Using 3D graphics is a wonderful way to bring your Flash CS4 animations to life. In the next chapter we add sound to Flash animations and you’ll learn about ways to use video. [...]... have the sound playing, we are going to give the user 303 THE ESSENTIAL GUIDE TO FLASH CS4 the ability to control whether they want to hear it by toggling the button that we placed on the banner 18 Add the following code to line 4 of the ActionScript, as shown in Figure 10-24 This line creates a variable that enables the user to toggle the sound using the button that you inserted into the banner at the. .. 299 THE ESSENTIAL GUIDE TO FLASH CS4 The Stream option of the Sync drop-down box tells Flash CS4 to begin playing the sound before it is completely loaded into memory The downside to it is that every time the sound is replayed, it needs to be reloaded Setting Sync to stream also tells flash to line the sound up with the timeline—if you add frames to the layer with a streaming synced sound and scrub the. .. the right side of the stage, as shown in Figure 10-20 13 In the Properties Inspector, give the button an instance name of sound_btn Figure 10-20 Placing the sound button on the stage 301 THE ESSENTIAL GUIDE TO FLASH CS4 We have now prepared the movie, and it’s time to move on to the ActionScript side of adding the sound 14 With the first frame of the sound layer on the timeline, open the Actions panel... rectangle on the stage within the sound_btn symbol 10 Insert the text shown in Figure 10-19 in white on top of the black rectangle Remember that the button needs to fit on the banner, so don’t make it too big 10 Figure 10-19 Creating a button to attach your sound to 11 Click Scene 1 at the top-left corner of the stage to exit the button editing screen 12 Drag the sound_btn symbol from the Library to the right... code is the function , and it is basically telling Flash to turn the sound off if there is a sound playing and the button is clicked If there is no sound playing and the user clicks the button, it means they want to hear it, so turn the sound on 305 THE ESSENTIAL GUIDE TO FLASH CS4 Figure 10-26 Adding the toggleSound functionality Let’s examine what this code means The line asks the Flash file if the sound... If the answer is yes, when the button is clicked, the Flash file decreases the volume—denoted in the code We then link the change of the volume back to the sound channel we previously defined This is done using the following code: Next, you need to tell the Flash file that the sound has decreased This is done by setting the to Following this code comes the condition The condition gets executed only... from the Library to the stage Now that we have accomplished the task of importing an FLV movie into the Library of a Flash CS4 document, we’re going to import that movie onto the stage Remember how we set the stage dimensions to fit the movie? This is where you will see that pay off, and you’ll see the movie on the stage 1 Ensure that the 2 Drag the document is open in Flash CS4 10 movie from the Library. .. sounds into Flash CS4 is as simple as importing images The following exercise will show you how to import the sound of a wasp Be sure to have downloaded the source files for this chapter from the friends of ED website ( ) 1 Open a new document in Flash CS4 2 Select File Import Import to Library, as shown in Figure 10-1 291 THE ESSENTIAL GUIDE TO FLASH CS4 Figure 10-1 Importing a sound to the library. .. layer in Flash CS4 SEEING AND HEARING ARE BELIEVING! The next thing we need to do is create a button to which to attach the sound We will do this on the sound layer of the timeline 6 Select Insert New Symbol 7 Give it the name of sound_btn and the type of Button, as shown in Figure 10- 18 Figure 10- 18 Naming your button symbol 8 The button should open immediately on the stage, ready for you to edit If... program used by the Adobe CS4 creative suite to output media to required media formats To use Adobe Media Encoder, simply open the program, which is included in the Adobe CS4 bundle (and downloadable from ), add the file, and choose from the Format column drop-down list which format you would like to convert your media to When you have chosen this, click the Queue button, and your video will be converted . number of images defined by the XML file, which will then flag when the last image has been uploaded and set up the genosel. THE ESSENTIAL GUIDE TO FLASH CS4 280 21. Add the following code to the. the genosel The next step in this exercise is to create the function that will be used when all of the images have loaded into the genosel. 2. Add the following line of code to line 42 of the. continues the build of the carousel com- ponent of the genosel. USING 3D SPACE IN FLASH CS4 281 9 1. Add the following code to the end of your saved Flash document from the previ- ous exercise,