Creating a Sound Bar

Creating a Sound Bar

Now a-days, clients and visitors are looking for more in a Flash website. One way to add an entire new dimension to your website is to add sound. This tutorial will show you how to build a one song sound controller for your website.

For an example of what you will be creating, press the Play button in the animation below:

	sound example

[ press 'play' ]

Supplied in this tutorial are a sound clip, various ActionScript, and two finished FLA files. Since cutting and pasting ActionScript does not aid much in the learning process, an explanation of the ActionScript is provided at the end. For more detailed explanations, please refer to the KirupaForum, and/or your ActionScript Dictionary (in Flash: Help > ActionScript Dictionary)

Steps to Create Animation
The following steps will guide you in creating the above sound animation:

1. First of all, you will need a sound loop to play. While generally it’s better to use a longer loop (say fifteen to thirty seconds), I have included a very short audio clip for you to play with.
   
   Download it and unzip it. Please keep in mind that I didn’t make this clip, it came free with FruityLoops: Download Sound Loop Here.
   

2. Now that you have your audio file, fire up Flash. Create a new document (File > New) and change the dimensions of the movie to 700 pixels (width) by 15 pixels (height). You can modify the movie by pointing to Modify > Document.
   

3. We will begin by creating the play button. In the main timeline, name the current layer “buttons” (without quotes). On the stage, create some text. Type something descriptive like “Play” (without quotes) in the textbox.
   

4. Make sure the text type is Static Text. Select the text and make it into a button (F8 or Insert > Convert to Symbol…). Modify the button for your desired aspects.
   

5. In the main timeline, create a new layer. Name the layer “Actions” (without quotes). Click the first frame of this layer and bring up the Actions panel. Copy the following code in (code will be explained at the end of the tutorial):

stop();

6. Save the document (File > Save) as “sound” (without quotes).
   

7. Now click on the button we made back in step c. Bring up the Actions panel again (right-click on the button and select Actions), and copy the following code:

on (release) { loadMovie("[absolute location of movie]/sound1.swf", this); }

8. Replace [absolute location of movie] with the path of the directory where you saved the movie.

   1. Example: C:/Program Files/Macromedia/Flash MX/kirupa

   2. Example: http://www.yourwebsite.com/flash
      

9. Save the document again, and publish it.
   

10. We will now begin creating the playing sound and the stop button. With sound.fla still open, point to File > Save As…, and re-save the movie as “sound1” (without quotes).
    

11. After you have re-saved your movie (see above step), change the descriptive button on the stage to something like “Stop” (again without quotes). Add the following ActionScript to the button

on (release) { loadMovie("[absolute location of movie]/sound.swf", this); }

12. Excellent, we’re almost done. Create a new layer below the Actions one. Name this new layer “loading” or something of this sort. Throw some text up there and a small animation to indicate that your movie is loading. Don’t make it too complex; you want this to load as soon as possible.
    

13. Select the second frame of the loading layer, and press F5 (or point to Insert > Frame). Find the fourth frame of the buttons layer and again press F5 or point to Insert > Frame.
    

14. Try to stick with me here, it’s not that confusing. In the Actions layer, select the first frame. Bring up the actions panel. Copy and paste the following code:

totalb = _root.getBytesTotal(); loadedb = _root.getBytesLoaded(); if (loadedb == totalb) { _root.gotoAndPlay(3); }

15. Ok, now select the second frame of the Actions layer. In the actions panel, paste this code:

gotoAndPlay(1);

16. Lastly, select the fourth frame of the Actions layer. This frame’s action should be a single stop() command:

17. Close the action panel and point to File > Import... Find the audio file you downloaded and unzipped earlier. Import it. Select the third frame of the Actions layer, and in the properties window find the sound dropdown box. In this box select the sound file you just imported. Set the loop to 9999. You may also want to add a fade in for grins.

Code Explanation
The following section explains the reasons behind the code added:

• 
  
stop()
Stops the movie’s play head

• 
  
on (release) {
Calls the following action when a button is released

• 
  
loadMovie("[absolute location of movie]/sound1.swf", this);
Loads an external swf file into the current one.

• }
  Closes the action that will execute when the button is released
  
• 
  
totalb = _root.getBytesTotal();
Declares the variable “totalb” and assigns it the value of the total size, in bytes, of the movie clip

• 
  
loadedb = _root.getBytesLoaded();
Declares the variable “loadedb” and assigns it the value of the number of bytes loaded so far

