logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Painting
Heart Disease
Horror Literature
Dating
Hiking & Backpacking
SF/Fantasy Books
Healthy Foods


dailyclick
All times in EST

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

Setup A Flash Portfolio and Import Your Images


In the next few tutorials we will build the portfolio for your Flash website. The portfolio is really a second Flash movie that will load into the main Flash website. This portfolio will be built in the same way as we built the main website. It will have three layers; Background, Content and Actions. On the Content layer will be the images for your portfolio and on the Background layer will be two simple buttons for the back and forward navigation. Because the portfolio will take a little more time to download than the other webpages of the website, we will add a ProgressBar component to display the progress of the download. Open a new Flash document and let's get started.

Step 1. Set the stage. The height and width for the portfolio should be just large enough to accommodate the images and the navigation buttons. Remember that this portfolio is really a small Flash movie that will load into your main website. Therefore the dimensions for the portfolio will need to be small enough to fit into the space that you allotted for it on the Portfolio webpage in your main website. In the example portfolio, I set the width to 300 pixels and the height to 275 pixels. The largest image in my portfolio was 300 pixels wide and 245 pixels high. So I added 30 pixels more for the total height to accommodate the navigation buttons below the images. Click on the Stage to open the Property Inspector for the Document settings and set the Background color and size dimensions of your choice.

Step 2. Background layer. Rename Layer 1 to Background. We will add the navigation buttons to this layer in the next tutorial.

Step 3. Content layer. This layer will hold the images for your portfolio. In the example I used eight images but you can use as many as you want. However, remember that there is a delicate balance between the number of images and the download time for the portfolio. Too many images will cause the portfolio to take a long time to download.

Insert Layer Button
Once you have decided on the number of images for your portfolio, you are ready to start the new layer. Click the Insert Layer button and name the new layer Content. There should already be a Keyframe in the first frame of this layer. We will need one frame for each image in the portfolio. So, in the example I added seven more frames which made Frame 8 the last frame. Right click on Frame 8 (or the last frame for your portfolio) in the Content layer and choose Insert Keyframe.

We will add the same number of frames to the Background layer. Right click on Frame 8 in the Background layer and choose Insert Frame.

Step 4. Import image. You are ready to import the portfolio images. Click on Frame 1 in the Content layer. From the Menubar, click File > Import > Import to Stage and choose your first image from the Import dialog box. Your image should appear on the stage and also in the Library Panel. Click on this image with the Selection Tool and drag the image into the correct position on the Stage. You can also use the directional arrows on your keyboard or set the X and Y positions in the Property Inspector.

Step 5. The rest of the images. For the next image, right click on Frame 2 and choose Insert Keyframe. The image from Frame 1 should still be showing. We want to replace this image with a new one. From the Menubar click Edit > Cut to remove the first image. Now you can import your second image using Import to Stage. Repeat this for the other images in the portfolio. For the last frame in the portfolio you already have a Keyframe so you only need to import the last image to the stage.

Step 6. Test your movie. Click on Frame 1 to move the Playhead back to the beginning. Now press the Enter key on your keyboard and watch as the images display along the Timeline.

Step 7. Save Your Flash Movie. You can now save your new movie. Lets name it Portfolio.

Macromedia Flash MX 2004 Workspace



Add Setup+A+Flash+Portfolio+and+Import+Your+Images to Twitter Add Setup+A+Flash+Portfolio+and+Import+Your+Images to Facebook Add Setup+A+Flash+Portfolio+and+Import+Your+Images to MySpace Add Setup+A+Flash+Portfolio+and+Import+Your+Images to Del.icio.us Digg Setup+A+Flash+Portfolio+and+Import+Your+Images Add Setup+A+Flash+Portfolio+and+Import+Your+Images to Yahoo My Web Add Setup+A+Flash+Portfolio+and+Import+Your+Images to Google Bookmarks Add Setup+A+Flash+Portfolio+and+Import+Your+Images to Stumbleupon Add Setup+A+Flash+Portfolio+and+Import+Your+Images to Reddit



 



RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the Flash and Animation Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2013 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.

g


g features
Ken Burns Effect In Motion - Record Keyframes

Ken Burns Effect In Motion 5 - Set Up

Animated Title in Motion

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2013 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor