Adobe Flash CS3 Professional

Adobe Flash CS3 provides helpful tools for creating animations, websites, video presentations, games and other interactive Web applications. However, since the Flash browser plug-in cannot read your Flash project file, you cannot directly embed this file in a Web page. Instead, you export your file to SWF format, a file type recognized by the plug-in, to display your movie in a user’s browser. You then embed your SWF file with five lines of HTML code.

1. Start the SWF export process. With your project open in Flash CS3, click “File” in the menu at the top of your screen, then choose “Export.” Select the “Export Movie” option. In the resulting dialog box, select the location of your website files, then click the drop-down menu below the file name box and select the “SWF” format. Finally, give your video a name (e.g., “video.swf”) and click “Save.”
2. Step 2

   Define export settings. The following screen allows you specify the export settings applied to your video. Most settings require no changes, but pay close attention to the value for width and height. These values must match the pixel dimensions of your video to ensure accurate playback. After confirming the width and height, click “OK” to begin the export process.

3. Step 3

   Insert the embedding code in your Web page. Open your Web page in a text editor such as Notepad or in the Web page editing software of your choice. If you use a Web page editor, make sure to switch from Design view to Code view. Scroll down through your HTML code until you find the part of the page where the video should go. Insert the following code:

   <object width=”500″ height=”350″>
   <param name=”movie” value=”video.swf”>
   <embed src=”video.swf” width=”500″ height=”350″>
   </embed>
   </object>

4. Step 4

   Modify the embedded code’s parameters. The code entered in the previous Step has three variables, each of which appear twice. Enter the width and height that apply to your video, first within the <object> tag, then within the <embed> tag. Enter the location and file name of the SWF file you saved in Step 1, both in the <param> and <embed> tags. Save your Web page after making these changes.

5. Step 5

   View your video. Open the Web page you edited in the previous Step. As long as the Flash plug-in is installed in your browser, your video should now appear on this page.

“How to Cheat in Flash CS3″ is the name of a book by Chris Georgines, with chapter after chapter of cool animation and interactive effects. Cheating doesn’t mean doing something unfair so much as finding a way to do something quicker and with less effort. While it would be impossible to cover the book’s tips in a short web article, nonetheless, there are a few general cheats and shortcuts you can use to speed up your workflow and still create good looking animations.

1. Stylize animations. You don’t need excessive realism to make animations convincing. Adding complex shading and depth slows animations down and increases processor demands. The average viewer tends to follow the motion, not the complexity of the illustration.
2. Step 2

   Add filters sparingly. Successive versions of Flash incorporate more and more blend and filter effects to speed development. Unfortunately they add to processor overhead. If using a filter will save you hours of development time, go ahead, but limit the effects to those moments when you really need to deliver something special.

3. Step 3

   Animate shapes with gradients and masks. If you must create realistic effects like smoke and fireworks, use gradients for the shading and create the shape with a mask. You can animate changes in a gradient fill and use the transform tool to change the mask shape.

4. Step 4

   Import clip art and animations. Granted, you have to pay for the really good ones, but if someone else has already developed them why not take advantage? Make sure the clip file is compatible with Flash before you pay for it.

5. Step 5

   Make movie clips. Movie clips allow you to loop basic such as running or bicycling and creating the overall motion on the main timeline. For instance, you can animate a bird flapping its wings then nest that animation inside the flying animation. You can also loop backgrounds to avoid having to continuously add new background material when characters are in motion.

6. Step 6

   Animate with ActionScript. You don’t have to be a coding whiz and you don’t have to use the most recent ActionScript protocols. But you may discover that you can shrink, rotate and bounce a ball much more quickly with half a dozen lines of code than creating key frames and motion tweens.

7. Step 7

   Plan your animation in advance. Many people would complain this is the opposite of cheating, but, in fact, planning can cut more corners than simply plunging into your animation would. Storyboard the key elements of your animation, keeping Flash features and methods in mind (you can even run your sketches by other animators). Make notes on each sketch about the best way to produce the effect with the least effort and overhead.

Adding sound to Flash in CS3 is an important skill to learn in order to make the design of any website better. Sound gives your site a more personable feel and allows the viewers to learn more about the overall culture of your business or organization. While adding sound may seem complex, it is actually quite simple with the proper guidelines and instructions.

1. Select “File” from the top menu followed by “Import” and “Import to library” to import an audio file from your hard drive into the program. When the import dialog box opens, select the file and click “OK.”
2. Step 2

   Synchronize the sound to a particular event on your page by selecting a beginning keyframe that corresponds to the keyframe of the event in the scene. Select whichever synchronization option works best for the scene in question. Create a second keyframe in the event where you want the sound to stop playing. A marking point in the timeline will appear to represent the place where the song will stop playing.

3. Step 3

   Select “Window” from the top menu followed by “Properties.” Expand the window by clicking the arrow in the bottom right-hand corner of the screen. In this window, select the same sound that you have synchronized with the above event. Select “Stop” from the sync pop-up window. This will ensure that sound stops definitively at the stop point that you marked in Step 2.

You can add a sense of drama and realism to any interior scene in Flash by adding the illusion of light sources. One trick is to cast light from an off-scene window, which can also add depth and dimension. With a few basic techniques you can shine a light through Windows in Flash CS3.

1. Create a grid for the window panes in Flash or in another image editing program. The panes should be solid white and the spaces between panes (window frames) should be empty. If you used a different program, import the grid into Flash.
2. Step 2

   Place your set background on the bottom layer of the Flash stage. Create a new layer at the top and drag the grid to where you want the light to shine. You can place objects on layers between the background and light (you want the line to shine on them as well).

3. Step 3

   Choose “Distort” from the Modify menu Transform submenu. Distort the window shape to follow the angles of the wall. This will add realistic perspective.

4. Step 4

   Convert the object to a symbol. Hold down the “Command” and “F8″ buttons and choose “Movie Clip” for the symbol properties. Go to the Properties palette and choose “Overlay” from the Blend pulldown menu. This will cause the white to mix with the colors underneath as though you were adding light. Choose “Alpha” from the Color pulldown menu and set a value of 30 to 50 (you don’t want the light so strong that it competes with the animation).

5. Step 5

   Switch to the Filters palette. Click on the “+” button and choose the Blur effect. Set the “Blur X” and “Blur Y” values to anywhere between 10 and 50. The light will become more diffused at the edges of the panes.

Rollover buttons have become a standard in web pages because they provide an interactive way to guide the users through the website. For example, a website can remind the user of the current page simply by leaving a button in the same state as when it was pressed. When you convert an image to a button symbol in Flash CS3, Flash automatically provides rollover frames for the up, over, down and hit stages of buttons. Unfortunately, Flash assumes that you want the button to return to its original state after the button has been pressed. You can still create this effect by converting the button to a movie clip symbol rather than a button symbol. By entering a few simple codes from Actionscript 2.0, your button will remain in the down state informing the user of the current page.

1. Draw the button shape. Select the rectangle tool and draw the shape of your button on the stage. If you want rounded corners, press the down arrow key as you draw the rectangle.
2. Step 2

   Convert the shape to a movie clip. Select the shape; if the shape has a stroke, you will need to double-click on the shape. Select “Modify>Convert to Symbol.” Name the symbol “btn_mc” and select “Movie Clip.” Click “OK.” Type “btn_mc” in the “Instance Name” box in the “Properties” panel.

3. Step 3

   Create the button for the top state. Double-click on the movie clip to edit the movie clip. Change the name of “layer 1″ to “Buttons.” Select the “Text Tool” and type the text for the button. Position the text on the button. Add additional effects to the button as desired.

4. Step 4

   Convert the button to a button symbol. Select the entire button and select “Modify>Convert to Symbol.” Name the symbol “button” and select “Button.” Click “OK.”

5. Step 5

   Create the button for the down state. Select the frame where you want the button in the down state to begin. Select “Insert>Timeline>Keyframe.” Adjust the button for the down state. For example, if you want to have the button faded, adjust “Brightness” in the “Color” drop-down menu in the “Properties” panel.

6. Step 6

   Label the frames. Insert a new layer called “Labels.” Insert a new keyframe for the frame that contains the top button and the frame that contains the down button. Select the keyframe for the top button. In the “Properties” palette, enter “_top” in the “Frames” box. Select the keyframe for the down button. In the “Properties” palette, enter “_down” in the “Frames” box.

7. Step 7

   Add actions to the button states. Insert a layer called “Actions,” and insert a new keyframe for the frame that contains the top button and the frame that contains the down button. Select “Windows>Actions” to display the Actions panel. Enter “stop();” in both keyframes.

8. Step 8

   Add actions to the movie. Press the “Back ” button next to “Scene1″ to return to the button shape. Click on “btn_mc.” The actions panel should say “Actions-Movie Clip” in the left hand corner. Enter the following code:
   on (press) {
   _root.mc_btn.gotoAndStop(“_down”);
   }
   on (release) {
   _root.mc_btn.gotoAndStop(“_down”);
   }

Create web-based animations and applications using Adobe Flash Professional. Flash is used to create online cartoons, web portfolios and informational sites. In order to use Flash, you’ll need to utilize both graphics and programming skills. If you want to create your own Flash animations, you can learn the program both from home and in a classroom. With your new Flash skills, gain a career in web design or use these skills as a hobby.

1. Purchase and install the latest version of Adobe Flash Professional. New versions come out every few years. Although each version has new features and an improved interface, the basics of how to use the program remains the same. Visit the Adobe website to purchase the software. You can find a link to the website in the “Resources” section at the end of this article.
2. Step 2

   Visit the official Adobe Developer Connection to learn the ins and outs of creating animations using Flash. Use this website to get a beginner’s look at how to use the software. As you learn more about Flash, you can also learn about ActionScript programming code, components and graphic effects. The Developer Connection features tutorials for many previous versions of Adobe Professional in addition to the most recent release. Look for a link to the Adobe Developer Connection in the Resources section at the bottom of this article.

3. Step 3

   Attend classes to learn about creating animations in Flash from an experienced teacher. Some cities provide community education classes for learning how to use Flash. Universities also offer classes in Flash animation. The HTML Writers Guild offers beginners and intermediate online courses in Flash animation and web design. In these courses, you will not only learn how to use Flash, but you will create your own animations for graded projects.

4. Step 4

   Read books that show tutorials for using Flash Professional. Look for books that walk you through each step of creating your own animation. Follow along with the book and perform each step listed in your own Flash program. You’ll both learn Flash and create your own animation at the same time. Purchase books such as “Flash CS4 Professional Digital Classroom” by Fred Gerantabee or “Teach Yourself Adobe Flash CS3 Professional in 24 Hours” by Phillip Kerman.

5. Step 5

   Try out your skills by creating Flash animations on your own. Now that you have learned the basics of using the software and creating web applications and animations, you should be able to create simple animations without outside help. A recent study performed by Purdue University found that students learn technology subjects easier if they take a hands-on approach. As you practice what you’ve learned, it will help you remember the concepts of working with Flash and increase your skills.

Computer designers relish having complete control over all their work and applications, and for this reason implementing window chromes into applications has become increasingly popular. Self-designed window chromes allow for originality and flair, and the combination of Adobe’s Photoshop application and the Flash Cs3 software can now produce a fully customizable chrome AIR application. The manufacturing and conversion process is relatively simple and should not take longer than an hour.

1. Download and open sample files in Adobe Photoshop. A specific background could also be found and imported online, or scanned into the computer with a printer. Make sure all necessary updates are installed.
2. Step 2

   On the tool bar on the right hand side, customize the colors and shading of the background by clicking “Background”. The Photoshop features will allow you to choose the color and add different textures and shades (for example, a glowing appearance for the chrome).

3. Step 3

   Name the chrome, and save the customized chrome file to the hard drive, and open Flash Cs3. Choose “Create a New AIR Project” from the main Flash screen.

4. Step 4

   Import the Photoshop chrome file by selecting “File” then “Import, and finally “Import to stage”. Choose the saved chrome file, which will appear under the name you saved it as.

5. Step 5

   Indicate how you wish to import each layer of the chrome Photoshop file by selecting “flattened bitmap image” on the right hand side of the menu that pops up, and then checking the “Create movie clip for this image” box on the right. Provide an instance name for each layer, which is typically “back” for the background layer, “closeButton” for the close layer, and “minimizeButton” for the minimize layer.

6. Step 6

   Go to “State size” and make sure it is set to the same size as the Photoshop canvas dimensions. Finalize the import by clicking the “Ok” button at the bottom of the menu.

7. Step 7

   Use Actionscript 3 to paste codes in to allow for full functioning of the imported and customized chrome AIR file. Open the “Actions” panel and paste “back.addEventListener(MouseEvent.MOUSE_DOWN,back_CLICK);
   function back_CLICK(e:MouseEvent): void
   {
   stage.nativeWindow.startMove ();
   }
   This code will allow for the application to be clicked on and dragged around.

8. Step 8

   Find the remaining codes you wish for your chrome by consulting an interactive designer or by finding them on the adobe.com website. After all necessary codes are pasted, view the finished chrome AIR application and check to make sure all the pasted codes work properly.

Creating a flyout menu in Flash using CS3 is an important skill to have if you wish to pursue a career or hobby in graphic or website design. A flyout menu allows you to customize the menu on your website to your liking and allows you to add a menu anywhere on your webpage. While creating a flyout menu may sound like a difficult task, it is actually quite simple if you follow the proper instructions.

1. Assign text to the web menu buttons to correspond to the menu options you want to present on your page. Select the first button by clicking it and entering the corresponding text into the text box on the “Properties” toolbox. Repeat this process until you have named each button on your menu.
2. Step 2

   Add icons to each button depending on its individual function. Select the button and click the “Open Icon” option on the tab marked “Normal State.” Open dialog will appear and allow you to choose the icon of your choice. Repeat these steps for all buttons on your menu. If you wish to add text shadow to the menu boxes, select “All Buttons” and click on the text box marked “Shadow” on the “Hot State” tab.

3. Step 3

   Change the menu theme by selecting the “Buttons Editor” option on the toolbar. Here you will be able to change the background color to whatever color you think is best for your web page. Once the color has been selected, double-click on it to apply it to the background.

Flash CS3 is an animation program that is developed by Adobe. This is the same company that makes other popular software such as Premiere and Photoshop. Creating a vapor effect is easy, as you’re simply creating a hazy look to put over the movie. It’s almost like adding a slight fog to the movie. This can be done to add realism to the animation or help illustrate the background of the animation. If you’re willing to invest a little time, you can create a nice vapor effect.

1. Launch Adobe Flash CS3. When the program opens, under the words “Create New” click on “Flash Document 2.0/3.0.” The difference between the types deal with coding only. Either one will work for this project.
2. Step 2

   Select a light blue color by clicking on the square next to the icon that looks like a bucket tipped sideways (this is the “Fill Color” tool). Click on the Rectangle tool on the Tool palette to the left. Drag it to make a rectangle just big enough to cover your entire stage (the white square in the center of the flash animation).

3. Step 3

   Move the mouse over to the Tools palette and click on the Selection tool. It looks like a black arrow icon and is in the top left corner. Click once on the square you just created. Click on “Modify” and select “Convert to Symbol.”

4. Step 4

   In the dialog box that pops up, name your symbol. Under “Type,” select “Graphic” then click “OK.”

5. Step 5

   Reselect the Select tool. Click once on the square. At the bottom right, under the “Properties” tab, is a drop-down menu that says “Color.” Click on this and select “Alpha.” You will see a box with a percentage inside, and an arrow that can be dragged up and down will appear. The arrow and box control the opacity of the square. The lower the number, the more invisible the square you made becomes.

6. Step 6

   Pick a good percentage for your vapor effect. A good estimate would be between 10 and 30 percent. This will create a hazy vapor effect over your stage.

Long gone are the days of saving image files as PNGs or GIFs and then having to import your file layer by layer. Importing Photoshop files to Flash has never been easier. Since Macromedia products are now a part of the Adobe family, you can import Photoshop files directly into Flash Professional CS3 while retaining the layers.

1. Make sure that the correct scene and/or symbol is selected. If you are working on a multi-leveled scene in Flash, make sure you open up the PSD file while the appropriate scene or symbol is pulled up on the stage.
2. Step 2

   Adjust your import settings before you begin. Go to Preferences > PSD File Importer > Import Text Layers. Select “Editable Text” and then exit. This ensures that your text layers in your PSD file are still editable after you import the document into Flash.

3. Step 3

   Go to File > Import > Import to Stage or Import to Library. Importing to the Library does not keep the location information and, instead, creates individual library items without a location on the stage, unless you import it as a movie clip.

4. Step 4

   Determine how you want the layers in your PSD file to convert into a Flash document by selecting from the “Convert layers to” drop down menu. You can convert your layers into layers on the time line or key frames in one layer on the time line.

5. Step 5

   Make sure that “Place layers at original location” is selected unless you want to arrange your layers later. Leaving this unselected compiles the layers in the middle of the stage.