Creating a Flash portfolio movie – part 2
by Sas Jacobs

This is part 2 of a tutorial about building a Flash portfolio movie using an AS 2.0 class. We’re building a movie that has the following layout:

 

The movie takes its contents from an XML file, portfolio.xml. That file provides a list of projects and the images associated with each. When you click a project button, a list of images appears at the bottom. You can click one of these links to load an image into the main image area.

At the end of the last tutorial, we’d created the class file and set up the interface. By the end of this tutorial, you’ll have populated the interface from the XML file and you’ll have created a working application. During the tutorial, you’ll learn some useful coding techniques for working with XML data in class files. Remember that the resource files are created in Flash MX 2004 so you’ll need at least this version to finish the tutorial.

You can download the resource files for this tutorial from the blue Properties box that contains the article PDF. There's a heading titled Code Download and you can click the Details link next to it to get the zip file.

Note: If you have difficulties downloading the source files or PDF, you might have a problem with your cookies. Delete the cookies from your machine and try again. In Internet Explorer, you can do this by choosing Tools > Internet Options... and clicking the Delete Cookies... button on the General tab.

$2.99
- OR -

Sas Jacobs

Sas JacobsHello. I'm the Principal of Anything Is Possible, an Australian web development business specialising in web applications development and training. I'm interested in using Flash with dynamic content and I've presented at a number of International conferences on topics relating to applications development, XML and scripting components. I have recently released my second print book Beginning XML with DOM and Ajax to match the first one - Foundation XML for Flash. I have a business web site
and a personal web site.

See All Postings From Sas Jacobs >>

Place your review about Creating a Flash portfolio movie – part 2




You must me logged in to write a review
Reviews
RE: RE: RE: RE: add Tween's to movies...
February 15, 2008 by Chuck Norton

Ok, that makes sense. I tried that earlier, and it wansn't working.... can you give me a specific place for the 'import' code and whether or not that's all I need to do to get the motions working?

And thanks so much for this, Sas.... It's looking good so far. I added motion to some static movies I placed on the timeline, and their looking much better... feel free to check it out: 180bydesign.com/testhome/   (click 'SEE'). The tabs are the main thing right now that would add a lot by movement, and without placing them on the timeline statically, I'm lost.

Thanks!
 

RE: RE: RE: add Tween's to movies...
February 7, 2008 by Sas Jacobs

Hi Chuck

Sorry if I wasn't clear but you have to add the import statements to the place where you use the class. In this case, you're trying to add a tween to processXML in the Gallery.as class file so that's where you need to add the import statements NOT in the Flash file.

Cheers

Sas

RE: RE: add Tween's to movies...
February 6, 2008 by Chuck Norton

By the way... here is my testing site: http://180bydesign.com/testhome/ 

(click on "See" in right hand navigation to view the portfolio)

You might be able to see what I'm trying to do, which is make the image tab, and project'sname tabs slide in/out when their clicked (...similar to rest of site).

RE: RE: add Tween's to movies...
February 4, 2008 by Chuck Norton

Thanks, Sas!! 

Ok, I added imports to actions in first frame of gallery...

var theGallery:Gallery = new Gallery(this, 760, 430);
theGallery.createInterface();
theGallery.loadDetails("portfolio.xml");

import mx.transitions.Tween;
import mx.transitions.easing.*;

 and here is what my processXML looks like

    private function processXML(success:Boolean):Void {
        if (success) {
            __rootNode = __xml.firstChild;
            //trace (__rootNode);
            var projectButton:MovieClip;
            var buttonText:String;
            var buttonX:Number = 10;
            var owner:Gallery = this;
            for (var i:Number = 0; i < __rootNode.childNodes.length; i++) {
                buttonText = __rootNode.childNodes[i].attributes.name;
                //trace(buttonText);
                projectButton = __buttonHolderMC.attachMovie("galleryButton", "gallery"+i, __depthCounter);
                projectButton._x = buttonX;
                projectButton.btnText_txt.text = buttonText;               
               
                // Project Button PRESS
                projectButton.onPress = function():Void {
                    var selectedNodeIndex:Number = Number(this._name.substr(7));
                    owner.showImageNumbers(selectedNodeIndex);
                    owner.loadText(selectedNodeIndex);
                }
               
                // Project Button ROLLOVER
                projectButton.onRollOver = function():Void {
                var tabup:Tween = new Tween (projectButton,"_y",Strong.easeOut,0,20,3,true);
                }

               
               
               
                buttonX +=     projectButton._width + 20;
                __depthCounter++;
            }
        }
 
        if (success) {
            __rootNode = __xml.firstChild;
            //trace (__rootNode);
            var projectButton:MovieClip;
            var buttonText:String;
            var buttonX:Number = 10;
            var owner:Gallery = this;
            for (var i:Number = 0; i < __rootNode.childNodes.length; i++) {
                buttonText = __rootNode.childNodes[i].attributes.name;
                //trace(buttonText);
                projectButton = __buttonHolderMC.attachMovie("galleryButton", "gallery"+i, __depthCounter);
                projectButton._x = buttonX;
                projectButton.btnText_txt.text = buttonText;               
               
                // Project Button PRESS
                projectButton.onPress = function():Void {
                    var selectedNodeIndex:Number = Number(this._name.substr(7));
                    owner.showImageNumbers(selectedNodeIndex);
                    owner.loadText(selectedNodeIndex);
                }
               
                // Project Button ROLLOVER
                projectButton.onRollOver = function():Void {
                var tabup:Tween = new Tween (projectButton,"_y",Strong.easeOut,0,20,3,true);
                }

               
               
               
                buttonX +=     projectButton._width + 20;
                __depthCounter++;
            }
        }
 

 

 When I add "var tabup..." the whole movie wont' work. If I figure out how to do this, I'll add some motions to everything to make it really nice. Again, thanks for your help.
 

See all 10 Reviews