Looks Like you are not Registered with our Site or Not Logged in. Click Here to Register

It shows that you are unregistered. Please register with us by clicking Here


Go Back   DesiPad.Com :: Simply the Best > IT Cafe > IT Discussion > Tutorials
Connect with Facebook

Notices

Tutorials Step by step instructions with screen shots on how to perform different computing tasks.

Help Contribute to DesiPad.Com
Your Donation Will Be Used To Pay For our ever increasing bandwidth costs, our hosting Service, domain registration, software licensing fees, and maintenance costs
We have received a total of $0 in donations towards our goal of $200
0% of our goal has been reached
Reply  Post New Thread
 
LinkBack Thread Tools Display Modes
  #1 (permalink)  
Old 06-17-2007
Cyborg's Avatar
Administrator
Points: 106,124, Level: 47 Points: 106,124, Level: 47 Points: 106,124, Level: 47
Activity: 60% Activity: 60% Activity: 60%
 
Join Date: Jan 2007
Age: 37
Gender: Male
Posts: 10,279
DesiPad-Buck: 5,074.00
Rep Power: 10
Cyborg has a reputation beyond reputeCyborg has a reputation beyond reputeCyborg has a reputation beyond reputeCyborg has a reputation beyond reputeCyborg has a reputation beyond reputeCyborg has a reputation beyond reputeCyborg has a reputation beyond reputeCyborg has a reputation beyond reputeCyborg has a reputation beyond reputeCyborg has a reputation beyond reputeCyborg has a reputation beyond repute
Flash Basics Tutorials

These are few points. If you need complete guide you can get help from W3Schools Online Web Tutorials. This article courtesy of this site.

INTRODUCTION:
Click the image to open in full size.
HTML is ideal for creating static websites where text and images are placed at fixed positions.
But it doesn't really support dynamic sites, where text, images, and animations are moving around on the screen.
Traditionally, these effects were achieved with animated GIF images or java applets.

FLASH vs ANIMATED GIFs:

Click the image to open in full size.
An animated GIF is actually many images saved in one. When the animated GIF is loaded onto a webpage, the browser simply loops the images. This means, if you make an animation of a clown that moves his hand up and down in 25 small movements, then the animated area of the image is saved 25 times. So it doesn't take a lot of animation to create a GIF image that's remarkable bigger than a regular clown image. Therefore, even small animations take forever to load.

While animated GIFs can be used for animations, they do not support interactivity. They simply loop images in a predefined order and that's it.

In Flash, you can control the animations. For example, you can make the animation stop and wait for the user to click a button. And when the animation starts again it can be dependant on which button was clicked. A final obvious difference is that GIF images are limited to a 256 color palette.


So compared to animated GIFs, the advantages of Flash are that:
  • Flash movies load much faster.
  • Flash movies allow interactivity.
  • Flash movies can use more than 256 colors

FLASH vs JAVA APPLETS:
Aside from animated GIFs, another approach has been used to add dynamic effects to web pages: java applets. One of the most famous is the lake Applet.

Unfortunately, java (the programming language for applets) requires programming skills. This means that you can't just start creating your own applets. Therefore, some programmers have created free applets that allow customization. So instead of learning the programming, people can simply use the already programmed applets. Again, the lake applet is a good example. It makes a wave effect on any image of any size. But if you wanted to add anything else to the applet you would have to either program it yourself or find a free applet that actually did what you wanted.

Flash movies are in many ways similar to java applets. Small programs that can be embedded into your HTML pages. But unlike java applets, it is fairly easy to create animations in Flash without programming skills.
So compared to java applets, the advantage of Flash is:
  • Flash movies are easier to create than java applets.
  • Flash movies are more stable in web browsers than java applets.
Note: While Flash has these advantages over applets, there is more to the story. There are things that you can program in java that just can't be done with Flash. But since the focus here is Flash we will not go into the details.
In order to create Flash movies you need a to buy the Flash program. It is developed by Macromedia and the latest version is Flash Mx.

You can click here to compare actual prices from different online stores.
It should be emphasized here, that buying the Flash program is only necessary for Flash developers.Anyone that has the free Flash plug-in /Active-X installed with their browser can view flash movies.

Once you've installed the Flash program, you should start by completing the 8 lessons that come with it.
  • Introduction
  • Drawing
  • Symbols
  • Layers
  • Type
  • Buttons
  • Sound
  • Animation
To run these lessons: start Flash then click Help in the top menu and choose Lessons.This will teach you the very basics of the Flash program.

Flash Embedded in HTML:
After creating a Flash movie you choose File > Save As from the top menu to save your movie. Save the file as "Somefilename.fla".
To embed the Flash movie you just made into an HTML page, you should go back to your Flash program and do the following steps:
Step 1
Choose File > Open. Open a Flash movie you have created.
Step 2
Choose File > Export Movie.
Step 3
Name the file "somefilename.swf". Choose the location where the file is to be stored (in your Web folder). Click OK.
Step 4
Open the HTML page where you want to insert your Flash movie. Insert this code:
<object width="550" height="400"><param name="movie" value="somefilename.swf"><embed src="somefilename.swf" width="550" height="400"></embed></object>
Note: This is the minimum code you need to embed a Flash movie in a browser. A broken icon will appear on the Web page if the user does not have the Flash plug-in installed.
Note: In the code above there is both an <embed> tag and an <object> tag. This is because the <object> tag is recognized by Internet Explorer, and Netscape recognizes the <embed> tag and ignores the <object> tag.
Step 5
Type in the address of the HTML file in your browser and look at your first Flash movie.
Let the Flash Program do the Work:

The code above is the absolute minimum code to embed Flash movies in HTML pages. It is not recommended to use the minimum code. There should be a few more attributes added:
  • classid is an attribute to the <object> tag. It tells Internet Explorer to load the ActiveX plug-in if it is not installed
  • pluginspage is an attribute to the <embed> tag. It displays a link to the Shockwave download page if Netscape does not have it
The Flash program can add these attributes for you:
Step 1
Choose File > Publish. Flash will now create the <object>, <param>, and <embed> tags for you. It will also create the classid and pluginspage attributes.
Step 2
Open the HTML document that Flash created, view the HTML source and copy the code into your HTML page where you want your Flash movie.
Step 3
Be sure that you have the "somefilename.swf" in your Web folder.
Step 4
Type in the address of the HTML file in your browser and look at your first Flash movie.

Tweening comes from the words "in between".
With Tweening you can go from one keyframe to another and specify changes in the animation and let the Flash program create the frames in between.
Example:

In this example you will learn how to make an object move across the screen.
Example
Step 1
Create a small circle to the left in the Stage area. Do this by selecting the circle tool from the left toolbar. Draw the circle in the Stage area.
Step 2
Select the Arrow tool from the left toolbar. Double-click on the circle to select it.
Step 3
Now we have to convert the circle to a symbol. When the circle is converted to a symbol we can create instances of the circle. From the top menu choose Modify > Convert to Symbol. Name the symbol "Ball", and select OK.
Step 4
Go to Frame 10 in the Timeline. Do this by clicking the gray field below 10. Then right click in this field. Choose Insert Keyframe. Keyframes appear as circles in a frame. This operation duplicates the image.
Note: A keyframe specifies changes in an animation. You create keyframes at important points in the Timeline and let Flash create the frames in between.
Step 5
Select the circle and move it to the right a couple of inches.
Step 6
Click on the Timeline any place between Frame 1 and Frame 10. Then right click and choose Create Motion Tween.
Step 7
Choose Control > Test Movie from the top menu to test your Flash movie.

With Motion Guide Tweening you can move an object from one location to another along a specified path.
Example

In this example you will learn how to draw a path an object should follow.
Example
Step 1
Choose Window > Common Libraries > Graphics. Select the image you want to use. In this example we have used a blue mouse.
Step 2
Click on the image and drag it outside the left edge of the Stage.
Step 3
Go to Frame 40 in the Timeline. Do this by clicking the gray field below 40. Then right click in this field. Choose Insert Keyframe. Keyframes appear as circles in a frame. This operation duplicates the image.
Step 4
Click on the Timeline any place between Frame 1 and Frame 40. Then right click and choose Create Motion Tween.
Step 5
Right click on Layer 1 (Click on the layer name, where it says "Layer 1"). Choose Add Motion Guide in the pop-up menu. The Flash program will now insert a motion guide layer on top of layer 1. Motion guide layers are used to draw lines an animated symbol should follow.
Step 6
Click on the Motion Guide Layer to make sure it is the active layer (Click on the layer name, where it says "Guide: Layer 1").
Step 7
Click on the Pencil tool in the left toolbox. Set the Pencil Mode to Smooth (in the Options section of the left toolbox).
Step 8
Draw a line. Begin on the image and draw a line to the other side of the Stage.
Step 9
Go back to Frame 1 in the Timeline. Click on the Arrow tool in the left toolbox. Select the "Snap to Objects" button in the Options section of the left toolbox.
Step 10
Place the image with its center on the beginning of the motion guide (the black line you have drawn with the Pencil). The center of the image shows as a +. A black circle appears when the image is snapped to the motion guide. Release the mouse button when the image is snapped to the guide.
Step 11
Go to Frame 40. Place the image with its center on the end of the motion guide.
Step 12
Choose Control > Test Movie from the top menu to test your Flash movie.
Is your Flash Movie Playing too Fast?

You can control this by selecting Modify > Movie from the top menu. A Movie Properties box will show. The Frame Rate field sets how many frames to display per second. Adjust the number to a lower number, and test your movie again.

With Tint Tweening you can change the color of an object.

Example

In this example you will learn how to change the color of an object.
Example
Step 1
Choose Insert > New Symbol.
Note: To add Tint effects the object must be a symbol.
Step 2
Name the symbol "changecolor" and select the Graphic option in Behavior. Click OK.
Note: You will now be taken to the symbol generator in the Flash program. Here you create symbols. Symbols can be dragged to the stage of your movie after you have created them.
Step 3
Choose the Text tool in the left toolbox. Choose Text > Size > 36 from the top menu to make the text big. Choose Text > Style > Bold to make the text thick.
Step 4
Click in the work area and write "Color Changing Text".
Step 5
Jump back to the movie. Do this by choosing Edit > Edit Movie.
Step 6
Insert the symbol you just created into the movie. Choose Window > Library. Select the "changecolor" symbol and drag it into the middle of the Stage.
Step 7
Insert a keyframe in Frame 15 and in Frame 30.
Step 8
Go to Frame 15. Right click on the text in the Stage. In the pop-up menu, choose Panels > Effect.
Step 9
Choose Tint from the drop down menu. A color map will show. Set the colors to: R=0, G=255, B=0.
Step 10
Click on the Timeline any place between Frame 1 and Frame 15. Then right click and choose Create Motion Tween.
Step 11
Click on the Timeline any place between Frame 15 and Frame 30. Then right click and choose Create Motion Tween.
Step 12
Choose Control > Test Movie from the top menu to test your Flash movie.

With Shape Tweening you can change one object into another.
Example

In this example you will learn how to change one object into another.
Example
Step 1
Choose the Text tool in the left toolbox. Choose Text > Size > 48 from the top menu to make the text big. Choose Text > Style > Bold to make the text thick.
Step 2
Click in the work area and write "Hello".
Step 3
Right click on the text you just wrote and choose Panels > Align from the pop-up menu.
Step 4
In the Align box select the "To Stage" button first. Then click on the "Align Horizontal Center" button and the "Align Vertical Center" button. Close the Align box.
Step 5
Select the Arrow Tool and click on the text. Choose Modify > Break Apart from the top menu.
Step 6
Insert keyframes at Frame 24, 50 and 51.
Step 7
Delete the text "Hello" in Frame 24. Select it and press the Delete button on your keyboard.
Step 8
Write a new text on the Stage. Write "World!" (Font size: 48, style: bold).
Step 9
Right click on the text you just wrote and choose Panels > Align from the pop-up menu. In the Align box select the "To Stage" button first. Then click on the "Align Horizontal Center" button and the "Align Vertical Center" button. Close the Align box
Step 10
Select the Arrow Tool and click on the text. Choose Modify > Break Apart from the top menu.
Step 11
Insert a keyframe in Frame 26.
Step 12
Double click the keyframe in Frame 1. In the small pop-up box click on the Frame tab. Set Tweening to Shape. Close the pop-up box.
Step 13
Double click the keyframe in Frame 26. In the small pop-up box click on the Frame tab. Set Tweening to Shape. Close the pop-up box.
Step 14
Double click the keyframe in Frame 51. In the large pop-up box click on the Frame Actions tab. Click on the + sign. Choose Basic Actions > Go To. Close the pop-up boxes.
Step 15
Choose Control > Test Movie from the top menu to test your Flash movie.

Flash Button 1:

In this example you will learn how to insert an image, convert it to a button, and add a URL to it so it becomes a link.
Example
Step 1
Choose File > Import to import an image that will become a button. Locate the image and click Open. The image will be saved in the Library.
Step 2
Select the image with the Arrow tool.
Step 3
Convert the image to a symbol. Choose Insert > Convert to Symbol from the top menu. Name the symbol "button", choose Button from the Behavior list and click OK.
Step 4
Right click on the image. Choose Actions from the pop-up menu.
Step 5
In the Object Actions box click on the + sign. Choose Basic Actions > Get URL.
Step 6
Enter a full URL in the URL field (like http://www.w3schools.com).
Step 7
Choose target in the Window field. Close the Object Actions box.
Step 8
Choose Control > Test Movie from the top menu to test your Flash movie.

Flash Button 2:

In this example you will learn how to create your own button and add a URL to it so it becomes a link.
Example
Step 1
Choose Insert > New Symbol from the top menu.
Step 2
Name the symbol "button", choose Button from the Behavior list and click OK. In the Timeline area, you will now see the four states of a button: up, over, down, hit.
Step 3
Select the Rectangle tool, pick a light red Fill Color and draw a rectangle in the work area.
Step 4
Select the Text tool, pick a dark Fill Color and write "Click Me" over the rectangle.
Step 5
Select the Arrow tool and place the text in the middle of the rectangle.
Step 6
Add a keyframe to the Over State in the Timeline. The Over State indicates what should happen when you mouse over the button.
Step 7
Select the Rectangle, change the Fill color to a light green.
Step 8
Choose Edit > Edit Movie to go back to the movie.
Step 9
Choose Window > Library to locate the button. Drag the button into the work area.
Step 10
Right click on the image. Choose Actions from the pop-up menu.
Step 11
In the Object Actions box click on the + sign. Choose Basic Actions > Get URL.
Step 12
Enter a full URL in the URL field (like http://www.w3schools.com).
Step 13
Choose target in the Window field. Close the Object Actions box.
Step 14
Choose Control > Test Movie from the top menu to test your Flash movie.

Flash Animation

Example

Example
Step 1
Insert a text in the upper left corner of the Stage area. Do this by selecting the text tool from the left toolbar. Write some text in the "textarea".
Step 2
Select the arrow tool from the left toolbar. Click on the text once to select it.
Step 3
Convert the text to a symbol. From the top menu choose Insert > Convert to Symbol. Name the symbol "text", choose graphic from the Behavior list and select OK.
Step 4
Go to Frame 30 in the Timeline. Do this by clicking the gray field below 30. Then right click in this field. Choose Insert Keyframe. Keyframes appear as circles in a frame.
Step 5
Click on the Timeline any place between Frame 1 and Frame 30. Then right click and choose Create Motion Tween.
Step 6
Go back to Frame 30 in the Timeline. Move the text to the lower right corner.
Step 7
Make sure the text is selected. Choose Modify > Transform > Flip Horizontal.
Step 8
Choose Control > Test Movie from the top menu to test your Flash movie. The text should move from the first location (in frame 1) to the second location (in frame 2). The text should also turn around on its way to the second location.
The Following 2 Users Say Thank You to Cyborg For This Useful Post:
ksyz_1 (06-19-2007), PanjabiSher (06-19-2007)
  #2 (permalink)  
Old 07-02-2007
sanahot's Avatar
Freshman
Points: 1,020, Level: 2 Points: 1,020, Level: 2 Points: 1,020, Level: 2
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2007
Gender: Male
Posts: 6
DesiPad-Buck: 33.00
Rep Power: 0
sanahot is on a distinguished road
Re: Flash Basics Tutorials

well done thats good
  #3 (permalink)  
Old 07-20-2007
sammer's Avatar
VIP Member
Points: 25,040, Level: 22 Points: 25,040, Level: 22 Points: 25,040, Level: 22
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Mar 2007
Location: USA
Gender: Male
Posts: 1,570
DesiPad-Buck: 800.00
Rep Power: 13
sammer is a splendid one to beholdsammer is a splendid one to beholdsammer is a splendid one to beholdsammer is a splendid one to beholdsammer is a splendid one to beholdsammer is a splendid one to beholdsammer is a splendid one to behold
Send a message via MSN to sammer Send a message via Yahoo to sammer
Re: Flash Basics Tutorials

thanks
Reply

Tags
basics, flash, tutorials

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On


Credit Cards Mortgage Free Advertising Loans Mortgages


Powered by vBulletin®
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.2.0
eXTReMe Tracker