Flash Scope Blog » Tutorials http://www.flashscope.com/blog Blogging about flash, flex and AS Wed, 30 Jun 2010 09:14:14 +0000 http://wordpress.org/?v=2.9 en hourly 1 ActionScript 3.0 Tutorial: “Magic Stick” Stars Mouse Trailer http://www.flashscope.com/blog/actionscript-3-0-tutorial-magic-stick-stars-mouse-trailer/ http://www.flashscope.com/blog/actionscript-3-0-tutorial-magic-stick-stars-mouse-trailer/#comments Mon, 22 Feb 2010 10:18:03 +0000 Steve http://www.flashscope.com/blog/?p=288
This is a basic tutorial for creating a nice looking mouse trailer using ActionScript 3.0.
Here’s how this flash component looks like:

 
Hey! Stop playing with it and go follow the tutorial to create one of your own :)
 

1. Source Image

 
Let’s start with a source image that we are going to use for this mouse trailer flash component.
As far as you have probably guessed we need some kind of a star. I cropped one out of this picture:

Bright Star

 
So you need to crop this fancy star out of its white background. Since we’re building a magic stick effect, I’ve used the Magic Wand Tool to crop the star image and saved it as .gif. And here is what I’ve got:

Bright Star Cropped

 

2. Creating the object

 
Now you can open a new ActionScript 3.0 project in Flash and simply drag&drop this .gif star to the Scene.
Looks huge, ha? We’ll have to fix that by going down to Properties section. I’ve set the width and height to 12px. I think that’s the best size.

Star Size Flash

 
Once the star is tiny, right-click on it and:
“Convert to Symbol…” > Name: Star > Type: Movie Clip
Click the Advanced button > Check the “Export for ActionScript” checkbox > Class: Star > Base Class: flash.display.MovieClip

Convert To Sуmbol Flash

 

3. ActionScript

 
Go to File > New And create a new blank ActionScript File.
Let’s paste some code there:

Importing the classes that our flash file will be using:

package
{
	import flash.display.Sprite;
	import flash.ui.Mouse;
	import flash.events.MouseEvent;
	import flash.events.Event;

The next thing we need to do is extend the Sprite Class to access the addChild() method. The name of the class should be the same to the file name.

	public class MouseTrailer extends Sprite
	{


Setting up variables: we have only one and it’s our Star. This variable will be used for creating multiple instances of our star.

var star:Star;

Now lets hide the mouse cursor away and add the Listener, which will trigger the Trailer effect:

public function MouseTrailer():void
		{
			Mouse.hide();
			stage.addEventListener(MouseEvent.MOUSE_MOVE, startTrailer);
		}

Trailer start function itself. Here we’re creating a new star on mouse move, defining its position and adding it to the stage:

private function startTrailer(e:MouseEvent):void
		{
			/* Create a new Star */

			star = new Star();

			/* Define the Position */

			star.x = mouseX + Math.random() * star.width;
			star.y = mouseY - Math.random() * star.height;

			/* Add new star to Stage */

			addChild(star);

Adding Alpha animation:

/* Listener */

			 star.addEventListener(Event.ENTER_FRAME, animate);
		} 

		/* Animation */

		 private function animate(e:Event):void
		{
			/* Alpha */ 

			e.target.alpha -= 0.05;

While stars disappear it would be convenient to remove them:

if (e.target.alpha <= 0)
    			{
       			 e.target.removeEventListener(Event.ENTER_FRAME, animate);  

       			 removeChild(e.target as Sprite);
     			}

Now lets scale down our stars frame-by-frame and have them moving down to the ground:

/* Scale & Falling of the stars */

			e.target.scaleX -= 0.04;
			e.target.scaleY -= 0.04;

			e.target.y += 3;
		}
	}
}

 

4. Last thing

 
Now save your progress with the actionscript file and go back to the .fla
Look down at the Properties panel and fill in Document Class with “MouseTrailer” setting.

