Positioning MCs according to height

I need to create the attached jpg, but i'm not sure of the best way to tackle it.

The news posts are loaded from XML and will vary in height so they need to somehow be sorted so that if one is going to come off the page, then it's put into the next page - where the user will click the scroll buttons to view.

Would something like this be a good way to tackle this?

1/ Load article from XML
2/ Create a postMC_0 and add article bits to it (date, title, body)
3/ Record height
4/ Create a newsColumn_0 and add postMC_0 to it

Then a loop:

5/ Load next article

6/ Create a postMC_1 and add article bits to it

7/ If difference between postMC_0 height and newsColumn_0 height is greater than the height of postMC_1, then add postMC_1 to newsColumn_0.

8/ If not, then create newsColumn_1 and add postMC_1 to it.

9/ Loop back to 5 (increasing the numbers each time, so postMC_2, etc)


Then just make the scroll buttons function according to how many columns have been created..


Any advise would be greatly appreciated.

Many thanks.

Do not use a naming convention when you really want a collection. That is, don't create postMC_0, postMC_1, etc, but create an array for them instead.

Code:

---

var posts:Array = [];
posts.push(somepost);

---

Similarly for the columns. Though I don't think you actually need multiple columns unless they will actually be showing at the same time. You could just move the posts in and out of the column.

Do not use a naming convention when you really want a collection. That is, don't create postMC_0, postMC_1, etc, but create an array for them instead.

Code:

---

var posts:Array = [];
posts.push(somepost);

---

Similarly for the columns. Though I don't think you actually need multiple columns unless they will actually be showing at the same time. You could just move the posts in and out of the column.

Thanks for the reply..

how would i separate each post each containing 3 elements, if i'm using an array? Wouldn't it then just be a really long array of info, rather than being organised?

Or would i have an array per post?

This is my AS so far... using the post_mc idea..

Actionscript Code:

for (var i:int = 0; i<myXML.news.length(); i++){
                
                var newsPost_mc = new MovieClip();
                var newsDate = new TextField();
                var newsTitle = new TextField();
                var newsBody = new TextField();
                
                newsDate.embedFonts = true;
                //newsDate.autoSize = TextFieldAutoSize.LEFT;
                //newsDate.antiAliasType = AntiAliasType.ADVANCED;
                newsDate.setTextFormat(dateFormat); 
                
                newsPost_mc.name = "newsPost_mc_"+i;
                
                newsDate.name = "newsDate"+i;
                newsDate.htmlText = myXML.news.newsDate[i];
                
                newsTitle.name = "newsTitle"+i;
                newsTitle.htmlText = myXML.news.newsTitle[i];
                
                newsBody.name = "newsBody"+i;
                newsBody.htmlText = myXML.news.newsBody[i];
                
                sectionpage.newsColumn.addChild(newsPost_mc);
                newsPost_mc.addChild(newsDate);
                newsPost_mc.addChild(newsTitle);
                newsPost_mc.addChild(newsBody);
                
                newsPost_mc.y = i*100;
                newsTitle.y = 50;
                newsTitle.x = 0;
                newsDate.x = 0;
                newsDate.y= 0;
                newsBody.x = 50;
                newsBody.y = 50;
    
            }

The array has nothing to do with the visual representation. It's a logical construct that lets you deal with a collection of items in an easy way.

Well, I'd make a class for NewsPost, but that looks like a decent start. Why are you putting each at i*100? You could put them at the last NewsPost height + last NewsPost y. That would have them follow each other exactly. Are you trying to do the multicolumn thing now or just get one working first?

I was just putting i*100 temporarily to space the posts out while i worked on them.

This is my AS now.. finding it difficult to position them according to the last post's Y, they seem to be spacing themselves a lot further apart than they should.. have i got this all wrong?

Actionscript Code:

for (var i:int = 0; i<myXML.news.length(); i++){
                
                var newsPost_mc = new MovieClip();
                newsPost_mc.opaqueBackground = 0xCCCCCC;
                
                var newsDate = new TextField();
                var newsTitle = new TextField();
                var newsBody = new TextField();
                
                newsDate.embedFonts = true;
                newsTitle.embedFonts = true;
                newsBody.embedFonts = true;
                newsBody.wordWrap = true;
                newsBody.autoSize = TextFieldAutoSize.LEFT;

                newsDate.antiAliasType = AntiAliasType.ADVANCED;
                newsTitle.antiAliasType = AntiAliasType.ADVANCED;
                newsBody.antiAliasType = AntiAliasType.ADVANCED;
                
                newsDate.defaultTextFormat = dateFormat;
                newsTitle.defaultTextFormat = dateFormat;
                newsBody.styleSheet = IStyleSheet(Gaia.api.getPage("index").assets.stylesheet).style;
                
                newsPost_mc.name = "newsPost_mc_"+i;
                
                newsDate.name = "newsDate"+i;
                newsDate.text = myXML.news.newsDate[i];
                
                newsTitle.name = "newsTitle"+i;
                newsTitle.text = myXML.news.newsTitle[i];
                
                newsBody.name = "newsBody"+i;
                newsBody.htmlText = myXML.news.newsBody[i];
                
                sectionpage.newsColumn.addChild(newsPost_mc);
                newsPost_mc.addChild(newsDate);
                newsPost_mc.addChild(newsTitle);
                newsPost_mc.addChild(newsBody);
                
                // Positions & Sizing
                var lastMCh:int = newsPost_mc.height;
                
                if (i<1)
                {
                    newsPost_mc.y = 0; // Put first one at top
                }
                else
                {
                    var lastMCy:int = newsPost_mc.y;
                    newsPost_mc.y = lastMCh + lastMCy;
                }
                
                
                newsTitle.y = 0;
                newsDate.width=100;
                newsDate.height=30;
                newsTitle.width = 300;
                newsTitle.height = 30;
                newsTitle.x = 80;
                newsDate.x = 0;
                newsDate.y= 0;
                newsBody.x = 80;
                newsBody.y = newsTitle.height;
                newsBody.width=350;
                
            
            }

Many thanks.

It looks like you did not set autosize on the title or date, but you are explicitly sizing them. Your lastMCh and lastMCy aren't actually the lastMC's anything. You're setting them to the properties of the same ones you're about to manipulate. And you were trying to use the height of newsPost before you'd sized and placed all its content.

Also, you're not even using those names, so don't bother with them. And if you were to bother naming them, do not append the index. You should be putting each newsPost in an array, and then you can just get the post parts from that post.

Code:

---

var posts:Array = [];
var lastY:Number = 0;
for (var i:int = 0; i<myXML.news.length(); i++){
  var newsPost_mc:Sprite = new Sprite();
  posts.push(newsPost_mc);

  newsPost_mc.opaqueBackground = 0xCCCCCC;
             
  var newsDate:TextField = new TextField();
  var newsTitle:TextField = new TextField();
  var newsBody:TextField = new TextField();
             
  newsDate.embedFonts = true;
  newsTitle.embedFonts = true;
  newsBody.embedFonts = true;
  newsBody.wordWrap = true;
  newsBody.autoSize = TextFieldAutoSize.LEFT;

  newsDate.antiAliasType = AntiAliasType.ADVANCED;
  newsTitle.antiAliasType = AntiAliasType.ADVANCED;
  newsBody.antiAliasType = AntiAliasType.ADVANCED;
             
  newsDate.defaultTextFormat = dateFormat;
  newsTitle.defaultTextFormat = dateFormat;
  newsBody.styleSheet = IStyleSheet(Gaia.api.getPage("index").assets.stylesheet).style;
             
  newsDate.text = myXML.news.newsDate[i];
  newsTitle.text = myXML.news.newsTitle[i];
  newsBody.htmlText = myXML.news.newsBody[i];
             
  sectionpage.newsColumn.addChild(newsPost_mc);
  newsPost_mc.addChild(newsDate);
  newsPost_mc.addChild(newsTitle);
  newsPost_mc.addChild(newsBody);
             
  // Positions & Sizing
  newsTitle.y = 0;
  newsDate.width=100;
  newsDate.height=30;
  newsTitle.width = 300;
  newsTitle.height = 30;
  newsTitle.x = 80;
  newsDate.x = 0;
  newsDate.y= 0;
  newsBody.x = 80;
  newsBody.y = newsTitle.height;
  newsBody.width=350;

  newsPost_mc.y = lastY;
  lastY += newsPost_mc.height;
         
}

