Here is the entire pageB code:
stop();
trace("xml")
import com.greensock.*;
import com.greensock.easing.*;
////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////
//thumb scroller////////////////////////////////////////////////////////////////////////
//load xml
var xmlLoader:URLLoader = new URLLoader();
/////Parse XML
var xmlData:XML = new XML();
var xmlPath:String = "loadingAssets/appThumbnails/slideshow_image_scroller_ActiveTuts_mine/app_thmbs_imgs60x90.xml";
xmlLoader.load(new URLRequest(xmlPath));
//trace("loading xml from: " + xmlPath);
xmlLoader.addEventListener(Event.COMPLETE, LoadXML);
function LoadXML(e:Event):void {
//trace("xml load complete");
xmlData = new XML(e.target.data);
//trace(xmlData.image); //we'll see each image xml element listed in the output panel with this xmlList
buildScroller(xmlData.image); //rather than trace the xmlList, we send it to our buildScroller function
}
/////Build Scroller MovieClip to Contain Each Image
var scroller:MovieClip = new MovieClip();
var padding:Number = 5;//creating a var for padding to be used later on in easier calculations
//making the mask+boundaries
scroller.mask = maskRctngl;
var maskBorders:Number = 93;// distance from stage borders 88 px + padding 5 px
this.addChild(scroller);
//scroller.y = scroller.x = padding;//original version//new (after padding var) positions scroller vertically on stage. Makes y and x = to padding distance
scroller.y = 645;//old (before padding var) positions scroller vertically on stage
scroller.x = maskBorders;
var thumbSmall:Number = 1;//setting up scale Tween on rollover
var thumbLarge:Number = 1.05;//setting up scale Tween on rollover
/////
/////Parse XML
//build scroller from xml
function buildScroller(imageList:XMLList):void{
//trace("build Scroller");
//var scroller_x:int=0;
for (var item:uint = 0; item<imageList.length();item++) {
var thisOne:MovieClip = new MovieClip();
//thisOne.img_width=imageList[item].attribute("width");
//outline
var thumbFadeOut:Number = .3;//setting Border Tweens//doesn't work with TweenMax transitions
var thumbFadeIn:Number = .7;//setting Border Tweens//doesn't work with TweenMax transitions
var blackBox:Sprite = new Sprite();
blackBox.graphics.beginFill(0xFFFFFF);
blackBox.graphics.drawRect(-1, -1, 62, 92);//-1,-1 places rectangle 1px left and up.62, 92 draws rectangle 1px wider on all sides of placed image dimenstions of 60x90
blackBox.alpha = thumbFadeOut;//setting Border Tweens
thisOne.addChild(blackBox);
thisOne.blackBox = blackBox;//setting Border Tweens
//scroller_x += thisOne.img_width + 20;
//var currentX = currentImageWidth+spaceBetween;//modified line to adjust variable thumb widths
//thisOne.x = (84 + padding) *item;//original placement//84 is the width of the loaded images and 15 (which was before paddign var) is the padding
thisOne.x = thisOne.myx = (60 + padding) *item;//replaces the line above for scale tweenw roll over calculation. "myx" is a made up term which defines the position. 61 is the width of the thumb
thisOne.itemNum = item;
thisOne.title = imageList[item].attribute("title");
thisOne.link = imageList[item].attribute("url");
thisOne.src = imageList[item].attribute("src");
thisOne.alpha = 0;//makes all thumb images at alpha=0 before they are fully loaded
//trace(thisOne.itemNum, thisOne.title, thisOne.link, thisOne.src);
//Loading and Adding the Images
//image container
var thisThumb:MovieClip = new MovieClip();
//add image
var ldr:Loader = new Loader();
//var url:String = imageList[item].attribute("src");
var urlReq:URLRequest = new URLRequest(thisOne.src);
//trace("loading thumbnail "+item+" into Scroller: " + thisOne.src);//url
ldr.load(urlReq);
//assign event listeners for Loader
ldr.contentLoaderInfo.addEventListener(Event.COMPLETE,completeHandler_AppPopUps);//tells us when the loading is complete
ldr.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, errorHandler_AppPopUps);//tells us if there are any typo errors when the loading is complete
thisThumb.addChild(ldr);
thisOne.addChild(thisThumb);
//create listeners for this thumb
thisOne.buttonMode = true;//makes boxes act as buttons
thisOne.addEventListener(MouseEvent.CLICK, clickScrollerItem_AppPopUps);//makes boxes act as buttons
thisOne.addEventListener(MouseEvent.MOUSE_OVER, overScrollerItem_AppPopUps);//traces the title when the mouse is over the bounding box in the Output Panel
thisOne.addEventListener(MouseEvent.MOUSE_OUT, outScrollerItem_AppPopUps);//traces the title when the mouse is out the bounding box in the Output Panel
//add item
scroller.addChild(thisOne);
}
scroller.addEventListener(Event.ENTER_FRAME, moveScrollerThumbs);//adding movement on mouse position
//trace("termination of build scroller");
}
function clickScrollerItem_AppPopUps(e:MouseEvent):void{
//trace("clicked item " +e.currentTarget.itemNum + " - visit url: " +e.currentTarget.link);//traces the link put in xml file in the Output Panel
//loads BIG SWFs
loader_AppPopUpsLoader.url = MovieClip(e.currentTarget).link;//loads xml assigned SWF into the loader//url corresponds to the url in xml file
loader_AppPopUpsLoader.load(true);//loads xml assigned SWF into the loader
//loader_howToLoader.url = sourceVar;//will work if set up differently, need to make sure that whatever comes after the = is properly set up
//it can be a variable like sourceVar or the link property of a movieclip. as long as the variable/property point to a valid url string, the loader will work.
/////original set up if to open a linked jpg/////
//var urlRequest:URLRequest = new URLRequest(e.currentTarget.link);
//try {
//navigateToURL(urlRequest);
//}
//catch (e:Error) {
// handle error here
//trace(e);
//}
/////original set up if to open a linked jpg/////
}
//scale Up on rollOver
function overScrollerItem_AppPopUps(e:MouseEvent):void{
//trace("over"+e.currentTarget.title);//traces the title when the mouse is over the bounding box in the Output Panel
TweenMax.to(e.currentTarget, .5, { scaleX:thumbLarge, scaleY:thumbLarge, x:e.currentTarget.myx - e.currentTarget.width * Math.abs(thumbSmall - thumbLarge)/2, y: -e.currentTarget.width * Math.abs(thumbSmall - thumbLarge)/2 });
TweenMax.to(e.currentTarget.blackBox, .5,{ autoAlpha:.5 } );//setting Border Tweens, originally { alpha:thumbFadeIn }
TweenMax.to(e.currentTarget, .5, {alpha:1, colorMatrixFilter:{contrast:1, brightness: 1, saturation: 1}});
}
//scale Down on rollOut
function outScrollerItem_AppPopUps(e:MouseEvent):void{
//trace("out"+e.currentTarget.title);//traces the title when the mouse is out the bounding box in the Output Panel
TweenMax.to(e.currentTarget, .5, { scaleX:thumbSmall, scaleY:thumbSmall, x:e.currentTarget.myx, y:0 } );
TweenMax.to(e.currentTarget.blackBox, .5, { autoAlpha:.3} ); //setting Border Tweens, originally { alpha:thumbFadeOut }
TweenMax.to(e.currentTarget, .5, {alpha:.7, colorMatrixFilter:{contrast:1.1, brightness: .7, saturation: .5}});
}
function completeHandler_AppPopUps(e:Event):void{
//trace("thumbnail complete "+e.target.loader.parent.parent.name)//tells us when the loading is complete
Bitmap(e.currentTarget.loader.content).smoothing=true;//makes loaded jpg's with smoothing rendition
//size image into scroller (need only if I will have images at different sizes)
resizeMe(e.target.loader.parent, 60, 90, true, true, false);
TweenMax.to(e.target.loader.parent.parent, .5, {alpha:.7});//makes all thumb images at alpha=.7 after they are fully loaded
//Tweener.addTween(e.target.loader.parent.parent, { alpha:1, time: .5 } );//caurina version
TweenMax.to(e.target.loader.parent.parent, .5, {colorMatrixFilter:{contrast:1.1, brightness: .7, saturation: .5}});//makes all thumb images at brightness:0.5 after they are fully loaded
}
//////////////////////////////////////////////////////////////////////////////////////////////
//The resizing function (need only if I will have images at different sizes)
// parameters
// required: mc = the movieClip to resize
// required: maxW = either the size of the box to resize to, or just the maximum desired width
// optional: maxH = if desired resize area is not a square, the maximum desired height. default is to match to maxW (so if you want to resize to 200x200, just send 200 once, or resizeMe(image, 200);)
// optional: constrainProportions = boolean to determine if you want to constrain proportions or skew image. default true.
// optional: centerHor = centers the displayObject in the maxW area. default true.
// optional: centerVert = centers the displayObject in the maxH area. default true.
function resizeMe(mc:DisplayObject, maxW:Number, maxH:Number=0, constrainProportions:Boolean=true, centerHor:Boolean=true, centerVert:Boolean=true):void{
maxH = maxH == 0 ? maxW : maxH;
mc.width = maxW;
mc.height = maxH;
if (constrainProportions) {
mc.scaleX < mc.scaleY ? mc.scaleY = mc.scaleX : mc.scaleX = mc.scaleY;
}
if (centerHor) {
mc.x = (maxW - mc.width) / 2;
}
if (centerVert){
mc.y = (maxH - mc.height) / 2;
}
}
//The resizing function
////////////////////////
//adding movement on mouse position
var speed:Number;
function moveScrollerThumbs(e:Event):void {
if ( mouseY > scroller.y && mouseY < scroller.y + scroller.height){//vertically over scroller
if (mouseX < stage.stageWidth/2 -maskBorders*2 && mouseX > 0) {//left half of stage explicitly. -padding*2(multiply by 2) gives a "no movement" padding at the center of the stage
speed = -(mouseX - (stage.stageWidth/2 -maskBorders*2)) /8;//8 is the number which controls the speed (which is divided by this number). Higher number = slower speed. -padding*2(multiply by 2) gives a "no movement" padding at the center of the stage
}
else if (mouseX > stage.stageWidth/2 +maskBorders*2 && mouseX < stage.stageWidth) {//right half of stage explicitly. +padding*2(multiply by 2) gives a "no movement" padding at the center of the stage
speed = -(mouseX - (stage.stageWidth/2 +maskBorders*2)) /8;//8 is the number which controls the speed (which is divided by this number). Higher number = slower speed. +padding*2(multiply by 2) gives a "no movement" padding at the center of the stage
}
else{
speed =0;//if in the center area, clear the speed to 0 so we don't have any roll over effect from the last frame
}
scroller.x += speed;
//scroller limits// set to padding (could be any number specified numerically) to compliment an established spacing
if (scroller.x < -scroller.width + stage.stageWidth -maskBorders){//if scroller too far left
scroller.x = -scroller.width + stage.stageWidth -maskBorders;
}
else if (scroller.x > maskBorders){ //if scroller to far right
scroller.x = maskBorders;
}
}
}
//////////////////////////////
function errorHandler_AppPopUps(e:IOErrorEvent):void{
trace("thumbnail error="+e);//tells us if there are any typo errors when the loading is complete
}
///////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////
///arrowLeft/Right_mc//////////////////////////////////////////////////////////////////////////////////////////
var _arrowLeft:MovieClip;
var _arrowRight:MovieClip;
_arrowLeft = this.getChildByName("arrowLeft_mc") as MovieClip;
_arrowRight = this.getChildByName("arrowRight_mc") as MovieClip;
//_arrowLeft.visible = _arrowRight.visible = false;
_arrowLeft.alpha = _arrowRight.alpha = 0.2;
//_arrowLeft.visible = _arrowRight.visible = true;
_arrowLeft.addEventListener(MouseEvent.ROLL_OVER, _rollOverArrowHandler);
_arrowLeft.addEventListener(MouseEvent.ROLL_OUT, _rollOutArrowHandler);
_arrowRight.addEventListener(MouseEvent.ROLL_OVER, _rollOverArrowHandler);
_arrowRight.addEventListener(MouseEvent.ROLL_OUT, _rollOutArrowHandler);
function _rollOverArrowHandler(event:Event):void {
TweenLite.to(event.currentTarget, 0.5, {alpha:1});
TweenLite.to(event.currentTarget, 0.5, {glowFilter:{color:0xffffff, alpha:1, blurX:15, blurY:15}});
}
function _rollOutArrowHandler(event:Event):void {
TweenLite.to(event.currentTarget, 0.5, {alpha:.2});
TweenLite.to(event.currentTarget, 0.5, {glowFilter:{remove:true}});
}
///////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////
///loader and button///////////////////////////////////////////////////////////////////////////////////////////
//import com.greensock.*;
//import com.greensock.easing.*;
import com.greensock.loading.*;
import com.greensock.events.LoaderEvent;
import com.greensock.loading.display.*;
import flash.events.MouseEvent;
///////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////
//this hides the background in the MC container, allowing it to be present on the working screen but not live
holderMC_AppPopUps.holderMC_applicationsBckgrnd.visible = false;
TweenMax.to(progressBar_AppPopUpsLoader_mc, 0, {blurFilter:{blurX:20, blurY:11}});
//makes sure that none of the barPopUp_mc is showing
progressBar_AppPopUpsLoader_mc.gradientbar_appLoader_mcPopUp_mc.scaleX = 0;
///////////////////////////////////////////////////////////////////////////////////////////////////////////////
//sourceVar has to be specified before the loader set up
var sourceVar_AppPopUpsLoader:String;
//sourceVar_AppPopUpsLoader = "images/app_images/PnP/BubbleOasis.swf";//do not specify this if loading from multiple buttons from other pages
////////////////////////////////////////////////////////
var loader_AppPopUpsLoader:SWFLoader;
if (loader_AppPopUpsLoader){
if(loader_AppPopUpsLoader.content){
loader_AppPopUpsLoader.unload();
}
}
loader_AppPopUpsLoader = new SWFLoader(sourceVar_AppPopUpsLoader,
{
estimatedBytes:1500000,
container:holderMC_AppPopUps,// more convinient and easier to manage if to place the LoaderMax into an empty mc (holderMovieClip)
// if not will work as well. Then the line container:holderMovieClip, has to be replaced with container:this,
// can be any size, can not be scaled as it distorts the content
onProgress:progressHandler_AppPopUpsLoader,
onComplete:completeHandler_AppPopUpsLoader,
centerRegistration:true,
//x:-260, y:-320, //no need for this is if used: centerRegistration:true,
alpha:1,
scaleMode:"none"
//scaleX:0, scaleY:0,
//vAlign:"top",
//width:825,
//height:575,//scales proportionally but I need to cut off the edges
//crop:true,
//autoPlay:false
});
function progressHandler_AppPopUpsLoader(event:LoaderEvent):void{
progressBar_AppPopUpsLoader_mc.gradientbar_appLoader_mcPopUp_mc.scaleX = loader_AppPopUpsLoader.progress;
}
function completeHandler_AppPopUpsLoader(event:LoaderEvent):void{
var loaded_AppPopUpsLoader:ContentDisplay = event.target.content;
//TweenMax.to(loaded_appLoader, 1.5, {alpha:1, scaleX:1, scaleY:1});//only need this line if corresponding values are changed in SWF loader constructor
TweenMax.to(progressBar_AppPopUpsLoader_mc, 1.5, {alpha:0, scaleX:0.25, scaleY:0.25});
holderMC_AppPopUps.visible = true;
}
loader_AppPopUpsLoader.load(true);
//removing the scroller with the clcik////////////////////////////////////////////////////////////////////////////////////////////
//first.setting up the function which will remove the scroller and stop it from consuming resources//
/*function removeScrollerFF():void{
if(scroller){//prevents a problem if you were to use the same navigation code after the scroller is removed
scroller.removeEventListener(Event.ENTER_FRAME, moveScrollerThumbs);
removeChild(scroller);
scroller=null; // if, when you want to re-create your scroller, it fails to be re-created, remove this line of code.
}
}
///second. add listeners for navigation objects, i.e a button which will remove the scroller
testButton_mc.addEventListener(MouseEvent.CLICK, navF);
//third.create the listener functions for navigation objects
function navF(e:MouseEvent):void{
//in each listener function call the function that removes the scroller
removeScrollerFF();
//trace("you tried to delete the scroller");
//add the navigation code
gotoAndPlay("howto");
}
*/
/////////////////////////
testButton_mc.buttonMode = true;
testButton_mc.addEventListener(MouseEvent.CLICK, gotoFrame2);
function gotoFrame2(e:MouseEvent): void{
gotoAndPlay("prdctsPopUps");
//trace("you clicked testDelete_mc");
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/*dummy_mc.visible = false;
dummy_mc.addEventListener(Event.REMOVED_FROM_STAGE, removeScrollerF);
function removeScrollerF(e:Event=null):void{
if(scroller){
trace(scroller);
if(scroller.stage){
trace(scroller.stage);
trace(scroller.parent);
scroller.parent.removeChild(scroller);
}
}
}*/
////////////////////////////////////////////
/*dummy2_mc.visible = false;
function removeScrollerF2(e:Event=null):void{
if(scroller){//prevents a problem if you were to use the same navigation code after the scroller is removed
scroller.removeEventListener(Event.ENTER_FRAME, moveScrollerThumbs);
removeChild(scroller);
scroller=null; // if, when you want to re-create your scroller, it fails to be re-created, remove this line of code.
}
trace("dummy2_mc works on null");
}
dummy2_mc.addEventListener(Event.REMOVED_FROM_STAGE,removeScrollerF2);*/
1 Correct answer
43
Replies
AdChoices