Hello, everyone. Welcome to this new video tutorial brought to you by Aroha media. In this tutorial, we are going to see how to create buttons in Flash. If you're planning to work on websites or elearning projects, you need to know how to create a button, we will create an Advanced button. That is other than default buttons available in Flash, which changes its states upon mouse over events. Take a new Flash file.

From the Tools panel, select rectangle primitive tool, draw a normal rectangle on the stage. Now to modify this rectangle, open the Properties panel from Windows menu properties or press Ctrl plus f3 as a shortcut key, other than size and other properties. We can also control the corner radius for this primitive rectangle at any time. Even after created so here, we will set the corner radius values to 25. You can view the changes in the rectangle onstage. Now, double click on the rectangle to convert it into an editable drawing object.

Click OK. Let's modify its look now. Choose green for color fill from the color palette, exit to the main scene. This rectangle is now a group take the oval tool, hold shift and draw an exact circle on the stage as seen in the video. By default, it takes the same green color. Open the color palette and choose a little darker shade of the same for the circle. Now, select only the outline of the circle and press Ctrl plus r plus s to scale down the outline slightly.

Put the value at Click OK. Now, delete the automatically created center fill of the circle and also the outline. Select the remaining part of it and press Ctrl plus G to create it into a group displays this circle to the left corner of the rectangle. Zooming to match it properly, scaled down slightly to match it exactly with the left corner. We placed it in such a way that the outline of that curve part hides with the circle. Overall, this seems like a capsule button for further modifications. Double click on the capsule.

Pick the fill color and go to Windows menu colors. In Type drop down menu, select linear fill color automatically changes to this gray shade. We will change it to earlier green from here for your second color choice Like a yellowish shade on screen, you can make out how we are playing with the color values to get satisfying shades. When done, go to the Tools panel and select the third option that is gradient Transform tool. As capsule colorful is already selected, here appears a box along with the handles around it. With the use of this, we can adjust the gradient field parameters of an object.

When the pointer is over any of these handles, it changes to indicate the function of the handle. On screen you can notice how we are modifying the gradient directions and dimensions. exit to the main scene and view the buttons ready till now. Grab both the capsule part and the circle together and press f8 now, out of these three options, choose button as the behavior option and name for the new button symbol as button underscores 01 and click OK. This complete thing is now converted into a button symbol, also named the default layer as buttons. Double click on this button and flash switches to simple editing mode.

You can view the time header changes to display for consecutive frames leveled up, over, down and hit. The ready drawing object is on frame up. in upstate button will be in normal state. Another is over. This is for drawing change in the button when a mouse over is detected on screen. The third downstate is for drawing changes of the button as you want it to look when the user clicks the button.

And the last hit area is used to specify which area you want mouse events to react to. That means you can create a button that only reacts to mouse events on certain areas of the drawing. Like, you can select only the center of the button to get clicked, or any other particular area. there as well. We can work in a number of layers, named this first layer as patch. Add another new layer and cut paste the circle portion on this new layer.

Name this layer and circle. naming the layers keep the work well synchronized and easy to handle while working as well as while editing. Now, double click on the circle to go in its Edit Mode. Pick color to fill inside the empty portion of the circle. Keep it selected and open windows menu colors. Select the linear gradient type from the drop down menu.

By default, it shows the same previous viously applied color scheme for the patch area to the circle. We will modify it for the circle as per our choice, press F to get the gradient Transform tool, we can modify the directions and parameters of the chosen color with this tool. Finally, we choose gray to white gradient shade for the circle fill. We need some more contents on this button. So add one more layer named arrow. As per the name, we will create an arrow icon here.

Pick the same primitive Rectangle Tool From Tools panel. By default, it will show 25 as curve radius in properties, so change it to 10 and draw a rectangle with curved corners on the stage. Remove the fill color and edit this rectangle to create a nice arrow out of it as seen in the video. So, we are ready with this arrow here. Now we can fill color into it and modify this color from the color palette as per your choice. We have kept the same color scheme as per the batch colors.

Adjust its color direction and percentage using the gradient Transform tool. After this, remove the outline of the arrow. Keep the arrow selected and press Ctrl plus r plus s to scale it down. Also rotated using free transform tool Please this arrow exactly to the center of the circle. We can also align them using a line panel. Grab the circle and arrow together.

Press Ctrl escape and open the Align panel. Click of the two stage option as we don't want any of them to align as per the stage plays the arrow exactly at the center. Now get one more layer at the top and name it as text. Get the text tool and type download. By default, we got the white text move and place this text to the center of remaining patch area. Now, on the text layer, create one more duplicate of the same text.

