Actionscript 3

Okay, then I'm really interested: how do you feel about Lassie Adventure Studio? I'm not asking in hopes of a compliment – I'd like your honest and uncensored opinion. I ask because I've long shared those same feelings. I went to school as a designer and have roots in fine art. I never wanted to become a programmer, but somehow my path has led to a job that is most predominately application design; and I love it. So, somewhere along the way I made the swap. As a result, I am curious about how other people with my background would view something like Lassie. I know that was a bit earlier in the thread.... but I wanted to comment on that Greg.... You and I must have switch part of our brains at one point..... Since after leaving high school you wanted to be an art teacher, and I wanted to be a programmer. Now look who is the programmer, and who is the teacher. ;-) (If I've never said that to you before.... if I have, you can ignore it ;-)) Another thing.... speaking of Lego's..... what's up with Google's banner today? it's not click-able, so I can't find out.

Hehe... yeah, you've said that before. But for the record: I'm not a programmer. I just happen to do a lot of programming in my job. ;)

In case anyone was curious..... This is why the Google logo is made in Legos. http://digg.com/gadgets/Lego_Google_Logo

Ok, another AS3 question. I've worked out how to use a URLRequest and Loader to import an swf or an image... its kind of like having photographs in a drawer, and wanting to put one of them in a frame. You lift the photo you want out (URLRequest) and put it in the frame (the loader object)... Right? Now, what I want to do is create an online gallery for my pics that is easily updated, so I want flash to look in the folder that has my pics, see how many there are (so I can just add jpgs to the image folder and flash will automatically add them), load them all in as thumbnails, and then when a user clicks on the thumbnail, that pic appears in the main frame. Using my analogy again, im guessing its kind of like looking in the drawer, taking all the pics that are in the drawer out and putting them on the table, and then choosing one to go up on the wall. So... I don't doubt that this is POSSIBLE in Flash... I just don't have any idea where to start! Any ideas/hints?

Taking one at a time... I've worked out how to use a URLRequest and Loader to import an swf or an image... its kind of like having photographs in a drawer, and wanting to put one of them in a frame. You lift the photo you want out (URLRequest) and put it in the frame (the loader object)... Right? Erm... sort of. I'd actually say that the Loader object is more the frame and the loaded image is the picture that goes in it. The URLRequest would just be a memo that says which photo goes into the frame. I actually find Loader objects to be a little weird. They're a DisplayObject class, which means that they can be added to the stage (screen display), but they themselves aren't really a display type (ie: MovieClip, Sprite, or Bitmap); they're just a vehicle that goes out and gets media. Now, what I want to do is create an online gallery for my pics that is easily updated, so I want flash to look in the folder that has my pics, see how many there are (so I can just add jpgs to the image folder and flash will automatically add them), load them all in as thumbnails, and then when a user clicks on the thumbnail, that pic appears in the main frame. Okay, that's pretty straight forward. The one minor trouble point is that Flash can't natively read and list out the contents of a directory. You need to use PHP or another server side script to get directory contents. Search around the internet for that, I can almost guarantee you'll find open-source script without breaking a sweat. If not, let me know. I'm using a script like that for all the editor apps that we're building for this game at work. After that, it's pretty simple. Using my analogy again, im guessing its kind of like looking in the drawer, taking all the pics that are in the drawer out and putting them on the table, and then choosing one to go up on the wall. I suppose, that's one way to put it. Now program that ;) And I know you can; this is well within your skill level! As a starting point, I'd use a new feature of AS3 that now lets you retain display objects in memory and just display them when they're needed (AS2 required all display object to exist on the stage). So, you could just load 50 images neatly into an array, then flip through the array to add/remove the display objects one at a time to the stage to view them. So... I don't doubt that this is POSSIBLE in Flash... I just don't have any idea where to start! Any ideas/hints? Take it one step at a time with a more granular approach. Broad questions get broad answers; so be as specific as possible when you look for answers.

I actually find Loader objects to be a little weird. So is there a better way to do this or is using Loaders the best way? Take it one step at a time with a more granular approach. Ok, well heres whats puzzling me at the moment... Even if I get Flash to load all the images in (using a URLRequest I assume?), how do I get Flash to automatically create and position thumbnail loaders for them all, which when clicked will put their image into the main frame loader? I could create a loader for image1, add an event listener so when its clicked image1 gets loaded into the main loader, then create a loader for image2, position it 5px to the right of image1, etc... but how do I get flash to just do it automatically for imageN, so no matter how many images there are flash will create thumbnails for them all and lay them out in an appropriate grid? Thanks again! Ill take a look into that PHP thing, see what I can find.

So is there a better way to do this or is using Loaders the best way? Oh, no... sorry. I didn't mean to imply that there is anything wrong with using Loader Objects; in fact, there really isn't any other method to load in external media. Loader objects are very well designed in and of themselves, it's just their integration with the Flash display list that seems odd to me. I still haven't played with them enough to know all their nuances... and I probably won't given that I just using them as a load vehicle rather than a display object. Ok, well heres whats puzzling me at the moment... Even if I get Flash to load all the images in (using a URLRequest I assume?), how do I get Flash to automatically create and position thumbnail loaders for them all, which when clicked will put their image into the main frame loader? I could create a loader for image1, add an event listener so when its clicked image1 gets loaded into the main loader, then create a loader for image2, position it 5px to the right of image1, etc... but how do I get flash to just do it automatically for imageN, so no matter how many images there are flash will create thumbnails for them all and lay them out in an appropriate grid? Thanks again! Ill take a look into that PHP thing, see what I can find. Well, first let's clarify what is meant by "automatically". Flash won't automatically do anything for you. You have to instruct it with scripts. However, yes, YOU can compose simple scripts that will automatically render display grids with a variable number of objects in them. Okay, so you get one and only one introduction to loop logic... after this you can adapt the loop concept on your own to do almost anything. So, this example assumes that you have an array of images to display. If you're not familiar with Arrays yet, look them up and get to know them in and out. While they're extremely basic, they are one of the cornerstones of programming.


// create an array with 8 image elements in it
var imageList:Array = [img1, img2, img3, img4, img5, img6, img7, img8];

// define the grid's cell widths and heights
var cellWidth:Number = 100;
var cellHeight:Number = 100;

// define number of rows and columns
// rows is the number of images divided by number of columns, rounded up
var cols:Number = 3;
var rows:Number = Math.ceil(imageList.length/cols);

// create index counter to pull elements from the array in succession with
var index:Number = 0;

// loop through number of rows with a y-increment
for (var iy:Number = 0; iy < rows; iy++)
{
	// for each row, loop through number of columns
	for (var ix:Number = 0; ix < cols; ix++)
	{
		// if reference index is within range of the imageList contents
		if (index < imageList.length)
		{
			// pull next display object from list
			var img:DisplayObject = imageList[index];
			
			// position image within grid cell
			// x position = currentColumn x cellWidth
			// y position = currentRow x cellHeight
			img.x = ix * cellWidth;
			img.y = iy * cellHeight;
			
			// add image to stage
			addChild(img);
			
			// increment image index so that next image will be referenced in the next loop cycle
			index++;
		}
		else
		{
			// reference index was out of range of list contents...
			// this occurs because we have a 3 x 3 grid with 8 items to add to it
			// nineth cell will not have an image, so will be left empty.
			break;
		}
	}
}

The above uses two loops – one nested inside the other – to render out the rows / cols of a grid display. This is an excellent example of loops and arrays, which are about the two most basic but powerful programming components there are. You would be amazed at what you can build just knowing how to use loops, arrays, and simple "if / then" statements. While programming methods get bigger and grander with experience, the core tools never really change. You get loops and arrays down and you're off to the races!

Thanks Greg, thats exactly what I was trying to do but didnt have a clue where to start! The bit that was troubling me was getting the process to occur to one item, then the next, then the next... but I see the index++ takes care of that. Oh and iv looked at what Flash has to say about arrays... looks pretty useful right enough. Thanks again.

// pull next display object from list 
         var img:DisplayObject = imageList[index];

Heya, this bits causing a problem... it seems to not work with the URLRequest? Is a URLRequest the best way to load my images in or would XML be better (I found a few examples that use it)?

Hey Chris, My example was assuming that you already had the images loaded and had organized their display objects into an array. All I posted was the grid constructor logic, you'll still need to write a pretty extensive load script to bring in that media, then run that grid builder script to lay it all out on stage. First addressing XML versus URLRequest. That's kind of a moot point, because neither of those things are really very substantial. All a URLRequest object really is is just a url string with a GET or POST method assigned to it. It has no operational logic; nor does XML for that matter. They are just data formats that can provide a URL to a Loader Object. So, how to do this? I'll give you a psudo-code overview of how I would probably tackle this, then leave you to it to take a stab at implementation...


With X number of URLs to load
{
     Create a URLRequest
     Create a Loader object
     Initiate load request
     Push the Loader into an array
}

All objects have now been told to load, so add ENTER_FRAME event to monitor load progress.

