In this easy tutorial made for Flash 8 I will show you how to create very attractive boom boom effect using the picture. You don”t have to use action script code to make this tutorial. You just have to use some special flash tips and tricks and mask. Let”s go!



Step 1

First of all, find any picture which you like to use for this tutorial. You can also if you like, save my picture.



Step 2

Open a new flash document. Select Modify > Document (shortcut key: Ctrl+J ). Set the dimensions of your document as the dimension of picture. Select white as background color and set your Flash movie”s frame rate to 45 fps. Then, click ok.



Step 3

Choose file > Import > Import to stage (Shortcut key: Ctrl+R) and import any picture into a flash stage.

Step 4

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



Step 5

While the new made movie clip is still selected, go to the Align Panel (Ctrl+K) and do the following:

1. Make sure that the Align/Distribute to Stage button is turned on,
2. Click on the Align horizontal center button and
3. Click the Align vertical center button.



Step 6

Double click on layer 1 to rename its name into a picture1. Afte that, click on frame 10 and press F6 key.

Step 7

Go back on the first frame. take the Selection Tool (V) and click once on the picture (movie clip) to select it. fter that, go to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select Advanced on it, click on Settings button set the following options and click ok.



Step 8

Right-click anywhere on the gray area between frame 1 and frame 10 on the timeline and choose Create Motion Tween from the menu that appears.See the picture below.



Step 9

Create a new layer above the layer picture1 and name it mask1

Step 10

After that, take the Oval Tool (O) and draw a little circle like it is shown on the picture below.



While the circle is still selected, repeat step 5 to aligned it with the background.

Step 11

After that, while the circle is still selected, press Ctrl+G key (Group) to group a circle.

Step 12

Click on frame 10 of layer mask1 and press F6 key. After that, take the Free Transform Tool (Q) and enlarge the circle a little. See the picture below.



Step 13

Repeat step 8.

Step 14

Select mask1 area layer and convert it to a mask by right-clicking on the mask1 area layer and selecting Mask. See the picture below.



Step 15

Create a new layer above the layer mask 1 and name it picture2.

Step 16

After that, go on the first frame of layer picture 1 and press Ctrl+C key on the keyboard (Copy). Then, select frame 5 of layer picture2, press F6 key and after that Ctrl+Shift+V key (Paste in place).

Step 17

Select frame 15 of layer picture 2 and press again F6 key. Then, take the Selection Tool (V) and click once on the picture to select it. After that, go to the Properties Panel, and for Color menu choose None. See the picture below.



Step 18

Choose again right-click anywhere on the gray area between frame 5 and frame 15 on the timeline and choose Create Motion Tween from the menu that appears.

Step 19

Create a new layer above the layer picture2 and name it mask2.

Step 20

Go back on the first frame of layer mask1 and press F6 key. Then, select frame 5 of layer mask2, press F6 key and after that Ctrl+Shift+V key (Paste in place).

Step 21

Select now frame 15 of layer mask and press F6 key. Then, while the circle is still selected, take the Free Transform Tool (Q) and enlarge it a little more, if we compare it with the step 12.



Step 22

Repeat step 18.

Step 23

Now, repeat step 14.

with the first two example. Repeat this steps until you don”t fill with circle the all picture. After that, go back, decrease the circle until you don”t came to the end.

Have a nice day!

Download source file (.fla)

See this step by step tutorial and learn how to create fades picture sample in flash using a little Action Script. You will also learn:

1. How to import an image in Flash,
2. How to convert a bitmap image into a symbol,
3. How to apply Alpha on image and more.



Step 1

Create a new flash document. Select Modify > Document (shortcut key: Ctrl+J ). Set the width of your document to 320 pixels and the height to 240 pixels. Select white as background color. Set your Flash movie”s frame rate to 16 fps (Frames per Second) and click ok.



Step 2

Download the sample images for this tutorial that you”ll use to quickly create this tutorail.

Step 3

Choose File > Import > Import to Library . In the file explorer window that appears, find a three images ( img1, img2…). Then, press and hold down Shift key and select them all. After that, click Open. If you now open your Library (Ctrl+L), you will see them. See the picture below.



Step 4

While the flash library it still open,take the Selection Tool (V) and move the first image from the Library on the stage.

Step 5

While the image is still selected go to the Align Panel (Window > Align). Then, do the following:

1. Make sure that the Align/Distribute to Stage button is turned on,
2. Click on the Align horizontal center button and
3. Click the Align vertical center button.



Step 6

After that, while the image is still selected, press F8 key (Convert to Symbol) to convert this image into a Graphic Symbol. See the picture below.



Step 7

Click on frame 15, 30 and 45 and press F6 key.

Step 8

Go back on frame 1, take the Selection Tool (V), click once on the image to select it and go to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select Alpha in it and put it down to 0%.



Do that also for frame 45.

Step 9

Right-click anywhere on the gray area between the frame 1 and 15 and frame 30 and 45 on the timeline and choose Create Motion Tween from the menu that appears.See the picture below.



After that, click on frame 46 and press F7 key (Blank keyframe).



Step 10

Double click on layer 1 to rename its name in image 1. After that, create a new layer above the image 1 layer and name it image 2.

Step 11

Click on frame 30 of layer image 2 and press F6 key. After that, move the second image from the flash library on the stage.

Step 12

While the image is still selected, press F8 key (Convert to Symbol) to convert this image into a Graphic Symbol.



Step 13

Repeat step 5.

Step 14

Click on frame 45, 60 and 75 and press F6 key.

Step 15

Go back on frame 30 and repeat step 8. Do that also for frame 70.

Step 16

Right-click anywhere on the gray area between the frame 30 and 45 and frame 60 and 75 on the timeline and choose Create Motion Tween from the menu that appears.See the picture below.



Step 17

Click on frame 76 and press F7 key.

Step 18

Create a new layer above the image 2 layer and name it image 3.

Step 19

Click on frame 60 of layer image 3 and press F6 key. After that, take the Selection Tool (V) and move the another (third) image from the flash library (shortcut key: Ctrl+L) to the stage.

Step 20

While the image is still selected, press F8 key (Convert to Symbol) to convert this image into a Graphic symbol.See the picture below.

Step 21

Repeat step 5.

Step 22

Click on frame 75, 90 and 105 and press F6 key.

Step 23

Go back on frame 60 and repeat step 8. Do that also for frame 105.

Step 24

Right-click anywhere on the gray area between the frame 60 and 75 and frame 90 and 105 on the timeline and choose Create Motion Tween from the menu that appears.

Step 25

Go back on layer image 1, click on the first frame and press Ctrl+C key on the keyboard (Copy). After that, click on frame 90 and press F6 key. Then, press Ctrl+Shift+V key (Paste in Place).

Step 26

After that click on frame 105 and press again F6 key.

Step 27

While you”re still on frame 105, take the Selection Tool (V), click once on the image to select it and go to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select Alpha in it and put it down to 100%.



Step 28

Right-click anywhere on the gray area between the frame 90 and 105 on the timeline and choose Create Motion Tween from the menu that appears.

Step 29

It”s time for a liitle script, so create a new layer above the all layers and name it action. See the picture below.



Step 30

Click on frame 15 of layer action and press F6 key. After that, go to the Properties Panel (Ctrl+F3) below the stage. On the left side, You will find the Instance name input field there. Call this keyframe “restart”. See the picture below.





Step 31

Click on frame 105 of layer action and press again F6 key. After that, go to the Action Script Panel (F9) and enter the following action script code inside the actions panel:

gotoAndPlay(”restart”);




Have a nice day!

Download source file (.fla)

In this tutorials you will learn how to generate random numbers. The code for this is quite straight forward and has many uses. You might want to generate random numbers as an end in itself, such as a way of selecting a raffle ticket winner. But more often random numbers are used to trigger an effect. For example to display an image at random or create some other random action. In this tutorial you will learn how to convert the random number into a way of saying hello in a random language.

My Example: Download the Flash file  Int 039a

Click to generate a random number between 1 and 10.

 

 

Click by Click: If you would like to view this tutorial without all the notes: Click by Click

Step One: Setting Up the Document

