Best Practices

So I’m building a website that entirely in Flash. Basically just trying to plan out my class structure as this is the first AS 3 class based website I’m creating.

I have all my assets located inside my index.fla library. The website has a basic page building transition. First I attach my background asset and preform and function, on complete I attach my menu and preform a transition function so on an so forth.

Is it bad practice to have my page building transition inside my document class? Or should I build a something like a buildPage class so I can also build and unBuildPage class, other wise it seems I will have all my transition code inside my document class.

To get a grasp of what I am talking about here’s some code from my document class.



package {

    import flash.display.*;
    import flash.events.*;
    import flash.utils.*;
    import caurina.transitions.*;

    public class Main extends Sprite {
        private var fullScreenHeight;
        private var fullScreenWidth;
        private var mainStageScope;
        public var counter;
        public var myBase:Base;
        public var myBaseMask:baseMask;
        public var myMenuClip:menuClip;
        public function Main () {
            addEventListener (Event.ADDED_TO_STAGE, init);
        }
        private function init (e:Event):void {
            mainStageScope = this.parent;
            // Set my pattern properties and add it to the stage
            fullScreenHeight = stage.stageHeight;
            fullScreenWidth = stage.stageWidth;
            var myPattern:Pattern = new Pattern();
            mainStageScope.addChild (myPattern);
            myPattern.height = fullScreenHeight;
            myPattern.width = fullScreenWidth;
            // Now we can add our main layout
            myBase = new Base();
            mainStageScope.addChild (myBase);
            // We need to center the movieclip
            myBase.x = (stage.stageWidth - myBase.width) / 2;
            myBase.y = (stage.stageHeight - myBase.height) / 2;
            // we need to add the base mask
            myBaseMask = new baseMask();
            mainStageScope.addChild (myBaseMask);
            myBaseMask.x = myBase.x;
            myBaseMask.y = myBase.y;
            myBase.mask = myBaseMask;
            // Now we start out menu transition
            counter = 1;
            showBase ();
        }
        public function showBase () {
            Tweener.addTween (myBaseMask, {
              width: myBase.width,
              height: myBase.height,
              time: .99,
              rotation: 0,
              onComplete: attachMenu
              });
        }
        public function attachMenu () {
            myMenuClip = new menuClip();
            mainStageScope.addChild (myMenuClip);
            myMenuClip.x = myBase.x;
            myMenuClip.y = myBase.y + myMenuClip.height;
            menuMover();
        }
        public function menuMover () {
            Tweener.addTween (myMenuClip["menuItem_" + counter] , {
            x:myMenuClip["menuItem_" + counter].x,
            y:-50,
            time: .22,
            rotation: 0,
            onComplete: moveNextMenuItem
            });
        }
        public function moveNextMenuItem () {
            counter ++;
            if (counter <= 5) {
                menuMover ();
            } else {
                trace ("Start next animation");
            }
        }
    }
}

TIA for any advice, as I said this is my first time building a class based flash site with transitions and such so if I am way off please let me know :slight_smile:

Alright, so the way I’d do this is have my main document class, and then from there, a data class (usually just pulls in XML site data) and then also a view class - which is all the interface and such. To copy and paste from my response to a different thread:

A standard way to look at this is the Model / View / Controller (MVC) pattern. It’s an important design pattern (or architectural pattern, depending on who you ask) and it can be helpful for getting your head around encapsulation and this sort of thing.

Alright, so the MVC pattern has three subsystems (I imagine that’s clear by the name). Lemme just briefly go over what each of them does:

** The Model:**

The model is your data. It stores it, protects it, and dispatches it. The model doesn’t know about your view or controller, it is ideally strictly encapsulated and totally independent. This way you can use this model with many different views and/or controllers without rewriting it, which is one of the main goals of OOP. The model should broadcast changes then they occur, it should not directly access any other class.

** The View:**

This is your interface, so in your example, the navigation and such. The big thing here is making sure that the view does nothing but handle visual components and the model data that it needs. (Nav names pulled from XML or something, for example.) It doesn’t edit that data, it just knows how to read the data when it’s given to it.

** The Controller:**

This is the often the document class. It takes input and updates the model and the view as required, and passes information around in a useful fashion. If, for example, someone clicks on something in your View, and the Model must change, the Controller should relay that information.

Now, the model has to be totally independent, and can’t know about the view and the controller. The view knows about the model, because it listens for updates and it takes data from it, and the controller also knows about the model, because it has to make updates. Often you can even have your controller and your view be one and the same, that’s totally fine.