• 
  
if (loadedb == totalb) {
If statement, saying that if the two values of “loadedb” and “totalb” are the same, the enclosed action is to be executed

• _root.gotoAndPlay(3);
  The action to be executed if the if statement returns true
  
  
• gotoAndPlay(1);
  Tells the timeline’s play head to return back to, and play from, the first frame

Also, I have provided the final FLA files for your perusal:

download zip

Creating a Volume Control Slider

Creating a Volume Control Slider

While a simple sound 'on' or sound 'off' button is acceptable, a volume slider is even better! A volume slider is a small bar that you can drag to increase or decrease the volume of any sound. In this tutorial, you will learn how to create just that.

The following animation is a good example of what you will be creating. Drag the horizontal slider to the right and press the Play arrow to hear the sound. Notice how the volume increases when you slide the slider to the right and decreases when you slide the slider to the left.

[ once the music loads, increase the volume and press the play arrow ]

Creating the Animation:

1. A large portion of this animation lies in simply creating the slider. Ilyas Usal (ilyaslamasse/pom) wrote an excellent tutorial that tells how to create a slider: http://www.kirupa.com/developer/mx/slider.htm
   
   Needless to say, I don't want you to create a slider from scratch for this tutorial. Therefore, I have provided a sample FLA file that includes the above interface with a functioning slider so you can focus more on volume control and not worry about actually having to create a slider.
   
   Download and extract the partial, zipped FLA and MP3 from the following link:
   

   Download FLA and MP3 File

2. Once you have opened the volume_user.fla file you downloaded from the above link, you will see a similar interface as that shown in the example animation above.
   
4. First, we need a variable that controls the volume according to the slider's position on the horizontal line. Right click on the slider and select 'Edit in Place'.
   
5. You should now find yourself in the slider movie clip. Right click on the solitary keyframe in the Code layer and select Actions.
   
6. You will see a chunk of code that enables the slider to work. We need to place a variable that communicates the value of the slider to the rest of the animation. Add the following line of code AFTER the line starting with the word ratio:

_root.volume = ratio;

The entire section of code will now look like this with the code you added colored in blue:

this.ratio = 0;
dragger.onPress = function() {
this.startDrag(true, 0, 0, line._width, 0);
this.onEnterFrame = function() {
ratio = Math.round(this._x*100/line._width);
_root.volume = ratio;
};
};
dragger.onRelease = dragger.onreleaseOutside=stopDrag;

5. After you have added that line of code, press the blue left arrow under your timeline to go back to the main stage:

[ press the blue arrow to go to the main timeline ]

6. Now that you are back in the main timeline, you will add the code that makes the sound's volume correspond to the slider.
   
7. Right click on the slider and select Actions. You will already see a large portion of code responsible for playing the sound. Before the very last bracket ' }' in the code, add the following line:

mySound.setVolume(_root.volume);

The last few lines of code in your Actions window should look similar to the following image:

[ copy and paste the line of code directly above the last bracket ]

8. You are done with the animation, but if you are not familiar with what was done in this tutorial, I strongly urge you to read the explanation.

ActionScript Explained
First, let us discuss how the sound gets played and the volume adjusted. The following section of code can be found on the slider movie clip:

onClipEvent (load) {
mySound = new Sound();
mySound.loadSound("sound2.mp3", false);
}
onClipEvent (enterFrame) {
downloaded = mySound.getBytesLoaded();
total = mySound.getBytesTotal();
if (downloaded != total) {
_root.dl = "downloading song...";
} else {
complete = 1;
_root.dl = "";
}
mySound.setVolume(_root.volume);
}

The orange colored code creates our sound object. In this tutorial, I am calling the sound object mySound. For information on dynamically loading a sound file, scroll to the bottom of the page from the following URL: http://www.kirupa.com/developer/mx/loading.htm

In the green section of code, the actual song is preloaded before being displayed. The total size of the sound file is determined using getBytesTotal(). The portion of the sound that has currently loaded is determined using getBytesLoaded().

By using an if statement, we can tell Flash to check if the portion of the sound file loaded does not equals the total file size of the sound file. If the song is still downloading, the if statement will tell a textbox 'dl' to display the text "downloading song...". If the song has loaded, a variable called complete is initialized to 1. You will see where this variable is used again.

In the blue portion of the code, setVolume() is used for the mySound sound object. The variable _root.volume carries a number between 0 and 100 as determined by the slider position (remember we set _root.volume = ratio inside the slider). When you combine all of the above you get the ability to control the volume of the sound.

---

Now, right click on the Play button on the stage and select Actions. The code you will see is:

on (release) {
if (_root.mySlider.complete == 1) {
_root.mySlider.mySound.start(0, 99);
}
}

The above code actually allows you to play the sound that was loaded in the slider movie clip. If the variable complete, located on the mySlider (slider) movie clip, equals 1, the song starts to play and loops 99 times before stopping. If you recall, in the preloader I discussed in the previous section, the variable complete was initialized to 1 after the song was loaded. I did not want the user to play the sound without having completely downloaded the song. The only way to ensure that would be to use an if statement that prevents the song from being played unless the value of complete = 1; which it will once the sound is loaded.

download final source for flash mx (mp3 not included)

Context Menus

Context Menus

From the official Macromedia documentation:

The ContextMenu class provides runtime control over the items in the Flash Player context menu, which appears when a user right-clicks (Windows) or Control-clicks (Macintosh) on Flash Player. You can use the methods and properties of the ContextMenu class to add custom menu items, control the display of the built-in context menu items (for example, Zoom In and Print), or create copies of menus.

You can attach a ContextMenu object to a specific button, movie clip, or text field object, or to an entire movie level. You use the menu property of the Button, MovieClip, or TextField classes to do this.

Having read the official Macromedia definition of this cool new feature of Flash MX2004, let’s see how you can use this.

[ right click on the three graphic, text, etc. ]

First, we get rid of (most of) the normal menu items:

var newMenu = new ContextMenu(); //newMenu will be the name of our ContextMenu object

newMenu.hideBuiltInItems(); //this method is the one that hides stuff such as “print”…

/*if you wanted to hide just ceratin items, you’d use newMenu.builtInItems.[propName]=false; where propName can be:

save, zoom, quality,play,loop,rewind,forward, back, and print*/

_root.menu = newMenu; //attached to _root, so valid for the swf in general

If you check out the properties and methods for ContextMenu in the help panel, you’ll see that we got:

• customItems (an array)

• hideBuiltInItems (we just used that above..)

And for the menu items themselves, we can use:

• ContextMenuItem.caption

• ContextMenuItem.copy

• ContextMenuItem.enabled

• ContextMenuItem.onSelect

• ContextMenuItem. separatorBefore

• ContextMenuItem.visible

The names being pretty much self-explanatory!

---

Now, let’s see how we use these features to build our own menu: (all script and a few clips)

1. Select frame 1 and open the ActionScript panel.
   

2. Here, I’m going to run you through just one of the 5 menus you can see in the example fla/swf above. There’s one on _root, one on each clip, one on the button, and you also get new options on selectable textfields and urls as you can see.

// the mail clip:

var mail_cm = new ContextMenu(); //declare new menu object

// create the item, then push into the Item Array of the new menu object:

//name of new item (“Label that gets displayed”, function to execute when clicked) is the idea

var mailItem_cm = new ContextMenuItem("Send Email to Kirupa", mailHandler);

//push the new item into the the menu array

mail_cm.customItems.push(mailItem_cm);

//now define the function you set up above to be called when the item is used (clicked)

function mailHandler(obj, menuItem){

getURL("mailto:kirupa@not_kirupa.com?subject=From the ContextMenu tutorial&body=Hi Kirupa");

}

/*the function can be anything you want, it will have to take these 2 parameters, but then the code to execute is really all up to you, I used (here) a getUrl to open the mail client with a predefined subject and message header; in the swf also a gotoAndPlay/Stop, a regular getURL to open a _blank webpage to the forums, another item linking to Flashkit which is set to disabled, and finally a function to have the bug’s head clip play to another frame, it is really anything you can come up with..!*/

//finally, we need to associate the new menu with a clip (or button, or textfield), and we’re done.

mail_mc.menu = mail_cm;

//do not get confused with the code hint extensions : _cm for contextmenu, _mc for movieclip

That’s it, quite simple, no?

Download Source

Please look at the code in the fla, check the comments, and then get imaginative and make your own menus; if you come up with something cool, let us know!! ;)

