FlashingTheNet.com .:|:. Dynamic Text and loadVars Tutorial

.:|:. home .:|:. resources .:|:. links .:|:. contact .:|:.

Dynamic Text and Loading Variables From a Text File
This code will read variables into the Flash movie from 3 text files using a loadVars object we create, then display a list of the values with an exported font if desired. The movie has 4 frames. In each of the first three frames a list of variables is loaded, pausing until each is loaded before moving to the next frame. The last frame has the code for creating the lists. This is done because when Flash starts reading in the data it does not wait for it to complete before continuing to play. Therefore it can reach the placement code before having anything to place. The code reads a list creating and placing text until it comes across the last variable with the value "EOF" meaning "End Of File". If not at the last list, the code will then read the next list and repeat. The variables in the text files are named like memberlist1, memberlist2, etc. The numbering does not have to be in order, the list will be sorted alphabetically. Any missing numbers will be ignored. The variable numbered "1" is reserved for the title of the list if desired. If not present the code will skip writing a title for the current list. Use a text editor to create the lists so no formatting is done to it. Use "&" to separate the variables. Use no spaces or line breaks: directorlist1=Directors&directorlist2=DeathW1sh&directorlist5=\|\|[o_o]\|\|&directorlist7=Prophet&directorlist8=InTr3PiD&directorlist10=EOF
Code in frame 1: stop(); // Display the status of the loading operation if desired using a dynamic textField named "statusText". statusText.text="Loading leaderlist"; // Create an object to hold the data from the lists. dataClip1=new LoadVars(); // Load the data into the object. The list files are in the same directory as the movie. dataClip1.load("leaders.txt"); // This is called when the data has been successfully loaded. dataClip1.onLoad=function() { play(); } Code in frame 2: stop(); statusText.text="Loading directorlist"; dataClip2=new LoadVars(); dataClip2.load("directors.txt"); dataClip2.onLoad=function() { play(); } Code in frame 3: stop(); statusText.text="Loading memberlist"; dataClip3=new LoadVars(); dataClip3.load("members.txt"); dataClip3.onLoad=function() { statusText.text="FlashingTheNet.com dynamic text tutorial"; play(); } Code in frame 4: stop(); // Start defining the functions. function initVars() { // Set the variable prefixes found in the three text files we imported. // For example, in the file memberlist.txt are variables called memberlist1, memberlist2, etc. leaderList="leaderlist"; directorList="directorlist"; memberList="memberlist"; // Set the main title value. titleText="DoA Members"; // Set the size, starting position, spacing, and righthand border to use when writing the lists. // Most settings are taken from the font size used. // Adjust the settings depending on the movie size, font, font size, and number // of characters in the list items. movieWidth=720; movieHeight=400; mainFontSize=26; titleFontSize=mainFontSize+4; subtitleFontSize=mainFontSize+2; textboxWidth=mainFontSize6; titleboxWidth=mainFontSize7.5; titleboxHeight=titleFontSize+2 textboxHeight=mainFontSize+2; // Set the horizontal position of the first clip. xStart=((movieWidth/2)-1)+15; xPos=xStart; // Set the vertical position of the first clip. // Note that unlike a standard graph, the upper y positions are negative numbers. // This example, with a movieHeight of 400, places the clip at y=-185, or // 185 pixels above center stage. yPos=((movieHeight/2)-1)+15; // How much to move the next text box horizontally. xMove=textboxWidth+5; // How much to move the next row vertically. listDrop=mainFontSize+2; titleDrop=subtitleFontSize+3; // Limit how far to the right a text box can be placed. xLimit=xStart+(movieWidth-textboxWidth-15); // Level is incremented with each new text box and tells createTextField() what level // to place the new clip at. clipLevel=0; // Create a blank array to use for holding the variable values in the lists. sortArray=new Array(); } // This function is used to set text formatting options and create the text. It is called once per list item. // Be careful of the order the text formatting code is in, certain code must be set before other code is called. // The variable "member" contains the value of one of the lists variables. function makeText(member, clipLevel, xPos, yPos, textStyle) { // Increment the clip level so that the last clip created is not replaced. this.clipLevel++; if(member!=undefined) { // Create an object for holding our text options. myformat = new TextFormat(); // Set the type of text to use. myformat.type = "dynamic"; // This, and the "this["listTextbox"+clipLevel].embedFonts=true;" found three lines below, // lets Flash use an exported font. // Comment the line below out and set embedFonts to false to use the system font. // To use an embedded font, go to the library and import a font into it then give it a name. // Right click the font in the library, choose Linkage, and name the same as you'll be using below. myformat.font = "NoControlFont"; // Create a text box inside a movie clip and set it with the variables being passed to createTextField(). // Creating the text inside movie clips allows us to use movie clip properties. // Not used here but handy for animating the text if desired. this.createEmptyMovieClip("clip"+clipLevel, clipLevel); this["clip"+clipLevel].createTextField("listTextbox"+clipLevel, clipLevel, xPos, yPos, textboxWidth, textboxHeight); this["clip"+clipLevel]["listTextbox"+clipLevel].text=member; this["clip"+clipLevel]["listTextbox"+clipLevel].embedFonts=true; this["clip"+clipLevel]["listTextbox"+clipLevel].multiline=0; this["clip"+clipLevel]["listTextbox"+clipLevel].wordWrap=0; // Set this to 1 to see the borders if desired or as an aid when setting options. this["clip"+clipLevel]["listTextbox"+clipLevel].border=0; this["clip"+clipLevel]["listTextbox"+clipLevel].borderColor=0xFF0000; // These three if/else's set formatting options depending on the value in the variable "member". // The first two check to see if the "member" value is a title or sub-title. if(textStyle=="titleStyle") { this["clip"+clipLevel]["listTextbox"+clipLevel]._width=titleboxWidth; this["clip"+clipLevel]["listTextbox"+clipLevel]._height=titleboxHeight; myformat.color=0x666666; myformat.size=titleFontSize; myformat.bullet=0; } else if(textStyle=="subTitleStyle") { this["clip"+clipLevel]["listTextbox"+clipLevel]._width=titleboxWidth; this["clip"+clipLevel]["listTextbox"+clipLevel]._height=titleboxHeight; myformat.color=0xBBBBBB; myformat.size=subtitleFontSize; myformat.bullet=1; } else if(textStyle=="mainStyle") { myformat.color=0xff1100; myformat.size=mainFontSize; } // Take the formatting info we stored in the myformat object and apply to the text. this["clip"+clipLevel]["listTextbox"+clipLevel].setNewTextFormat(myformat); this["clip"+clipLevel]["listTextbox"+clipLevel].setTextFormat(myformat); } } // This function will first reset variables and clear the sortArray[] out. // It then creates an array from the list's variable values while filtering out any skipped in the numbering sequence. // This makes it non-dependant on the numbering sequence in the list. // It will then sort the list alphabetically. // Called by the function createList(). function buildArray(dataClip, whichList) { arrayPosition=0; listPosition=0; // Populate the sortArray[] from the current list being read. while(dataClip[whichList+listPosition]!="EOF") { if(listPosition>1) { member=dataClip[whichList+listPosition]; if(member!=undefined) { sortArray[arrayPosition]=member; arrayPosition++; } } listPosition++; } /* Sort the list alphabetically without regard for case. The sort() defaults to case-sensitive ascending order if no parameters are passed. Note that numbers will be sorted according to their first digit so 100 will come before 50, use Array.NUMERIC for numeric arrays like so: sortArray = [1, 30, 5, 9, 387, 10785, 8, 77, 89]; sortArray.sort(16); trace(sortArray); Other options, can use multiple, separate with a "\|" like: sortArray.sort(Array.DESCENDING \| Array.CASEINSENSITIVE); or another way: sortArray.sort(2\|1); 1 = Array.CASEINSENSITIVE 2 = Array.DESCENDING If there are any duplicated elements in the array, stop and do not modify it: 4 = Array.UNIQUESORT Returns an array of the new sort order (like 1, 2, 6, 4, 3, 5) without modifying the original array: 8 = Array.RETURNINDEXEDARRAY 16 = Array.NUMERIC / sortArray.sort(1); } // This function goes through the array and calls placeText() once for every element in the array. // Called by the main function, placeLists(). function createList() { buildArray(clipNum, whichList); // Check to see if there is a valid title and if so write it. if(clipNum[whichList+1]!=undefined) { textStyle="subTitleStyle"; member=clipNum[whichList+1]; makeText(member, clipLevel, xPos, yPos, textStyle); yPos+=titleDrop; textStyle="mainStyle"; } textStyle="mainStyle"; x=0; // Creates and positions the text. while (sortArray.length>x) { member=sortArray[x]; // Check to see if we're too far to the right. if(xPos>xLimit) { xPos=xStart; yPos+=listDrop; } // Pass value,level, and position information to the makeText() function and make the text. if(member!=undefined) { makeText(member, clipLevel, xPos, yPos, textStyle); xPos+=xMove; } x++; } // Set the x and y positions for the next list. xPos=xStart; yPos+=listDrop; // This clears the array out for the next list. while(sortArray.length>0) { sortArray.pop(); } } // This is the main function. It initializes the variables, creates a title, then runs throught the three lists. function placeLists() { // Initialize our variables. initVars(); // Create a main title. textStyle="titleStyle"; header=titleText; xPos=xStart+(movieWidth-titleboxWidth-20); makeText(header, clipLevel, xPos, yPos, textStyle); xPos=xStart; // Set the variables describing which dataClip and list to use. // Then create the lists and, if desired, titles for them. clipNum=dataClip1; whichList=leaderList; createList(); // ********* clipNum=dataClip2; whichList=directorList; createList(); // ******** clipNum=dataClip3; whichList=memberList; createList(); } // ******** End of functions. ********** // Call our listing function. placeLists(); // Clean up. delete initVars; delete makeText; delete buildArray; delete createList; delete placeLists; delete dataClip1; delete dataClip2; delete dataClip3;