Change the color of text on the back to black You see a sort of black border around the white text, which seems like a drop shadow of the text. shift this shadow text slightly to make it more visible and effective as seen in the video. Press Ctrl plus S to save this file. Select the desired path and name it buttons underscore basic. Coming back to the patch layer, double click and open the patch area. Remove the outline of it.

Exit to the button symbol and pick the download text pleased backside the main white download text from the color palette, modify its color to a darker shade of green. So we are done with the button for Upstate. That is the normal state. Next comes the overstate select the frames on over and press f6 or right click Select the insert keyframes options to create new keyframes. As said before, on over the modified button is viewed when a mouse over is detected on screen. So, we will modify some of the parameters of all the parts of the buttons for the overstate.

Let's start with the capsule patch, double click on it and enter we will vary the color values from the color palette. Select the patch field we increase the intensity of both the green and yellow it gives a 3d field in these color values. Exit and double click on the arrow group here to increase the color intensity of the colors in the arrow in the output whenever mouse over is done on this button that will appear in this modified overstate. Now select the text placed at the back and also more than Find the dark green to a little darker and select the circle also darken the green shade of this on this frame. even change the color values for the gray to white color fill inside the circle, increase the gray intensity a bit. Using the gradient Transform tool, we can modify the gray white fill color parameters some more.

You can make out all the differences created between first frame and second frame. Now, here comes the third state of the button that is downstate. Here the button is modified as we want it to look when the user clicks on it. Select all the frames below downstate for all the layers and right click to insert new key frames or even you can press f6 as a shortcut key to insert the keyframes here. We will modify these by contains some more to get the press button effect on the click of the mouse. Select the arrow and go to Edit copy.

That means we copied the arrow. Again, go to Edit Paste in Place. That means a copy of the arrow got pasted at the same place. The shortcut key for this is Ctrl plus shift plus P. The object gets pasted at the same place from where it was copied. zoom into this arrow part out of the two arrows, pick the upper arrow and shifted slightly up. Now we can notice total two arrows to get the shadow effect, let's vary some color values in the second arrow at the lower side.

Pick the color fill and select solid as the type in the color palette. Even modify the color to black to get a proper feel of shadow. Now, big deal a bone marrow Double click on it to vary some color values in this to select the color field and lower down both the yellow and green colors to a lighter shade. Press F to get the gradient Transform tool. We can change the direction and intensity of color values using this tool and it's done. Now select the above download text and vary its color tone to a slide grayish.

Also change the color of another download text at the lower side to black so that it looks like a shadow. So the text part is done. Keep checking that the changes are being done on the third key frames only. Grab the circle on this third key frame. Repeat the same process we did for the arrow on this third key frame. Duplicate the circle slightly shifted downwards and press Ctrl plus down arrow on keyboard to send it backwards.

Changes color value to black to give a shadow to the circle too. You can understand how we duplicated the same objects to create the shadow effect for them. You can scroll on the timeline to view the exact changes created for three states of the button. This is the look of how the button will animate on screen on every mouse event. let's preview and test the current three states of our ready button in SWF. Press Control plus enter.

We can view our button on the stage here on mouse over button shows the color Change as per our modifications. Even on mouse click, we notice some more changes in the button and on mouse out button returns on its normal state. Let's move ahead. next and last frames are for hit area. This hit state is to define the physical area to influence that response to the mouse click only on the selected hit area portion buttons gets activated. This area is invisible in the output.

Here, if we insert the normal frames under the hit level, you can see in the output that the whole button area gets activated to respond to the mouse events. But if we choose to get the mouse events activated only on the circle area, then right click and remove the frames of text, arrow and patch from hit labels. So only the circle part remains there. Let's check, publish the SWF and observe that except the circle area, no other potion reacts to the mouse events. It gets activated only on mouse rolls over circle. Then button shows all its three stages created in the button symbol.

So only on the Define portion in the hit area activates the mouse event. Most of the time, the complete button area is defined as the hit area. So here to press f5 and make the whole button as its hit area. exit to the main scene and our button is ready. Now, let's see how to reuse this one button number of times. Go to Windows menu and open library or press Ctrl plus L You can see the buttons symbol already available in this library.

Now click on the folder sign at the bottom and create a folder name it buttons and shift the about buttons underscore 01 symbol into it. Come back and delete this on stage button. You can still find that the button symbol in the Documents Library. Even if you delete any of these symbols from the stage area, it never gets deleted from the library. It remains in the library and we can reuse. Open up this button folder.

At a time we can drag and drop this button on stage as many times as we want. Depending upon the project requirement, you can create such buttons and reuse them. Once you have learned these steps, you can create simple as well as advanced buttons in seconds. These are servers The examples of buttons we created using the same steps, you can create your own such advanced buttons, making maximum use of the up, over, down and hit area. So, we have completed the tutorial out of the media. We'll get some more interesting tutorials for you soon.

Till then, keep creating