Connecting Tech Pros Worldwide Forums | Help | Site Map
bytes > topic > flash > answers

A phrase carousel / rotator

Member
  
Join Date: Jan 2008
Posts: 113
#1: Mar 16 '09
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:

Expand|Select|Wrap|Line Numbers
  1. class PhraseObject extends MovieClip {
  2.  
  3.     private var phrase:String;
  4.     private var textObject:TextField;
  5.     private var startPositionY:Number;
  6.     private static var count:Number = 0;
  7.     private static var mTimeLine;
  8.     private var depth:Number;
  9.     private var container:MovieClip;
  10.  
  11.     function PhraseObject(pTimeLine:MovieClip,phrase:String,startPositionY:Number) {
  12.  
  13.         // Initialise variables
  14.         trace("PhraseObject, initialising...");
  15.         this.phrase = phrase;
  16.         this.startPositionY = startPositionY;
  17.  
  18.         // Set the timeline to attach the phrase object to
  19.         mTimeLine = pTimeLine;
  20.  
  21.         // Set the depth for the object
  22.         depth = mTimeLine.getNextHighestDepth();
  23.  
  24.         // Create a movieclip for the object
  25.         container = mTimeLine.createEmptyMovieClip("container"+depth,depth);
  26.  
  27.         // Add the text to the phrase object
  28.         createPhraseObject();
  29.  
  30.         // Update 
  31.         updatePhraseNumber();
  32.     }
  33.     function createPhraseObject() {
  34.  
  35.         // Create textfield
  36.         textObject = container.createTextField("phrase_"+count+"_txt",count, 100, 100, 300, 100);
  37.         textObject.color = 0xFF0000;
  38.         textObject.text = this.phrase;
  39.         textObject._x = 0;
  40.         textObject._y = startPositionY;
  41.  
  42.         // Return a reference 
  43.         return container;
  44.     }
  45.     public function setY(newY:Number) {
  46.  
  47.         this._y = newY;
  48.  
  49.     }
  50.     private static function updatePhraseNumber() {
  51.  
  52.         trace("Updating count: "+count);
  53.         count++;
  54.         return count;
  55.  
  56.     }
  57.  
  58. }
  59.  
Expand|Select|Wrap|Line Numbers
  1. class PhraseCarousel extends MovieClip {
  2.  
  3.     /* //////////////////////////////////////////// */
  4.     /* //////        Define Variables       /////// */
  5.     /* //////////////////////////////////////////// */
  6.  
  7.     private var phrases:Array = new Array();
  8.     private var phraseStack:Array = new Array();    
  9.     private var phraseCount:Number;
  10.     private var phraseTotal:Number;
  11.     private var phraseInterval:Number;
  12.     private var phraseIntervalCount:Number;
  13.     private var count:Number;
  14.     public var mcPhraseCarousel:MovieClip;
  15.     public var thisObj:PhraseCarousel;
  16.  
  17.     /* //////////////////////////////////////////// */
  18.     /* //////    Define Public Functions    /////// */
  19.     /* //////////////////////////////////////////// */
  20.  
  21.     public function PhraseCarousel (phrases:Array) {
  22.  
  23.         trace("PhraseCarousel loaded.");
  24.  
  25.         // Set the phrase count 
  26.         phraseCount = 0;        
  27.  
  28.         // Set the number of phrases
  29.         phraseTotal = phrases.length;                
  30.  
  31.         // Set how often we want a phrase to appear
  32.         phraseInterval = 10;
  33.  
  34.         // Set the count for the phrase interval
  35.         phraseIntervalCount = 10;
  36.  
  37.         // Set the base count for the carousel
  38.         count = 0;
  39.  
  40.     }
  41.     public function PushPhrase() {
  42.  
  43.         trace(" Adding a phrase: "+phraseCount);    
  44.  
  45.         // Check if all phrases have been pushed onto the stack
  46.         if(phraseCount < phraseTotal) {
  47.  
  48.             // Push a new phrase onto the stack
  49.             phraseStack[phraseCount] = phrases[phraseCount];        
  50.  
  51.             // Increment phrase interval count
  52.             phraseCount++;
  53.  
  54.         }
  55.         else {
  56.  
  57.             trace(" Resetting phrase interval count");
  58.  
  59.             // Reset phrase interval count
  60.             phraseCount = 0;
  61.  
  62.         }
  63.  
  64.     }
  65.  
  66.     /* //////////////////////////////////////////// */
  67.     /* //////    Define Private Functions   /////// */
  68.     /* //////////////////////////////////////////// */
  69.  
  70.     private function display() {
  71.  
  72.         trace(" Displaying phrase stack");
  73.  
  74.         var i = 0;     
  75.  
  76.         // Display phrase stack
  77.         for(i=0;i<phraseStack.length;i++) {
  78.  
  79.             trace("  Phrase Stack Pos: "+i+" Phrase "+phraseCount+" = "+phraseStack[i]);
  80.  
  81.         }
  82.  
  83.     }
  84.     private function onEnterFrame() {
  85.  
  86.         // Check if phraseInterval has reached and then push a phrase
  87.         // otherwise display phrase interval count
  88.         if(phraseIntervalCount == phraseInterval) {
  89.  
  90.             trace(" Phrase Interval reached, resetting to 0");
  91.  
  92.             // Reset phrase inteval count
  93.             phraseIntervalCount = 0;
  94.  
  95.             // Push a phrase onto the stack
  96.             PushPhrase();
  97.  
  98.             // Display phrase stack
  99.             display();
  100.         }
  101.         else {
  102.             //trace(" Count: "+count);
  103.             trace(" Phrase Interval Count: "+phraseIntervalCount);
  104.             // Increment phrase interval count
  105.             phraseIntervalCount++;
  106.  
  107.         }
  108.  
  109.     }
  110.     private function startCarousel() {
  111.  
  112.  
  113.     }
  114. }
  115.  
Hope someone can point me in the right direction, thanks.

chromis

Member
  
Join Date: Jan 2008
Posts: 113
#2: Mar 18 '09

re: A phrase carousel / rotator

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:
Expand|Select|Wrap|Line Numbers
  1. class PhraseCarousel extends MovieClip {
  2.  
  3.     /* //////////////////////////////////////////// */
  4.     /* //////        Define Variables       /////// */
  5.     /* //////////////////////////////////////////// */
  6.  
  7.     public var phrases:Array;
  8.     private var phraseCount:Number;
  9.     private var phraseTotal:Number;    
  10.     private var speed:Number;
  11.     private var spacing:Number;    
  12.     private var lastPhrase:Number;
  13.  
  14.     /* //////////////////////////////////////////// */
  15.     /* //////    Define Public Functions    /////// */
  16.     /* //////////////////////////////////////////// */
  17.  
  18.     public function PhraseCarousel() {
  19.  
  20.         trace("PhraseCarousel loaded.");
  21.  
  22.         // Initialise phrases array
  23.         phrases = new Array();
  24.  
  25.         // Set the phrase count 
  26.         phraseCount = 0;        
  27.  
  28.     }
  29.     public function addPhrase(phrase:String) {
  30.  
  31.         trace(" Adding a phrase: "+phraseCount);    
  32.         var newPhrase:TextField;
  33.  
  34.         // Create textfield format object
  35.         var textField_fmt:TextFormat = new TextFormat();
  36.         textField_fmt.font = "Arial";
  37.         textField_fmt.color = 0xFF0000;
  38.         textField_fmt.size = 15;
  39.         textField_fmt.bold = true;        
  40.         textField_fmt.align = "left"
  41.         textField_fmt.underline = true;
  42.  
  43.         // Create textfield
  44.         newPhrase = this.createTextField("phrase_"+phraseCount,phraseCount, 0, 0, 200, 20);
  45.         newPhrase.text = phrase;
  46.         newPhrase.setTextFormat(textField_fmt);
  47.  
  48.         trace("Phrases: "+phrases+" newPhrase "+newPhrase);
  49.  
  50.         // Set speed
  51.         speed = 2;
  52.  
  53.         // Set spacing
  54.         spacing = 10;
  55.  
  56.         // Set last phrase
  57.         lastPhrase = phraseCount;
  58.  
  59.         // Add new textfield to phrases array
  60.         phrases.push(newPhrase);
  61.  
  62.         // Organise phrases
  63.         organise(phraseCount);
  64.  
  65.         // Increment phrase count
  66.         phraseCount++;
  67.     }
  68.  
  69.     /* //////////////////////////////////////////// */
  70.     /* //////    Define Private Functions   /////// */
  71.     /* //////////////////////////////////////////// */
  72.  
  73.     private function organise(latestPhrase:Number) {
  74.  
  75.         trace(" Organising phrase stack");
  76.  
  77.         var i = 0;     
  78.         var latestPhrase:Number;
  79.         var newYPos:Number;
  80.         var newYLimit:Number;
  81.         var currentPhrase:Number;
  82.  
  83.         if(phrases.length > 1) {
  84.  
  85.             trace("  Phrases count = "+phrases.length+" continuing..");
  86.  
  87.             this.onEnterFrame = function() {    
  88.  
  89.  
  90.                 // Loop through phrases, moving all phrases apart from the first one down 
  91.                 for(i=1;i<phrases.length;i++) {
  92.  
  93.                     if(phrases[i]._y < (phrases[lastPhrase]._y + phrases[lastPhrase]._height)) {
  94.  
  95.                         phrases[i]._y = phrases[i]._y + 20;
  96.  
  97.                     }
  98.                     else {
  99.                         delete this.onEnterFrame;
  100.                     }
  101.  
  102.                 }
  103.  
  104.             }
  105.  
  106.         }
  107.         else {
  108.  
  109.             trace(" Currently no phrases on the stack.");
  110.  
  111.         }
  112.  
  113.     }
  114.  
  115. }
  116.  
Thanks.

Chromis
Reply

« previous question | next question »

Similar Flash / Actionscript bytes

/bytes/development

/bytes/it

Forums
Visit our community forums for general discussions and latest on Bytes

Our staff and community areas have moved to bytes.com/forums/

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,510 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved