XtremeSkill.com

KICKSTART YOUR CREATIVE CAREER BY PUTTING YOUR WORK ONLINE WITH THIS EASYTOUSE PORTFOLIO APPLICATION, WHICH UTILISES THE SPEED OF ACTIONSCRIPT 3.0

It's coming to that time of the year when graduates are moving out into the job market and it is essential for those working in the creative industry to have a portfolio to show off their talents. This tutorial focuses on building a website that is easy to keep up to date. This ActionScript 3.0 Flash portfolio loads all the external content from an XML file so once the Flash file is up and published, there is no need to keep changing it. Instead, you’ll just have to add new entries into the XML file and add new thumbnails and images to your project. The interface is fairly generic so it should be useful for a variety of different uses, but with a minimum of Flash knowledge you should be able to skin this design to suit your own portfolio needs.

1. Getting started From the cover CD, open the tutorial folder and open start. fla in Flash. Click the Size button on the Properties panel and a pop-up window will appear. Change the width to 800 pixels, the height to 600 pixels, the frame rate to 24fps and the background colour to #666666.	2. Add a rectangle Grab the Rectangle Primitive tool and add a 20-pixel corner radius, then draw a rectangle on the screen. Change the dimensions to 760 by 480 pixels and position at 20 pixels on the x axis and 60 on the y axis. Choose Modify>Convert to Symbol and name it ‘bg’.
3. Add a Drop Shadow Click on the Filters tab and add a Drop Shadow to the rectangle. Make the Blur 15 pixels, Strength 60 per cent, Angle 90 degrees and input five for the Distance. Drag the reflection symbol from the library, position as shown and Send To Back. Repeat with the reflection 2 symbol.	4. Add a guide Go to View>Rulers and drag a guide from the top ruler, then drop it at 420 pixels down the document. Select the bg instance on the stage and copy it. Lock the first layer, name this ‘bg’ and add a new layer, naming this ‘content’. Now choose Edit>Paste in Place and press Ctrl+B twice.
5. Create outlines Use the Ink tool to add a two-pixel, #999999-coloured stroke to the rectangle. Double-click the outline, then cut and paste this to a new layer, naming it ‘outlines’. Now select the Line tool and draw lines in line with the guide, using the reflection below to line up the vertical lines.	6. Copy lines Select the lines inside the rectangle but not the outer edge. Copy and paste this onto the content layer. Lock and turn off the visibility of the ‘outlines’ layer. These lines subdivide the rectangle so select the rectangle’s top large area, cut and Paste in Place to a new layer, naming it ‘mask’.
7. Add buttons to stage Lock the mask layer and turn off the visibility. Select the content layer again and in the Colour panel, choose Linear for the fill and add a dark grey to light grey gradient. Now add this to each of the rectangles, which will become buttons for our interface.	8. Create a button Select the first rectangle on the left and choose Modify> Convert to Symbol. Name it ‘Button 1’ and make it a Movie Clip. Double-click the symbol. Select frame 2 and press F6. Make the gradient black to mid-grey. Create a new layer, open the ActionScript editor and add a stop(); command.
9. Repeat the button process Repeat step eight for the next two buttons, naming the Movie Clips ‘Button 2’ and ‘Button 3’. Select each button in turn on the stage and name the instance from left to right, ‘bg1’, ‘bg2’ and ‘bg3’. Now select the top, small rectangle on the right and choose Modify>Convert to Symbol.	10. Forward button Name the symbol ‘forward’ and make it a button, then click OK. Double-click the symbol on the stage to edit it. From the library, drag in the arrow instance and position as shown above. Select the Hit frame and press F6 to add a Keyframe. Select the arrow and press Ctrl+B to break apart.
11. Hit state Double-click the arrow to edit the group and fill the dots with #66FF00 from the Color Mixer. Using the Text tool, add the word ‘browse’ in the same colour. Select the Hit frame and press F5 to extend the timeline. Return to the main stage and give this the instance name of ‘forward’.	12. Repeat the button process Repeat step 11 and 12 to create the Back button for the last rectangle in the interface. Be sure to give this the instance name of ‘back’ when you’ve finished creating the button. Now turn on the visibility of the outlines layer; you can still leave it locked at this stage of the production.
13. Dynamic text Use the Text tool to add a text box in 16pt Arial, colour set to #66FF00. Set the text box to Dynamic in the Properties panel and name the instance ‘heading 1’. Add another text box with white, 10pt Arial text, giving this the instance name of ‘description1’ and setting it to Multiline.	14. Create a new symbol Press Ctrl+F8 to create a new symbol and name it blank, making it a Movie Clip. Press OK then return to the main stage. Drag this onto the stage and position by the white spot as shown, giving this the instance name of ‘image1’. This will be used to load thumbnail images into later.
15. Copy the text Select the two Dynamic text fields and the empty Movie Clip on the stage. Copy and paste them, then position over the second rectangle and again over the third. Change the instance names to ‘heading2’, ‘description2’ and ‘image2’, and again for the last rectangle but use ‘3’ instead.	16. Create a transition Drag the shape symbol from the library to the stage and position over the top of the three main buttons. Go to Modify>Convert to Symbol, name this ‘transition 2’ and make it a Movie Clip. Press OK and double-click to edit the symbol. Create a new layer but drag this below the first.
17. Create a rectangle Select frame 15 of layer 1 and press F5 to extend the timeline. Drag frame 1 of layer 2 to frame 2. Now select frame 2 of layer 2 and press F6 to add a Keyframe. Draw a large white rectangle that’s bigger than the shape on layer 1. Select frame 15 of layer 2 and add another Keyframe.	18. Animate the rectangle Use the Free Transform tool to scale the rectangle to a small shape as shown above, which should be to the right of the layer above. Select frame 2 and add a shape Tween. Add a new layer and select frame 1, then open the ActionScript editor. Add a stop(); command on frame 1.
19. Create a mask Select layer 1, right-click near the name layer1 and from the drop-down list, select Mask. Return back to the main stage and all that you will be able to see of this instance now is a white spot. While this is still selected, name the instance ‘transition2’ in the Properties panel.	20. Add the folder From the library, drag the symbol spin.swf to the stage and in the Properties panel, change the Color drop menu to Tint and change the colour to #999999. Open the Transform palette, scale up to 180 per cent then name the instance ‘spin’ in the Properties panel.

