Jive, Rock, and Jam with Flash

Featured Articles

Flash Tutorial - Top Flash Menu

9:09 pm by admin in Misc. Jive, The Good Word

In this tutorial made for Flash 8 , you will see how to create advanced top flash menu using the Action Script.You can use this menu for any web site. In this tutorial, you will also learn:

1. How to design menu,
2. How to animate it,
3. How to apply action script code on it and more.



Step 1

Open a new Flash document. Select Modify > Document (shortcut key: Ctrl+J ). Set the width of your document to 220 pixels and the height to 200 pixels. Frame rate set to 60 fps (Frames per Second), and for background color set #FBFAE8. See the picture below.



Step 2

Take the Line Tool (N), go in the Property inspector, select #535653 for the color , set the line thickness to 1, choose Solid as line type and you may also check the Stroke hinting option, this will give you better and more smooth outlines.



Step 3

Then, draw a five “lines” that will represent menu. See the picture below.

 

Step 4

Take the Text Tool (T), go in the Property inspector below the scene, choose Static Text (see left part of the image below). Choose any font you like. For color choose #444644, size which you like, and type text for links. See the picture below.



Step 5

Choose the Selection tool (V), and select the first text in menu (”HOME”). After that press F8 key (or select Modify > Convert to Symbol ) to convert this text (”HOME”) into a Movie Clip symbol.



Step 6

Then, go to the Properties Inspector, and you will see from the left side Instance name input field. Call this Movie Clip home_mc.



Step 7

Double-click on the movie clip on stage with the Selection tool (V), or choose right click and Edit in Place.



You should now be inside the movie clip.

Comments (0)

Our Item Title is Flash Tutorial Analogue Clock

1:09 am by admin in Misc. Jive, The Good Word

Learn how to make an analogue clock. This tutorial shows you how to create a analogue clock in Flash. Have a look at the time on the clock below:

Example:Download the Flash file Int 031a

An Analogue Clock with a clock face made in Flash MX 2004.

Note: This clock is taking the time off your local computer and displaying it on the web page through Flash. This is not perfect as I don”t know if your clock is correct. There are other ways of finding out the time but they are much more complicated and not necessarily more accurate. So I have gone for a very simple method of finding out the time. It works and is not too difficult to create.

Cross Ref: If you would like to create an Digital Clock: Digital Clock Tutorial
Digital clocks are much easier to make in Flash because you haven”t all the work of creating the face and hands.

Cross Ref: If you would like to display the date: Date Tutorial

Step One: Setting Up the Flash Document

1. Open a new: Flash Movie
2. Go to: Modify > Document (Ctrl J)
3. Set the size to: 150 x 150 pixels
4. If you wish select a:Background Colour
5. Click: OK

Step Two: Creating the Clock”s Second Hand

1. Go to: Insert > New Symbol
2. Type the Name: Second Hand MC
3. Select behavior: Movie Clip
4. Click: OK

5. If the Tools panel is closed, open it: Window > Tools
6. Select the Line tool:
7. Whist holding the Shift Key down drag out a small: Vertical Line
8. If the Property Inspector is closed, open it: Window > Properties(Ctrl F3)
9. Set the line colour to: Red
10. Set the line width to: 1

    
    The Line width is not set in the width box but in the Line attribute area.

11. Set the X value to: 0
12. Set the line height to: 57
13. Set the Y value to: -57

    Your red Second Hand should be sitting directly above the centre cross:

    
    Second Hand.

Step Three: Creating the Clock”s Minute Hand

1. Go to: Insert > New Symbol
2. Type the Name: Minute Hand MC
3. Select behavior: Movie Clip
4. Click: OK

5. Select the Line tool:
6. Whist holding the Shift Key down drag out a small: Vertical Line
7. Set the line colour to: Black
8. Set the line width to: 3
9. Set the X value to: 0
10. Set the line height to: 40
11. Set the Y value to: -40

    Your Minute Hand should be sitting directly above the centre cross:

    
    Minute Hand settings.

Step Four: Creating the Clock”s Hour Hand

1. Go to: Insert > New Symbol
2. Type the Name: Hour Hand MC
3. Select behavior: Movie Clip
4. Click: OK

5. Select the Line tool:
6. Whist holding the Shift Key down drag out a small: Vertical Line
7. Set the line colour to: Black
8. Set the line width to: 5
9. Set the X value to: 0
10. Set the line height to: 30
11. Set the Y value to: -30

    Your Minute Hand should be sitting directly above the centre cross:

    
    Hour Hand settings.
    
    Note: In your Library you should now have three Symbols: Window > Library(F11)

    
    Three Movie Clips in the Library.

Step Five: Creating the Clock”s Face

1. Go to: Insert > New Symbol
2. Type the Name: Clock Face
3. Select behavior: Graphic
4. Click: OK

   You need to use the Oval tool: and other drawing and text tools to create a clock face. What the clock face looks like is up to your own artistic ideas and could be something as simple as a circle or an elaborate design.

   The clock face that I drew.	A simpler clock face.

   Note: If you wish you could create the Clock face in another program such as PhotoShop (or Fireworks or Illustrator or Freehand or CorelDraw etc). You would then need to import or paste the clock face image into the above Graphic Symbol.

   At this stage do not get too engrossed with the look of the clock face as it is easy to change the design latter. Just go to the library (F11) and double click on the Clock Face Symbol.

   Remember that your Movie size is 150 x 150. So the clock face should not be bigger than this. If it is bigger you will need to enlarge the size of your Movie: : Modify > Document (Ctrl J)

5. When you have finished drawing return to the Selection Tool:
6. When you have finished creating your design you will need to make sure that it is centred in the middle of the Stage. TO do this select all objects either with the Selection Tool or: Edit > Select All(Ctrl A)
7. Group all the objects: Modify > Group(Ctrl G)
8. If the Align Panel is closed, open it: Window > Design Panels > Align(Ctrl K)
9. In the Align Panel select the Align to Stage option:
10. Click on Align Horizontal Center:
11. Click on Align Vertical Centre:

    The central cross should now be right in the middle of your clock face:

    
    The cross in the centre shows that the face is centred correctly.This cross is only a guide and does not show up in the final Movie.

… Read More of this tutorial at WebWasp.co.uk Tutorials

Comments (0)

Scrollbar - Flash Programming

12:09 am by admin in Misc. Jive, The Good Word

Scrollbar is very popular in Flash.Exactly this tutorial explains, how to create a simple scrollbar using action the script.You will also learn how to create dynamic text field and more.



Step 1

Create a new Flash Documet, take the Text Tool (T), open the Properties Panel (Ctrl+F3) and set the Dynamic Text.



Step 2

Using drag and drop technique, create a “rectangle” in whic you”ll add some text. Look at the picture!



Step 3

Select the drawn “rectangle” open the Properties Panel (Ctrl+F3) and set the options from the picture below!



Step 4

Right click on the created “rectangle” and choose Scrollable.



Step 5

Copy a large text from somewhere and paste it in the created ”rectangle” (area for text) or type any text in that “rectangle”.



Step 6

Create two buttons in Flash, which will use for text scrolling.



Step 7

Select the “UP” button, open the Action Script Panel (F9) and paste this script:

on (release) {
scrollbar.scroll -= 1;
}

Step 8

Then select the “DOWN” button, open again the Action Script Panel (F9) and paste this script:

on (release) {
scrollbar.scroll += 1;
}




Download source file (.fla)

Comments (0)

Dark flash preloader - Flash Programming

1:08 am by admin in Misc. Jive, The Good Word

This tutorial will show you how to create dark flash preloader with percent using the action script code.You will also learn, how to design dark preloader, how to convert it into a Movie Clip symbol, how to apply action script code on it and more.









Example:



Step 1

Create a new flash document.

Step 2

Press Ctrl+J key on the keyboard (Document Properties) and set the dimensions of your document as whatever you like. Select #171E24 as background color. Set your Flash movie”s frame rate to 30 and click ok.



Step 3

Take the Text Tool (A) and go to the Properties Panel below the stage. Then, choose the following options:

1. Select a Static Text field.
2. Select a Arial font
3. Choose 13 as font size.
4. Select #536F86 as color.
5. As the rendering option, select Anti-alias for readability.



Then, type somewhere on the stage “loading”. See the picture below.



Step 4

While the text (”loading”) is still selected, press F8 key (Convert to Symbol) to convert this text into a Movie Clip Symbol.See the picture below.



Step 5

Double-click on the movie clip on stage with the Selection tool (V). You should now be inside the movie clip.



Step 6

Click on frame 100 of layer 1 and press F5 key.

Step 7

Create a new layer above the layer 1 and name it percent.

Step 8

Using the drag and drop technique, move the percent layer below the layer 1. See the picture below.



Step 9

Lock layer 1, select percent layer and take again the Text tool (T), and go to the Properties Panel (Ctrl+F3) below the stage. Then, select the following options:

a) Select a Dynamic Text field,
b) Select a Arial font.
c) Choose 32 as font size.
d) Select #313F4D as color.
e) As the rendering option, select Anti - alias for readability.
f) For Var: type ?percent1″



Then, type, on the position like it is shown on the picture below “100%”. See the picture below.



Step 10

