Basic « Design « Flash Tutorials

1. - First you will need to import (ctrl. + R or File >> Import >>Import to Scene) an image to the Scene, of a document (flash) of dimensions 311 * 311 pixels. a). The dimensions of the image are 271.5 * 271.5 pixels.

1. First select the Keyframe # 1 and remove the Shape animation.

1. Create a new document (Ctrl. + J), of size 450 * 200 pixels. 1.1 Background color: #FFFFFF.

As you can see there are few palette windows. On the left, maybe the most important one, tools palette with of you need to create stunning flash applications working with action script.

First of all make a new Flash document with dimensions of 700 width by 500 height. Name the first layer "main" and the second layer "script". Then create 2 blank key frames (f7) on each layer. First of all we're going to create a preloader, which will make sure the whole of the flash website is loaded before the user sees it. It also indicates to the user that something is happening, rather than them seeing a blank canvas, while it loads. So, on the 1st frame of the "main" layer create add the text "loading", using these settings.

12 Free Online Quiz Creators for Teaching Online Last post by: Sunnyme Date: 01.10.2009 06:26:27

Part 2 - Flash site loading You will see how to load flash site after preloader animation. You will also learn how to load home page and how to aniamte it. Step 1 Create a new layer above the preloader animation layer and name it area for content. Step 2 Click on frame 10 of layer area for content and press F6 key. Step 3 After that, take the Rectangle Tool (R). In the Colors portion of the Tool panel, block the Stroke color by clicking on the little pencil icon and then on the small square with the red diagonal line. For Fill color choose #BAF088 and draw a "rectangle" over the part of preloader that we have decreased in step 24 in Part 1. Step 4 Click on frame 18 of layer area for content and press F6 key. Then, take The Free Transform Tool (Q),click on the rectangle, press ana hold down Alt + Shift key and enlarge the rectangle to be the same dimension as the width of background (W=450px). See the picture below. Step 5 Take the Selection Tool (V) and click once on the rectangle that you just enlarged and go to the Info Panel (Shortcut key: Ctrl+I). Then, if you don't hit the width dimension to be 450px, set it now to be 450px. See the picture below. Step 6 After that, while the rectangle that you just enlarged is still selected, go to the Align Panel (Ctrl+K) and choose the following options: 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. Now, you have aligned the rectangle with the background. Step 7 Click on frame 10 and go to the Properties Panel (Ctrl+F3) below the stage. Then, for Tween choose Shape. See the picture below. Step 8 Click on frame 26 and press F6 key. Step 9 While you're still on frame 26, take again the Free Transform Tool (Q), press and hold down again Alt+Shift key and do the following: After that, press and hold down just Alt key and do the following: Step 10 Click on frame 18 and go again to the Properties Panel (Ctrl+F3) below the stage. Then, for Tween choose Shape. See the picture below. Step 11 It's time for Header. First of all donwload my image that I will use for this site. Step 12 Create a new layer above the area for content layer and name it header. Step 13 Click on frame 20 of layer header and press F6 key. Then, choose File > Import > Import to Stage (Ctrl+R) and Import my image. Step 14 After that, place that image on the top of background. See the picture below. Step 15 While the image is still selected...

Part 3 Menu and menu animation You will learn how to design a menu and how to animate it after that. You will also learn how to apply action script code on it. Step 1 Create a new layer above the Content Animation layer and name it menu. Step 2 Take the Text Tool (A) and go to the Properties Panel (Ctrl+F3) below the stage. Then, choose the following options: 1. Select a Static Text field, 2. Select a Trebuchet MS as font and bold it. 3. Choose 15 as font size, 4. Select #2F560C as color, 5. As the rendering option, select Use Anti-alias for readability. Step 3 Take the Text Tool (A) and go to the Properties Panel (Ctrl+F3) below the stage. Then, choose the following options: 1. Select a Static Text field, 2. Select a Trebuchet MS as font and bold it. 3. Choose 15 as font size, 4. Select #2F560C as color, 5. As the rendering option, select Use Anti-alias for readability. Then, type on the left side of header menu text. See the picture below. Step 4 Take the Selection Tool (V) and select the all menu text. Then, press F8 key (Convert to Symbol) to convert this menu text into a Movie Clip Symbol. Step 5 Double-click on the movie clip on stage with the Selection tool(V).You should now be inside the Movie Clip. Step 6 After that, take again the Selection Tool (V) and select only the "About me" text. Then, press Ctrl+X key (Cut). Step 7 After that, create a new layer above the layer 1 and name it About me. Then, select it and press Ctrl+Shift+V key (Paste in Place). Step 8 Take again the Selection Tool (V) and select only the "contacts" text. Then, press again Ctrl+X key (Cut). After that, create a new layer above the About me layer and name it Contacts. Select that layer and press Ctrl+Shift+V key (Paste in Place). Step 9 Double click on layer 1 to rename its name in Home. What we now have? We have a three texts of menu placed in separate layer. See the picture below. Step 10 While you're still on layer home, press F8 key to convert it into a Movie Clip Symbol. Step 11 Then, click on frame 25 and press F6 key. Step 12 It's time to animate the first text (button) in menu. While you're still on frame 25, take again the Selection Tool (V) and double-click on the movie clip (Home) to go in its inside.See the picture below. Step 13 While the "Home" text is still selected, press again F8 key (Convert to Symbol) to convert it again into a Movie Clip Symbol. See the picture below. Step 14 Take the Selection Tool (V) and move the frame 1 on frame 2. See the picture bel...

Navigation In this part,You will see how to create site navigation using the action script code and Frame Label and You will see how to create page loading animation after you have click on any button in navigation. Step 1 Create a new layer above the menu layer and name it navigation. Step 2 Click on frame 26 of layer navigation and press F6 key. Then, go to the Properties Panel (Ctrl+F3) below the stage. On the left side you will see Frame Label. For Frame Label type home. Step 3 After that, click on frame 75 and press again F6 key. Then, for Frame Label in the Properties Panel type about me. Step 4 Create a new layer above the navigation layer and name it action. Click on frame 56 of layer action and press F6 key. Then, enter this code inside the actions panel (F9): stop(); Step 5 After that, click on frame 75 and press F6 key. Then, enter again in the action panel (F9) this code: stop(); Step 6 Go back on menu layer, take the Selection Tool (V), and dpuble click on the menu to go in its inside. After that, select only the home button, open the action script panel (F9) and enter this inside the actiosn panel, below the existing code: on (release) { _root.play(); _root.choose = "home"; } The whole script for home button now looks like this: on (rollOver) { gotoAndPlay ("go1"); }

The first thing that we'll add to our scene is the background, we'll make this extend through all the three frames we're going to use for content. Click once on the name of that layer first, and then Right-click the third frame on the Background layer and select the Insert Keyframe command, we'll expand this keyframe all the way to the fifth frame by right-clicking the fifth frame and then selecting the Insert Frame command.

The next important method is setUp. This is where we'll create an instance of our test class, configure it and make sure everything is ready for us to perform a test.

We create some buttons for the navigation system that look like this:

Attractive Designs: Flash 8 allows the using of visual effects that will ease the creation of animations, presentations and forms more attractive and professional. Moreover, it supplies a new set of tools that will help you doing this easily and faster, such us filters and blend modes, added in this version.

2. Using the Tools

For instance, if you have a file file loading content from another domain, called cross domain access, you might get this error.

Click Flash Document. The screen shown here appears: