A phrase carousel / rotator

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • chromis
    New Member
    • Jan 2008
    • 113

    A phrase carousel / rotator

    Hi,

    I've been trying to create a carousel class which takes an array of phrases and then creates a textfield for each one positioning it vertically based on the order it was added. The next stage would be for it to make the phrases move down the _y axis until they reach the limit of the container. The phrases need to then swap onto a container behind or drop depths so they are behind the other phrases and then make their way back up. The general idea being like an upright carousel.

    I first tried to create it in one class (PhraseCarousel ), but then i thought maybe it would be better to separate it into two classes so there's one for the phrase objects aswell (PhraseObject), i did this because i was thinking that i should give the moving behaviour to the phrase objects instead of dealing with that in the carousel.

    Anyway where I'm struggling at the moment is how to best add the PhraseObject instances, do I attach them to the main timeline or do i add them to an array on the main timeline and then pass them to the carousel class?

    I'm a bit new to OOP so my code is not really making all that much sense at the moment:

    Code:
    class PhraseObject extends MovieClip {
    	
    	private var phrase:String;
    	private var textObject:TextField;
    	private var startPositionY:Number;
    	private static var count:Number = 0;
    	private static var mTimeLine;
    	private var depth:Number;
    	private var container:MovieClip;
    	
    	function PhraseObject(pTimeLine:MovieClip,phrase:String,startPositionY:Number) {
    		
    		// Initialise variables
    		trace("PhraseObject, initialising...");
    		this.phrase = phrase;
    		this.startPositionY = startPositionY;
    		
    		// Set the timeline to attach the phrase object to
    		mTimeLine = pTimeLine;
    		
    		// Set the depth for the object
    		depth = mTimeLine.getNextHighestDepth();
    		
    		// Create a movieclip for the object
    		container = mTimeLine.createEmptyMovieClip("container"+depth,depth);
    										  
    		// Add the text to the phrase object
    		createPhraseObject();
    		
    		// Update 
    		updatePhraseNumber();
    	}
    	function createPhraseObject() {
    
    		// Create textfield
    		textObject = container.createTextField("phrase_"+count+"_txt",count, 100, 100, 300, 100);
    		textObject.color = 0xFF0000;
    		textObject.text = this.phrase;
    		textObject._x = 0;
    		textObject._y = startPositionY;
    		
    		// Return a reference 
    		return container;
    	}
    	public function setY(newY:Number) {
    		
    		this._y = newY;
    	
    	}
    	private static function updatePhraseNumber() {
    		
    		trace("Updating count: "+count);
    		count++;
    		return count;
    		
    	}
    	
    }
    Code:
    class PhraseCarousel extends MovieClip {
    	
    	/* //////////////////////////////////////////// */
    	/* //////        Define Variables       /////// */
    	/* //////////////////////////////////////////// */
    		
    	private var phrases:Array = new Array();
    	private var phraseStack:Array = new Array();	
    	private var phraseCount:Number;
    	private var phraseTotal:Number;
    	private var phraseInterval:Number;
    	private var phraseIntervalCount:Number;
    	private var count:Number;
    	public var mcPhraseCarousel:MovieClip;
    	public var thisObj:PhraseCarousel;
    	
    	/* //////////////////////////////////////////// */
    	/* //////    Define Public Functions    /////// */
    	/* //////////////////////////////////////////// */
    	
    	public function PhraseCarousel (phrases:Array) {
    		
    		trace("PhraseCarousel loaded.");
    		
    		// Set the phrase count 
    		phraseCount = 0;		
    		
    		// Set the number of phrases
    		phraseTotal = phrases.length;				
    
    		// Set how often we want a phrase to appear
    		phraseInterval = 10;
    		
    		// Set the count for the phrase interval
    		phraseIntervalCount = 10;
    		
    		// Set the base count for the carousel
    		count = 0;
    
    	}
    	public function PushPhrase() {
    		
    		trace(" Adding a phrase: "+phraseCount);	
    
    		// Check if all phrases have been pushed onto the stack
    		if(phraseCount < phraseTotal) {
    			
    			// Push a new phrase onto the stack
    			phraseStack[phraseCount] = phrases[phraseCount];		
    			
    			// Increment phrase interval count
    			phraseCount++;
    			
    		}
    		else {
    			
    			trace(" Resetting phrase interval count");
    
    			// Reset phrase interval count
    			phraseCount = 0;
    			
    		}
    
    	}
    	
    	/* //////////////////////////////////////////// */
    	/* //////    Define Private Functions   /////// */
    	/* //////////////////////////////////////////// */
    	
    	private function display() {
    		
    		trace(" Displaying phrase stack");
    		
    		var i = 0;	 
    		
    		// Display phrase stack
    		for(i=0;i<phraseStack.length;i++) {
    			
    			trace("  Phrase Stack Pos: "+i+" Phrase "+phraseCount+" = "+phraseStack[i]);
    			
    		}
    		
    	}
    	private function onEnterFrame() {
    			
    		// Check if phraseInterval has reached and then push a phrase
    		// otherwise display phrase interval count
    		if(phraseIntervalCount == phraseInterval) {
    			
    			trace(" Phrase Interval reached, resetting to 0");
    			
    			// Reset phrase inteval count
    			phraseIntervalCount = 0;
    			
    			// Push a phrase onto the stack
    			PushPhrase();
    			
    			// Display phrase stack
    			display();
    		}
    		else {
    			//trace(" Count: "+count);
    			trace(" Phrase Interval Count: "+phraseIntervalCount);
    			// Increment phrase interval count
    			phraseIntervalCount++;
    			
    		}
    
    	}
    	private function startCarousel() {
    		
    
    	}
    }
    Hope someone can point me in the right direction, thanks.

    chromis
  • chromis
    New Member
    • Jan 2008
    • 113

    #2
    Change of tac

    Ok so perhaps my question was a bit complicated, i've simplified my goal and gone for one class with two functions one for adding phrases and one for organising them on the stage.
    I've having trouble organising them now, what i'm trying to do is loop throuh the array of phrases and position them vertically below each other each time a new phrase is added, i can't seem to get the code quite right though could somone point out where i'm going wrong please?

    PhraseCarousel. as:
    Code:
    class PhraseCarousel extends MovieClip {
    	
    	/* //////////////////////////////////////////// */
    	/* //////        Define Variables       /////// */
    	/* //////////////////////////////////////////// */
    		
    	public var phrases:Array;
    	private var phraseCount:Number;
    	private var phraseTotal:Number;	
    	private var speed:Number;
    	private var spacing:Number;	
    	private var lastPhrase:Number;
    	
    	/* //////////////////////////////////////////// */
    	/* //////    Define Public Functions    /////// */
    	/* //////////////////////////////////////////// */
    	
    	public function PhraseCarousel() {
    	
    		trace("PhraseCarousel loaded.");
    		
    		// Initialise phrases array
    		phrases = new Array();
    		
    		// Set the phrase count 
    		phraseCount = 0;		
    
    	}
    	public function addPhrase(phrase:String) {
    		
    		trace(" Adding a phrase: "+phraseCount);	
    		var newPhrase:TextField;
    		
    		// Create textfield format object
    		var textField_fmt:TextFormat = new TextFormat();
    		textField_fmt.font = "Arial";
    		textField_fmt.color = 0xFF0000;
    		textField_fmt.size = 15;
    		textField_fmt.bold = true;		
    		textField_fmt.align = "left"
    		textField_fmt.underline = true;
    
    		// Create textfield
    		newPhrase = this.createTextField("phrase_"+phraseCount,phraseCount, 0, 0, 200, 20);
    		newPhrase.text = phrase;
    		newPhrase.setTextFormat(textField_fmt);
    
    		trace("Phrases: "+phrases+" newPhrase "+newPhrase);
    
    		// Set speed
    		speed = 2;
    		
    		// Set spacing
    		spacing = 10;
    		
    		// Set last phrase
    		lastPhrase = phraseCount;
    		
    		// Add new textfield to phrases array
    		phrases.push(newPhrase);
    
    		// Organise phrases
    		organise(phraseCount);
    		
    		// Increment phrase count
    		phraseCount++;
    	}
    	
    	/* //////////////////////////////////////////// */
    	/* //////    Define Private Functions   /////// */
    	/* //////////////////////////////////////////// */
    	
    	private function organise(latestPhrase:Number) {
    		
    		trace(" Organising phrase stack");
    		
    		var i = 0;	 
    		var latestPhrase:Number;
    		var newYPos:Number;
    		var newYLimit:Number;
    		var currentPhrase:Number;
    		
    		if(phrases.length > 1) {
    			
    			trace("  Phrases count = "+phrases.length+" continuing..");
    			
    			this.onEnterFrame = function() {	
    				
    				
    				// Loop through phrases, moving all phrases apart from the first one down 
    				for(i=1;i<phrases.length;i++) {
    
    					if(phrases[i]._y < (phrases[lastPhrase]._y + phrases[lastPhrase]._height)) {
    						
    						phrases[i]._y = phrases[i]._y + 20;
    						
    					}
    					else {
    						delete this.onEnterFrame;
    					}
    					
    				}
    				
    			}
    			
    		}
    		else {
    			
    			trace(" Currently no phrases on the stack.");
    			
    		}
    
    	}
    	
    }
    Thanks.

    Chromis

    Comment

    Working...