{"id":578,"date":"2008-08-21T08:00:36","date_gmt":"2008-08-21T12:00:36","guid":{"rendered":"http:\/\/www.mrsunstudios.com\/?p=578"},"modified":"2022-05-29T08:23:36","modified_gmt":"2022-05-29T12:23:36","slug":"tutorial-pagination-in-actionscript-3","status":"publish","type":"post","link":"http:\/\/www.mrsunstudios.com\/blog\/flash\/tutorial-pagination-in-actionscript-3\/","title":{"rendered":"Tutorial: Pagination in ActionScript 3"},"content":{"rendered":"

This is going to be another tutorial about pagination. This time, however, it will be done in ActionScript 3.0. Here’s a brief description of what this tutorial will be about, taken from my previous tutorial in ActionScript 2.0<\/a>:<\/p>\n

This is going to be a smaller tutorial about how to paginate objects in ActionScript 2.0. By paginate, I mean taking a large group of objects, and making it so the user can navigate through them by page. For example, in our previous tutorial, Make a Rhythm Game in AS2<\/a>, we made a list of levels that the user could play. However, this list was only limited to 5 levels, and we didn\u2019t paginate them. We\u2019re going to do something like this today.<\/p><\/blockquote>\n

In this tutorial, I’m just going to take excerpts of text from my AS2 tutorial and will make updates in the code a bit. The process will be the same, just with different code. Let’s get started, shall we?<\/p>\n

First of all, we\u2019re going to make a large array of random values that we can paginate. Because we don\u2019t care what the values are right now, we\u2019re just going to make them totally random. If you\u2019re going to use pagination for something more than a tutorial, then you probably should use your own values.<\/p><\/blockquote>\n

\/\/this values array will hold all of the values we need to paginate\r\nvar values:Array = new Array();\r\n\/\/defining the 'i' variable so we can use it multiple times in for loops\r\nvar i:int;\r\n\r\n\/\/this loop adds 1000 different values to the array\r\nfor(i=0;i<1000;i++){\r\n\t\/\/the values will range from 0-9999\r\n\tvalues[i] = Math.round(Math.random()*9999);\r\n}<\/pre>\n
If you want to check, then try making a trace() statement to see what the values are.<\/p>\n
Next, we\u2019re going to have to make a MovieClip called “mcValueHolder” that will be placed onto stage with a certain value in the array within it. We also need a dynamic text field to actually have the value in it. Here\u2019s what mine looks like:<\/p>\n
\"The<\/p>\n
Also, give the text field an instance name of “txtValue”, so we can reference it in actionscript.<\/p>\n
Now, we have to export the MovieClip for ActionScript. If you don\u2019t know how to do that, then right click on the MovieClip in the library and click on \u201cLinkage\u2026\u201d. Then, check off \u201cExport for ActionScript\u201d. That\u2019s all you have to do. Click on \u201cOk\u201d and we can continue.<\/p>\n
We also need two buttons to click to get to the next page and the previous page. Hopefully, you can figure out how to do that yourself. Just add them to the bottom of the stage and give them instance names of \u201cmcPrev\u201d and \u201cmcNext\u201d.<\/p><\/blockquote>\n
Also, we need to make a text field which tells the user which page they are on out of the total pages. Just add it to the stage and set the instance name to txtPage.<\/p>\n
Now for the hard part, actually coding the pagination. Place this code in after we define the values<\/tt> variable.<\/p><\/blockquote>\n
\r\n\/\/the current page we're on\r\nvar page:int = 1;\r\n\/\/the limit of values we need per page\r\nvar limit:int = 6;\r\n\/\/the current row that we're working on\r\nvar row:int = 0;\r\n\/\/The total pages that we have\r\nvar totalPages:int = Math.ceil(values.length\/limit);\r\n\r\nfunction createValues():void{\r\n\t\/\/this will always limit the amount to the limit variable\r\n\t\/\/but, \"i\" will act as a marker for which part of the values\r\n\t\/\/array that we're going to use\r\n\tfor(i=(page-1)*limit;i 1){\r\n\t\t\/\/take away all of the objects so we can make new ones\r\n\t\tremoveValues();\r\n\t\tpage --;\r\n\t\tcreateValues();\r\n\t\t\/\/then update the page text\r\n\t\tupdateString();\r\n\t}\r\n}\r\nfunction nextPage(event:MouseEvent):void{\r\n\t\/\/checking if the current page isn't too high\r\n\tif(page < totalPages){\r\n\t\tremoveValues();\r\n\t\tpage ++;\r\n\t\tcreateValues();\r\n\t\tupdateString();\r\n\t}\r\n}\r\n\/\/first things first, update the string to be as it is\r\nupdateString();\r\n\/\/then we place the movieclips onto the stage\r\ncreateValues();\r\n\/\/adding listeners to the buttons\r\nbtnPrev.addEventListener(MouseEvent.CLICK, prevPage);\r\nbtnNext.addEventListener(MouseEvent.CLICK, nextPage);\r\n<\/pre>\n
\nPretty intense, eh? Well, this code is basically useless by itself. I doubt that anybody wants to look through random numbers. But, implementing it into your project will help a lot.\n<\/p><\/blockquote>\n
The Final Product<\/h3>\n
<\/embed><\/object><\/p>\n
Source .fla file<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
This is going to be another tutorial about pagination. This time, however, it will be done in ActionScript 3.0. Here’s a brief description of what this tutorial will be about, taken from my previous tutorial in ActionScript 2.0: This is going to be a smaller tutorial about how to paginate objects in ActionScript 2.0. By […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[5,8,65,4],"tags":[25,8,13,143,11],"_links":{"self":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/578"}],"collection":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/comments?post=578"}],"version-history":[{"count":6,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/578\/revisions"}],"predecessor-version":[{"id":586,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/578\/revisions\/586"}],"wp:attachment":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/media?parent=578"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/categories?post=578"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/tags?post=578"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}