Replies Back to Article

Thanks for posting a very useful article. I've been looking for some advice on a more complex portfolio Flash app that's well written with some of Flash's newer OO features (so much out there was written for 5 or MX!). I was able to use the info in this article to produce my own portfolio project.

One question I have - about working within the function showImageNumbers. If I want to dynamically load separate swf's instead of numbers/movieClips embedded in the flash file, how do I manage the dynamically named variables? Here's what I'm doing:

for (var i:Number = 0; i < projectNode.childNodes.length; i++) {
    imgNumMC = __thumbnailHolderMC.createEmptyMovieClip("img_"+i, __depthCounter);
    {? what's the movieclip name?}.loadMovie(projectNode.childNodes[i].attributes.filename, __depthCounter);
   }

Thanks!

Rachel

Hi Rachel

Thanks for the post and I'm glad you found the tutorial useful. To answer your question, you've created new empty movie clips called img_0, img_1 etc. Each time you move through the loop, you reference that clip using the variable imgNumMC. Use that to refer to the empty movie clip within the loop.

In your code, you are trying to load the thumbnail image where the numbers should be so you might want to change the XML document to include a reference to the external button images and change the path from the file attribute.

I'm travelling at the moment so can't write a code sample. If you get stuck, let me know.

Cheers

Sas

Hi Sas

Many thanks for this informative and well written article. I have found it extremely useful. Being a virtual novice when it comes to dealing with xml files and flash I have found this to be an excellent method for creating a  flash portfolio, both for expandability and reusablity reasons. I have a question that you may be able to provide some advice on. I would like to implement this portfolio as it is, but also add a dynamic text field alongside the images, to display a few lines of information about each image thumbnail. I am not entirely sure how to display selected text. How would i possibly do this? I have looked at the code and can see that I would more than likely need to add more variables to the public function such as the ones created for the buttons and image holders:

  __buttonHolderMC = __galleryMC.createEmptyMovieClip("buttonHolder_mc", __depthCounter);
  __depthCounter ++;
  
  __imgHolderMC = __galleryMC.createEmptyMovieClip("imgHolder_mc", __depthCounter);
  __depthCounter ++;
  __imgHolderMC._x = 160;
  __imgHolderMC._y = 10;
  
  __thumbHolderMC = __galleryMC.createEmptyMovieClip("thumbHolder_mc", __depthCounter);
  __depthCounter ++;
  __thumbHolderMC._x = 160;
  __thumbHolderMC._y = 420;
 }

Is there any way you could provide some code on how to do this. Would i also need to add to the xml file to include the dynamic text that would need to be displayed for each selected thumbnail?

Sorry this is a long post, but it would be helpful to have some expert help as my brain is too inferior to work this all out at this stage!!

Thanks,

Lee Pearman email: lee.pearman@ntlworld.com

Hi Lee

I'm glad you've enjoyed the article. Sorry about the delay in responding but I was in Sydney last week on holiday.

You've certainly asked for a rewrite of the application! There's quite a bit involved. Rather than write the code for you, I'll give you some pointers so you can work it out yourself.

First, as you rightly say, you'll need to change the structure of the XML document to include the text that you want to display. Add a new element to the XML document, making sure that you don't include special characters like quotes, ampersands or < and > signs.

Then, you'll need to create a text field in the __galleryMC movie clip using ActionScript, and position it on the Stage. Make sure you allow it to be multiline. Use the same approach as for the other elements, creating a private variable to reference the text field. You can then grab the text from the XML document and add it to the text property of the text field.

Good luck and post again if you get stuck!

Sas

Sas, this is great so far. I'm trying to add tween's now to some of the movies (example, make project names tabs that move slightly when rolled-over). I can't get it to work so far, and the movie won't even play when I've inserted this code inside the processXML function:

        // Project Button ROLLOVER
        projectButton.onRollOver = function():Void {
        import mx.transitions.Tween;
        import mx.transitions.easing.*;
        var tabup:Tween = new Tween (projectButton,"_y",Strong.easeOut,0,20,3,true);
        }

 It's right under the "projectButton.onPress" function.  I tried adding "private var __tabup:Tween;" to the private properties at top of .as file.

Thanks for this tutorial, which is been great so far!

Chuck
 

Hi Chuck

Without seeing the complete code, I can't really debug it for you but I can see one big problem. You've added the import statements inside the function. They have to be at the top of the actions panel, before anything else. If you've got tweens on any other frames, you'll have to include the import action all over again.

If you're still stuck after making this change, post the entire processXML function and I'll try to help out.

Sas

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.
 

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).

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

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!