Basic tutorials on Flash

No one can doubt and doubt anything about the power and utility of Flash for today's Internet world.The following article will show you the most basic and simple steps to build and use Flash in your own way .

Knowledge to know: WWW, HTML and how to build a website.

What is Flash?

- A graphic application that is widely used on websites

- With almost limitless creativity and responsiveness, nothing is too hard to imagine with Flash

- Using vector graphics, means photos can be scaled to any size without losing quality.

- No strict requirements for specialized programs and working skills

Compare Flash with animations (Animated Images) and Java Applets : when comparing these applications, we can easily recognize the following differences

- Flash has a much faster download speed than animation

- Allows users to interact directly on the objects in it, while the animation is not

- Flash does not require too much processing skills, for java applets it is the opposite

How to view Flash

- According to a survey conducted in September 2000, MediaMetrix's parent company, conducted a survey of the total number of pre-installed Flash web browsers, the results were surprisingly 96.4% of the total. The number of browsers that meet this requirement. If you don't have the Shockwave Player support program, you can download and install it here.

How to create Flash

- The necessary tool is a support program, you can choose between existing sample creation applications, or best use Adobe Flash Lite or Flash CS3 Pro , with trial version 30 date here.

Where to start

- After successfully installing Flash CS3 Pro, you should refer to the templates available in the program.

See page 2

Embed Flash file into HTML page after successfully creating a Flash file (or can use the file available in Template ), you save as *. fla, specifically choose File> Save As , and name any, for example: Somefilename.fla

- After that, open the newly created Flash file, select File> Export Movie , save it as somefilename.swf , and save it to the web folder.

- Open the newly created website and insert the following code into:

- This is the minimum code to embed any Flash file into the browser, the broken icon in 2 parts will appear on the web page if the browser has not installed the plug-in for Flash

- On the code above there are 2 tags to note and will be recognized by Internet Explorer, and Netscape can only recognize tags and absolutely no card visible

- Enter the address in the browser path as: http:/// localhost: 8080 / somefilename.swf (for example)

Learn more about Flash programs : the above code is the most minimal thing about Flash when you want to embed HTML pages, but due to the actual requirements, we hardly just use the code above, you need to pay attention to the following characteristics:

- classid is an important attribute of the card The main function is to tell Internet Explorer to activate the ActiveX plug-in if not fully installed

- pluginspage is the attribute of the card , it will display the full path to the Shockwave support page if Netscape browser is not installed

The full Flash program supports and integrates these attributes to help you:

- Choose File> Publish , Flash will automatically generate code including tags and , and assign additional attributes like classid and pluginspage

- Open the HTML page that Flash has just created, view and insert the above code where you want to place the Flash file.

- Remember to name the corresponding file in the directory containing the website

- Open the browser, type the address similar to the previous step and enjoy your results

See page 3

Learn about Flash Tweening : the Tweening term comes from "in between", with Tweening you can move between different keyframes , create or insert / remove effects, and then let the Flash program recreate the frame in that change range.

For example:

Steps to take:

- Create a small circle on the left of the Stage area, by selecting the circle pen at the tool window on the left, then draw a circle of arbitrary size.

- Select Arrow , double click on the circle to select the object

- Next, we have to convert the circle object to symbol , we will do more with a symbol object. From the main menu, choose Modify> Convert to Symbol , name the symbol Ball . Click OK

- Move to Frame 10 in Timeline line by selecting the gray line under Frame 10 , right-click and choose Insert Keyframe , this action will duplicate the image file. Keyframes define actions, changes in each frame. Users will create important keyframes in the Timeline and the Flash program will create the remaining frames within it.

- Next step, select the circle and move the object to the right 1 arbitrary distance

- Select any position between Frame 1 and Frame 10 , right click and Create Motion Tween

- Then, check the results by Control> Test Movie

See page 4

Guide to Flash Tweening : Here are some basic operations to move an object from one position to another according to the fixed path.

For example:

- Choose Window> Common Libraries> Graphics , select the image you want to use, in this example use a blue mouse image

- Click on the image and drag and drop it to the outside of the Stage frame area

- Move to Frame 40 in the Timeline section, do the same as the above example, click on the gray line under Frame 40 , right-click and select Insert Keyframe

- Next select any position between Frame 1 and Frame 40 , right-click and choose Create Motion Tween

- Right click on Layer 1 (select the right Layer area, specify the corresponding layers), select Add Motion Guide at the popup menu, the Flash program will automatically insert a motion guide layer at the top of Layer 1 , layer This works on drawing lines and orbits that the symbols will attach to.

- Click on the Motion Guide Layer layer to make sure it's the active layer, then use the Pencil tool, set Pencil Mode to Smooth value.

- Draw an arbitrary path, start at the image position and end on the other side of the Stage

- Go back to Frame 1 in Timeline , select the Arrow tool, and set the Snap to Objects value in the value table.

- Place the image at the center of the motion guide line (the same line drawn with the Pencil tool above), the center of the image is now marked with + , a small black circle will appear when it is pressed. photos are imported into the motion guide . Release the mouse button when the image is dragged to the end of the line.

- Go back to Frame 40 , do the same as above, place and drag the image to the middle position until the end of the motion.

- Check the results with Control> Test Movie

- If the movement speed of the object is too fast, you can adjust this by the Modify> Movie menu, the properties box appears, the Frame Rate value field shows how many frames will work in 1 second, The greater the value, the faster and vice versa the speed of the symbols

See page 5

Learn about Flash Tint Tweening : with Tint Tweening , you can change the display color of any object