Document Class Flash

 
Don’t forget to set the background to black and remove any elements from the stage. And you can now test your awesome mouse trailer flash component.

Thought this flash component won’t be your best seller, you can do some more advanced stuff out of it. Try to insert your own picture, or you can either play with the action script settings: alpha, scaling, falling etc. Thus this is a great flash file to customize and implement for your own needs.

In case you have any troubles with this tutorial, you can buy this mouse trailer flash component together with the source files for as less as $1 at our marketplace.

Want something more advanced? Try Creating an Animated Cube!

]]> http://www.flashscope.com/blog/actionscript-3-0-tutorial-magic-stick-stars-mouse-trailer/feed/ 0 Creating an Animated Cube Revolving on its Axis http://www.flashscope.com/blog/creating-an-animated-cube-revolving-on-its-axis-2/ http://www.flashscope.com/blog/creating-an-animated-cube-revolving-on-its-axis-2/#comments Mon, 18 Jan 2010 14:30:25 +0000 Steve http://beta.flashscope.com/blog/?p=116
This is a simple tutorial that will teach you how to create an animated cube revolving on its axis. To replicate the steps described above you will need Adobe Flash CS4.

At the end you will get the following result:


1. Create a new Flash file AS3 with the size 400 X 400 px.

2. Then draw a square 100 X 100 px with thick outline and filling of low opacity.

3. Highlight the square and convert it to symbol by pressing F8. ‘Covert to symbol’ window will open. Write a name, set type to Movie Clip and make sure you selected Registration “Center”.

4. After that we should center the movie clip on the scene. Click [Ctrl + K] -> the ‘Align’ window will appear. Highlight the movie clicp and copy it [Ctrl+c].

5. While the movie clip is still selected, go to its Properties [Ctrl+F3] -> 3D Position and View, where we set ‘Z’ value (depth) to be equal to our square size. In our case Z equals 100 px.
The Prespective angle is 80.

6. Then click on any empty place of the scene to get highlight off. By mouse right clicking, choose Paste in Place.

7. Now we have two moview clips. Highlight them [Ctrl+A] and copy [Ctrl+C]. Right mouse clicking -> Pate in Place.

8. While the movie clips are still selected, open the Transfrom window [Ctrl+T] and enter the following values:

3D Center point:
X: half scene width
Y: half scene height
Z: half square side

3D Rotation:
X: 90; Y: 0: Z:0.

9. Right mouse clicking -> Paste in Place. While the movie clips are still selected, open the Transfrom window [Ctrl+T] and enther the follwoing values:

3D Center point:
X: half scene width
Y: half scene height
Z: half square side

3D Rotation:
X: 0; Y: 90; Z: 0.

10. Highlight everything [Ctrl+A] and convert to Movie Clip [F8]. Make sure you set Registration to ‘Center‘. Then go to the movie clip Properties [Crtl+F3] and enter Instance name “cube”.

11. To view the cube from different sides, we should make the cube revolving. For this open ActionScript [F9] and paste in the first frame the following code:

function rotate(e:Event){// function to rotate the cube
cube.rotationX+=1// where cube is the Instance name of our cube
cube.rotationY-=1
}
stage.addEventListener(Event.ENTER_FRAME,rotate)

Press [Ctrl + Enter] and view the result.



To make cube revolving on its axis, double click on it (on the scene or in the Library [F11]). Highlight it and open the Pro[erties window. Set “Z” value (depth) = 0.

Download source files.

* * *

Thanks to DooD for this great lesson.

]]> http://www.flashscope.com/blog/creating-an-animated-cube-revolving-on-its-axis-2/feed/ 3 How to Create Stunning Flash Bubbles http://www.flashscope.com/blog/how-to-create-stunning-flash-bubbles/ http://www.flashscope.com/blog/how-to-create-stunning-flash-bubbles/#comments Mon, 18 Jan 2010 13:33:04 +0000 Steve http://beta.flashscope.com/blog/?p=94 This tutorial will teach you how to create an amazing image effect such as Flash bubbles. Step by step you will learn how to draw such bubbles, how to create movie clips and symbols and how to set everything in motion. This Flash lession will be perfect for beginners, but hoping, Flash gurus will also find something useful.
Good luck!

1. Let’s start from some preparations. First of all take a suitable image, it will be our background. I found this image, added some effects to it using Photoshop and that’s it! My background is ready.

2. Now open Flash and create scene with the same dimensions as your picture. In my case the dimensions are: 410 X 455, and set 30 frames per second. It will be enough.

3. After that we should import our background on a new layer, aligh it and then name the layer “bg”.

4. Now it’s time to create a new symbol in the library [Ctrl + 8]. Let’s call it “bubble”.

5. Now is the most creative part of our tutorial – drawing a bubble. As our basic color will be white and its tints, then for convenience it would be better to change the color of the workingspace to dark one.
First we draw a circle about 10 px wide and high, a bit stretched-out below, without contour line and with gradient fill.

Align the bubble according to origin of coordinates and set gradient.

Inside this symbol you may create an additional layer and draw something like patch of light.

The buble is ready!

6. Our next step is to create new symbol [Crtl + F8]. Select the symbol type “Movie Clip” and call it “bubbleMC”:

Make sure you checked “Export for ActionScript” for further work with this movie clip using AS.

7. In this movie clip we have to create one layer named “path” and then draw a curve.

As you see on the screenshot below, the curve should start approximately at the origin of coordinates of this movie clip (measurement accuracy is not a principle). The curve form should be zigzagging at the bottom, and its height should not be more than 350 px.
To make it more smoothly, choose the “Smooth” Pencil Mode.

8. Create a new layer with the name “bubble” and move it under the layer “path”. Drag a symbol “Bubble” from the library to this layer. By mouse right clicking set the layer “path” to “Guide”.

Make sure the layer “path” is the main one in regards to the “bubble” layer. For this move it under “path” layer.

9. On the “bubble” layer create a Motion Tween. Choose the 50 frame and create a keyframe. [F6]. On the “path” layer also choose frame 50 and prolong our curve’s “life” [F5]:

10. Now we are working with the Bubble object. Choose the frame 1 and verify that its properties are set right. Make sure “Sync” and “Snap” are checked.

Now choose the bubble and drag it to the beginning of our curve (the lowest point). Then choose the last frame 50, and drag the bubble at the end of the curve (the highest point). After that choose frame 8 and create keyframe [F6]. Drag this keyframe to the frame 15.

In this frame set Ease to -100:

After that set Transform settings for a bubble. Bubble scale should be 50%.

Then go to the first frame and set bubble scale – 10%.

11. Now create a new layer above the “path” layer and call it “actions”. On this layer choose the frame 51 and create an empty keyframe [F6]. Write the follwoing scrept in this frame:
removeMovieClip(this);

The bubble creation has been completed.

12. And now we go back to the scene where there is only one layer with the background. Create a new layer named “actions” and write the follwoing code for it:

this.createEmptyMovieClip(“holderMC”, this.getNextHighestDepth());
holderMC.onEnterFrame = function() {

var bubbleName:String = “bubble” + random(1000);

var bubbleX:Number = random(Stage.width);
var bubbleY:Number = random(Stage.height);

var bubbleScale:Number = random(6) * 10 + 50;

var bub:MovieClip = this.attachMovie(“bubbleMC”, bubbleName, random(1000), {_x:bubbleX, _y:bubbleY, _xscale:bubbleScale, _yscale:bubbleScale});
}

And now the most complicated part of the tutorial – press [Ctrl + Enter].
And enjoy the result!

Good luck!
Download source files

* * *

