Feeds:
Posts
Comments

Archive for August, 2007

If you want a special mouse cursor in your Flash movies, all you have to do is pay some attention to this tutorial. It will be explained how to personalize, change the appearence of the user’s mouse cursor in Flash, in 5 easy steps. 1. Create a new Flash document, 400×400 size. Name the first layer content.
2. Create a new MovieClip that holds the mouse cursor you want user see on your website.Name it MouseCursorMC. Make an instance of it in the first frame of the content layer and name it mouseCursor_mc.
3. Create a new layer and give it the name actions.
4. In the first frame of the actions layer put this code in:
Mouse.hide();// to hide the actual mouse cursor
startDrag(“mouseCursor_mc”,true);// start drag the cursor_mc MovieClip across the Flash movie

5. Press CTRL+Enter and test the movie. Nice job!

Advertisements

Read Full Post »

1. Start creating a flash document about 400×400 pixels.

2. Name the first layer background and then introduce a new layer and name it objects. Introduce a third layer and name it actions.

3. In the objects layer draw a orange circle with 50×50 dimensions (to draw a perfect circle hold Shift key pressed while you’re drawing).

4. Double click the circle to select both the fill and the stroke and go to Modify>>Convert to Symbol (F8). In the Convert to Symbol window choose MovieClip, name it circleMC and assure that the registration is center. In the Properties panel give it an instance name of circle_mc. Set X:175, Y:175 for circle_mc.

flashdraganddrop.gif

5. In the first frame of the actions layer put the following code:
circle_mc.onPress = function(){
this.startDrag()
}

circle_mc.onRelease = function(){
this.stopDrag()
}

Now test the movie (Ctrl+Enter) and you’ll see you can drag the circle.

Drag on a specified aria

But probably you need more than that.
The syntax of startDrag function is the following:

startDrag(target:Object, [lock:Boolean, left:Number, top:Number, right:Number,

bottom:Number]) : Void

target: represents the object to be dragged.
lock: if true the movieclip that is draged is locked to the center of the mouse position, if false it is locked in the point where it was first time clicked when the drag action begun.
left, top, right, bottom: the coordinates that describes an rectangle aria in the parent

movieclip where the movieclip is allowed to be drag.
Maybe it was not very clear, let’s have now an example:
1. We will use the document we already created in the previous example. In the first frame of the background layer draw a rectangle with 340×340 dimensions. In the Properties panel set the X:30, Y:30. Choose also a light gray for the Fill Color.

flashdraganddrop2.gif

2. Replace the code existing in the actions layer with the code below:
circle_mc.onPress = function(){
startDrag(this, false, 55,55, 345, 345)
}

circle_mc.onRelease = circle_mc.onReleaseOutside = function(){
this.stopDrag()
}

3. Test the movie again and you will observe that the circle is allowed to be dragged only in the aria of the gray rectangle.

Drag on a vertical or horizontal line If you want that your movieclip to be dragged only an a vertical or horizontal line just put left parameter equal with the right, or top equal with bottom.

Example: Drag on a vertical line

1. We will use the flash document from behind.

2. In the background layer delete the rectangle and draw a black vertical line with stroke height of 5. Set the X:150. Set also X:125 for the circle_mc.

3. In the actions layer replace the code existing with the following:
circle_mc.onPress = function(){
startDrag(this, false, 150,55, 150, 345)
}

circle_mc.onRelease = circle_mc.onReleaseOutside = function(){
this.stopDrag()
}

4. Test again the movie and see the result.

Read Full Post »

Create a simple Passwordsystem in Flash


(username: user password: pass)

Make a New Flash Document,
insert two keyframes, and place this code into both of them:

stop();

Now, select the first keyframe and
make a input textfield, open the properties(F9), and do like this:

Text Type : Input Text
Text Font/Size/Color : Verdana / 10 / black
Var : username
Line Type : Singel line
And select ” show border around text”

Make another:

Text Type : Input Text
Text Font/Size/Color : Verdana / 10 / black
Var : pw Line Type : Password
And select ” show border around text”

Now, make a dynamic text field and set the var. to “error” :

Ok, now draw a button like this:

Select it, press F8, choose button and name it submit.

Goto frame two on the main stage and write something like “secret stuff”,
go back to frame one and select the button, now press F9 twice and paste this code into it:

on(press){
var msg:String = “Wrong password and/or username”;
if(_root.username == “user” && _root.pw == “pass“){

gotoAndPlay(2);
}
else{
output =(msg);
}
}

Now your username is “user” and your password is “pass”,
press Ctrl+Enter to test! =D

You can also create a button to clear all text fields,
just paste this code into it:

on(release){
_root.output = “”;
_root.pw = “”;
_root.usern = “”;
}

That’s all! Enjoy your password protection! =D
Remember that this is NOT very safe! so don’t use it to protect important stuff!

UPDATE!

