View Full Version : Help with this AddChild / RemoveChild solution $$$

04-21-2012, 10:28 PM
I'm tired of trying to figure this one out. I'll give a donation to whomever can help me come up with a working solution.

Basically .. I have 29 movieclips. Almost like magazine pages.

Each MovieClip has 2 buttons on them.. left and right.

When you tap that button .. the page slides to the next page.

I have a solution working .. but I am creating a movie clip and then adding all 29 pages in a long strip. Everytime you hit next or back .. the entire strip is tweening 1024 or -1024 pixels.. depending if you hit Next or Back.

What I want to do .. is have a solution that only uses the movie clips that are needed. So I would addChild 3 at a time.... the one visible to the stage.. the one thats offstage to the left and the one thats offstage to the right.

When the tween happens... it would have to adjust accordingly by removing unneeded clips .. setting them to null.

Can someone give me a hand with this one ?

04-21-2012, 10:56 PM
Exactly what do you need from us?

04-21-2012, 10:58 PM
All you want is to have an array/vector of pages (objects), and listener for clicking, that would create/destroy objects in array and changing that one that is showing? It seems like you just didn't know from where to start a design, but it should be pretty simple now.

Better donate money to charity ;) .

04-21-2012, 11:06 PM
I want someone to write the solution .. lol ;)

I'll gladly donate to charity or a developers pocket ;)

04-21-2012, 11:15 PM
The key with this is that I need it to take into account the Memory on Mobile. So it's gotta be lightweight. Kill whats not needed from memory.

04-26-2012, 07:08 AM
You should tak a look at CasaLib (casalib.org) for that as it has image loaders and memory management built in. That should help work around the mobile memory restrictions which are severe and different on different devices too.

04-26-2012, 02:18 PM
Casalib looks interesting. Not sure if its what I need though. I'm not loading a bunch of images.. I'm loading a bunch of movieclips from the library.

04-28-2012, 12:59 PM
firstly, mobiles have small screens so making something that big is rather stupid if only a portion of it will wind up being viewed on the mobile screen. but hey maybe im missing something...

but the purpose of the topic was to help not critique. so with that said, try something like this. it aint tested but it should be close to what you want:

right click movieclip in library with pages inside of it.
click on linkage. press export for actionscript.
and now the text in class should be highlighted. type in 'Page'
var page:Page;
var tween:Tween;
var pageCon:Array=[]; // contain a reference to available pages
var currentPage:Number = 1; // so we know the current page number
var indexVal:Number;

const pageTotal:int = 29; // total number of pages/movieclips.

addPage(currentPage); // so we start at page 1

