TECHspot

art 2) Creating the Main Movieclip Step 5. Next we'll be creating the main MC (movieclip) where all the parts of the website will go. The main MC will be on the root timeline of the flash movie. So, click on the white rectangle and convert it into an MC called 'main'. You can do this by either pressing f8 or by going to Modify > Convert to symbol. Step 6. So, now that we've created the main MC, double click on it. Step 7. Click on the white rectangle again and convert into another MC, this time named 'background'

Step 8. Double click on the background MC and choose the Selection Tool (V). Drag your mouse over the white rectangle, selection around 3/4 of it. Step 9. Set the fill color (circled in blue) to a dark grey color (#484848) Enlarge Image Step 10. So that's the background MC created, go back to the Main MC. Name the layer with the background MC "background" and create 2 other layers called "content" and "buttons"

Part 3) Adding Some Content Step 11. In part 3 we're going to be adding some content. Using the Text Tool (T), add a title for the site's homepage, using the settings below. Step 12. Convert the text into an MC called 'content' Step 13. Go into the content MC and name the layer "sections"
Step 14. Add a subheading, if you like, using the settings shown below. Step 15. And some body text. Step 16. You can use the Align Panel (Window > Align) to align all the text to the right, by click on the icon circled in red. Step 17. I've copied (edit > copy) the title and subtitle and pasted (edit > paste in place) it to the right for a 'featured' section.

Part 4) Optimizing an Image & Making it a Button

Step 18.

Now we're going to add an image and optimize it. When importing images (File > Import > Import to Stage) into flash you have the ability to optimize them, but a balance must be struck between quality and low file size, to allow for quick loading of the flash file (SWF). It's good to optimize your images from within flash, becuase you can tweak their quality whenever you want, without having to open them up again in an image editing program. So the file extension i usually use for images is PNG, which provides a high quality image. So below you can see a image, that I've imported, as the featured item of the Flash site.

Step 19.

The image is called "best.png". You can optimize it by right clicking on 'best', from the layers panel, and by choosing properties. You'll then be shown the panel shown below.

Step 20.

Un-check the 'Use document default quality' settings, and the default quality (50) will be revealed. You can see a preview of th quality in the image to the left which, as you can see, is quite poor. You can also see the size of the image at the bottom.

Step 20.

Un-check the 'Use document default quality' settings, and the default quality (50) will be revealed. You can see a preview of th quality in the image to the left which, as you can see, is quite poor. You can also see the size of the image at the bottom.

Step 21.

Now that the image has been optimized, we're going to create turn it into a button, that opens up a browser window. Convert the image into an MC (F8) called 'bestMC'

Step 22.

Give the MC an instance name, from the properties panel, called 'best'.

Step 23.

The image can now be given some functionality by refering to the instance name. In the content MC, create a new layer called script and click on the 1st frame of the layer. Open up the actions panel and enter the code shown below. This code refers to the image, using the instance name 'best', giving it an onRelease function. So when ever the image is pressed and release, it can be told to do something. In this case, it's told to open up a browser window (getURL), using the address of this website. We also have to add a stop action, because we're about to create more frames in the content MC.

Part 5) Adding More Content

Step 24.

Next we're going to add the rest of the content. Later on we'll be creating some buttons which. when pressed, will display it's corresponding section. In the content MC we''re going to create each section at a different frame. When one of the buttons is pressed, the content MC will go to the frame with the right content on. To do this, we're going to give each section a label that we can tell the content MC to go to. So, create a new layer called 'labels', inbetween the script and section layer. Click on the first frame of the labels layer and, at the properties panel, enter 'about' under 'frame' (cirlced in red).

Step 25.

Select frame 10 of all the layers and then insert key frames for each layer (F6)

Step 26.

On frame 10, of the labels layer, add another label called "portfolio". You can add more frames, extending them fto frame 20, by using f5 while layer 10 of all frames are selected.

Step 27.

Change all the text to suit this section and add the first thumbnail for your portfolio

Step 28.

Convert the image to an MC called 'thumb0'

Step 29.

Add more thumbnails, also converting them to MC's called thumb1, thumb2, thumb3 etc. Then give the thumb0 mC the same instance name, which we'll use to give some functionality. Do the same with each of the other thumbs, giving thumb1 MC the instance name 'thumb1' etc.

Step 30.

Click on frame 10 of the script layer and open up the Actions panel. As we did with the featured image, add the code show below, this time swapping the URL address for what ever you want the thumbnails to open up.

Step 31.

Add an onRelease function for each of the other thumbnails.

Step 32.

For the 3rd section, create another key frame (F6) at frame 20 of all the layers

Step 33.

Create the a label for the 3rd section. As you can see i've made it 'resume'

Step 34.

So that's all the sections completed in the content MC, go back to the main MC and give the content MC and instance name. We can then use the instance name to control the content MC.

Part 6) Creating the Buttons

Step 35.

Now we're going to create some buttons to tell the content MC to go to the corresponding label. First of all, double click on the rectangle tool and set the corner radius to 10 points.

Step 36.

On the buttons layer, create a rounded rectangle, using the same grey that was used for the background.

Step 37.

Conver the rectangle into an MC called "button_background"

Step 38.

We can now use and instance of button_background MC for each button. So copy and paste the 1st one, placing it to the right.

Step 39.

Create a 3rd instance, and then convert the 1st one into another button symbol called 'about'. This button will be used to tell the content MC to go to the 'about' label.

Step 40.

Convert the button_background instance into a button symbol called 'portfolio' and the 3rd into a button symbol called 'resume'.

Step 41.

Double click on the about button symbol and you'll be displayed with what's shown in the image below.

Step 42.

Create a new layer and add the text 'about'

Step 43.

Then do the same with the portfolio button symbol, but this time placing the text 'portoflio' in the 2nd layer.

Step 44.

Go back to the main MC. Do the same for the resume button, and then give the about button symbol the instance name 'about'. Give the portoflio button the instance name 'portolfio' and the resume button the instance name 'resume'

Step 45.

Create a layer called "script", above the buttons layer in the main MC. Open up the Actionc spanel and add the actionscript shown below. This script give each button functionality, so that when they're pressed, the content MC goes to the corresponding sections.

Preloading the Website Step 46. For this final part, of the tutorial to create a basic Flash website, we're going to create a preloader for the website. Go back to root of the time, where the 'Main' MC is, and move the frame, that it's on, to frame 2. Step 47. Now make a text field on the 1st frame, with the text "loading", using the settings shown below Step 48. Convert the text field (F8) to an MC called 'loader' Step 49. Double click on the 'loader' MC and create a 2nd text field on the right, with the text "99%". From the properties panel the text has been made "dynamic", and a Var (variable) has been given to it called "percent". When the website is preloading, this variable will hold the percent value that's loaded so far, and it'll be displayed in the dynamic text field. Step 50. Go back to the root timeline. Instead of placing the code on a frame on the timeline, put it on the loader MC, by clicking on it, opening up the Actions Panel, and then entering the code, shown in the image below. This block of Actionscript will check to see how much of the website has loaded and display the percentage in the text, using the 'p' variable. Once all of it is loaded, the timeline will go to frame 2, and the site will be displayed

Step 51. Last of all, on the 1st frame of the root timeline, place a stop() action on a layer called, 'script'. And that brings us to the end of this Flash tutorial to create a Basic Website

Download FLA