1. Open a New Flash Document: File > New (Ctrl N)
2. If the General Tab is not selected, select it:
3. Select Flash Document: Flash File(ActionScript 2.0)

Important Note: The code in this tutorial will Not work in ActionScript 3.0 but if you are using an older version of Flash you can use ActionScript 1.

4. Click: OK
5. If you wish type something on Stage such as: Generate a Random Number between 1 and 10.

Step Two: Setting Up the Text Box

The Text box is used to display the random number.

1. Select the: Text Tool
2. On the Stage drag out a: Text Box
3. Return to the standard: Selection Tool
4. If the Property Inspector is closed, open it: Window > Properties(Ctrl F3)
5. In the Property Inspector select: Dynamic Text



6. If you wish select: Show Border Around Text
7. For the Variable Name type: myDisplay


The Variable Name is: myDisplay

8. Select any Type setting that you might want: Font Styles

Step Three: Setting Up the Button ActionScript

1. If the Button Library is closed, open it: Window > Common Libraries > Buttons
2. Go through the folder and select a button. I selected: Classic Buttons > Circle Buttons > Next

Note: If you take a button from the Common Button Library avoid Knobs, Faders and Component buttons as they work differently.

3. Drag a button on to the: Main Stage
4. If the Actions Panel is closed, open it: Window > Action(F9)

Important Note: In the top left corner of the Actions Panel it must say: Actions - Button



If it does not say Actions - Button it can be for two reasons:

• Your Button is not selected. Select your button by clicking on it with the Selection tool:
• You have Action Script 3.0 selected in the Publish Settings. Change this back to AS1 or AS2: File > Publish Settings > Flash Tab and select ActionScript 1.0 or 2.0
5. If Script Assist is on, Switch it off:

Note: With Script Assist on you cannot type in the Actions Panel. If you want to learn more about Script Assist see the tutorial on the Actions Panel

6. Type (or copy and paste) the following code in the Actions Panel;

on (release) {
   myDisplay = random (10) +1;
}

7. Test your Movie: Control > Test Movie(Ctrl Enter)

The ActionScript Explained:

on (release) {
When the user releases the Mouse button what is between the curly braces …

myDisplay = random (10) +1;
In this case the random function creates a random number that starts at 0 and ends on the 10th digit. Which is the number specified in the parentheses: (10). If you start your count from zero (instead of 1) then the 10th digit is 9 (not 10)! So to make it count form 1 to 10 I simply add one to the result. Hence the +1.

}
The curly brace ends the on (release) statement.

Step Four: Non Repeating Random Number

Most of the time you don”t want a random number that is really random only nearly random! Mostly you want a random number which is non repeating. In other words every time you click on the button you want a new result not to repeat the number that is already there. Thus if my current number is 1 I want the next number to be any random number except 1.

The code that I am going to show you creates a random number and checks to see if it the same as the previous number that was generated. If it is the same it generates a new random number. Of course it could then generate the same number again so it checks this five times. Theoretically this could (and very occasionally will) generate the same number twice the statistical chance is very small. For example if i am generating a number between 1 and 10 the chance would be 1 in 100,000.

10 x 10 x 10 x 10 x 10 = 100,000

If I am generating a random number between 1 and 3 the natural repeat rate would be 1 in 3 or a very high chance. But if I run it through this simple system it increases to 1 in 243.

3 x 3 x 3 x 3 x 3 = 243

Try it and see how long you have to click before the number repeats (don”t blame me if you get a sore click finger!!):

My Example: Download the Flash file  Int 039b

Click to generate a non repeating random number between 1 and 3.

The ActionScript attached to the button is as follows:

on (release) {

   // Sets the number of digits in the random sequence:
   var mySetting = 3;

   // Creates a random number:
   myNumber = random(mySetting)+1;

   // Checks to see if it is repeating itself:

   while (myNumber == myTemp) {
      myNumber = random(mySetting)+1;
   }
   // Displays the random number:
   myDisplay = myNumber;
   // Resets the variable to the new random number:
   myTemp = myNumber;
}

With Thanks: Code submitted by Alexander Kuzmin

The mySetting = 3; sets the number range. In this case it will produce a random number between 1 and 3. The variable myTemp holds the previous generated random number.

Step Five: Converting the Random Number to Text

In general you do not want to create a random number for the sake of creating a random number. You create a random numbers to create some other random event. Once you have created a random number it is actually quite easy to convert it to something useful. In this example I convert the number into text. Each number is associated with a particular word (or words). In this case the word hello in 10 different languages:

My Example: Download the Flash file  Int 039c

Click to say hello in 10 different languages.

Note: If you can guess all 10 languages I will eat my computer (just joking) !!

The ActionScript in first section is identical to the previous example except that I have changed mySetting to 10 as I want to generate a random number between 1 and 10. The second converts the random number to text. I hope the gray comments make the code self explanatory:

Note for AS2: The code below will work in AS1 or AS2 but if you are using AS2 there is a shorter way to achieve the same thing. You can use an Array: See sample code

The ActionScript attached to the button is as follows:

on (release) {

// Sets the number of digits in the random sequence:
var mySetting = 10;
// Creates a random number:
myNumber = random(mySetting)+1;
//Checks the repeat function
while (myNumber == myTemp) {
myNumber = random(mySetting)+1;
}
// Resets the variable to the new random number:
myTemp = myNumber;

   // This section converts the number to text.
   // Each number is associated with a particular sentence.
   // On this occasion my random number is from 1 to 10.
   if (myNumber == 1) {
      myDisplay = “Hello”;
   } else if (myNumber == 2) {
      myDisplay = “Salut”;
   } else if (myNumber == 3) {
      myDisplay = “Guten Tag”;
   } else if (myNumber == 4) {
      myDisplay = “Hola”;
   } else if (myNumber == 5) {
      myDisplay = “Dobrý De?”;
   } else if (myNumber == 6) {
      myDisplay = “Nei Ho”;
   } else if (myNumber == 7) {
      myDisplay = “Ciao”;
   } else if (myNumber == {
      myDisplay = “God Dag”;
   } else if (myNumber == 9) {
      myDisplay = “Namaste”;
      // I don”t have to specify the last digit:
   } else {
      myDisplay = “Kia Ora”;
   }
}

That”s it. Enjoy being random!

I hope you have found this useful. If so perhaps you could recommend this site to others and link to webwasp!

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

This tutorial will show you how to load a random Flash Movie onto your web page. Every time a user returns to your page a new Flash Movie will display. This can be used to make your site look fresh and dynamic or to deliver different messages or ads campaigns.

I sometimes use this system to deliver Flash Movies in the head section of the pages in this site. It is very powerful as the same Flash Movie can be used to control all the pages on the site. If I want to change the Flash Movies that are displayed I simply delete my current group of Flash Movies and replace them with the new ones. If I want to change the number of random Flash Movies that are displayed all I need to do is change a single line of ActionScript and upload the new version. That single change may take only a few minutes but it will effect thousands of pages on the webwasp site. There is no need to change any HTML on individual pages.

The ActionScript used in this tutorial is very simple and consists of only four lines. So for those of you wary of ActionScript, don”t worry.

For this tutorial you”ll be making something like this:

Example:Download the Flash file Beg 042

To change the Movie press your Browser”s Refresh button (F5).

Note: I have loaded a series of 6 Flash Movies. The Flash Movies are displayed at random so occasionally the same Flash Movie will be displayed twice in a row. Obviously the more Flash Movies in your series, the less likely they are to repeat.

Click by Click: If you would like to view this tutorial without all the notes: Click by Click

Step One: Getting the Movies Ready

Movie Dimensions
It is best (although not essential) if your Flash Movies are all the same size. Otherwise you may get some unexpected results.

How Many Movies’
You will need to collect together a number of Movies. How many is up to you. It is even possible to have only 1 and add more at a later date.

File Location
You will need to place them all into a single folder on your computer.

Naming the Movies
Name all your Flash Movies numerically from 1. Do not use names like 01.

Here are the details of my Flash Movies as seen in Windows Explorer:

Step Two: Setting up the Master Flash Document

1. Open a New Flash Document: File > New (Ctrl N)
2. If the General Tab is not selected, select it:
3. Select Flash Document: Flash File(ActionScript 2.0)

Note: The ActionScript used in this tutorials is suitable for ActionScript 1 or ActionScript 2. It will not work is ActionScript 3. If you find that you get errors it could be that your Flash file is set to publish in ActionScript 3.0 or later. If you are not sure which version of ActionScript you are using check your publish settings: File > Publish Settings > Flash > ActionScript version.

4. Click: OK
5. Go to: Modify > Document (Ctrl J)
6. Set the size: 250 x 80 (or what”s appropriate for your Flash Movies)
7. Click: OK

Your settings should look similar to this:


Settings as seen in the Property Inspector.

Note: If your Property Inspector is closed go to: Window > Properties > Properties(Ctrl F3)

8. Save your file into the same folder as that of your other Flash Movies: File > Save
   

   Note: The name of your Master Flash Movie is not important, only the location.

Step Three: Creating the ActionScript

1. Select: Frame 1
2. Open the Actions Panel: Window > Actions(F9)

Important Note: Make sure that you can see Actions - Frame at the top of the Actions Panel:


The Actions Panel has Actions - Frame in the top corner.

3. In the Actions Panel if Script Assist is on, Switch: Script Assist Off

Note: To see if Script Assist is on or off go to the Action Panel”s Side Menu Button:   

Script Assist is On when ticked: (remove the tick)

Cross Ref: If you are not sure what Script Assist is or how to switch it on and off see the short Tutorial: Actions Panel

4. Type (or Copy & Paste) the following Actionscript into Actions Panel:

// Sets the number of Flash Movies in the random sequence
// IMPORTANT: Set this number to how many Flash Movies you have
var myMovieSequence = 6;

// Creates the random number:
var myRandomNumber = Math.floor(Math.random()*myMovieSequence)+1;

// Creates the full Flash Movie name like: 1.swf
var myMovieName = myRandomNumber + “.swf”;

// Loads the random Flash Movie:
loadMovieNum(myMovieName, 0);

5. Change  myMovieSequence to the number of Flash Movies in your sequence. Mine is: 6
   
6. Test your movie: Control > Test Movie (Ctrl Enter)

Note: This will load only one of your random Flash Movies. Just to check that the random load is working test your Movie several times.

Important: In Test Mode if you have not saved your Flash file into the same folder as your Flash Movies your movie will not work. When you upload your files to the Internet then the HTML page must be in the same location as the Flash Movies and the location of the Master Flash Movie becomes irrelevant. If you want to use your Flash file in multiple web pages and load Flash Movies form one location you will need to specify an absolute address like this:

var myMovieName = “http://www.yourwebsite.com/movies/” + myRandomNumber + “.swf”;

I hope you have found this useful. If so perhaps you could recommend this site to others and link to webwasp!

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

Published June 3, 2006

Intermediate

Rating: Unrated

Tutorial details:
Written by : Josh Buhler - - joshbuhler.com
Difficulty Level: beginner
Requirements: MX2004
Topics Covered: debugging
Assumed Knowledge: How to install applications, edit and open text files.

How many times have you built something in Flash, tested it a million times or more, have it work great, and then fail as soon as you put it online, or outside the Flash IDE ‘ You then go back to your local version, test some more, and begin throwing trace(”something here”); and trace(”whyIsntThisWorking”); everywhere. It all works great, and then you put it online again, and it doesn”t work. Personally, this seems to happen to me quite often on certain projects. I”ve often wished that there was some way to trace out what”s going on in my .swf files online, so I can figure out what”s happening.

Well, hallelujah, brothers and sisters, you can now do this, and I will testify unto you that it is almost a miracle. I”ve been trying to debug a project at work for about a week now, that used to work fine online, and now it doesn”t. But using the technique below, I was able to trace out some info from the swf online, and figure out exactly where my problem was. This will also log errors such as undefined functions and variables for you as well, so this is a valuable tool. The cool thing about this is that it logs the info from any swf that you visit online. Just for fun visit a few Flash sites, and then open up the flashLog.txt file we”ll create, and you”ll see anything that they may have been tracing.

Disclaimer: I did not discover this on my own, so I can”t take complete credit for it. I just thought it was an amazing debug tool, so I”m trying to spread the word. One day in my random travels around the web, I came across the following blog - g.wygonik”s flash experiments Greg mentions that it”s a Windows only tool, but I started playing around, and I”ve got it working just fine in OSX.

The secret comes from Macromedia Flex and it”s debugging abilities. You don”t need to have Flex for this to work, but all the documentation I could find from Macromedia is in the Flex help sections.

For this to work, you”ll need to have the Flash Debug Player installed. This means that you”ll need to uninstall your current Flash Player, and install the debug player instead. You can find an uninstaller here - http://www.macromedia.com/shockwave/download/alternates/ . You”ll be able to find the Debug Player in your Flash install folder.

• For OSX users, you”ll find it in /Applications/Macromedia Flash MX 2004/Players/Debug/Install Flash Player 7 OSX. app.
• Windows users, it”ll be in a similar location. Usually in Start > Programs > Macromedia > Flash Player 7 > Debug. There are two versions of the player to install for Windows. IE requires the ActiveX installer (named: Install Flash Player 7 AX. exe) while other browsers (Opera, Mozilla, and so forth-) require the Flash plug-in installer (named: Install Flash Player 7.exe). Refer to the article above for Windows instructions.

Once you have uninstalled the Flash Player, and installed the Debug Player, you”ll need to restart your browser, so bookmark this page. You can then verify that you have the Debug Player installed by right-clicking (control-click - just get a real mouse already Mac users ) on a swf. You should have the “debug” option in the context menu, like the example below. Once that”s working, onto the next step.

Create a textfile called “mm.cfg”. Inside the file, there are a few options for you. The most important options for this to work are below:

ErrorReportingEnable=1 TraceOutputFileEnable=1 TraceOutputFileName=MacHD:Users:username:Desktop:flashLog.txt MaxWarnings=50

Swapping “MacHD” with your computer name, and “username” with yours. You can put this wherever you want, just make sure you use the colons “:” and not slashes if you”re using OSX. Windows users, same thing, put it where you want it, but you”ll use “/” of course.

The firstline, ErrorReportingEnable=1 does just that - it enables error reporting. Then, TraceOutputFileEnable=1 enables the output file. You may be getting the idea now. The TraceOutputFileName is the path to where you want this file to be exported. I like to keep mine on my desktop. There are very few things that make it to my desktop, and this file is one of them, it”s that cool. The MaxWarnings is the maximum amount of warnings you want reported. This doesn”t limit your trace() statements, just the ActionScript warnings about undefined variables or methods. By default, this is set to 100, so you can leave this line out if you like. Or, you can set it to 0, and it there will be no limit placed. You can find more info about the options you have for this file in the Macromedia LiveDocs for Flex

Now, save this file, and place it in the following location:

• OSX users - MacHD /Library/Application Support/Macromedia/mm.cfg
• Windows - C:Documents and Settings username - follow the instructions in the link to Greg Wygonik above.

You don”t need to create flashLog.txt, it will be created for you.

Now for the fun part. Open Flash, and create a quick movie with the following lines:

trace(” hello world “);trace(bob);_root.callFunction();var something = 5;trace(” something: “ + someThing);

Publish the swf, and open it in your browser. Or, click the button below.

Now go to the location where you told the flashLog.txt file to be written to. Open this up, and you should see something similar to the following output:

Look at all the cool stuff you get - a warning that a function you”re calling doesn”t exist, variables being traced out, and a notice that you probably typed a variable wrong. Isn”t this thing great’ If you decide to make changes to your mm.cfg file, you”ll need to restart your browser for those changes to take effect.

Before you start debugging a file online using your flashLog.txt file, you”ll want to make sure that you open it up and clear it out first. This doesn”t always get emptied by Flash, and so you”ll have trace info from multiple swf files all together in one file. If you just open it, select everything, delete it, and then resave the file, you can start with a clean slate to begin tracing to. If you have problems setting this up, post a comment below, and I”ll try to respond as soon as I can.