---

I would take most of that code which builds the post and put it in a NewsPost class.

Code:

---

package {
  //imports here.
  public class NewsPost extends Sprite{
    public var newsDate:TextField;
    public var newsTitle:TextField;
    public var newsBody:TextField;

    public function NewsPost(date:String, title:String, body:String, dateFormat:TextFormat){
      opaqueBackground = 0xCCCCCC;
             
      newsDate = new TextField();
      newsTitle = new TextField();
      newsBody = new TextField();
             
      newsDate.embedFonts = true;
      newsTitle.embedFonts = true;
      newsBody.embedFonts = true;
      newsBody.wordWrap = true;
      newsBody.autoSize = TextFieldAutoSize.LEFT;

      newsDate.antiAliasType = AntiAliasType.ADVANCED;
      newsTitle.antiAliasType = AntiAliasType.ADVANCED;
      newsBody.antiAliasType = AntiAliasType.ADVANCED;
             
      newsDate.defaultTextFormat = dateFormat;
      newsTitle.defaultTextFormat = dateFormat;
      newsBody.styleSheet = IStyleSheet(Gaia.api.getPage("index").assets.stylesheet).style;
             
      newsDate.text = date;
      newsTitle.text = title;
      newsBody.htmlText = body;
             
      addChild(newsDate);
      addChild(newsTitle);
      addChild(newsBody);
             
      // Positions & Sizing
      newsTitle.y = 0;
      newsDate.width=100;
      newsDate.height=30;
      newsTitle.width = 300;
      newsTitle.height = 30;
      newsTitle.x = 80;
      newsDate.x = 0;
      newsDate.y= 0;
      newsBody.x = 80;
      newsBody.y = newsTitle.height;
      newsBody.width=350;
    }

  }

}

---

And then you can shorten the loop to:

Code:

---

var posts:Array = [];
var lastY:Number = 0;
for (var i:int = 0; i<myXML.news.length(); i++){
  //may have to convert these with toString if they don't just work
  var date:String = myXML.news.newsDate[i];
  var title:String = myXML.news.newsTitle[i];
  var body:String = myXML.news.newsBody[i];
  var newsPost:NewsPost = new NewsPost(date, title, body, dateFormat);
  posts.push(newsPost);

  sectionpage.newsColumn.addChild(newsPost);
  newsPost.y = lastY;
  lastY += newsPost.height;
         
}

---

Thanks so much for that, it works. Now trying to understand why this works and where i was going wrong...I think i get it:

1/ Create an empty array called posts
2/ Then with each loop:
- create a newsPost_mc as a Sprite (why not movieclip?)
- add a newsPost_mc to the posts array
- Set all the styling, assign the xml text to each textfield
- set newsPost_mc.y to y (on first loop will be 0)
- record current newsPost_mc y + height ready for next loop

Just to help me understand - Why is it necessary to use an Array here? Will it help for the next part of only showing posts that fit into the container mc?

The array is not strictly necessary here. But whenever you have a collection of objects that you will want to manipulate together, it's a good idea. Basically, if you were ever going to name something "somename_"+i, you should be using an array instead.

I used Sprite rather than MovieClip because we didn't need anything that MovieClip provides that Sprite doesn't. newsPost does not have frames, and does not need to be dynamic. It does need to be a DisplayObjectContainer, so the thing that most closely suits those requirements is Sprite. Until we build our own NewsPost class.

Yes, you could go through the array after building it like this and move stuff into other columns, but if you're actually creating separate columns, you could have partitioned the posts in the first loop. Let's say sectionpage can have an arbitrary number of columns that are at most columnHeight tall. We'll store these columns in an array property of sectionpage called columns. It's up to you how you want to show them, whether they are all displayed at once or you replace the showing one as you move through. I'll write code assuming they're all showing at once.

Code:

---