Masking Dynamic Text and Device Fonts

Masking Dynamic Text and Device Fonts

Why can't I mask dynamic text or device fonts yell's the inspiring flash developer!
It makes no sense! I can mask static text, why not dynamic text or device fonts?
Well Macromedia has a somewhat of an explanation here, but I'm going to try and explain this the best I can.

Basically you can only mask device fonts by using an actual movie clip as a mask.
You must also embed your dynamic text into a movie as well. You might not be used to this method as it's so convenient to use the timeline mask and most of the work you probably did in the past never required masking dynamic data loaded into a text field or text area. It's becoming so easy to generate external data in flash.

Here is an example of what we will create. A simple dynamic textarea with some text inside it with a mask applied to it:

[ an example of what you will create ]

Here is How
The following steps will explain what this tutorial will be trying to explain.

1. Create a new flash document.

2. Create a new layer and call it textarea.

3. Draw a text area where you're dynamic text will be stored with your text tool.

[grab your text tool, click on the stage and draw your textarea]

4. When your finished drawing the text area, open your properties panel
   and select "Dynamic Text" and "Multiline".
   
   
   
5. Ok now we are going to convert the dynamic textarea into a movieclip . So hit F8 on your keyboard and call the movieclip main_mc.
   
   Also, you should embed your fonts. Click the Character button. The Character Options dialog box will appear. Check the option for Specify Ranges and select Uppercase, Lowercase, and Numerals if your data may contain numbers:

