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:
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.
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.
Click: OK
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.
Select the: Text Tool
On the Stage drag out a: Text Box
Return to the standard: Selection Tool
If the Property Inspector is closed, open it: Window > Properties(Ctrl F3)
In the Property Inspector select: Dynamic Text
If you wish select: Show Border Around Text
For the Variable Name type: myDisplay
The Variable Name is: myDisplay
Select any Type setting that you might want: Font Styles
Step Three: Setting Up the Button ActionScript
If the Button Library is closed, open it: Window > Common Libraries > Buttons
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.
Drag a button on to the: Main Stage
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
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
Type (or copy and paste) the following code in the Actions Panel;
on (release) { myDisplay = random (10) +1; }
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!!):
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:
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!
One of the most unique, up-and-coming, uses of Flash is within the foreign real estate sector. Real Estate marketers, keen on providing a visually stimulating and comprehensive sales experience for their customers, often call on flash designers to create intricate visual portfolios of real estate offerings. Unlike other verticals, in the condo, hotel, and rental world Flash website intros and intense imagery are acceptable, if not rule of thumb. Text doesn't sell a nice vacation condo to a buyer. Instead, a clear, inviting, exciting layout of the property, beach view, and condo floor plans united inside a short Flash .swf file will catch a prospective buyer's attention, draw them in, and hopefully convert them into a sales lead.
Probably one of the most stunning and sought after vacation spots in the world right now is Costa Rica, a small Latin American nation located in beautiful Central America. Costa Rica has the best of both worlds: sweeping beach scapes of sand and palm trees from both the Caribbean and Pacific Ocean can be found within a short hour flight from the main international airport in capital city San Jose.
The pristine nature of many beach communities has spawned a new tourism based economy that has developers scrambling to build new a Costa Rica hotel on this devine beach property. The Costa Rica vacation rental market is competitive and becoming full of excellent opportunities for savvy buyers.
This is where Flash comes in. Most Costa Rica vacation condos can't be sold over the phone. Instead, it takes graphics, eye appeal, and excitement to capture a buyer. The same goes with Costa Rica beach condos which need graphical imagery to convince customers of their beauty and value over the internet. A typical Costa Rica vacation rental can range from $500 per week to $1500. On the top end, Costa Rica vacation luxury rentals start at $1500 and run gambit to over $2500. The money spent, however, is well worth it. Costa Rica beach condos go fast and advance reservations are required. So, if you know anyone who is interested in this wonderful, exciting get-away, tell them now!
As a result, traditional Costa Rica vacation rental and Costa Rica vacation hotels have had to create a very strong IT and Web design department, in addition to the standard walk-in real estate office. This fact is soley due to the global nature of the web: customers can't always visit first, so they chose to take a virtual tour instead. Thus, Costa Rica beach Condo developers count on a strong percentage of their sales being web-generated, in addition to standard brick and mortar operations.
What do these Flash designers use? In addition to stock photography, architectural layouts, and imagery, Flex and Action Script are employed to provide a 3 dimensional, "virtual tour" of these Costa Rica vacation rentals. The action script provides the programmer with the opportunity to fully animate condo tours, such that a prospective customer can feel as if he or she is actually inside the space they want to rent. In turn, because of the strong need of Flash, local web designers in Costa Rica have experienced high job growth and new employment opportunities. As always, foreign tourism teamed with local internet talent produces a dynamic, rich new economy that can literally change a country overnight. Considered a pioneer in employing such designers, most Costa Rica real estate groups prefer tradition website design. These flash-friendly companies generally emanate from the western side of Costa Rica, offering Jaco Beach real estate and accomodations.
My Example: 
Flash File
{