var posts:Array = [];
var lastY:Number = 0;
//assume sectionpage.columns is an array containing one empty column.
//assume columnHeight is a Number and is already set.
var column:DisplayObjectContainer = sectionpage.columns[0];
for (var i:int = 0; i<myXML.news.length(); i++){
  //may have to convert these with toString if they don't just work
  var date:String = myXML.news.newsDate[i];
  var title:String = myXML.news.newsTitle[i];
  var body:String = myXML.news.newsBody[i];
  var newsPost:NewsPost = new NewsPost(date, title, body, dateFormat);
  posts.push(newsPost);
  if (lastY + newsPost.height > columnHeight){
  var nextX:Number = column.x + column.width;
  column = new Sprite();
  column.x = nextX;
  sectionpage.columns.push(column);
  sectionpage.addChild(column);
  lastY = 0;
  }

  column.addChild(newsPost);
  newsPost.y = lastY;
  lastY += newsPost.height;
         
}

---

For extra credit, what happens when a single post is taller than columnHeight?

Again, we are not using these arrays yet, but we're setting them up because we almost certainly will want easy access to columns and posts. You may want to change posts from its current scope to each column having its own array of posts. Or you may want both. It depends on what you will be doing with them later.

The news posts shouldn't be longer than the columnHeight, will just place a word limit on it for now.

So currently the news posts are loading into newsColumn movieclip which is placed on the stage.. so to make way for the columns, this needs to be scrapped?

And in its place, i create an array here, and columnHeight var:

code:

---

var posts:Array = [];

var lastY:Number = 0;

var columns:Array = [];

var columnHeight:Number = 330;

---

It's giving me an error like this, i guess i've got the columns array part wrong?

The code above assumes that columns is a property of sectionpage.

You don't have to scrap newsColumn. Just put it in as the first entry of columns. In fact, that's what I intended above.

sorry i'm a bit stuck here. :scared: how do i make the columns a property of sectionpage?

If sectionpage is a MovieClip, and therefore dynamic, you can do it like this:

Code:

---

sectionpage.columns =[];
sectionpage.columns.push(newsColumn);

---

If you do that from within code on sectionpage, replace "sectionpage" with "this". If you have created your own class for sectionpage... no, you haven't done that.

hmm. This gives me an Error #1009: Cannot access a property or method of a null object reference.

I haven't created my own class for sectionpage but this whole section is within a document class for newspage.fla.

Then sectionpage doesn't exist yet where you put that code. It might be best to put it on sectionpage itself, or just after you create sectionpage (in the frame where it shows up).

are you sure it's that? As sectionpage is already declared..

Actionscript Code:

public class NewsPage extends AbstractPage
    {

        // Declare instances on stage in NewsPage.fla
        public var bgbutton:SimpleButton;
        public var closebutton:SimpleButton;

        public var sectionpage:MovieClip;
        public var newsColumn:MovieClip;

        public var textTitle:TextField;
        public var textBody:TextField;

        public var myXML:XML;

        public function NewsPage()
        {
            super();
        }
        override public function transitionIn():void
        {
            super.transitionIn();
            gotoAndPlay("in");

            sectionpage.textBody.styleSheet = IStyleSheet(Gaia.api.getPage("index").assets.stylesheet).style;

            var myXML:XML = IXml(assets.newsContent).xml;

            sectionpage.textTitle.htmlText = myXML.sectionContent.title;
            sectionpage.textBody.htmlText = myXML.sectionContent.body;


            var dateFormat:TextFormat = new TextFormat();
            dateFormat.color = 0xFFFFFF;
            dateFormat.font = Gaia.api.getFontName("DIN");
            dateFormat.size = 18;

            var posts:Array = [];
            var lastY:Number = 0;
            //sectionpage.columns:Array = [];
            
            sectionpage.columns = [];
            sectionpage.columns.push(newsColumn);
            
            var columnHeight:Number = 330;
            
            var column:DisplayObjectContainer = sectionpage.columns[0];

Code:

---

            sectionpage.columns:Array = [];

---

This is invalid syntax. It should have resulted in a compile error before you ever had a chance to get the runtime 1009 error. Remove that line since the next one down does it the right way.

I was assuming that newsColumn was a child of sectionpage, since it made sense to me that a section would have columns. That does not appear to be the case, so you can try to put columns on the NewsPage itself. Where you have sectionpage.columns above, replace it with just columns. And declare a columns array variable in NewsPage. Also, obviously, add the new column to "this" rather than sectionpage.

Sorry i was actually just experimenting with that line, meant to comment it out before posting the code.

on the stage newsColumn is actually placed inside of the sectionpage movieclip.. does that not mean it's a child of sectionpage?

This seemed to work before:

Code:

---

sectionpage.newsColumn.addChild(newsPost);

---

Then the new columns SHOULD be added to sectionpage. And sectionpage.newsColumn should be put in columns rather than the unused newsColumn property you seem to have declared in NewsPage.

What line is throwing the 1009 error?

hmm. I dont know, it doesn't say.. it just says:

Quote:

---

Gaia Framework (AS3) v3.2.3
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at com.thefactory.pages::NewsPage/transitionIn()
at com.gaiaframework.assets::PageAsset/transitionIn()
at com.gaiaframework.core::TransitionController/pageIn()
at com.gaiaframework.core::TransitionController/onTransitionInComplete()
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at com.gaiaframework.assets::PageAsset/onTransitionInComplete()
at com.gaiaframework.assets::PageAsset/transitionIn()
at com.gaiaframework.core::TransitionController/pageIn()
at com.gaiaframework.core::TransitionController/onTransitionInComplete()
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at com.gaiaframework.assets::PageAsset/onTransitionInComplete()
at com.gaiaframework.assets::PageAsset/transitionIn()
at com.gaiaframework.core::TransitionController/pageIn()
at com.gaiaframework.core::TransitionController/transitionIn()
at com.gaiaframework.core::SiteController/onTransitionIn()
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at com.gaiaframework.core::GaiaHQ/beforeTransitionInDone()
at com.gaiaframework.core::GaiaHQ/onEvent()
at com.gaiaframework.core::GaiaHQ/beforeTransitionIn()
at com.gaiaframework.flow::FlowManager$/transitionIn()
at com.gaiaframework.flow::NormalFlow$/afterPreloadDone()
at com.gaiaframework.flow::FlowManager$/afterPreloadDone()
at com.gaiaframework.core::GaiaHQ/afterPreloadDone()
at com.gaiaframework.core::GaiaHQ/onEvent()
at com.gaiaframework.core::GaiaHQ/afterPreload()
at com.gaiaframework.flow::FlowManager$/preloadComplete()
at com.gaiaframework.core::SiteController/preloaderEnterFrame()

---

Test in debug mode or with the debug player. It should tell you a line number.

Ah. Seems to be this line:

Code:

---

column.addChild(newsPost);

---

Column is set here:

Code:

---

var column:DisplayObjectContainer = sectionpage.columns[0];

---

And sectionpage.columns[0] should be newsPage, because that's what we pushed into the new columns array. BUT, I suspect that the newsPage variable you have declared is NOT the the same as sectionpage.newsColumn. If that's the case, then newsColumn would never have been instantiated and that error would make sense.

Try removing the newsColumn variable, and using sectionpage.newsColumn where we previously just had newsColumn (should just be the push line).

you are good! that worked.

So now i've populated the XML file with 8 entries we have 3 columns sitting side by side.. great! Only thing is the 2 columns are sitting about a 3rd lower than the first column.. despite me putting a Y postiion in here..

Actionscript Code:

column = new Sprite();
                    column.x = nextX;
                    column.y = 0;

nevermind, just made it -115 and it lined up nicely.

So i've worked out how to target the columns and slide them by using :

Code:

---

TweenLite.to(sectionpage.columns[0], 5, {x:500,ease:Linear.easeIn});

---

What's the best way do you think to get the scrolling buttons working ?

The only way i think i can do it (with my knowledge) is by using some counter variables. So at the start you have a Right button, and the counter is 0. If counter is 0 then move column[0] to x and column[1] to view, change counter to 1, reveal Left button.

Seems long winded..

More or less something like that. I don't know what would work best for you in that regard.

Ok - Is there a way to target all of the columns as one in its current state, or will i need to create another container?

At the moment, the columns are added to the sectionpage. You could manipulate the section page, but that may do stuff you don't want. You could iterate through the columns array and do stuff to each column. But if you wanted to put them in a container just for them, that would let you move and mask them all together.

ok... thanks ever so much for all your help. there's been a lot to take in but i think i've learnt a lot from this.

I'm trying to put the columns into a container to enable me to mask them but im struggling to get the mask to work. Could you tell me if i've correctly put the columns in a container here?

Actionscript Code:

public class NewsPage extends AbstractPage
    {

        // Declare instances on stage in NewsPage.fla
        public var bgbutton:SimpleButton;
        public var closebutton:SimpleButton;
        
        public var sectionpage:MovieClip;
        public var containerMC:MovieClip;
        public var newsMask:MovieClip;
        
        public var arrowLeft:SimpleButton;
        public var arrowRight:SimpleButton;

        public var textTitle:TextField;
        public var textBody:TextField;

        public var myXML:XML;

        public function NewsPage()
        {
            super();
        }
        override public function transitionIn():void
        {
            super.transitionIn();
            gotoAndPlay("in");
            sectionpage.containerMC.mask = newsMask;
            sectionpage.textBody.styleSheet = IStyleSheet(Gaia.api.getPage("index").assets.stylesheet).style;

            var myXML:XML = IXml(assets.newsContent).xml;

            sectionpage.textTitle.htmlText = myXML.sectionContent.title;
            sectionpage.textBody.htmlText = myXML.sectionContent.body;


            var dateFormat:TextFormat = new TextFormat();
            dateFormat.color = 0xFFFFFF;
            dateFormat.font = Gaia.api.getFontName("DIN");
            dateFormat.size = 18;

            var posts:Array = [];
            var lastY:Number = 0;
            
            sectionpage.columns = [];
            sectionpage.columns.push(sectionpage.newsColumn);
            
            var columnHeight:Number = 330;

            var column:DisplayObjectContainer = sectionpage.columns[0];

            for (var i:int = 0; i<myXML.news.length(); i++)
            {
                var date:String = myXML.news.newsDate[i];
                var title:String = myXML.news.newsTitle[i];
                var body:String = myXML.news.newsBody[i];
                var newsPost:NewsPost = new NewsPost(date,title,body,dateFormat);
                posts.push(newsPost);

                if (lastY + newsPost.height > columnHeight)
                {
                    var nextX:Number = column.x + column.width;
                    column = new Sprite();
                    //column.x = nextX;
                    column.x = 300;
                    sectionpage.columns.push(column);
                    sectionpage.containerMC.addChild(column);
                    column.y = -115;
                    lastY = 0;
                }

                column.addChild(newsPost);

                //sectionpage.newsColumn.addChild(newsPost);
                newsPost.y = lastY;
                lastY +=  newsPost.height + 40;

            }

Many thanks.

After the first column, that looks right. But since you're putting sectionpage.newsColumn as the first column, it is still outside the containerMC.

Is newsColumn needed? can the first column be created like the other columns are?

No, it isn't needed, and yes it can be created just like the others. The only reason it was used in the first place was because I thought you had placed it manually and wanted to fill it first.

To generate the column like the others, create a new Sprite and push that into the columns array. Also put the sprite on the display list.

Code:

---

var column:DisplayObjectContainer = new Sprite();
sectionpage.containerMC.addChild(column);
sectionpage.columns = [];
sectionpage.columns.push(column);
//...

---

Hmm.

I'm getting TypeError: Error #1010: A term is undefined and has no properties.

debugger won't give me a line number..

This is my code now..

Actionscript Code:

override public function transitionIn():void
        {
            super.transitionIn();
            gotoAndPlay("in");
            // Prevent main nav from being clicked in background
            bgbutton.useHandCursor = false;

            //Opening page animation
            sectionpage.scaleX = 0.2;
            sectionpage.scaleY = 0.2;
            newsMask.scaleX = 0.2;
            newsMask.scaleY = 0.2;
            
            TweenLite.to(sectionpage, 0.2, {x:388,y:382,scaleX:1,scaleY:1,ease:Linear.easeOut});
            TweenLite.to(newsMask, 0.2, {x:388,y:382,scaleX:1,scaleY:1,ease:Linear.easeOut});

            //CLOSE BUTTON;
            sectionpage.closebutton.addEventListener(MouseEvent.CLICK, closeFunction);

            function closeFunction(evt:MouseEvent):void
            {
                TweenLite.to(sectionpage, 0.2, {alpha:0,ease:Linear.easeIn});
                Gaia.api.goto(Pages.HOME);
            }
            
            //sectionpage.arrowLeft.cacheAsBitmap = true;
            newsMask.cacheAsBitmap = true;
            sectionpage.containerMC.cacheAsBitmap = true;
            sectionpage.containerMC.mask = newsMask;
            
            
            sectionpage.textBody.styleSheet = IStyleSheet(Gaia.api.getPage("index").assets.stylesheet).style;

            var myXML:XML = IXml(assets.newsContent).xml;

            sectionpage.textTitle.htmlText = myXML.sectionContent.title;
            sectionpage.textBody.htmlText = myXML.sectionContent.body;


            var dateFormat:TextFormat = new TextFormat();
            dateFormat.color = 0xFFFFFF;
            dateFormat.font = Gaia.api.getFontName("DIN");
            dateFormat.size = 18;
            
            
            

            //sectionpage.containerMC.columns = [];
            //sectionpage.containerMC.columns.push(sectionpage.containerMC.newsColumn);
            var posts:Array = [];
            var lastY:Number = 0;
            
            var columnHeight:Number = 330;

            //var column:DisplayObjectContainer = sectionpage.containerMC.columns[0];
            var column:DisplayObjectContainer = new Sprite();

            sectionpage.containerMC.addChild(column);
            sectionpage.columns = [];
            sectionpage.columns.push(column);
            
            for (var i:int = 0; i<myXML.news.length(); i++)
            {
                var date:String = myXML.news.newsDate[i];
                var title:String = myXML.news.newsTitle[i];
                var body:String = myXML.news.newsBody[i];
                var newsPost:NewsPost = new NewsPost(date,title,body,dateFormat);
                posts.push(newsPost);

                if (lastY + newsPost.height > columnHeight)
                {
                    var nextX:Number = column.x + column.width;
                    column = new MovieClip();
                    //column.x = nextX;
                    column.x = 600;
                    sectionpage.columns.push(column);
                    sectionpage.containerMC.addChild(column);
                    column.y = 0;
                    lastY = 0;
                }

                column.addChild(newsPost);

                //sectionpage.newsColumn.addChild(newsPost);
                newsPost.y = lastY;
                lastY +=  newsPost.height + 40;

            }
            
            // Counters to help determine column position
            var activeCol:Number = 0;
            var nextCol:Number = 1;
            var prevCol:Number = -1;
            var totalPosts:Number = sectionpage.containerMC.columns.length-1;
            
            
            sectionpage.arrowLeft.alpha=0;
            sectionpage.arrowLeft.addEventListener(MouseEvent.CLICK, scrollLeft);
            sectionpage.arrowRight.addEventListener(MouseEvent.CLICK, scrollRight);
            
            function arrowLOFF():void{sectionpage.arrowLeft.visible=false;}
            function arrowROFF():void{sectionpage.arrowRight.visible=false;}
            
            function scrollLeft(evt:MouseEvent):void
            {
                TweenLite.to(sectionpage.containerMC.columns[activeCol], 0.25, {x:600,ease:Linear.easeOut});
                TweenLite.to(sectionpage.containerMC.columns[prevCol], 0.25, {x:0,ease:Linear.easeOut});
                activeCol--;
                nextCol--;
                prevCol--;
                
                if (activeCol == 0)
                {
                    sectionpage.arrowLeft.removeEventListener(MouseEvent.CLICK, scrollLeft);
                    TweenLite.to(sectionpage.arrowLeft, 0.25, {alpha:0,onComplete:arrowLOFF});
                    
                }
                
                if (activeCol == totalPosts-1)
                {
                    sectionpage.arrowRight.addEventListener(MouseEvent.CLICK, scrollRight);
                    sectionpage.arrowRight.visible=true;
                    TweenLite.to(sectionpage.arrowRight, 0.25, {alpha:1});
                    
                }
            }

            function scrollRight(evt:MouseEvent):void
            {
                TweenLite.to(sectionpage.containerMC.columns[activeCol], 0.25, {x:-600,ease:Linear.easeOut});
                TweenLite.to(sectionpage.containerMC.columns[nextCol], 0.25, {x:0,ease:Linear.easeOut});
                
                activeCol++;
                nextCol++;
                prevCol++;
                
                if (activeCol == totalPosts)
                {
                    sectionpage.arrowRight.removeEventListener(MouseEvent.CLICK, scrollRight);
                    TweenLite.to(sectionpage.arrowRight, 0.25, {alpha:0,onComplete:arrowROFF});
                };
                if (activeCol == 1)
                {
                    sectionpage.arrowLeft.addEventListener(MouseEvent.CLICK, scrollLeft);
                    sectionpage.arrowLeft.visible=true;
                    TweenLite.to(sectionpage.arrowLeft, 0.25, {alpha:1,ease:Linear.easeOut});
                }
            }

Sorry, I don't see the error. If you can narrow it to the line, that would help.

I think it might be something in this area as if i comment it out the error doesn't come up:

Actionscript Code:

sectionpage.arrowLeft.alpha=0;
            sectionpage.arrowLeft.addEventListener(MouseEvent.CLICK, scrollLeft);
            sectionpage.arrowRight.addEventListener(MouseEvent.CLICK, scrollRight);
            
            function arrowLOFF():void{sectionpage.arrowLeft.visible=false;}
            function arrowROFF():void{sectionpage.arrowRight.visible=false;}
            
            function scrollLeft(evt:MouseEvent):void
            {
                TweenLite.to(sectionpage.containerMC.columns[activeCol], 0.25, {x:600,ease:Linear.easeOut});
                TweenLite.to(sectionpage.containerMC.columns[prevCol], 0.25, {x:0,ease:Linear.easeOut});
                activeCol--;
                nextCol--;
                prevCol--;
                
                if (activeCol == 0)
                {
                    sectionpage.arrowLeft.removeEventListener(MouseEvent.CLICK, scrollLeft);
                    TweenLite.to(sectionpage.arrowLeft, 0.25, {alpha:0,onComplete:arrowLOFF});
                    
                }
                
                if (activeCol == totalPosts-1)
                {
                    sectionpage.arrowRight.addEventListener(MouseEvent.CLICK, scrollRight);
                    sectionpage.arrowRight.visible=true;
                    TweenLite.to(sectionpage.arrowRight, 0.25, {alpha:1});
                    
                }
            }

            function scrollRight(evt:MouseEvent):void
            {
                TweenLite.to(sectionpage.containerMC.columns[activeCol], 0.25, {x:-600,ease:Linear.easeOut});
                TweenLite.to(sectionpage.containerMC.columns[nextCol], 0.25, {x:0,ease:Linear.easeOut});
                
                activeCol++;
                nextCol++;
                prevCol++;
                
                if (activeCol == totalPosts)
                {
                    sectionpage.arrowRight.removeEventListener(MouseEvent.CLICK, scrollRight);
                    TweenLite.to(sectionpage.arrowRight, 0.25, {alpha:0,onComplete:arrowROFF});
                };
                if (activeCol == 1)
                {
                    sectionpage.arrowLeft.addEventListener(MouseEvent.CLICK, scrollLeft);
                    sectionpage.arrowLeft.visible=true;
                    TweenLite.to(sectionpage.arrowLeft, 0.25, {alpha:1,ease:Linear.easeOut});
                }
            }

Not seeing it there either, unless sectionpage.arrowLeft or sectionpage.arrowRight is null.

I think its this line:

Actionscript Code:

var totalPosts:Number = sectionpage.containerMC.columns.length-1;

If i remove the containerMC from that line, it works... but then when i click the arrows, it gives me this error:

Quote:

---

TypeError: Error #1010: A term is undefined and has no properties.
at Function/<anonymous>()

---

Got it..

Removed containerMC from these lines too and that worked.

Actionscript Code:

function scrollRight(evt:MouseEvent):void
            {
                TweenLite.to(sectionpage.containerMC.columns[activeCol], 0.25, {x:-600,ease:Linear.easeOut});
                TweenLite.to(sectionpage.containerMC.columns[nextCol], 0.25, {x:0,ease:Linear.easeOut});
                
                activeCol++;
                nextCol++;
                prevCol++;

Does that make sense or does that highlight that something is wrong?

It makes sense. We added columns as a property of sectionpage, not of containerMC. Even though the columns are on the containerMC's display.