Using the Personal Logo as the Button Symbol 2

Now we must add the hit state. To make a hit state in a button symbol I typically use onion skinning to see the artwork that I am covering with the hit box. Onion skinning is located under the timeline next to the layer trash can and directly next to the center frame icon. It is an icon with two blue boxes, the underlying box is smaller and semi transparent, the top box is blue. That is the onion skin toggle switch. It switched onion skinning on and off.

You are probably asking, what is onion skinning? Onion skinning provides semi transparent underlay of frames in an animation. It is useful because it allows you to see frames that come before the frame you are working in. We will use it to show us the up, over, and down states of our button. We will use this as a guide for laying a hit box over the artwork. The hit state is invisible on the stage, but is quite important. It outlines the boundaries for the mouse actions. This means that when the mouse enters anywhere into the hit state region, the button will execute its ActionScript functions. The hit state is a hot spot for making the button interactive.

Turn on onion skinning. Make sure that your are in frame four, the hit state, and you have deleted the artwork from frame four. Now turn on onion skinning and then make a rectangle or square tightly around the shown onion skinned logoart. Change the color of the box to a bright green. I do this to remind me that this is the hit box. I use green because it corresponds with the slice color in Fireworks.

Turn off onion skinning by clicking the icon below the timeline again. Click out to Scene one and the main stage.

Place the logo_btn on the stage. Align it center to stage. Save the Flash file to your hard drive in the root directory folder. Test the movie by clicking CTRL+ENTER. In the Flash Player, roll over the button and see the fade effect. Our last step is to add some interactivity with ActionScript. We need to link to our index_2.htm page.

Click on the button and go to the ActionScript panel. Go to the left side of the panel to the Action Books. They allow you to begin the ActionScript code by using simple drop down menus. The Action Books still require you to plug in information and values that ActionScript needs to execute the function. For the ActionScript we are applying (getUrl) we need to provide the URL address (Web address) of the location we want the browser to go to when the button is clicked. The address we need is an easy, relative address. We want the button to bring the user to our main naviga tion page, index2.htm. To do this we need to program ActionScript to get the url index2.htm on mouse click.

.In the Action panel we must add the event that will trigger getting the url. The event is on (press). We need to add this to ActionScript panel before we can place the getUrl action in the script. We need to do this because the button is an object and we are applying the ActionScript to the object. In other cases we could apply the ActionScript to the frame. In this case, when the playback head reaches the frame, it executes the getUrl action. We want the action triggered by the object so we must add the object specific event. A word about ActionScript syntax: It is very important to make sure that you follow the correct syntax when writing ActionScript. The syntax is the grammatical correctness of the written language.

Similar to the punctuation do’s and don’ts of the English language, ActionScript has the type of grammatical structure. It is much simpler that the English language.

In ActionScript, a semi colon ends a line of code ;. stop();

Words or strings of characters need to be in quotations when they are in parentheses(). The parentheses hold the arguments to apply to the statement. on(press){ gotoAndPlay(scene1,2);

{ • Brackets }{ break off sections of code to execute a sequence of commands. on(press){ gotoAndPlay(scene1, 2); { 10.In the ActionScript panel type on (press) then we must set off the function from the vent by using brackets { so now the code should look like this: on (press) { From the action web design tutorials choose Global Functions>Browser Network>getUrl. Now the code should look like this: on (press) { getUrl () We need to add the url location and browser window method for the link. Here is the final code: on (press) { getUrl (“index2.htm”, “self”); }

The code is now complete and will execute the link to the main navigation page. Now that we have created the flash button, we need to place it at the end of our animation on the main stage of splash_intro.fla. This is our animation. We need to add the logo_btn at the end of the animation. Somewhere around frame 125 would be a good spot to place the button. Align the button to the center of the stage and be sure that you move the stop action in the actions layer to the same frame number as the button.

This will cause the playback head to stop and let the user click the button. If the stop action is before the button, the user will never see the button because the playback head will stop short of the frame that holds the button. Once the stop action is positioned, you can now publish and test the entire intro animation movie.

As we mentioned earlier, publishing a Flash file, by default, creates two files from the flash movie. The FLA file should be saved in images and moved for archive before upload. This is the proprietary Flash file that has layers and scenes in editable form. When File>Publish is selected, Flash creates an SWF file and an HTML file.

The SWF file is the Shockwave Flash file that gets placed on the Web page and uploaded to the internet. The HTML file is created simply act as a container for our SWF file. Flash does this in anticipation for the need of Web page to play the SWF movie. You can delete the HTML file Flash generates later.

We only need the SWF file. It will be an embedded object in a Web page we create in Dreamweaver. Publish all flash files to the root directory folder (jdimarco). This is not the most organized way, but it is the simplest way to keep track of your flash files when you place them up on the internet.

When you get more experience, you can begin to make sub directories for each component in the site you are creating. Such as “Flash” for all flash files. When complete, your published files will be splash_intro.swf and splash_intro.htm (the HTM file can be deleted). In Dreamweaver, we need to rename our main navigation page which may be named index, to index2.htm. We need to create a new index page in Dreamweaver.

This page will hold your introduction animation and will be the first page the user sees when they hit your site. Be sure to set the home links in your site to the appropriate page. After creating the new index page, go to Insert>Layout Objects>Layer.

Then you need to position the layer on the page to where you want to place your Flash animation. After positioning, go to Insert>Media>Flash. Press F12 to preview the page in the browser. Check to see if the button brings you to index 2.htm. If the button does not work, you need to check to see if you followed the steps correctly.

Revise the Flash file and replace it into the layer. Now we can move forward with our Flash exploration and create a simple audio movie that plays an audio clip and has an on/off switch that lets the us er stop the audio if they do not want to listen. Before we make the audio switch, we need to prepare our audio sample.

Flash is not built to edit audio fully. It can handle some basic jobs like adding fades and changing compression, but to have a lot more control, I will turn to an audio editing application. We will use Adobe Audition to perform some editing before we place our audio into Flash. Preparing Audio in Adobe Audition Audition is a software application manufactured by Adobe Systems that provides traditional audio editing capabilities in a digital format.

This means that Audition provides a complete multitrack digital audio recorder for capturing external sound, an editing environment that provides cutting, filters, and a mixer for creating and combining audio tracks. Audition provides a multitrack interface that allows you mix various files into one compilation. Adobe Audition edit view (Edit view is where you can edit individual waveforms in Audition.)

There is no way to examine an advanced application such as Audition in this slim volume. Also, I cannot claim to be an expert in digital audio editing. My experience is from the perspective of a multimedia designer with limited use on the full feature set of the application. However, I have managed to learn some great techniques using the software to prepare, compress, and output audio for use in digital video projects and motion graphics elements.

I would like to help you do the same thing. For this section, we will assume that you have some audio on your computer already. It can be any of the following file formats: WAV, MP3, AIF, or SND. Virtually all file formats are encoded and decoded by Audition. These listed formats are the most common. With a file available, you are now ready to enter Audition and begin to get your audio ready for Flash.