Flash Explained

Learn Flash easily.

Glowing neon playback control buttons

November 4th, 2008 | Author: Luka | Category: Menus & Interfaces

In this easy lesson made for Flash 8 professional I will show you how to create a set of cool, neon glow playback control buttons easily. No other applications will be used to create these buttons, because Flash has so much power on its own! You will see:

  • How to use the basic shapes to create the ones you need,
  • How to use the great blending filters in Flash 8 pro,
  • How to combine multiple filters and objects stacked upon one another, and some more.

You can see the example of the sleek buttons below.


Preliminary steps — setting the background

1 Open a new Flash document. Choose Modify > Document (shortcut: Ctrl+J). Select black as document background color. Click OK.

2 Select the Rectangle tool (R). Turn off the stroke color by clicking on the little pencil icon and then the small red-striped square at the bottom of the Tools panel: The outline (stroke) color has been blocked..

3 Make sure that both the Object drawing and Snap to objects options are turned off: The icons that manage the object drawing and snapping to objects..

4 Click the Set Corner Radius icon (Setting the corner radius for the rectangle tool.) and enter 6 in the window that will show up, click OK. This is done in order to have rectangles with round corners.

5 Draw a flat color (any color will do) 410 by 120 pixel rectangle.

An elongated rectangle with rounded corners.

6 Select the Paint Bucket tool (K). Go to the Color Mixer panel (opened by default — you can always find it in the top right part of the Flash working space). Do the following (see numbers in the screenshot below):

  1. Click on the paint bucket icon to select the fill color.
  2. In the Type menu, select Linear.
  3. Click once on the small colored square found on the bottom right.
  4. In the color code field, enter the hex code #2E70AA (that’s a zero, not the letter O).
  5. Set the Alpha property for this color to 34%.
  6. Set the same color for the left square, but set its Alpha to 100%.

Creating a linear gradient.

7 Press and hold Shift, click near the rectangle’s top and drag your mouse down until the rectangle’s bottom. Release your mouse button, and there is your nice gradient!

Filling the rectangle with the linear gradient.

The rectangle is filled with the nice blue gradient.

Top of page

Creating the glowing outer ring

8 Lock the current layer and call it background. Create a new layer and call it buttons.

A new layer on the scene in Flash.

9 Select the Oval tool (O). Go to the Property inspector and make the following selections: block the fill color, select any flat color for the stroke (outline) color, set the line type to Solid and choose 3 for line thickness.

Selecting the options of the Oval tool.

10 Somewhere over the rectangle, draw a ring (it is a circle, but because of the line thickness and lack of fill, it looks like a ring). Make it 70 by 70 pixels.

The ring-circle drawn on stage.

11 Select the ring by clicking on it with the Selection tool (V), if it isn’t already selected. Go to the Color Mixel panel and click on the pencil icon to select the Stroke color (The Stroke color icon.). In the Type menu, choose Linear exactly like you did for the fill color previously. Add two more color squares to the gradient by simply clicking anywhere between the two existing ones. You should have four of them in total, with the following color values, positioned like this:

The linear gradient for the ring.

Note: all the four squares should have their alpha set to 100% (complete opaqueness). The ring will now look like this:

The outline ring colored with a linear gradient.

I have hidden the background layer to work more easily and so that you can more clearly see the various steps.

12 Select the Gradient Transform tool (F). Click on the ring to select it. Rotate the gradient by 90°. To successfully do this, make sure that Snapping to Objects is turned on (View > Snapping > Snap to Objects). Then, press and hold Shift, click on the white circle handle and start moving your mouse clockwise.

Rotating the outline gradient.

13 While the ring is selected, press F8 (or select Modify > Convert to Symbol) to make a symbol out of it. Name it outer ring. Select Movie clip as type and be sure to select the registration point in the middle (see screenshot below):

Converting a drawn shape into a symbol.

Click OK. This choice for the registration point will make it easier to align the elements inside the button later.

14 Click on the Filters tab in the Properties panel (see no. 1 in screenshot below). Click on the plus icon (2) and select the Glow filter. Make the adjustements as follows:

  1. Blur X and Y: 8
  2. Strength: 260%
  3. Quality: High.
  4. Color: #ADE2FC.

The glow filter and its options in Flash.

Leave the Knockout and Inner glow options unchecked. You will get a nice glow for your outer ring:

The glowing outer ring made in Flash.

Top of page

Making the main button circle

15 Select the ring again and press F8 again, while leaving the same registration point as previously and Movie clip as type of symbol. Call the new symbol play button and click OK.

16 Double-click on the newly made play button symbol to enter inside it. Call the first layer outer ring and lock it. That’s where the ring that you have just created resides. Make a new layer above it and call it circle.

A new layer inside the play button symbol.

17 Select the Oval tool (O) again. Go down to the Properties panel. Set #B0E2FD for the outline color and #3A5274 for the fill color. Select Solid as line type and a thickness of 2.

The circle's properties defined in the Properties panel.

18 Draw a 54 by 54 pixel circle on the stage, anywhere.

The new circle made on the stage in Flash.

19 Select the circle (both the outline and the fill). Open the Align panel by selecting Window > Align. Turn on the To stage button (1). Click the align horizontal center (2) and align vertical center (3) buttons.

Aligning the circle to the movie clip's middle center point.

The circle will now be perfectly aligned with the play button movie clip’s registration point and also with the ring below it.

The circle centered exactly on the center of the play button.

20 Choose the Selection tool (V) and click on the fill of the circle once to select it. Press Ctrl+C to copy it.

Selecting a vector fill shape.

21 Lock the current layer and call it circle. Make a new layer above it and call it circle overlay.

The third layer inside the movie clip.

22 Select Edit > Paste in Place to paste the circle you copied two steps earlier exactly on the same position, but inside this new layer.

23 The copy of the circle fill will be selected by default after pasting. Go to the Color Mixer panel. Click on the paint bucket icon to select the fill color. In the Type menu, select Linear. Make the following gradient:

  • You should have three color squares, one in the middle and one on each end of the gradient.
  • Each square’s color should be white.
  • The alpha factor of squares on each end should be 41%. The middle one’s should be set to 3%.

A new gradient for the circle overlay.

24 Use the Gradient Transform tool (F) to rotate the gradient by 90°, just like before. The final result should look like this:

The circle's overlay gives a nice shiny effect.

Top of page

Creating the play icon

25 Lock the circle overlay layer, make a new layer above it and call it icon.

The icon layer will be host to the play icon.

26 Select the Rectangle tool (R). Block the stroke color. Set the fill color to #3A5274. Draw a 33 by 33 pixelsquare anywhere on the stage.

27 Turn on the Snap to Objects option and use the Selection tool (V) to create a triangle out of the rectangle. Do it like this (follow the image sequence below):

  1. Bring the cursor close to the square’s upper right corner.
  2. Click and start dragging down, until you reach the middle of square’s height. Release your mouse button.
  3. Repeat the same thing for the lower right corner of the square, this time dragging the corner towards the point you just made in the previous move. Once near, the corner will snap into place. Release the mouse and there is your triangle.

Making a triangle out of a square in Flash.

28 Click on the triangle to select it. Go to the Property inspector and type 27 in the W (width) field. There! You have a good-looking play button now. The screenshots below show the difference in size before and after the width of the triangle was modified.

Reducing the width of a vector shape.

29 Center the triangle inside the button.

The play icon is centered inside the button now.

30 Select the Ink bottle tool (S). In the Properties panel, choose Solid as type and set the thickness to 4. Click anywhere on the triangle to give it an outline.

A border was added to the triangle.

31 Choose the Selection tool (V). Double-click on the triangle’s border to select it.

Selecting the outline of the triangle.

32 Press Ctrl+X to cut the outline.

33 Lock the icon layer. Make a new layer below it and call it icon outline.

The icon outline layer is inserted.

34 Select Edit > Paste in Place to place the icon border here, right below the icon itself.

35 Lock the icon outline layer and unlock the icon layer. Select the triangle inside it.

36 Hit F8 to convert it into a symbol. Call it play icon and click OK.

37 The new play icon movie clip will be selected by default. Go to the Properties panel and click on the Filters tab to set the blending options for this symbol. Choose the Glow filter and tweak it like this:

  1. Blur X and Y: 6
  2. Strength: 240%
  3. Quality: Medium
  4. Color: #ACE0FD
  5. Inner glow must be turned on.

The glow for the play icon and its parameters.

And — ta-daa — here’s the final result, with the background:

The glowing neon blue play button is complete now.

Now ain’t it cool? This blue neon glow looks soooo good :-) ! Let me show you now how to easily duplicate theis button and create a stop button out of it.

Top of page

Creating the glowing stop button from the play button

38 Go back to the main scene by clicking on the Scene 1 link.

Back to the main scene in Flash.

39 Open the Library by selecting Window > Library.

40 Right-click on the play button in the Library and select Duplicate from the pop-up menu. The Duplicate Symbol window ill appear. Just change the symbol’s name to stop button and click OK.

Repeat the same thing with the play icon symbol: duplicate it and call the new symbol stop icon. You will have fice symbols (all of them movie clips) in the Library now: the outer ring which is present in both the play button and stop button symbols, as well as play icon and stop icon for each respective symbol. Let me show you now how to make the modifications.

The Library in Flash with its symbols.