Thanks to mute_Max for this great lesson.

]]> http://www.flashscope.com/blog/how-to-create-stunning-flash-bubbles/feed/ 3 11 Best Professional Tutorials on Flash Menu and Navigation http://www.flashscope.com/blog/11-best-professional-tutorials-on-flash-menu-and-navigation/ http://www.flashscope.com/blog/11-best-professional-tutorials-on-flash-menu-and-navigation/#comments Mon, 18 Jan 2010 12:39:59 +0000 Steve http://beta.flashscope.com/blog/?p=67 This is the greatest collection of professional tutorials that will teach you how to create a stunning Flash menu and navigation – a necessary flash component for any flash website. And though Flash less and less is used while creating a website, we all tend to agree that animated pages look more attractive and interactive than the static ones. But we have to remember one more detail: website menu should be not only beautiful but usable presenting the whole website structure and making browsing pleasant and convenient. And these detailed tutorials will help you resolve this urgent task and choose the right decision for your website.

* * *
Glass Aero Flash Menu with Fade Effect

In this tutorial you will learn how to make vista aero flash menu with awesome fade effect in Flash CS3.

* * *
Funky Flash Website Tutorial

This tutorial is showing you how to create a funky flash website with awesome menu buttons with the rotating star effect. There are two groups of stars and the rings are used as guides to position them.

* * *
Spore Menu

By following all steps described in this tutorial you will get an attractive and usable animated menu.

* * *
Rotating Menu via ActionScript 3

This tutorial will teach you how to create a rotating menu. This is a very basic form of the menu. You can edit your Flash movie easily, for example if you want to make the menu items visually more appealing. All the animation is done with ActionScript 3.0.

* * *
Professional Menu with Effects in Flash CS3

This is a great video tutorial from Extreme Studio. Step by step you will learn how to make a professional menu with great effects in Flash CS3.

* * *
Advanced XML Menu with ActionScript 3

This tutorial will teach you how to create an advanced XML menu. You will first set up everything ready in Flash, then create the XML file and finally add some ActionScript 3 for the functionality.

* * *
Shaky Flash Menu with ActionScript 3

This tutorial will teach you how to create a cool looking shaky menu with ActionScript 3. All the animation is done with ActionScript, so no timeline animation is needed. You will also need to download TweenMax for AS3, as it is used for the animation of the menu items. Check out the end result!

* * *
Modern Horizontal Flash Menu

This tutorial will show you how to create a cool animated horizontal menu. You will need ActionScript 3 for the animation, so no timeline animation is involved in this tutorial. The random colors are used in the menu to give it an extra spice. The result is really catchy!

Note: You need TweenMax in order to fully complete this tutorial.

* * *
Black Navigation Menu Flash Tutorial

Here is another Flash menu presentation. The tutorial is so detailed, so it won’t make any difficulties to represent all steps even by newbies. The tutorial also contains code explanations.

* * *
Advanced and powerful flash menu with sound

This highly detailed Flash will teach you how to make an advanced modern flash menu with sound. You will leran how to design flash menu, how to animate it using special flash tips and tricks and how to apply action script code on it.

* * *
Advanced Drop Down Menu Tutorial

This Flash tutorial will show you how to create a drop down menu using Actionscript. It’s a fairly advanced tutorial, so you’ll be expected to know some of the basics, such as creating an MC (movieclip symbol), using labels on the timeline etc.

]]> http://www.flashscope.com/blog/11-best-professional-tutorials-on-flash-menu-and-navigation/feed/ 0 Useful Collection of Flash Preloaders Tutorials http://www.flashscope.com/blog/useful-collection-of-flash-preloaders-tutorials/ http://www.flashscope.com/blog/useful-collection-of-flash-preloaders-tutorials/#comments Mon, 18 Jan 2010 12:02:57 +0000 Steve http://beta.flashscope.com/blog/?p=49 Flash technology has more advantages over the other means of website creation. It allows you to create an attractive and breathtaking websites that combine theme-based graphics, action effects, multiple media types – audio, video, text, still images. It provides good opportunities to make your presentation or video game more dynamic, interactive and appealing.
Flash technology gives free rein to flash developers that they can not find anywhere. Flash allows them to place objects where they want without thinking about browser restrictions, problems with templates, tables, screen resolution and others. Flash pages will be displayed properly in all web browsers without any differences.

But what is the first thing we face with while entering a Flash website? Of course, it’s a Flash preloader that indicates the loading status of your website and creates a first impression about it. So, Flash designers should not only think out the whole website structure and design, but the preloading moment as well, because it’s a Flash prealoder that all visitors turn their eyes to.

Below is the list of Flash tutorials that will help you create an attractive Flash preloader – essential Flash component of your website.

***
TheFlashBlog.com

This tutorial is written by Lee Brimelow is a Platform Evangelist at Adobe focusing on the Flash, Flex, and AIR developer communities. This video tutorial shows you how to create a completely customized Flex preloader using Flash CS4.

* * *
Flashexplained.com

In this detailed tutorial made for Flash 8, you will see how easy it is to create a preloading system that is gradually displaying an image as your site loads. It will show you the following: how to import an image into Flash, how to create a rectangular movie clip and turn it into a mask, how to write ActionScript that will power the preloader and more.

* * *
Flash.Tutsplus.com

In this tutorial Carlos Yanez, a Web/Logo Designer, Flash Developer with passion for great designs and cool applications, help you create an Apple inspired preloader MovieClip and teach you how to display some loading information. All this using Flash and ActionScript 3.0.

***
Absolutecross.com

This tutorial will teach you how to create an advanced preloader which determines not only the actual percent, but the Bytes Loaded, Bytes Remaining, and other neat stuff. To replicate all the steps, you should be completely familiar with Flash.

* * *
Flashkit.com

Another great and detailed tutorial on how to create an original preloader in a clock form. Click on the “Play” button to see how ir works.

* * *
Adobe.com

This tutorial is written by Jamie Kosoy, a senior developer at Big Spaceship. He provides an introduction to writing classes and walks you through some of the nuances of the new language by building a modular preloader. Along the way, he identifies the best practices to optimize performance and suggest strategies for reskinning artwork to achieve a desired look and feel. This article covers the fundamentals of ActionScript 3.0. Some knowledge of ActionScript 2.0 is recommended but not necessary.

***
Learnflash.com

This great video tutorial is presented by LearnFlash.com and shows you step by step how to create an attractive Flash preloader. You can hear the voice of an expert who recorded this video and see every movement on his computer screen, as if you were sitting right beside him. Such videos, sometimes referred to as “Quickstarts” can reduce training time from days to just a few hours.

***
Kirupa.com

By the end of this tutorial, you will learn how to create a preloader – a progress bar indicating how much of your content is being loaded. After the preloader has finished loading, the image will become visible. The tutorial consists of two parts. One part will focus on how to create the preloader animation and code, and the second part will discuss integrating your preloader with an existing application such as one that loads an image from an external location.

* * *
Flashexplained.com

This easy, detailed Flash 8 pro lesson will show you how to make a sleek green sphere preloader for your website. In this lesson, you will learn: how to create a sphere with a realistic depth effect, how to use the great filters in Flash 8 pro to achieve a realistic sphere, how to use transparency combined with radial gradient fills in Flash, how to create a beveled ring around your preloader, how to create a dynamic text field with pixel fonts and extra effects added to it, how to load an external SWF and more.

Here is an example of how your preloader will look like at the end of this lesson. This is a simulation of course, no real preloading is happening in the example.

***
FlashFridge.com

Using this thoroughly explained, detailed, action script flash lesson, you will see how to create very trendy stars preloader. You will also learn how to draw stars using the Line Tool, how to convert preloader into a Movie Clip Symbol, how to create Motion Tween and much, much more!

***
Toxiclab.org

Take a look at this lesson and learn how to create attractive preloader using the picture and action script. You will also learn how to convert an image into a Movie Clip Symbol, how to apply on it alpha effect, how to convert any layer into a mask, how to create percent for preloader and more. Here is how your Flash preloader will look like.

***
FlashFridge.com

In this tutorial, you will see how to create a black and white preloader with percent. To create this tutorial, you have to use a little Action Script code. You will also learn how to design a preloader, how to animate it and more. This lesson is perfect for newbies because it doesn’t require profound knowledge. Just follow the steps and at the end you will get something like this.

]]> http://www.flashscope.com/blog/useful-collection-of-flash-preloaders-tutorials/feed/ 1 A Portion of the Freshest Flash Tutorials http://www.flashscope.com/blog/a-portion-of-the-freshest-flash-tutorials/ http://www.flashscope.com/blog/a-portion-of-the-freshest-flash-tutorials/#comments Mon, 18 Jan 2010 11:30:31 +0000 Steve http://beta.flashscope.com/blog/?p=37 Hi guys! In this blog post we tried to gather the freshest Flash tutorials that have been published by qualified Flash developers for the last couple of days. Just that very point served as a main criterion for tutorials selection, but not only. Rating technical execution and general idea, we created this amazing collection that will come in handy both for newbies and Flash professionals.

1. Scrapbook Photo Gallery tutorial in Flash

Drag and drop the images to view the effect.

This tutorial will teach you how to create this eye-catching photo gallery by learning three flash behaviors: load external graphic behavior, on-click behavior to lift photograph right on top and drag-and-drop behavior.
Read the tutorial here.

2. Create a Glowing Mouse Trailer in Flash

Thanks to Carlos Yanez, a Web/Logo Designer and Flash Developer, and his exclusive step-by-step tutorial, now everyone can create a glowing mouse trailer in ActionScript 3.0. Mouse Trailers are objects which follow the mouse cursor as you move it.
Read the tutorial here.

3. Transforming picture effect

Flash Tutorials - Picture Effect

This tutorial will expain how to create modern transforming picture effect without ActionScript code. You will also learn how to import any picture into flash stage, how to apply flash filters on it, how to convert it into a movie clip symbol and much more.

This Flash picture effect will be useful for those who would like to create an attractive Flash banner and a stunning presentation.
Read the tutorial here.

4. Creating an advertising billboard with a 3D twist

Flash Tutorials - Billboard Effect

This detailed tutorial will help you create a winning advertising billboard with a 3D twist. The native 3D methods available in Flash Player 10 and several custom ActionScript 3 classes are used here for the billboard construction.
Read the tutorial here.

5. Actionscript 3 – as3 Lightning / Thunderbolt / Electric discharge Class

Pierluigi Pesenti (aka Panta), a qualified Flash developer, prepared three demos and a publishable class. The demos are FLA based. You can find the timeline code to assemble the demos in this post.
Read the tutorial here.

6. Create Your Own Adobe AIR Application with Flash

Flash Tutorials - Adobe AIR

By reading this tutorial you will learn how to create a Twitter Reader application, fed from your own Twitter updates. It will show you some of the features of the nativeWindow class, how to sign it and make an install package.

This tutorial has been written by Dario Gutierrez, a web designer and Flash designer from Mexica. Follow me on twitter _dariux. (http://twitter.com/_dariux)
Read the tutorial here.

7. An Image Exploding into Particles

Here is another great tutorial written by Dan Gries especially for Flash & Math. By reading this tutorial you will learn how to create a rotating bitmap in 3D that explodes into particles. This visual effect is really engaging.
Read the tutorial here.

8. Eyes follow the cursor

From this tutorial you will learn how to build an animation where the eyes of Dug, the dog from the Pixar movie UP, follow the mouse cursor. This tutorial is done with actionscript 3 and introduces the use of the Math.atan2 method.
Read the tutorial here.

9. Icon following mouse cursor

The last but not the least. This tutorial presents one more catchy Flash effect. You’ll get to know how to create an icon following a mouse cursor. This tutorial is done with actionscript 3. You will also learn how to import any icon into a flash stage, how to convert it into a movie clip symbol, how to animate it using some special flash tricks and etc.
Read the tutorial here.

]]> http://www.flashscope.com/blog/a-portion-of-the-freshest-flash-tutorials/feed/ 1