[ make sure to embed your fonts ]

6. Give your movieclip and instance name of main_mc as well.
   
   

7. Create an additional layer in your timeline and call it mask. Draw a box covering the main_mc movieclip with the proper dimensions.
   
8. Again we are going to convert the box to a movieclip. So hit F8 and call our movieclip mask_mc. Also be sure to give your new movieclip an instance name of mask_mc.
   
9. Now we just have to add some actionscript to make it all work. Create a new layer and call it actions. Click inside the 1st frame of your timeline and open your actions pallet. Type the following script into your actions panel:

main_mc.setMask(mask_mc);

Details about setMask:

---

Availability : Flash Player 6

Usage : main_mc.setMask(mask_mc)

Parameters:
main_mc The instance name of a movie clip to be masked.
mask_mc The instance name of a movie clip to be a mask.

Full Screen Flash Page

A simple tutorial to teach you how to create full screen Flash page within a HTML page. This tutorial may be a bit different from the usual full screen effects you've seen. It doesn't scale the height and width of the Flash file, but merely expands the Flash page without scaling the elements inside. Thus if your using pixel fonts the text will still remain clear and crisp.

In this tutorial we'll be using Flash MX 2004 as well as a bit of CSS to get rid of the default margin value. Click here to see the final outcome.

Let's begin

1. Open any file in Flash.

2. Go to File > Publish Settings. Select the HTML tab.

3. Click the Dimensions drop down box. Select Percent and type 100 for the Width and Height.

4. Click the Scale drop down box and select No scale.

5. Click Publish to publish the files.
   

[ Screenshot of the Publish Setting in Flash MX 2004. ]

6. You should have two new files now, a SWF and a HTML file.
   
   The code for the HTML file should look similar to this:

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>myfiletitle>

head>

<body bgcolor="#ffffff">

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/
shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="100%" height="100%" id="myfile" align="middle">

<param name="allowScriptAccess" value="sameDomain" />

<param name="movie" value="myfile.swf" />

<param name="quality" value="high" />

<param name="scale" value="noscale" />

<param name="bgcolor" value="#ffffff" />

<embed src="myfile.swf" quality="high" scale="noscale" bgcolor="#ffffff" width="100%" height="100%" name="myfile" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go
/getflashplayer" />

object>

body>

html>

[ Code for the HTML file. ]

7. This part is optional. Most browsers set a default value for the margin which often isn't zero, therefore we're going to use CSS to set it to zero.

   The code is quite self explanatory. It means set the height and width to 100% and set the margin value to 0. Add this piece of CSS code into the HTML file (inside the head tag).

<style type="text/css">

style>

[ Copy and paste the above code between the head tags. ]

	Note
Note that the CSS may not work in some of the older browsers since they do not support it completely. Refer to this link for more detail.

That's it! I hope you enjoyed the tutorial. If you had any problems with creating the files above or didn't quite understand something. Here is a zip file containing the FLA, SWF and HTML file.

Download ZIP

Making an Object Transparent

Making an Object Transparent

In the tutorial listed below I will instruct you on how to make just about anything transparent. For this tutorial we will start off with a blank document:

Now, let's create our simple motion tween:

1. First, draw something, import an image, etc. onto your drawing area.
   
2. Once you finished the first step, we will now take what you drew/imported and convert it into a movie clip. To make it a movie clip, right click on your object and click on Convert to symbol. When the new window comes up, click the radio button horizontal to Movie clip. Press OK:

[ convert to symbol dialog box ]

3. Click on the image once to select it.
   
4. Now, on the properties bar, click the dropdown menu next to Color and select Alpha:
   

[ select the Alpha option ]

5. Now all you have to do is enter a value or slide the slider to specify the alpha value you would like.

Creating Drop Down Menus

Creating Drop-Down Menus

So want to create a drop-down menu eh? It's not hard at all! I'm not going to go into details in this tutorial. I'll just show you the main idea of the menu. This tutorial requires only the basic knowledge of Flash. The following animation is an example of what you will be creating:

for example the right of the list of examples of animation -->

[ create a simple animation ]

First you should download the unfinished .fla file from the link in the following table:

Download Partial Source

So what do we have here? In the first frame there is the button that should open the menu and in frame 20 I've already copied out the buttons so you do not need to do that but if you will be creating your own drop-down menu some day be sure that there are no gaps between the menu buttons because whenever the mouse moves out of the button-area the menu will close.

There is only one button copied all over the place and the text on the buttons is in the "TxT" layer which is locked to make things easier. You can preview the animation if you'd like... nothing happens! The only action there right now is in the first frame of the "Actions" layer. As you can see it's a stop(); actions which just won't let the animation to start playing as you preview it.

Making the Menu Work:
The following steps will help you to create the drop-down menu:

1. First double-click the symbol on the stage, go to frame 1 and click on the only button there and open up the actions tab! Now assign this piece of code to the button:
   
   on(rollOver) {
   gotoAndStop("open");
   }
   
   This just tells the timeline to go to the frame labeled "open" when the cursor rolls over the button! You can see that frame 20 in the "Buttons" layer is labeled "open" and frame 1 is labeled "closed" (you can see that by selecting a frame and opening up the properties panel for that frame. Now close the actions tab!
   
2. Next go to frame 20, click on the "Invisible button!!!" layer and insert a new keyframe in frame 20 by selecting frame 20 and pressing F6 or right-clicking frame 20 and selecting Insert keyframe.
   
3. Now select the Rectangle Tool and draw a big rectangle! Bigger than the stage itself!
   
4. If it's not selected yet, select the rectangle you just created by double-clicking on it with the arrow tool and go to Insert->Convert to Symbol or press F8!
   In the "name" field type "Invisible button" or something similar and make sure the behavior is "Button". Click OK!

[ Converting it to a symbol ]

5. Double click the new symbol, click and drag the first frame on the timeline to the fourth frame of the timeline! From the "UP" frame to the "Hit" frame!
   
6. Now click on the new symbol and add this piece of code on it:
   
   on(rollOver) {
   gotoAndStop("closed");
   }
   
   This just tells the timeline to go to frame 1 (labeled "closed") when the cursor rolls over the symbol!

That's it! Wasn't that easy? You can test the move by pressing CTRL+ENTER or by choosing control->Test Movie.

Bevel in Flash

Bevel in Flash

Ever wished you could use Photoshop's bevel effect in Flash? That's right; Flash isn't known for easy style effects, but with my simple beveling technique, you can work around Flash's rather bland palette.

[ an example of what you will create ]

Here is How

1. Create a new document around 400 high by 200 wide.

2. Rename the default layer "dark" because you'll be using a dark green on this layer.

3. Type in "Mo Money" with the text tool and draw in any squigqly line with the brush tool. The text must be broken up for the beveling to work, so just select it and hit Ctrl+B twice.

[ what broken text looks like ]

4. Select everything on layer "dark" and copy it by hitting Ctrl+C

5. Create two new layers. Name the top "mask" and the middle "light." On both, paste your design in the exact place as the original by hitting Ctrl + Shift + V.

6. Of course, you should right click your mask layer and check "mask" to turn it into a mask.

[ correct layer set-up]

7. Now you want to lock everything but the light layer. Select it and change its color to a lighter green. Before deselecting, nudge the light design up one and left one with the arrow keys.

[ light graphic shifted up and left ]

8. We want this to be a smooth bevel, so choose modify > shape > soften fill edges from the main menus. Change the settings like such...

[ here are some suggested settings ]

9. Lock all layers to make the masking go into effect. And voila! You have your bevel.

[ final layers set-up ]

Flash Vector Illustration

Flash Vector Illustration

Vector Illustration is often quite hard to wrap ye old noggin around sometimes - especially for beginners. While most Illustrators tend to use the larger more orthodox illustration applications such as Adobe Illustrator and Freehand , I choose to use Flash because of its simple, and animation friendly drawing tools. I plan to write a few of these, but first I want to lay down the basics before I even write about shading and tone, so yeaaaaaaaah!

In this walkthrough, I will explain how to create the following image:

Of course, everything that appears within this tutorial can easily be accomplished using alternative packages - I will walk through my general work flow for the sake of the tutorial, and be covering the process used to create the illustration above.

Tools Used
Ok enough jibber jabbering. For this tutorial, all you will need is Flash, and a drawing to work from. I recommend a scanned rough, or something sketched up in Photoshop or Alias Sketchbook (what I usually use). I will mention that a drawing tablet is definitely desirable in order to achieve accurate line work, and also make the process quicker (tablets are ninja quick):

Planning it Out
Before you even pop open Flash you should always rough out the concept first. Even if it is simple blocks and elements to establish the composition. The more messing around you do at the start determines how much tweaking and tedious refinements you will need to apply to your final product:

Often, I will really loosely draw elements a few times until I get the general feel of them, and start layering the roughs on top of each other until I have a nice and balanced form. In the octopus sketch above, it is a little more detailed than I usually would attack a drawing, because it was being used for a project. Nevertheless, if you detail your image in the beginning, it means you will not have to worry about adding and touching your vectored line work when colouring and shading.

Lining it Up
Ok, now you can pop open Flash!

• Create a new document and set it to something nice and big (1280×1024 pixels is a good start).
• Create a new layer and add your rough sketch to it. Scale it so it fits the size of the stage fairly well. Set the layer to guide mode, and lock it.
• Again, create a layer, but this time add it above the first and create a blank keyframe.

You should now have a layer configuration which looks something like the below picture:

Sweet. Now that you are all setup, grab the line tool ( Shortcut is “N”) and set it to a colour that is completely different to the original line. I usually sketch in blue animator’s pencil, so I use red to make it easy to distinguish the vector lines from the rough. A line stroke of 1 pixel works great - so stick to that width.

As far as the lining technique goes, it is fairly straight forward. Grab the line tool, and create a chord across a small span on the curve (if you aim for something too big you will miss the contour):

After the chord is established, grab the arrow tool (or hit “V”), and bend the chord until it matches the shape of the curve. It takes a lot of practice to get the knack of it, but once you do, you will be able to vectorize almost anything:

Now that you have a segment of a curve, all you have to do is keep adding more segments onto the end until you have a nice sweeping line. You might also notice that if you drag the vertex of the line around, there will be a snapping point. That is the point of infliction between two curves, and in doing so, it removes any sharp connections between segments:

This is what I ended up with after vectoring my original line work:

Colouring it Up
This bit is really for you to get experimental with. I often just choose whatever “feels” right and tweak and adjust from there:

Fill in your main colours with the fill tool, and work out something that compliments the group of colours in the scene. With my vector style, I usually shade on a layer above and then merge it back down, then erase all line work.

Shading is simply a matter of sampling the base colour and moving above and below the midtones. The harsher the lighting, the further the way you should deviate from the tones. To avoid major stepping, two tone shadowing and highlighting is a great way to break the harsh tonal divisions up. Consider the direction of the light source, and project the shadows in the opposite direction, whilst keeping the closet face to the source highlighted. The easiest method to select tonal values is to move the brightness slider up and down whilst the relevant midtone is selected. This will prevent any wacky tinting going on with shading:

After the colouring is sorted out, detail can be added. I added in suckers to the octopus and a few bubbles and and things to make the composition more diverse. I added some foreground and background elements into the composition by duplicating some bubbles and varying the sizes to balance the frame.

Everyone has their own unique style, so keep playing around with ideas until you hit something nice. A vector piece is only as strong as the concept behind it, and your own boundaries. Pretty much anything is possible with vector art, you just have to have the patience and skill (after practice) to be able to translate thoughts into “art”.

Here is a bunch of illustrations I have done using the above approach (click on the following image to see them in detail):

Well I guess that concludes the first of many guides I guess I will pop out of me from time to time. I hope it gives you a general insight into the work flow that I follow.