41 Double-click on the stop button symbol inside the Library to enter inside it. Unlock its icon layer.

42 Click once on the play icon that is inside it, to select it.

43 Go to the Properties panel and click the Swap button.

The button for swapping symbols in Flash.

44 The Swap Symbol window will show up. All the symbols that you made in your Flash document so far are displayed here — exactly as they appear in the Library. Select the stop icon symbol and click OK.

Swapping symbols in Flash!

Although this movie clip symbol looks exactly the same as the play icon, you know that this is the stop icon in fact. Flash informs you of this by displaying the name of the currently selected symbol in the Properties panel:

The name of the symbol as seen in Flash.

45 Now, double-click the stop icon movie clip on the stage to enter inside it. Erase the triangle and draw a 28 by 28 pixel borderless square in its place. I have made the square smaller, because if it had the dimensions of the triangle, it would come too close to the circle’s border and that wouldn’t look so good. Oh, yes: the color of the square should be the same as triangle’s: #3A5274.

The square inside the stop neon button.

46 Click on the stop button link to go back to the movie clip’s timeline.

Back to the button's timeline.

47 Align the icon in relation to the movie clip’s center.

The new stop icon aligned inside the movie clip symbol.

48 Lock the icon layer. Unlock the icon outline layer. Erase the outline triangle that is inside it.

49 Draw a rectangle here, without a fill, and make it the same size as the icon above it: 28 by 28 pixels. the line should have the same thickness as before (4) and the same color (#3A5274). Align it like you did with the icon. It should look like this:

The modification is finished: here is the new stop icon.

And finally, here are both the play and stop neon glow buttons, side by side:

The glow neon buttons done entirely in Flash!

They look awesome! And there was no need at all to use Photoshop! The pause, fast forward and rewind buttons can be made easily now — you know now the easy principle of duplicating symbols. Just make smaller triangles for the rewind button and make two rectangles for the pause button. Nothing easier than that.

A single button that you just made has a file size of only 439 bytes! The same button made in Photoshop would have a file size ten times bigger than the one made in Flash! Still, it is much easier to create a neon effect in Photoshop than it is in Flash.

Hope you liked this tutorial. Take a look at other Flash tutorials on menus, buttons and interfaces that I made — you will find a lot to learn. Besides the design, these tutorials also explain how to make complete website navigation systems, so don’t miss them!

Download the source file for this lesson

Be Sociable, Share!

Comments

Submit a comment

  • Alex Nov 4, 2008 at 7:41 pm

    Ok i know this sounds noobish but how do i make a shape specifically a certain amount of pixels, like “make the circle 70×70 pixels”

  • Luka Nov 6, 2008 at 1:23 am

    Alex: It’s not noobish. You are here to learn so no question is wrong. Here’s how: select the circle and then go to the Property inspector below the stage and find the W (width) and H (height) fields, on the left. enter the dimensions manually there.

  • dan Dec 4, 2008 at 1:32 pm

    yh hi how can i get linear colours on text

  • Rage Demonolith Dec 23, 2008 at 11:32 am

    I LOVE LUKA!!!! hahaha
    Yes I do I learned how to use flash with you…. And I promise to change the website cuz everything there is what I learned here,
    Keep Up the great work!!!

  • hineet Apr 18, 2009 at 5:54 pm

    nice and well explained

  • rose Aug 16, 2009 at 9:53 am

    can it be done in flash cs3?

  • rose Aug 16, 2009 at 9:54 am

    can it be done in flash cs3 because i dont have flash 8.

  • rose Aug 16, 2009 at 10:16 am

    how to add hit button?

  • arman Sep 13, 2009 at 9:03 am

    I know how. rose contact me. I teach you more. contact me.

  • arman Sep 13, 2009 at 9:08 am

    it’s lunamoth11@yahoo.com

  • Habeeb Sep 29, 2009 at 11:36 am

    Nice! I get more on this tutorial. Thanks a lot.

  • Rav Feb 27, 2010 at 2:06 pm

    Nice its look easy to do but wow a lot function to do like light reflections and all cool pro :j

  • Framen Q Apr 6, 2010 at 7:18 pm

    DUDE! awesome! It works and plus I tried the other option in the filter tab! Now I can make animations proffesional! Thanks :D

  • Joseph Aug 29, 2010 at 12:24 am

    How can I have a button-typed text that glows when I move mouse over it?
    I mean a text that shines only when I move mouse over it.

  • It seems like flash neon buttons are becoming popular again. I have recently seen 2 new websites with such buttons and also want to make some for my own. Thanks for the tutorial I will try my best to do it that way.

  • jo_jo Jul 5, 2011 at 4:58 am

    d*mn……
    your tut’s awesome dude……..
    easy to follow aint same with other tutorials….

    love it….

Leave a comment