Go back on the main scene (Scene 1). Take the Selection Tool (V), click once on the ?preloader? to select it and open the Action Script Panel (F9). Then, enter the following Action Script code inside the actions panel:

onClipEvent (load) {
total = _root.getBytesTotal();
}

onClipEvent (enterFrame) {
loaded = _root.getBytesLoaded();
percent = int(loaded/total*100);
percent1 = “”+percent+”%”;
gotoAndStop(percent);
if (loaded == total) {
_root.gotoAndPlay(2);
}
}

with preloader!

To see how its work, create a new layer above the preloader layer, click on layer 2 and press F6 key. Then, put on that frame some movie, picture? After that, while you”re still on frame 2, go to the A.S.panel (F9) and type:

stop();

Then, go back on frame 1 of layer preloader and in A.S.panel type again:

stop();

Have a nice day!

Download source file (.fla)

Comments (0)

Free Tutorial - Special Picture Effect

12:08 am by admin in Misc. Jive, The Good Word

Learn how to create a special picture effect using the mask. This effect is very useful and you can use it for banners, header animation or wherever you like. To create this lesson, you don”t have to use action script code.



Step 1

Create a new Flash Documet, choose File > Import > Import to Stage (Ctrl+R) and import any picture. Frame rate set to 32 Fps (Frames per second).



Step 2

Double click on layer 1 to rename its name into pictures.

Step 3

Insert a new layer and name it mask. 



Step 4

Lock the “pictures” layer, select the mask layer, take the Rectangle Tool (R), Stroke color must be switched off, under fill color choose any color and draw a “rectangle” like it is shown on the picture below!





Step 5

Take the Selection Tool (V), and do like it is shown on the picture below!



Step 6

Finally, your “rectangle” must look this:



Step 7

Select the “rectangle” and press F8 (Convert to Symbol). In Convert to Symbol window under Type choose a Graphic, name it whatever you like and press ok. Look at the picture below!



Step 8

Click on the twentieth frame of layer pictures and press F5. After that click on the twentieth frame of layer mask and press F6 (keyframe). While you”re still on the twentieth frame of layer mask, using arrows key, or by mouse, move your “rectangle” on the position like it is shown on the picture below!







Step 9

Click on the first frame of layer mask, open the Properties Panel (Ctrl+F3) and under Tween choose Motion.





Step 10

Select the mask layer and choose right-click and select mask to turn the layer into a mask.





Step 11

Click on the twentieth frame of layer mask, open the Action Script Panel (F9) and paste this script:

stop ();

Now, for the first picture. You can apply this effect on many pictures if you like.



Download source file (.fla)

Comments (0)

Where is Action Script and Flash taking us, particularly in the world of interactive website media, Web 2.0, and newfangled social interenet boom? According to Flash programmer Jim Berringer, as the web continues to grow and reach new demographic groups, Flash will play an extremely important role. Writes Berringer, "The thing about flash is that good designers and Action Script coders can make websites extremely user friendly. Whereas in the past, one had to have an 'introductory' course to the workings of the internet, Flash driven websites are simple: point, click, interact, have fun!". Increasingly, Flash is becoming the choice application for e-commerce, including the highly successful e-wallet www.payspark.com, (run by CSC247) that gives its users the ability to send and receive money, along with an ATM card for withdrawal privileges around the world. Payspark caters mostly to the Euro-gaming community, with focus on the sports betting market vertical. USA clients are not allowed, due to recent legislation enacted by the US Congress now 12 months ago. By far, however, www.payspark.com feeds most of its clients to online casinos. Flash casino and poker platforms are nothing new, but a consolidated flash deposit, play, and withdrawal method is. In effect, the USA is really missing the boat: in the fall, when NFL Betting drives most sports betting operations, USA customers must jump through hoops and clear hurdles imposed by the banking community. Instead of hampering these transactions, the banks should lobby Congress for the right to process money per the will of their clients. Writes Tim Hathaway, a Libertarian think-tank member, "People are being deprived of basic rights to gamble online if they want to. Speaking personally, I love NFL Betting from fall up until the Super Bowl. And why not? It's my right to spend my money as I see fit. Its time for the government to take a more laissez faire approach and leave me alone." Football is not the only sport where betting is popular: in the winter and during the famed "March Madness" college sports season, basketball betting is hugely popular. This means that e-wallets like www.payspark.com need to have solid Flash programming and latency year 'round - because of the importance of financial transaction safety and security. In the end, most people feel the USA legislation only hurts the US economy. According to Dan Lander, a liberal activist, "If I want to play online blackjack it's my business...but, the government can regulate this industry, tax it fairly, and we'll see strong growth in the jobs sector for web hosting, programming, IT, and management."

Jive, Rock, and Jam with Flash Authors

• 
  
•