This tutorial is from basic to advance users during this tutorial you will learn how to use brushes , create your own brushes , learning how to speed up your work process by using brushes.
Preview
Step 1
Setting up your work area . I always try to work towards the final result by browsing the internet for inspiration . For instance if you are trying to create a floral element of design it is a good idea to search for related links , images , inspirations over the internet. Secondly i try to work following a color scheme. Here is the color scheme i will be following during this process. Four are solid fills and 2 gradients , I may stear away from this which i sometimes do !
Step 2
Using the Ellipse tool (L) i drew a circle with a stroke colors picked up from my palette .
Step 3
I will be using offset path (object>path >offset path ) to create another circle around it ..
Step 4
Select the Circles , create a copy and Paste in back , increase the size of the two circles behind.
Step 5
We will be now create a custom brush . For this i created an oval shape , aligne its copies and then expanded the whole shape OBJECT>EXPAND
Step 6
I will create a custom brush from this shape now , here is how…
step 7
Select the outer most circle of the element created in step 4
Step8
Now i will create some additional design elements to it . I am using spiral tool .
Step9
Working on this shape i closed the end part by joining it . and then created a copy of it
Step10
Using the flower we created in step 7 , place the spiral design element behind it . Create copy and more copies creating something similar to this
Step11
Using the paint bucket tool fill up the areas . In order to use paint bucket select all of your artwork which needs to be painted and continue filling it up . Expand all the brushes !. Expand all other shapes fillsand strokes if possible. I worked on a single spiral shape filled it up then expanded it and then duplicated it a few times to come up with this.
Step11
Add a gradient background to it . To achieve the final effect preivewed below , i used the brush on the isonaled flowers you see here . also few copies of the final design element . I used an overlay from Prudence Collection to get the final effect. (final effect in photoshop)
This tutorial will teach you how to create an animated sliding menu that appears when the user points his mouse on its tip and then slides back inside when the user moves his mouse away. In this intermediate level tutorial we are going to use our ever favourite Tween Class. Below is an example movie showing an effect similar to the one we will create by the end of this tutorials.
The menu in the movie above slides out when the mouse rolls over the menu background and slides back in when the mouse rolls over a hidden invisible button placed over the rest of the movie stage. This technique is used because a basic roll out event handler will cause the menu to slide back whenever a button inside the menu is touched making our menu disfunctional.
The process for creating this menu could be divided into the following sections:
Setting up the movie and timeline.
Creating a movie clip to hold our images (content).
Creating the hidden button required for sliding back the menu.
Creating the menu and buttons.
Writing the ActionScript required to move the menu and configure the buttons.
The images and menu graphic required to follow this tutorial are found in this zip file. Download and unzip all the contents of that file to proceed with this tutorial.
Setting Up the Movie and Timeline
Create a newActionScript 1.0 or 2.0 Flash movie, set the dimensions of the movie to 500x375 px, I used the default settings for the frame rate and background.
Create 4layers on the timeline each with a single frame, name them Actions, Menu, Hidden Button, Content.
Creating the Image Container Movie Clip
Our content in this movie will be a set of images that will be contained within one movie clip. By the end of this tutorial, our menu will command this movie clip to display a specific image when the corresponding button is clicked.
To create this new movie clip to contain our images go through Insert>New Symbol...(Ctrl+F8) to create a new symbol. Name the clip Images Container, select Movie Clip as the symbol type and click OK.
You should find yourself on the timeline of our new Images Container movie clip. To add your images to this movie clip simply go through File>Import>Import to Stage and browse for the folder in which you extracted the images we provided you with. If you select and import Image1, Flash should detect that this is a sequenceof images, so let it import them all in one go. You should end up with our three images, each on a different keyframe on the only layer of our Images Container movie clip.
Our Images Container movie clip is now done. Go back to the main timeline (Scene 1). Open up the Library (Ctrl+L), look for the Images Container movie clip and drag an instance of it onto the only frame of the Content layer of your timeline. You should see the first frame of that movie clip now on the stage. Select the movie clip, access the Properties Inspector and assign the instance nameimages_mc to it. We are done workign with the actual subject of our movie.
Creating the Roll Back Hidden Button
Our hidden button will be used to command the menu to slide back when the mouse rolls over this button. This button must cover the entire area of the stage in order for it to work well. Select the Hidden Button layer, and then use the Rectangle Tool to draw a box that cover the whole canvas in whatever colour that you choose. Once done, click on the layer again on the Timeline to select the box and its outline, then press F8 to convert it to a Movie Clip Symbol. Name this symbol Hidden Button.
While your newly created Movie Clip symbol is still selected, access the Properties Inspector and assign the Instance Namehidden_btn to it.
We do not need to see this layer any more, access the Timeline and hide the Hidden Button layer by clicking on the Display as Outlines option for the layer.
We are done working with the hidden button, we now need to create the menu that will hold the navigation buttons of this movie. Head to the next page to do that when you're ready.
We will create in this section of the tutorial the menu that will slide in and out during playback. The menu will be contained within a separate movie clip, this movie clip will have the background of the menu and the buttons from which the images container will be controlled.
Creating the Menu
To start create our menu select the layer labeled Menu and then go through File>Import>Import to Stage to browse for the menu graphic of our menu that was in the zip file you downloaded earlier. Make sure you check the option to import the file as a Single Flattened Bitmap and then click on OK.
Select your imported menu and click on F8 to convert it to a Movie Clip symbol. Name this movie clip Menu. Make sure that you set the Registration Point to the top left corner - this will help us align the menu on the stage easily. Once you have the graphic as a movie clip on the stage, access the Properties Inspector to assign the instance name menu_mc to it
Double click the menu_mc movie clip to start editing its own timeline. You should have a single layer on this movie clips timeline, rename that layer to Menu Background and then create another layer and name it Buttons.
Select the only object on this timeline (the menu graphic), press F8 to convert it to a movie clip symbol again. Name this movie clip Menu Background, assign the instance name menu_bg_mc. This is required to have access to the background itself as the background is the object that will trigger the slide back function when the mouse rolls over it.
We cannot attach an onRollOver event handler property to the menu movie clip as a whole because that will override any event handlers attached to the actual buttons of the menu and they will not work that way.
Time to create the actual buttons of the menu, for the sake of simplicity we will use the basic Button component instead of creating graphic buttons. Select the layer named Buttons and then go through Window>Component to display the Components Panel. Drag an instance of the Button component onto stage, access the Properties Inspector, assign the instance name my1_btn to this button, then access the Parameters tab of the Properties Inspector and change the label parameter to Image 1.
Repeat the process to add two component buttons labeled Image 2 and Image 3, then assign the instance names my2_btn and my3_btn to them respectively.
Our menu is now done! Go back to the main timeline and then move the menu to the left side of the screen so that the word menu and a little bit of the body of the menu is only on the stage. An easier way to move the menu can be done by accessing the Properties Inspector and settings its X position to -110.
All of our movie assets are now set. We will write the code required to move the menu around in the last page of this tutorial.
The third section of our tutorial will explain the code line by line. We will create two functions, one to slide out the menu, and the other to slide it back in. We will then attach one of these functions to a roll over event handler attached to the menu movie clip background and the other function to the hidden button. We will finally attach the code to the menu buttons to display their respective image container images.
Scripting the Menu and Buttons.
Back in the main timeline, select the Actions layer and then right-click the only frame and open up the Actions Panel.
We will start off by stopping our Images Container movie clip from playing automatically when the movie is started. We can do that easily by using the stop() method. We also need to hide our Hidden Button by setting its transparency level to zero.
images_mc.stop(); hidden_btn._alpha = 0;
We are going to use the Tween Class to slide our menu in and out. To be able to use the Tween Class we have to import the class assets before we use any of its objects. (Refer to the link above for more details on the Tween Class)
Before we start moving our menu, we need to create some initial Variables to hold organisational data of our movie. The variable rolled_up stores the current location of the menu movie - this will be used by the Tween class to tell the menu to go back to this position when the menu slides back in. The rolled_out variables stores the position at which the movie should end up at when it is fully slid out, zero here means that the menu is fully outside.
var rolled_up = menu_mc._x; var rolled_out = 0;
We are going to create a Function that commands the menu to slide out. This function should be easy to understand if you read the Tween Class tutorial. I added the current_x variable to store the current location of the menu so that the animation rolls out from the exact point at which the menu is at instead of jumping if triggered before the menu is fully rolled back.
function slide_out() { current_x = menu_mc._x; var anim:Tween = new Tween(menu_mc, "_x", Strong.easeOut, current_x, rolled_out, 1, true); }
We will create the function to roll back the menu, the only difference between this one and the one above is that it uses the rolled_up variable instead of rolled_out.
function slide_in() { current_x = menu_mc._x; var anim:Tween = new Tween(menu_mc, "_x", Back.easeOut, current_x, rolled_up, 1, true); }
Our basic functions are set. We need to assign these functions to event handlers attached to the menu background and our hidden button. The next code is self explanatory.
Finally, our buttons need to have event handler properties attached to them as well to command the images container to show the required image when clicked.
You can test your movie now. The menu should work as described! However, there is a small touch that we can add to help make our menu a little bit nicer. A point that you might not be aware of is the fact that our hidden button covers the entire stage any any buttons below it cannot be used now. So if you plan on having anything interactive below the hidden button it will not work. We can fix this by moving the hidden button outside the stage when it is not used and then bring it back when we need it. We will also disable the menu background button when it is not need as well to remove the finger mouse pointer when the menu is already out.
function slide_out() { current_x = menu_mc._x; var anim:Tween = new Tween(menu_mc, "_x", Strong.easeOut, current_x, rolled_out, 1, true); hidden_btn._x=0; menu_mc.menu_bg_mc.enabled=false; }
function slide_in() { current_x = menu_mc._x; var anim:Tween = new Tween(menu_mc, "_x", Back.easeOut, current_x, rolled_up, 1, true); hidden_btn._x=-1000000; menu_mc.menu_bg_mc.enabled=true; }
That should do it. Test your movie to see your fully functional sliding menu!
This concludes our tutorial. You can download the end source file here. Please feel free to post any questions you have on the Oman3D Forum.
This TechNote walks you through making a pop-up menu in Flash, similar to the one shown in the example movie below.
The menu smart clip that ships with Macromedia Flash 5 provides another way to add pop-up menus to Flash movies. See Customizing the Flash 5 Menu Smart Clip (TechNote 15140) for details.
Create four layers, by choosing Insert > Layer from the Flash menu until you have a total of four layers.
Name the top layer " Actions/Labels".
Name the second layer from the top "Top level buttons".
Name the third layer from the top "Submenu buttons".
Name the bottom layer " Invisible buttons".
Set up layer: Actions/Labels:
Highlight frame 1 of the Actions/Labels layer.
Choose Modify > Frame.
In the Label tab, label the frame "START" (without quotes).
Select the Actions tab and assign a Stop action by clicking the plus "+" sign and select "Stop". Click OK.
Highlight frame 10 of the Actions/Labels layer.
Choose Insert > Keyframe (or use F6 on your keyboard) to insert a keyframe.
Choose Modify > Frame.
In the Label tab, label the frame "MENU 1".
In the Actions tab, assign a "Stop" action. Click OK.
Highlight frame 20 the Actions/Labels layer and press F6 to insert a keyframe.
With this frame highlighted, select Modify > Frame.
In the Label tab, label the frame "MENU 2".
In the Actions tab, assign a "Stop" action. Click OK.
Highlight frame 30 of the Actions/Labels layer and press F6 to insert a keyframe.
Lock this layer by clicking the padlock icon.
Create the menu's button:
Choose "Insert > New Symbol". Name it "Button", choosing Button as the behavior. Click OK.
Choose the Rectangle tool, and select a medium green-colored fill.
In the center of the stage, draw a rectangle similar to the one in the example shown, about 50 pixels high by 200 pixels wide.
Highlight the "Over" frame, and press F6 to insert a keyframe here.
Choose the Paint Bucket tool and select a dark green color from the palette.
Apply the Paint Bucket to the rectangle, changing it to dark green. This will make the button turn dark green while the cursor is over it, in the finished movie.
Highlight the "Down" Frame, and press F6 to insert a keyframe.
Choose light green as the Paint Bucket color, and apply it to the green rectangle. This will make the button turn light green while the button is pressed in the finished movie.
Choose Edit > Edit Movie to return to the main timeline.
Create the Top Level menu:
Open this movie's Library by choosing Window > Library.
Find "Button" in the Library, and drag a Button from the Library window to the upper left of the stage. Drag from the thumbnail preview of the Button in the window.
Drag a second instance of Button from the Library window to the upper right of the stage.
Line the two buttons up across the top of the stage, about 100 pixels apart.
Choose the Text Tool. For the font, choose Arial, 24 point, White, Bold.
Create a text block next to the first button that says "MENU 1".
Do the same as above for the second button, and type "MENU 2".
Using the Arrow tool, select and center the text on the buttons.
Highlight the MENU 1 button on the Stage.
Choose Modify > Instance. In the Actions tab, click the "+" sign, and choose "OnMouseEvent" and on the right, choose "Roll Over".
Click the "+" again, and choose "Goto". On the right, choose "Label", selecting "MENU 1" from the pop-up menu. Click OK.
Highlight the MENU 2 button on the Stage.
Choose Modify > Instance. In the Actions tab, click the "+" sign, choosing "OnMouseEvent" and on the right, choose "Roll Over".
Click the "+" again, and choose "Goto". On the right, choose "Label", selecting "MENU 2" from the pop-up menu. Click OK.
Select frame 20 of the Top level buttons layer and press F6 to insert a keyframe.
Lock this layer.
Create the Submenu items:
Highlight frame 10 of the Submenu buttons layer and press F6 to insert a keyframe.
From the Library window, drag an instance of Button on the stage below MENU 1.
Using the Arrow tool, center it about 20 pixels below the MENU 1 button.
Drag another instance of the Button on the stage, centering it about 20 pixels below the last button.
Choose the Text Tool.
On the button below MENU 1, create type that says "SUBMENU 1a".
On the button below SUBMENU 1a, create type that says "SUBMENU 1b".
Use the Arrow tool to center the text on the buttons.
Highlight frame 20 of the Submenu Buttons layer.
With frame 20 selected, choose Insert > Blank Keyframe, or press F7 on your keyboard.
Note: You must insert a BLANK keyframe here or the example will not work.
Drag an instance of the Button from the Library on the stage below MENU 2.
Using the Arrow tool, center it about 20 pixels below the MENU 2 button.
Drag another instance of the Button on the stage, centering it about 20 pixels below the last button.
Choose the Text tool.
On the button below MENU 2, create type that says "SUBMENU 2a".
On the button below SUBMENU 2a, create type that says "SUBMENU 2b".
Use the Arrow tool to center the text on the buttons.
Highlight frame 10 of the Invisible buttons layer.
Press F6 to insert a keyframe.
Select the Rectangle tool, and choose a red fill.
Note: The color is not important. This example uses red for visibility and contrast.
Draw a rectangle covering the entire stage, slightly larger than the stage.
Now select yellow as the fill color.
Note: The color is not important. This example uses yellow for visibility and contrast.
Draw a rectangle around all three MENU 1 buttons.
Make sure all three buttons are completely surrounded by leaving a yellow border around them.
Using the Arrow tool, select the yellow area. Double-click the filled area so that both the fill and outline are selected and delete using the Delete key.
The yellow area should be removed, revealing the background. Now the red shape covers everything except the Menu 1 items, and will become the rollover area.
With the Arrow tool, select the red area.
Choose Insert > Convert to Symbol.
Name this symbol "Invisible Button 1" and choose "Button" as its behavior. Click OK.
Choose Edit > Edit Symbols.
Highlight the "Hit" frame in the Button's timeline and press F6 to insert a keyframe. This copies the red area from the "Up" frame into the "Hit" frame.
Highlight the "Up" frame and select the red area with the Arrow tool.
Press Delete. This removes the red area from the "Up" state. This button now only has content in the "Hit" state, making it an invisible button.
Choose Edit > Edit Movie.
The previously red button is now a transparent blue. This represents the invisible button you just created.
Note: Flash assigns this light blue color to buttons that are "invisible". Invisible buttons don't have an "Up" state, but do have a "Hit" state. Flash shows this color in the Flash editor, but renders this invisible in the finished movie.
Click this transparent blue invisible button to highlight it.
Choose Modify > Instance.
In the Actions tab, click the "+" sign, choosing "OnMouseEvent". On the right, choose "Roll Over".
Click the "+" sign again and choose "Goto".
On the right, choose "Label", selecting "START" from the pop-up menu. Click OK.
Invisible Button 2:
Highlight frame 20 of the Invisible buttons layer.
Choose Insert > Blank Keyframe.
Note: This must be a BLANK Keyframe for the example to work.
Choose the Rectangle tool, with a red fill color.
Draw a rectangle covering the entire stage, slightly larger than the stage.
Now, select yellow as the fill color and draw a rectangle around all three MENU 2 buttons. Make sure all three buttons are completely surrounded by leaving a yellow border around them.
Using the Arrow tool, select the yellow area and delete it. The yellow area should be removed, revealing the background.
With the Arrow tool, select the red area. Double-click to select the line surrounding it as well.
Choose Insert > Convert to Symbol.
Name this symbol "Invisible Button 2" and choose "Button" as its behavior. Click OK.
Choose Edit > Edit Symbols.
Highlight the "Hit" frame in the button's timeline and press F6 to insert a keyframe.
Highlight the "Up" frame.
Select the red area with the Arrow tool. Double-click if necessary to select both the fill and the line surrounding it and delete. This removes the red area from the "Up" state.
Choose Edit > Edit Movie. The previously red button is now a transparent blue. This represents the hidden button you just created.
Click this transparent blue invisible button to highlight it.
Choose Modify > Instance.
In the Actions tab, click the "+" sign, and choose "OnMouseEvent". On the right, choose "Roll Over".
Click the "+" sign again and choose "Goto".
On the right, choose "Label", selecting "START" from the pop-up menu. Click OK. The movie is now complete.
Select Control > Test Movie view the finished product. If you have problems, open a new document and try again, following the steps exactly.
Additional information
There are many ways to create pop-up menus. An example of a Hierarchical Menu is also available from the Flash menu, under Samples > Hierarchical.
Flash merupakan program untuk membuat animasi yang handal, Tutorial Flash kali ini adalah membuat efek animasi shine dan membuat mobil mengkilap bercahaya...
Para Pembaca yang budiman, belum punya mobil yang mengkilap tapi ingin membuat mobil anda jadi mengkilap tanpa biaya nah cuma di ilmugrafis kumpulan tutorial flash dengan tema mobil mengkilap bercahaya.
Langkah - Langkahnya:
1. Masukkan (import) gambar ke dalam stage
misalnya gambar mobil seperti gambar di bawah ini
2. Setelah gambar berada pada stage, atur besarnya stage sesuai dengan ukuran gambar yang telah di import tadi misalnya 500 px (width) dan 315 px (height)
3. Ganti nama layer1 menjadi mobil
4. Tambahkan satu layer baru, kemudian ganti layer tersebut dengan nama efek.
5. Klik icon rectangle tool ( tekan huruf R di keyboard ), kemudian gambar persegi panjang melebihi gambar mobil, seperti gambar di bawah ini.
6. Klik gambar persegi panjang yang telah dibuat tadi, kemudian ubah warna persegi panjang seperti gambar di bawah ini
7. Kemudian untuk mendapatkan efek cahaya yang mengkilap, lakukan pengaturan warna persegi panjang seperti gambar di bawah ini
8. Efek mengkilap telah selesai dibuat, kemudian langkah selanjutnya, tambahkan satu layer lagi, kemudian ganti nama layer tersebut dengan animasi
9. Masih di layer animasi kill icon Pen tool
10. Kemudian buatlah bagian yang akan dianimasikan misalnya seperti gambar di bawah ini.
11. Setelah area yang dianimasikan selesai dibuat, maka langkah selanjutnya yaitu klik kanan pada layer animasi pilih menu mask
12. Klik frame 30 pada setiap layer, kemudian tekan F6 untuk memberikan insert keyframe
13. Klik kanan antara frame 1 – 30 pada layer efek, kemudian pilih menu create motion tween
14. Klik frame 30 pada layer efek, kemudian pindahkan gambar persegi panjang ke sebelah kanan dari gambar mobil, seperti gambar di bawah ini
15. Tekan ctrl + enter untuk melihat hasilnya… Preview in image mode
This tutorial is from basic to advance users during this tutorial you will learn how to use brushes , create your own brushes , learning how to speed up your work process by using brushes.
which i sometimes do ! 
