___________________________________________________________________
LAYER 2 FRAME 2
/*
This is the main body of code. If you are looking to make smaller changes check out the configuration
section (frame 2 on layer * configuration *). The code below is very well commented so should be a
good learning resource.
*/
system.useCodepage = true;
// import needed (default) classes
import mx.transitions.Tween;
import mx.transitions.easing.*;
import flash.display.BitmapData;
import flash.geom.Rectangle;
import flash.geom.Point;
// used to stop the caching of xml
#include "com/cache/skipCache.as"
// create empty mc to build everything in.
scope = this.createEmptyMovieClip("scope", 1);
scope._x = mainX;
scope._y = mainY;
// create new xml object and load news.xml
var news:XML = new XML();
news.ignoreWhite = true;
// once the xml is loaded fire the buildPosts function
news.onLoad = buildposts;
news.load("news.xml"+getSkipCacheString());
// counter for which post we are on
postNum = 1;
// main function to extract the xml data and build our news blog
function buildposts(success:Boolean):Void {
if (success) {
// start of post code //
// get everything between the NEWS tags in news.xml
var allXML:XMLNode = news.firstChild;
// get the total number of posts
postTotal = allXML.childNodes.length;
// looks like a good time to get our main author
mainAuthor = news.childNodes[0].attributes.mainAuthor;
// lets build a container for all of our posts
allPosts = scope.createEmptyMovieClip("allPosts", 2);
// run a for loop to create as many posts as our postTotal var
var i:Number;
for (i=0; i<postTotal; i++) {
// attach a new post mc for each of our posts - this is post in the library
var post:MovieClip = allPosts.attachMovie("post", "post"+i, i+100);
/* highligher is a mc in post mc, which we use to highlight the post on mouseover. We hide it now
by setting it alpha to 0 and scale it to match the post background box */
post.highlighter._alpha = 0;
post.highlighter._height = post.bg._height;
post.highlighter._width = post.bg._width;
// set highlight color
highlightColor = new Color(post.highlighter);
highlightColor.setRGB(bgHighlight);
// set post background color
bgColor = new Color(post.bg);
bgColor.setRGB(bgNormal);
// set summary text color
post.description.t.textColor = sumNormal;
// enable the description for html
post.description.t.html = true;
post.description.t.autoSize = true;
// extract each tag from them xml and place into the text fields inside the post mc
post.date = allXML.childNodes[i].childNodes[0].firstChild.nodeValue;
post.author = allXML.childNodes[i].childNodes[1].firstChild.nodeValue;
post.headline = allXML.childNodes[i].childNodes[3].firstChild.nodeValue;
// assign unique ID to each post, used in large post counter
post.num = postNum++;
// main Author can be used if our new blog only has one author
if (useMainAuthor == true) {
// We combine the posts date and author with a simple string
post.meta.t.text = metaAppend+post.date+" by "+mainAuthor;
} else {
// We combine the posts date and author with a simple string
post.meta.t.text = metaAppend+post.date+" by "+post.author;
}
// fill in title
post.title.t.autoSize = true;
post.title.t.text = post.headline;
// load our news style sheet
newsCSS = new TextField.StyleSheet();
cssURL = "css/news.css";
newsCSS.load(cssURL);
//define onLoad handler
newsCSS.onLoad = function(success) {
if (success) {
// apply style sheet to description text
post.description.t.styleSheet = newsCSS;
}
};
// create summary
// get full desciption text
post.des = allXML.childNodes[i].childNodes[4].firstChild.nodeValue;
// only make a summary if our description is largeer than the value of sumLength
if (post.des.length>sumLength) {
// grab the first x amount of characters according to sumLength
sum = post.des.substring(0, sumLength);
// get last known space
lastSpace = sum.lastIndexOf(" ");
// put it all together and we get a summary which always ends on a full word.
post.description.t.htmlText = sum.substring(0, lastSpace)+sumApend;
} else {
/* description is shorter than sumLength so lets just put in the full description and hide
the more button as its not needed */
post.description.t.htmlText = post.des;
if (alwaysShowMore == false) {
post.moreBtn._visible = false;
}
}
// end of summary code
// thumbnail
// get which image to use from the xml
post.thumb = allXML.childNodes[i].childNodes[2].firstChild.nodeValue;
// container to put our new bitmap into
thumbBitmap = post.createEmptyMovieClip("thumbBitmap", i+1000);
// contaner to put our selection from thumbBitmap
thumbnail = post.createEmptyMovieClip("thumbnail", i+2000);
thumbnail._x = thumbX;
thumbnail._y = thumbY;
// call our preloader function which also contains the code that generates the thumb
thumbLoader.loadClip(imageDir+"/"+post.thumb, thumbBitmap);
// attach and postion our thumbnail preloader
var preloader:MovieClip = post.attachMovie("preloader", "preloader", i+3000);
preloader._x = thumbPreloaderX;
preloader._y = thumbPreloaderY;
// rollovers
post.bg.onRollOver = function() {
// hide hand cursor as this is not a link
this.useHandCursor = false;
// call highlight funtion and pass selected post
highlightPost(this._parent);
};
post.bg.onRollOut = function() {
// remove highlight
normalPost(this._parent);
};
// set normal state of moreBtn
moreNormal = new Color(post.moreBtn.bg);
moreNormal.setRGB(moreBtnNormal);
// more rollover effects
post.moreBtn.onRollOver = function() {
// call highlight funtion and pass selected post
highlightPost(this._parent);
};
post.moreBtn.onRollOut = function() {
// remove highlight
normalPost(this._parent);
};
//
post.moreBtn.onRelease = function() {
buildlargePost(this._parent);
};
/* postion each post underneath the one before it. The postSpacing var is used
to provide easy control of spacing between each post */
post._y = allPosts['post'+(i-1)]._y+allPosts['post'+(i-1)]._height+postSpacing;
// intro - show only the number of items set in noPosts
if (i<noPosts) {
// only fade in we want to run the intro
if (runIntro == true) {
// fade in sequentially
fade(post, 0, 100, introSpeed+i*0.6, Strong.easeInOut);
}
} else {
// hide other itmes
post._alpha = 0;
}
}
// end of post code //
// navigation
// attach nav from libary
nav = scope.attachMovie("nav", "nav", 4);
/* this is switch statement which is similar to an if statement but tends to perform a bit better and
is easy to read. the var navPos is used to decide where to put our nav */
switch (navPos) {
case "bottom" :
nav._y = (post.bg._height*noPosts)+(postSpacing*noPosts)+navPadding;
if (runIntro == true) {
fade(nav, 0, 100, introSpeed+noPosts*0.6, Strong.easeInOut);
}
break;
case "top" :
nav._y = -(navPadding+(nav._height/2));
scope._y = mainY+(navPadding+(nav._height/2));
if (runIntro == true) {
fade(nav, 0, 100, introSpeed*0.6, Strong.easeInOut);
}
break;
case "manual" :
nav.removeMovieClip();
var nav:MovieClip = _root.attachMovie("nav", "nav", 4);
nav._y = navY;
nav._x = navX;
if (runIntro == true) {
fade(nav, 0, 100, introSpeed*0.6, Strong.easeInOut);
}
break;
}
/* the navigation is divided into two parts the all posts nav and the indvidual post nav
(with the back button) We mask off half the nav so we can slide the other half up on clicking
off a read more button */
navMask = scope.attachMovie("postsMask", "navMask", 10);
navMask._y = nav._y;
navMask._x = nav._x;
navMask._width = nav.postNav.bg._width;
navMask._height = nav.postNav.bg._height;
nav.setMask(navMask);
// counter text eg. Showing 1-3 of 11 posts. - we use some simple string manipulation
if (postTotal<noPosts) {
nav.postNav.counter.t.text = counterAppend+" 1-"+postTotal+" of "+postTotal+" "+counterEnd;
nav.postNav.olderBtn.enabled = false;
nav.postNav.olderBtn._alpha = 30;
} else {
nav.postNav.counter.t.text = counterAppend+" 1-"+noPosts+" of "+postTotal+" "+counterEnd;
}
// nav buttons
// disable newer button as it is not needed to start with
nav.postNav.newerBtn._alpha = 30;
nav.postNav.newerBtn.enabled = false;
// hide highlighter state on newer, older and back buttons
nav.postNav.newerBtn.highlighter._alpha = nav.postNav.olderBtn.highlighter._alpha=0;
nav.largeNav.backBtn.highlighter._alpha = 0;
// older news button
// id is used to count which post we are on
var id:Number = 0;
nav.postNav.olderBtn.onRelease = function():Void {
if (id>=0 && id<postTotal-noPosts) {
// lets enable the newer button as the must be new posts now
nav.postNav.newerBtn._alpha = 100;
nav.postNav.newerBtn.enabled = true;
// lets work out where we want allPosts to move too
endPos = ((id+1)*post.bg._height)+(postSpacing*(id+1));
// slide all posts up by the height of one post plus spacing
slide(allPosts, allPosts._y, -endPos, postSlideSpeed, "_y", Strong.easeInOut);
// fade out the top posts - we do this by using our id counter var
fade(allPosts['post'+id], 100, 0, fadeOutOldPost, Strong.easeOut);
// var used to determine which post to fade in
var newPost:Number = id+noPosts;
// fade in new post
fade(allPosts['post'+newPost], 0, 100, fadeInNewPost, Strong.easeInOut);
// we have moved down a post so let update the current ID
id++;
}
// if there are no more older posts disable the button
if (id == postTotal-noPosts) {
this.enabled = false;
this._alpha = 30;
fade(this.highlighter, this.highlighter._alpha, 0, highlightSpeed, Strong.easeOut);
}
// update counter text
// get first post
firstPost = (id+1);
// get last post
lastPost = id+noPosts;
// put it together in a string
nav.postNav.counter.t.text = counterAppend+" "+firstPost+"-"+lastPost+" of "+postTotal+" "+counterEnd;
};
nav.postNav.newerBtn.onRelease = function():Void {
if (id<postTotal && id>0) {
// lets enable the older button as there must be older posts now
nav.postNav.olderBtn._alpha = 100;
nav.postNav.olderBtn.enabled = true;
// vars used to determine whcih posts to slide and fade
var newPost:Number = id-1;
var oldPost:Number = id+noPosts-1;
// lets work out where we want all post to move too
endPos = (id-1)*(post.bg._height+postSpacing);
// slide allPosts up to make room for new post
slide(allPosts, allPosts._y, -endPos, postSlideSpeed, "_y", Strong.easeInOut);
// fade in new post
fade(allPosts['post'+newPost], 0, 100, fadeInNewPost, Strong.easeInOut);
// fade out old post
fade(allPosts['post'+oldPost], 100, 0, fadeOutOldPost, Strong.easeOut);
// we have moved up a post so let update the current ID
id--;
}
// no more new post so lets disable this button
if (id == 0) {
this.enabled = false;
this._alpha = 30;
fade(this.highlighter, this.highlighter._alpha, 0, highlightSpeed, Strong.easeOut);
}
// update counter text
// get first post
firstPost = (id+1);
// get last post
lastPost = id+noPosts;
// put it together with our counter vars inside the counter text field
nav.postNav.counter.t.text = counterAppend+" "+firstPost+"-"+lastPost+" of "+postTotal+" "+counterEnd;
};
// rollover/out events
nav.postNav.newerBtn.onRollOver = nav.postNav.olderBtn.onRollOver=function ():Void {
// set highlighter to user defined color, highlighter is an mc inside newer and older buttons
btnColor = new Color(this.highlighter);
btnColor.setRGB(navHighlight);
// fade in highlighter
fade(this.highlighter, this.highlighter._alpha, 100, highlightSpeed, Strong.easeOut);
};
nav.postNav.newerBtn.onRollOut = nav.postNav.olderBtn.onRollOut=nav.postNav.olderBtn.onRollOut=function ():Void {
fade(this.highlighter, this.highlighter._alpha, 0, highlightSpeed, Strong.easeOut);
};
// end of nav code
// all posts mask
postsMask = scope.attachMovie("postsMask", "postsMask", 5);
postsMask._y = allPosts._y;
postsMask._x = allPosts._x;
// scale to match the number of posts we want to be visible at a time
postsMask._height = (post.bg._height*noPosts)+(postSpacing*noPosts);
postsMask._width = post._width;
// and apply as a mask
allPosts.setMask(postsMask);
} else {
trace("XML NOT LOADED");
}
}
// thumb builder and preloader
thumbLoader = new MovieClipLoader();
thumbLoader.addListener(this);
thumbLoader.onLoadInit = function(targetMC:MovieClip) {
if (thumbType == "slice") {
targetMC._xscale = thumbOffsetX;
targetMC._yscale = thumbOffsetY;
// lets create a new bitmap object from our image we defined in the xml
var newBitmap:BitmapData = new BitmapData(targetMC._width, targetMC._height, true, 0x000000);
// next put the newly created bitmap into our container
newBitmap.draw(targetMC._parent.thumbBitmap);
// create new selection
var select:BitmapData = new BitmapData(targetMC._parent.thumbBitmap._width, targetMC._parent.thumbBitmap._height, true, 0x00000000);
// define which area of our bitmap we are going to copy
if (thumbSlicePoint == "center") {
select.copyPixels(newBitmap, new Rectangle(targetMC._width/2, targetMC._height/2, thumbWidth, thumbHeight), new Point(0, 0));
} else {
select.copyPixels(newBitmap, new Rectangle(targetMC._width-thumbWidth, targetMC._height-thumbHeight, thumbWidth, thumbHeight), new Point(0, 0));
}
// attach our copied area into our thumbnail container
targetMC._parent.thumbnail.attachBitmap(select, 0);
// hide the original bitmap
targetMC._parent.thumbBitmap._visible = false;
// hide the thumbnail so we can fade it in once its loaded
targetMC._parent.thumbnail._alpha = 0;
} else {
var bitmap:BitmapData = new BitmapData(targetMC._width, targetMC._height, true);
targetMC.attachBitmap(bitmap, targetMC.getNextHighestDepth(), "auto", true);
bitmap.draw(targetMC);
targetMC._width = thumbWidth;
targetMC._height = thumbHeight;
targetMC._x = thumbX;
targetMC._y = thumbY;
}
};
thumbLoader.onLoadProgress = function(targetMC:MovieClip, loaded:Number, total:Number) {
/* if you want to display a percentage during loading uncomment the line below */
//targetMC._parent.preloader.p.text = Math.floor(loaded/total*100)+"%";
};
thumbLoader.onLoadComplete = function(targetMC:MovieClip, loaded:Number, total:Number) {
// hide preloader
targetMC._parent.preloader._alpha = 0;
// fade in thumbnail
fade(targetMC._parent.thumbnail, 0, 100, thumbFadeSpeed, Strong.easeOut);
};
// this function builds our large posts which is called from the read more button
buildlargePost = function (targetPost) {
// remove any instances of large post so we can create a new one each time
removeMovieClip(scope.largePost);
// slide the nav up to revel large post nav
slide(nav, nav._y, nav._y-nav.postNav.bg._height, slideOutSpeed, "_y", Strong.easeInOut);
// fade and slide out allposts
slide(allPosts, allPosts._x, -postsMask._width*2, slideOutSpeed, "_x", Strong.easeInOut);
fade(allPosts, 100, 0, fadeOutSpeed, Strong.easeOut);
// attach large post from the library
largePost = scope.attachMovie("largePost", "largePost", scope.getNextHighestDepth());
// fade and slide in large post
slide(largePost, postsMask._width*2, 0, slideInSpeed, "_x", Strong.easeInOut);
fade(largePost, 0, 100, fadeInSpeed, Strong.easeInOut);
// fill in post
largePost.title.text = targetPost.headline;
// fill in our text fields
largePost.date.text = "Date: "+targetPost.date;
if (useMainAuthor == true) {
// We combine the posts date and author with a simple string
largePost.author.text = "Author: "+mainAuthor;
} else {
// We combine the posts date and author with a simple string
largePost.author.text = "Author: "+targetPost.author;
}
// add the post counter text eg. Showing post 1 of 11
nav.largeNav.counter.text = counterAppend+" post "+targetPost.num+" of "+postTotal;
// create contianer to put our main image into
mainImg = largePost.createEmptyMovieClip("mainImg", 6000);
mainImg._x = mainImgX;
mainImg._y = mainImgY;
// load image in
imgLoader.loadClip(imageDir+"/"+targetPost.thumb, mainImg);
imgPreloader = largePost.attachMovie("preloader", "imgPreloader", 6001);
imgPreloader._x = imgPreloaderX;
imgPreloader._y = imgPreloaderY;
// we need to make a new mask because Flash can`t use the same mask twice! oh dear.
largeMask = scope.attachMovie("postsMask", "largeMask", 5000);
// scale to match the orignal mask
largeMask._height = postsMask._height;
largeMask._width = postsMask._width;
// and apply as a mask
largePost.setMask(largeMask);
// size scroll area to match post list
if (manualScrollSize == false) {
// scale mask and scollbar to it space dictated by the size of the post list
largePost.scrollBar.bar._height = largeMask._height-largePost.scrollBar._y;
largePost.mask._height = largePost.scrollBar.bar._height;
largePost.mask._width = largePost.description._width;
}
// put our html description into its text field
largePost.description.t.autoSize = "left";
largePost.description.t.html = true;
largePost.description.t.htmlText = targetPost.des;
// apply style sheet
largePost.description.t.styleSheet = newsCSS;
// back to all posts button
nav.largeNav.backBtn.onRelease = function() {
// slide nav back
slide(nav, nav._y, nav._y+nav.postNav.bg._height, slideOutSpeed, "_y", Strong.easeInOut);
// fade and slide out large post
slide(largePost, 0, postsMask._width*2, slideOutSpeed, "_x", Strong.easeInOut);
fade(largePost, largePost._alpha, 0, fadeOutSpeed, Strong.easeOut);
// fade and slide in all posts
slide(allPosts, allPosts._x, 0, slideInSpeed, "_x", Strong.easeInOut);
fade(allPosts, allPosts._alpha, 100, fadeInSpeed, Strong.easeInOut);
};
// back button roll effects
nav.largeNav.backBtn.onRollOver = function():Void {
// set highlighter to user defined color, highlighter is an mc inside newer and older buttons
btnColor = new Color(this.highlighter);
btnColor.setRGB(navHighlight);
// fade in highlighter
fade(this.highlighter, this.highlighter._alpha, 100, highlightSpeed, Strong.easeOut);
};
nav.largeNav.backBtn.onRollOut = function():Void {
fade(this.highlighter, this.highlighter._alpha, 0, highlightSpeed, Strong.easeOut);
};
};
// main image preloader
imgLoader = new MovieClipLoader();
imgLoader.addListener(this);
imgLoader.onLoadProgress = function(targetMC:MovieClip, loaded:Number, total:Number) {
// display percentage
largePost.imgPreloader.p.text = Math.floor(loaded/total*100)+"%";
};
imgLoader.onLoadComplete = function(targetMC:MovieClip, loaded:Number, total:Number) {
// hide preloader
largePost.imgPreloader._alpha = 0;
// fade in thumbnail
fade(targetMC, 0, 100, thumbFadeSpeed, Strong.easeOut);
};
// function called on roll over of moreBtn and post bg
function highlightPost(post) {
// fade in highlighter mc
fade(post.highlighter, post.highlighter._alpha, 100, highlightSpeed, Strong.easeOut);
// change description text color
post.description.t.textColor = sumHighlight;
// highlight moreBtn
highlightColor = new Color(post.moreBtn.bg);
highlightColor.setRGB(moreBtnHighlight);
}
// function called on roll out of moreBtn and post bg
function normalPost(post) {
// fade in highlighter mc
fade(post.highlighter, post.highlighter._alpha, 0, removeSpeed, Strong.easeOut);
// change description text color to normal state
post.description.t.textColor = sumNormal;
// remove moreBtn highlight
// change bg color
highlightColor = new Color(post.moreBtn.bg);
highlightColor.setRGB(moreBtnNormal);
}
// resuable tween functions
function fade(who:MovieClip, startvalue:Number, endvalue:Number, fade_speed:Number, ease) {
fader = new Tween(who, "_alpha", ease, startvalue, endvalue, fade_speed, true);
}
function slide(who:MovieClip, startvalue:Number, endvalue:Number, speed:Number, prop:String, ease) {
var slider:Tween = new Tween(who, prop, ease, startvalue, endvalue, speed, true);
}