If you right-click and select play, you will go to nextframe(the “protected” one), to remove this menu:

Open your .fla, go to File>Publish Settings, select the HTML tab and
deselect “display menu”.
Now, press publish and you will get a html file in the save directory.
Open this and the menu are gone 😉

Read Full Post »

Making a Flash Movie that will Auto Run when you create a CD is remarkably easy. AutoRun is a feature that enables CD to start a program automatically. If you want to create a Flash Movie that runs automatically from a CD you would use the AutoRun feature. You simply have to add  a small file to the CD at the time when you burn your CD. On Windows is made by putting an INF file in the parent directory of the CD. This tutorial explains the few simple steps you need to achieve this.

Note: The AutoRun feature can be disabled on each individual computers and these machines an AutoRun-enabled CD will not automatically launch.

Step One: Full Screen Option

  1. It you want your Flash Movie to run in full screen mode place this ActionScript in frame 1 of you Flash Movie:fscommand(“fullscreen”, true);

    Note: This full screen mode will only work when you are running the Flash Movie from your local computer (like from a CD) and will not work if the Movie is viewed on the Internet.

  2. Step Two: Publishing your Flash Movie

  3. Create a Flash Movie or open the Flash Movie that you want to use place on the CD.
  4. If your file name has spaces in it re-save it so the spaces are removed: File > Save As
  5. Go to: File > Publish Settings (Short Cut Key: Ctrl + Shift + F12)
  6. Select: Windows Projector (.exe) Nothing else needs to be selected.
  7. Click: Publish

    Note: This will create a file with the same name as the original Flash Movie except it will be called OriginalName.exe It will also be in the same location or folder as your original Flash Movie such as the Desktop or My Documents etc. You need to know the location of this file.

    The exe file it creates contains the Flash Movie and the Flash Player. This file is executable. That means that Windows can start the file like a program. All the instructions are included in the exe file. This does not mean that it will Auto Start – only that if you ask it to start Windows will do.

  8. Step Three: Creating the AutoRun CD

  9. Open your favourite Text Editor such as Windows Notepad. It is normally located at: Start > All Programs > Accessories > Notepad

    Note: This may differ on some PCs.

  10. Type the following:

    [autorun]
    open=
    myFlashFile.exe
    icon=
    myIcon.ico

    Note: Replace myFlashFile with the name of your file!! Do not use spaces in the file name. Windows is not normally case sensitive – but why take the risk – stick to the same case as your Flash Movie.

    The line icon=myIcon.ico is to display an icon that you might have. If you do not have an icon do not use this line. The myIcon section should be replaced with the same name as your icon.

    If you want to make an Icon you cannot normally use standard image editing programs like PhotoShop. Go to one of the shareware sites such as shareware.com and search for an Icon Maker. You should be able to find a freebie program that will make your icon file for you.

  11. Save the file with the name: autorun.inf
  12. Burn your CD with the following files in the root directory (NOT in a folder):

    autorun.inf
    myFlashFile.exe
    myIcon.ico

    Now all that is left to do is test your CD! And testing is important. In my experience home made CD are not reliable. Always test it before giving it to a client or showing off in front of your friends!! As a general rule of thumb home made CDs will normally be more reliable when played in a CD Read Writer than in a normal CD Rom or DVD drive.

Read Full Post »

Creating and Playing FLV Videos in Flash

This tutorial will teach you how create and play videos in the popular Flash video format (FLV), the same format used in YouTube, Google Video, and all other websites all over the web. We are going to use Flash video import wizard and the FLVPlayback component to do this.

AC_FL_RunContent( ‘codebase’,’http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0′,’width’,’320′,’height’,’278′,’src’,’video’,’quality’,’high’,’pluginspage’,’http://www.macromedia.com/go/getflashplayer’,’movie’,’video’ ); //end AC code

<br>

The Flash authoring tool comes with an encoder for converting videos into FLV, the FLV file generated is usually separately loaded through a SWF flash file during playback and is not included in the SWF file itself. The button controllers on the movie above are also loaded from an external file. This means that the Flash player is loading three different files at the same time, the base SWF that has the information of the other two, the FLV video, and the SWF containing the controller details.

There are several ways for deploying video for the delivery through the Flash player, we are going to use the most basic ones that does not require the installation of any special service (e.g. Flash Video Streaming Service). However, Flash can only convert a certain number of video formats, namely .mov, .mpg, .wmv, .asf, .div, .3gp, and .avi. Make sure that you have a video in one of these formats that you can use for Flash before attempting this tutorial.

Starting off

Use the Flash authoring tool, Flash CS3 Professional in our example, to create a new Flash File (ActionScript 2 or ActionScript 3, it does not matter). Save the file in a new empty folder and name it myPlayer.fla. Playing a video in Flash will involve loading multiple files at runtime to play the video and it will be much easier to have all these files in a single folder by themselves.

Flash File

Now in your empty Flash movie, go through File>Import>Import Video to open up the video import wizard.

File>Import>Import Video

You will be prompted to locate your video file, you can directly link to a video on an internet server if you have it in FLV format, otherwise you would have to import the file from your local drive and convert it to FLV as we will do in the next step. Locate the file on your computer using the upper option, the location of the original video does not matter, when you find your video click on Next>.

File Browser

The Deployment window is next, if we exclude the QuickTime options, there are four other options:

  1. Progressive download from a web server – This is what we are going to use for this tutorial, the SWF file will load the video from an external FLV file at runtime and will not embed anything in the SWF file itself. No special server is required to do this.
  2. Stream from Flash Video Streaming Service – The file will be stored on a FVSS server and will be streamed at runtime, this requires an account at a special FVSS server.
  3. Stream from Flash Communication Server – The file will be stored on a FCS and will be streamed at runtime, this requires an account at a special FCS.
  4. As mobile device video embedded in SWF – You must change the publish settings to Flash Lite 2 or higher FL version to be able to use this option, the video will be embedded in the SWF file itself to be played on a mobile device.
  5. Embed video in SWF and play in timeline – The video will be embedded in the SWF directly and no external data will be loaded, this does not require using any special server, but it is not recommended as the video will not be properly in sync with the video. However, using this makes it possible to create special effects positioned on the timeline such as hotspots.

Select the first command and click on Next>.

Deployment

The Encoding options let you configure the quality of the video, the higher the bitrate the better the quality. It is also possible to crop the video, resize it, assign a new starting and ending point, and cue points for advanced functionality. You can use all the default settings for this tutorial, click on Next> to move the final options window.

Encoding

The Skinning options window lets you choose the controller for your video player, different skins have different functionalities, for example, some have the play/stop button and a mute/unmute button while other ones have advanced rewind, fastforward and captions buttons. You can also change the colour of the controller. The skin of the controller will be saved as a separate file which will be loaded when the movie is played. Select the skin you like and click on Next>. This was the last step, you will now see a confirmation window showing the details of what is going to happen, two files will be created at this stage, the FLV file that will contain the video and a SWF file that will contain the skin of the player. Click on Finish to start encoding your file.

Skinning

Once the encoding process is done you will be able to test the movie by going through Control>Test Movie. You should see the movie playing. If you check the folder in which you saved the FLA movie we are editing now you should see three more files, the myPlayer.swf, the .flv video, and the skin .swf file. If you would like to play this video on the Internet you will have to load the two SWF files and the FLV file together in the same directory.

SWF, FLA, and FLV

var random_number = Math.random(); if (random_number < .5){ } else { }


Read Full Post »

This tutorial will describe how to make a wheel rotate and move using only ActionScript. 1. Let’s start by creating a new Flash document having width 500px and height 200px and Frame Rate: 12 fps.

2. Make two layers. Name the first wheel and second actions. The actions layer should be in top.

3. In the first frame of the wheel layer draw a wheel or import a the wheel picture below
flashwheel.gif

(File>>Import>>Import to Stage or CTRL+R).

4. Select the wheel picture or drawing and choose Modify >> Convert to Symbol (F8). Name the Symbol wheelMC, choose MovieClip for Behavior and center for Registration Point. Then from the Properties Inspector give it an instance name of wheel_mc.
flashwheelrotate.gif
5. Now all you have to do is put this code in the first frame of the actions layer.

this.onEnterFrame=function(){
wheel_mc._rotation+=5;
wheel_mc._x+=5;
}

6. Test the movie (CTRL+Enter) and you’ll see the wheel goes outside of the stage. We will modify the code so that the wheel move until the right margin and then return to the left margin, and so on. In this tutorial we use some values that depends on the dimensions of the wheel_mc. So if your wheel doesn’t work exactly like the one you wanted just change the values of the begin and end x.

Now change the code from the first frame of the actions layer with the code below:

var dir:Number=0; /* dir variable is use for retain the direction of wheel: 0 – move to the

right, 1 – move ro the left*/
wheel_mc._x=35;

this.onEnterFrame=function(){
if (dir==0){
wheel_mc._rotation+=5;
wheel_mc._x+=5;
if (wheel_mc._x==470){
dir=1;
}
}
if (dir==1){
wheel_mc._rotation-=5;
wheel_mc._x-=5;
if (wheel_mc._x==35){
dir=0;
}
}
}

7. Test the movie (CTRL+Enter) and see the result.

Read Full Post »

1. Open new document in flash.

2. Draw black circle.

3. Add new layer.

4. Draw two white circles for eyes.

5. Add new layer.

6. Draw two small black circles.

7. Add new layer.

8. Add shadow to your cartoon head.

9. Add new layer.

10. Draw black circle for shadow bellow your character.

11. That’s it. You have now your cartoon head and you’re ready for making cartoon.

Read Full Post »

Older Posts »