21. Invisible button Create a new symbol, name it ‘invisible’ and make it a button. Click OK, select the Hit frame and press F6. Add a rectangle and return to the main stage. Lock the content layer, name a new layer ‘buttons’, drag over three copies of the invisible symbol, naming them ‘link1’, ‘link2’ and ‘link3’.	22. Add an image layer Lock the buttons layer and create a new layer above this. Name this layer ‘image’ and from the library, drag the blank symbol to the stage and position at 20 pixels on the x axis and 60 pixels on y axis with the Properties panel. Add an instance name of ‘mainImage’ then lock this layer.
23. Add a box Create a new layer above the image layer, naming it ‘box’. Drag the box symbol onto the stage, positioning in the top right of the black area. Lock this layer, unlock the outlines layer and add a Dynamic text box to the stage, naming it ‘longDesc’. Set the text colour as white and set to Multiline.	24. Transition layer Lock the outlines layer and create a new layer above the box layer. Name this ‘transition’. Select the Rectangle tool and draw a large white rectangle over the top section of the document. With this selected, choose Modify>Convert to Symbol, name it ‘transition’ and make it a Movie Clip.
25. Animate shape Tween Double-click the symbol to edit it. Select frame 20 and add a Keyframe, then select frame 1 and drag it to frame 2. With the Free Transform tool, scale the width of the rectangle. In the Color panel, change the fill to 20 per cent alpha. Add a shape Tween between frame 2 and 20.	26. Another layer Add a new layer and add a Keyframe at frame 20. Drag the transition1 symbol from the library onto the stage. Rotate 90 degrees clockwise and scale the same as the rectangle. Select frame 100, press F5 then select frame 1 and open the ActionScript editor to add a stop(); command.
27. Name the instance Return to the main stage and the transition instance ought still be selected on the stage. It will now just be a white dot as there is no content on frame 1. Name the instance of this ‘transition’ and lock the layer. Select the mask layer and right-click on it, choosing Mask from the drop menu.	28. Add to the mask The transition layer will be masked, but drag the box layer up slightly and the image layer and they will also become part of the mask. Now leave Flash for a second and drag the tutorial folder off the CD and onto your hard drive. Save this Flash file into that folder.
29. Attach the code Make sure nothing on the stage is selected and look in the Properties panel. Type ‘MyContent’ into the Document class. Save your document again and press Ctrl+Enter to test your file. You should be able to see the portfolio running in the Flash Player.