Symbols in Adobe Flash CS4 are a great way to reduce the amount of work you need for a drawing, animation etc. and save on file size which is very important if you are uploading your flash file to the web. You can store your symbols in your library and call upon them when you need them as you need them. Here is how you convert an image to a graphic symbol in Adobe Flash CS4.
- Open Flash and select ActionScript 3.0. If you have an existing Flash project that you would like to use that is fine but for this tutorial I am going to open a new project and draw a simple box on the screen that will be converted.
-
Step 2
From your tools panel select some type of object to draw on the screen. You can make it whatever you want. I chose a rectangle. The colors and size are irrelevant to this exercise to you can make your object any color and size. Now go ahead and draw an image on the stage.
-
Step 3
In order to convert any image it has to be selected. You do this by clicking the select tool from tools panel and then selecting the image. You will know when your object is selected as it will looked grayed out. Go ahead and select the image. It should look like the picture associated with this step.
-
Step 4
From the main menu select “Modify” then select “Convert to Symbol”, you can also press the F8 key on your keyboard.
-
Step 5
The “Convert to Symbol” window will appear. Give your symbol a distinct name in the “Name” textbox which defaults to “Symbol 1″, and in the “Type” dropdown box select “Graphic”.
-
Step 6
Click the OK button to accept your changes and return to the stage.
-
Step 7
Your graphic symbol is now created. Flash will automatically put this symbol into your library so you can access it again for further use.
ActionScript is the programming language that is used to operate Flash animations behind the scenes. It allows developers of Flash based websites to make them more interactive. In order for them to be interactive they must respond to a user’s input, such as clicking a mouse, entering text into a username field and so on. Behind the scenes it is up to the programmer to respond to these items, and that is done through registering an event listener. An event listener tells Flash to listen for when something happens and then respond to it by running the code that is inside the listener fucntion. In this tutorial we are going to regsiter an event listener for the “Mouse Over” event. This occurs when the user takes the mouse pointer and puts it over something. Here is how it is done.
1. Open up a brand new Adobe Flash CS4 (ActionScript 3.0) project.
2.
Step 2
Display the Actions window by selecting “Window” from the main menu, then in the submenu selecting “Actions”. You could also press the “F9″ key on your keyboard.
3.
Step 3
In the Actions code window, type in the following code:
mcCircle.addEventListener(MouseEvent.MOUSE_OVER, mouseOverListener);
This registers the mouse event, mouse over, for the movie clip object called mcCircle. mcCircle can be any move clip object that you draw on your Flash stage. Then this code says when the mouse goes over the mcCircle object, run the function “mouseOverListener”, which we will define in a moment.
4.
Step 4
As you can see in the picture associated with this step, we write our function called “mouseOverListener”. This function will run when the user moves the mousepointer over top of the object mcCircle. The code between the curly braces will execute, and it is there that you can change the color of the object, move it, or a slew of many other things.
If you have ever gone to a website with animated, interactive elements that zoomed across the screen and reacted in interesting ways to clicks and the position of your mouse cursor, that website was probably built using Adobe Flash, a visual design program marketed by Adobe Systems Incorporated.
History
- The Flash program originated from the programming efforts of Jonathan Gay. Interested in visual design from a young age, he became a successful video game developer while still in high school. Later, he started developing and marketing visual design software, but he encountered some stiff competition. With the rise of the Internet, though, he decided to focus more on the animation aspects of his program, producing a successful program called FutureSplash Animator. He soon caught the attention of a company called Macromedia, which bought his FutureWave Software company in 1996. Macromedia continued to develop the FutureSplash Animator under the name Flash, and Macromedia was later bought by Adobe.
Basic Animation
- Flash is a program that allows users to utilize a time lapse tool and animating waypoints called “tweens.” In basic animation, you make or upload an illustration into the program and then give it a path of tweens to follow, which looks like a series of dots connected with lines.
Interactivity
- The principle virtue of flash is the fact that its developers have designed it to be so thoroughly interactive. As you click or move the mouse, you can affect any number of elements in the Flash program. For this reason, some people use Flash to make impressive websites, while others use it to make mouse-based computer games. A rising trend is Flash banner advertisements that are mini-games by themselves.
CS4
- The “CS” in “Adobe Flash CS4″ stands for “Creative Suite.” This is because Adobe has taken design programs such as Flash, Dreamweaver, and Illustrator and bundled them together into one group of highly interrelated programs. This bundle of programs is called Creative Suite. The “4″ shows that this is the fourth edition of Creative Suite.
New Features
- Some of the improvements of the CS4 version of Flash over the CS3 version include 3D transformation of 2D objects, integration with Adobe Soundbooth, and XFL imports from InDesign and After Effects.
A bandwidth profiler is a great way to see how your flash animations will act when a user wisits a website.
You can set up reports to let you know how slow or fast your adobe flash animation will download, stream and much more.
Here is how you generate a bandwidth report in Adobe Flash Cs4.
1. Load an existing Adobe Flash CS4 animation and select Control->Test Movie from the main menu at the top as shown in the picture associated with this step. You can also press the CTRL+Enter key combination.
2.
Step 2
When the test window appears, select View->Bandwidth Profiler from the menu as shown in the picture associated with this step.
3.
Step 3
In the upper left corner of the window you will see the bandwidth display. It will show you all of the size information about your Adobe Flash Animation, how fast it is, download speen and more. You can also show a graph by selecting View->Frame by Frame Graph.
Organization is key to anything in life. The more organized you are, the more likely life will be easier on you. The same holds true in Adobe Flash CS4. If you have created a flash project with one or two layers then a layer folder is more than likely not needed. However, if you have 10,20, or even 50 layers, you definitely want to create some layer folders and keep your project organized.
- Open up your Adobe Flash and select one of your flash projects. If you do not have any flash projects currently, that is ok, open up a blank Flash Action Script 3.0 project and in the Layer timeline window just add a few by right clicking Layer1 and selecting Insert Layer from the pop up menu.
-
Step 2
The first thing we need to do is get to the menu where you can add layer folders. There are variety of ways you can get there, but I find using the right click pop up menu is the easiest. In your layers timelime box, right click the top layer to bring up the pop up menu.
-
Step 3
You will notice on the pop up menu many options to choose from, however we are only interested in inserting a folder into our layers timeline. So, from the pop up menu, select “Insert Folder” which is the option to accomplish this.
-
Step 4
Notice that your layer folder was created. To add your layers to the folder simple drag them to the folder and drop them in. If you are unfamiliar with dragging and dropping visit the “How to Drag and Drop” tutorial. You will now see the layers you added to the folder indented underneath that folder. That represents that those layers are in that folder. Also you will notice a filled in triangle/arrow next to the folder. Clicking that icon will collapse or expand the folder.