For example:

- Select Insert> New Symbol menu, to apply Tint effect, all objects must be converted to symbol form

- Name the newly created symbol changecolor , select Graphic in Behavior , and OK . You will be redirected to the symbol creation section in the Flash program

- Select the text convergence, set Text> Size> 36 and Bold values ​​to create big and bold letters

- Type the text with any text in the frame, in this example is Color Changing Text

- Return to the movie selection step by Edit> Edit Movie

- Insert the symbol you just created into the movie , select Window> Library , select the changecolor symbol and drag and drop the object and the middle of the frame.

- Insert keyframe input into Frame 15 and 30

- Next, select Frame 15, right-click and select Panels> Effect

- Next, select Tint , the specific palette will appear, set the value as follows R = 0, G = 255, B = 0

- Click on the Timeline line anywhere between Frame 1 and Frame 15 , right-click and choose Create Motion Tween

- Do the same as above with Frame 15 and 30

- Check the results by Control> Test Movie

See page 6

Tutorial on Flash Shape Tweening : this feature helps you to switch between different objects

For example:

- Select Text tool, set Text> Size> 48 and Bold values ​​to create big and bold text
- Type any text in the frame, in this example, Hello

- Right-click the text you just created, select Panels> Align

- In the Align box, click the To Stage button first, then select Align Horizontal Center and Align Vertical Center , then close the Align box.

- Next, using the Arrow Tool , select the text, Modify> Break Apart from the popup menu window

- Insert keyframes into Frame 24, 50 and 51 positions

- Next, delete the Hello text at Frame 24 , and write another word in that position, here is World , 48 font size, bold font

- Repeat the above steps, right-click the text, select Panels> Align , then select the values ​​in the Align , To Stage boxes first, followed by Align Horizontal Center and Align Vertical Center respectively . After setting the values, close the Align box

- Select the Arrow Tool , Modify> Break Apart from the popup menu

- Insert an additional 1 keyframe into Frame 26

- Double-click the keyframe at Frame 1 , a small popup window will appear, select the Frame tab, set Tweening parameter to Shape . Then close the window

- Do the same with Frame 51 , in the popup window select Frame Actions tab, click on the + sign, choose Basic Actions> Go To , and close the window.

- Check the results by Control> Test Movie

See page 7

Instructions for creating simple buttons : the following example will guide you to insert images, convert into button objects, insert the URL to create links

For example:

- First, File> Import to import any image, then convert it to a button. After opening any image, the image file will be saved to the library

- Next, select photos with the Arrow tool. Then convert the image object to a symbol , then Insert> Convert to Symbol , name the newly created symbol as a button , select the Button value from the Behavior list and OK

- Right-click the image, select Actions , the Object Actions dialog box appears, click the + icon, and Basic Actions> Get URL . Enter the full path value of any web page, in this example http://www.w3schools.com/

- Select the target value at the Window field, close the Object Actions window

- Check the results by Control> Test Movie

See page 8

Instructions for creating simple buttons 2 : The following example will help you create button objects in your own way, create mouse-over effects and insert links

For example:

- Start, select Insert> New Symbol , name the symbol you just created as the button . Perform the same actions as the example above, select the Button value from the Behavior list, OK . In the Timeline line, you will see 4 default values ​​available: up, over, down, and hit

- Select the Rectangle tool, use Fill Color with a light red color, draw a small rectangle in the frame. Next, using the Text tool, fill the Click Me over the rectangle, fill the text with bold color

- Select Arrow , move the text in the middle of the rectangle.

- Add keyframe to Over State in Timeline line. The Over State property will specify, declare actions that occur when you move the mouse over the button

- Select a rectangular object and fill another color, for example light green

- Select Edit> Edit Movie to return to the movie selection step

- Select Window> Library to locate the button, drag and drop the button to click on the frame

- Right-click on the picture frame, select Action from the popup menu

- In the Object Actions box, select the + symbol, followed by Basic Actions> Get URL

- Enter the full and specific URL, in this example, http://www.w3schools.com/

- Select the target attribute at the Window field, close the Object Actions window

- Check the results by Control> Test Movie

See page 9

Guide to Flash Animation :

For example:

- Create a new Flash file, write 1 word with any content with the Text tool

- Select the arrow tool, click on the text to select, then convert the object from text to symbol by using Insert> Convert to Symbol , name the symbol as text , continue to select the graphic attribute graphic from the Behavior list, finally OK

- Move to Frame 30 position in Timeline , right-click this field and select Keyframe Insert

- Next select any Timeline position in Frame 1 and Frame 30 , right-click and choose Create Motion Tween

- Return to the Timeline Frame 30 , and move the text down to the bottom right corner

- Select the correct text object, choose Modify> Transform> Flip Horizontal

- Check the results with Control> Test Movie . The text will move from the first position (defined in frame 1 ) to the second position ( frame 2 ) or vice versa if you move those two frames together.

See page 10

Instructions for inserting sound in Flash

For example:

- After creating a new Flash document, select File> Import , locate the audio file you want to embed in Flash and select Open, the audio file will be saved in the Flash file library.

- Click on the first frame layer of Layer 1 of the Timeline section, select Window> Panels> Sound

- The popup window appears ( Sound ), and select the correct audio file that you just entered in the library, select Next Stream in the Sync field.

- Next, find frame 50 in the Timeline line, right-click and select Insert Frame

- Check the results by Control> Test Movie

Above is a tutorial on the most basic steps to create a Flash file with the simplest features.