function addPage(pageNumber:int,startX:Number,startY:Number ){
lets say theres one movieclip and
all pages are on a different keyframe
page = new Page();

function removePage(evt:TweenEvent){

stage.addEventListener(MouseEvent.MOUSE_DOWN,press ed);
function pressed(evt:MouseEvent){
indexVal = pageCon.indexOf(event.currentTarget);
// if buttons inside movieclips have instance names of next and back
case next:
// tween current page off screen. basically just animate page off screen
tween = new Tween(pageCon[indexVal],"x",Strong.easeIn,pageCon[indexVal].x,-pageCon[indexVal].width,durVal,true);
tween.addEventListener(TweenEvent.MOTION_FINISH,re movePage);
// add next page and moie it onto screen.
addPage(currentPage,Stage.stageWidth+250,Stage.sta geHeight/2);// add page were you need it.
tween = new Tween(pageCon[pageCon.length-1],"x",Strong.easeIn,pageCon[pageCon.length-1].x,Stage.stageWidth/2,durVal,true);

case back:
// tween current page off screen. moves off screen (right side)
tween = new Tween(pageCon[indexVal],"x",Strong.easeIn,pageCon[indexVal].x,Stage.stageWidth+pageCon[indexVal].width,durVal,true);
tween.addEventListener(TweenEvent.MOTION_FINISH,re movePage);
// make sure next page is off screen. so play around with value until satisfied.
addPage(currentPage,-200,Stage.stageHeight/2);// add page were you need it.
tween = new Tween(pageCon[pageCon.length-1],"x",Strong.easeIn,pageCon[pageCon.length-1].x,Stage.stageWidth/2,durVal,true);

the code is untested and probably needs modifying due to the fact, i really didn't know how you wanted the animations to be. but judging from your post it sounded like you were placing page off screen then moving its x position until its on there.

regardless this is my contribution. considering whats been given so far, i think i've done my part. i wrote code from scratch as well just for you took me an hour or two. so enjoy ;)

04-28-2012, 11:09 PM
Thanks for contributing. Is there any way you can see to modify what I have working thus far ( works awesome on desktop ) .. need the part where you drop off whats not needed implemented.

allChapters_mc is a movie clip that has 29 addChilds adding 29 movieclips that are 1024 x 706 to the stage 1 after another creating a massive strip of movieclips.

Here is my code right now.

import flash.display.*;
import flash.events.MouseEvent;
import flash.utils.getTimer;
import flash.events.Event;
import flash.geom.Rectangle;
import com.greensock.TweenLite;
import com.greensock.easing.Strong;
import com.greensock.*;


var _panelBounds:Rectangle = new Rectangle(0, 0, 1024, 706);

var allChapters_mc:AllChapters_mc = new AllChapters_mc();
allChapters_mc.x = _panelBounds.x;
allChapters_mc.y = _panelBounds.y;

var _currentPanelIndex:int = 0;
var _panelCount:int;
var _x1:Number;
var _x2:Number;
var _t1:uint;
var _t2:uint;

var blitMask:BlitMask = new BlitMask(allChapters_mc, 0, 0, 1024, 706, true);

blitMask.bitmapMode = false;

_panelCount = 29;

blitMask.addEventListener(MouseEvent.MOUSE_DOWN, _mouseDownHandler, false, 0, true);

function _mouseDownHandler(event:MouseEvent):void {
trace("Mouse Down");

_x1 = _x2 = this.mouseX;
_t1 = _t2 = getTimer();
allChapters_mc.startDrag(false, new Rectangle(_panelBounds.x - 999999, _panelBounds.y, 99999999, 0));
this.stage.addEventListener(MouseEvent.MOUSE_UP, _mouseUpHandler, false, 0, true);
this.addEventListener(Event.ENTER_FRAME, _enterFrameHandler, false, 0, true);

function _enterFrameHandler(event:Event):void {
_x2 = _x1;
_t2 = _t1;
_x1 = this.mouseX;
_t1 = getTimer();

function _mouseUpHandler(event:MouseEvent):void {

trace("Mouse Up");
this.removeEventListener(Event.ENTER_FRAME, _enterFrameHandler);
this.stage.removeEventListener(MouseEvent.MOUSE_UP , _mouseUpHandler);
var elapsedTime:Number = (getTimer() - _t2) / 1000;
var xVelocity:Number = (this.mouseX - _x2) / elapsedTime;
//we make sure that the velocity is at least 20 pixels per second in either direction in order to advance. Otherwise, look at the position of the allChapters_mc and if it's more than halfway into the next/previous panel, tween there.
if (_currentPanelIndex > 0 && (xVelocity > 20 || allChapters_mc.x > (_currentPanelIndex - 0.5) * -_panelBounds.width + _panelBounds.x)) {
} else if (_currentPanelIndex < _panelCount - 1 && (xVelocity < -20 || allChapters_mc.x < (_currentPanelIndex + 0.5) * -_panelBounds.width + _panelBounds.x)) {
if (allChapters_mc == null) {
trace("---ERROR! Null target");
TweenMax.to(allChapters_mc, 0.7, {x:_currentPanelIndex * -_panelBounds.width + _panelBounds.x, ease:Strong.easeOut,onUpdate:blitMask.update,onCom plete:setTitle});


function setTitle():void{

trace("allChapters_mc.x = " + allChapters_mc.x);

if(allChapters_mc.x >= 0 && allChapters_mc.x >= -3072){
MovieClip(parent).topNavBar.topTitle.htmlText = "Introduction";

if(allChapters_mc.x <= -4096 && allChapters_mc.x >= -8192){
MovieClip(parent).topNavBar.topTitle.htmlText = "Chapter 1: Pre-Web";

if(allChapters_mc.x <= -9216 && allChapters_mc.x >= -13312){
MovieClip(parent).topNavBar.topTitle.htmlText = "Chapter 2: Web 1.0";

if(allChapters_mc.x <= -14336 && allChapters_mc.x >= -18432){
MovieClip(parent).topNavBar.topTitle.htmlText = "Chapter 3: Web 2.0";

if(allChapters_mc.x <= -19456 && allChapters_mc.x >= -23552){
MovieClip(parent).topNavBar.topTitle.htmlText = "Chapter 4: The Semantic Web";

if(allChapters_mc.x <= -24576 && allChapters_mc.x >= -28672){
MovieClip(parent).topNavBar.topTitle.htmlText = "Chapter 5: The Future Web";


function destroyListeners():void{
trace("destroy listeners");

allChapters_mc.removeEventListener(MouseEvent.MOUS E_DOWN, _mouseDownHandler);
this.stage.removeEventListener(MouseEvent.MOUSE_UP , _mouseUpHandler);
this.removeEventListener(Event.ENTER_FRAME, _enterFrameHandler);

allChapters_mc = null;


function enableBitmapMode():void{

trace("bitMapMode Enabled");
////blitMask.bitmapMode = true;

04-29-2012, 02:04 AM
and there lies your problem.

see your adding all 29 right from the start. what you want to be doing is to only add one mc. just the one's that is going to be visible initially. then when the button is pressed we'll add the required mc's off screen were they can't see. and when the tween is done remove the one that has now been moved off screen.

its hard to modify the code you gave simply because the easiest way to fix your code is to simply redo how you have the mc's being added. and your entire code is based around that simply setup. so it would basically be redoing most of the file.

what you need is to add mc's how i did. and use the array as a reference. and use that reference for your tween events. do that and everything becomes as simply as 1,2,3.

04-29-2012, 02:12 AM
I still want to use the tween max and swiping methods I am using though. Will that work ?

04-29-2012, 02:57 AM
i used the built in tween class and events. but yeah you should easily be able to just replace it with those tween classes. and for the TweenEvent just look up what events those classes have and use the one for when the tween is complete.

how i set up mine means it was very easy to be modified.