On each ENTER_FRAME
{
     loop through the array of loading objects
     {
          Keep running total of collective bytes loaded
          Keep running total of collective bytes total
     }
     Divide bytes loaded by bytes total (gives percent complete)

     if percent complete is 1
     {
          Disable ENTER_FRAME
          Run grid drawing tool using the array of loaded images
     }
}

That's a pretty standard batch-load procedure. And notice that you're getting a collective percent-loaded value, which you could easily hook a progress bar into for visual feedback.

Ok, heres my wild stab in the dark at that first part. Its not working, which means either i've made a typo, OR (more likely) my logic is fundamentally flawed... The bit I had trouble with was causing X number of URLs to load... so I thought I could do it by listing the URLs in an indexed array, and then pulling them out in the URLRequest. Would this never work or have I just slipped up somewhere?

//Create an array which contains all the image filenames
var imgFile:Array = ["1.jpg", "2.jpg"]; 			

//Create an array which contains all the image loaders
var imgList:Array = new Array();	

//Create a URL Request
var imgRequest:URLRequest = new URLRequest(imgFile[1]);
//Create a loader object
var imgLoader:Loader = new Loader();
//Initiate a load request
imgLoader.load(imgRequest);
//Push the loader into an array
imgList.push("imgLoader");

Pretty close, but you're pushing the imgLoader object into the imgList array as a string (ie: a string of characters encompassed by quotes). Remove the quotes and it will push the actual object reference in the loader array. Then set them up on a loop that runs through the URL array and you're set! One other thing I did notice which I mention as an FYI: Arrays are zero-indexed, so you need to cite array<0> to access the first item of the array. The weirdest point this creates is that the last element in an array is referenced as array. It takes some getting used to, but it makes a lot of sense in the long run.

Arrays are zero-indexed Oooo yeah... I read that when I was looking at arrays, and then promptly forgot it! Thanks for the reminder :D Are variables created within a function specific to that function? For example, within this function i've created a variable called index... can i never use that name for another variable in the program? Thanks again :D

Are variables created within a function specific to that function? Ok... Im guessing this is true because it's created another problem for me... how do I reference a variable created in a function? I have two functions at the moment, createImageList() and createThumbnails(), both of them contain variables called index. If I want another function, say myFunction(), to call the index variable that is contained within the createThumbnails() function, how would I do that?

Okay, sounds like it's time to continue our discussion of the "scope" concept. Remember our previous example of the puppy yawning in his crate? The puppy's scope was his crate, and information about the inner workings of his crate were exclusive to him. So, "scope" deals with events (stuff that happens within the crate). Variables work on a very similar premise called "namespace". Don't get flustered by all the terminology, this still the same concept. So, this time let's put this in context of a house... We'll say that our Object (that being the stage/movieclip that you're writing script into) is a house. That object can have many functions (function(){}), which we can consider as rooms in the house. Now, variables would be unique things within each room like furniture and wall-hangings. So, things in rooms are not aware or affected by one another because they're all isolated by walls... erm. Let's just look at this programatically. Don't panic over the first "class" line that you see; Flash is doing that for you as you work within the actions panel (ie: Flash builds your house for you, then you define the rooms within it).


class House
{
	var _roof;
	var _foundation;
	var _ventilation;
	
	function livingRoom()
	{
		var sofa;
		var chair;
	}
	
	function kitchen()
	{
		var door;
		var sink;
		var refridgerator;
	}
	
	function bathroom()
	{
		var door;
		var sink;
		var toilet;
	}
	
	function bedroom()
	{
		var door;
		var bed;
	}
}

So, notice up at the top there are three variables that start with underscores: _roof, _basement, _ventilation. Those are properties of the house as a whole, which makes them special because –as a part of the house as a whole– you are aware of those elements no matter what room of the house that you're in. So, as any of those room functions ran, they could access properties of the whole house. Now looking at the individual rooms (or functions), you'll notice these each have attributes unique to them. However, some rooms have the same properties – for example, they all have doors, and the kitchen and bathroom both have a sink. However, those sinks and doors do not all reference the same thing. The kitchen and the bathroom do not have the same sink; and for an obvious reason: they're in totally different rooms of the house! So, see where I'm going with this? You can store information that all functions need to access as properties of the house. Then, it really doesn't matter what you put in each room (function) so long as the properties of the room don't conflict with the properties of the house as a whole. To avoid this, this is generally why Object properties are cited with a leading underscore. It isolates them, and makes them easy to recognize at part of the bigger picture as you reference them within individual functions. Hope that helps. Okay, gotta run to a meeting!

View Full Version: Actionscript 3