Learning Challenge, AS3 Style!

Hey guys!

After my last post I began looking at what I would need to do in order to get the visuals for the action queue to work. I decided I wanted it to look similar in style to the example below. In this example the player wants to use a key, move, talk to a person, then move again. The action that is being performed is scaled larger and is in the 'highlighted' slot on the bar.

This seemed pretty easy in theory, just spawn an icon tot he left of the last one. When one action is completed move the remainder to the right and make the 1st action icon larger. Instead of diving in to this I decided to do a little challenge. The challenge was to make an inventory system that could support a dynamic amount of items. I also wanted to make it scrollable. Now this doesn't seem like it would help with the action queue problem, but both involve spawning movieclips in a line and setting parameters from an array. The last will be important because the actions will be stored in an array and that information will be used to spawn the correct icon. I added the scrolling challenge since I plan on using a system very similar to the challenge if I redo my crafting page, or add an inventory system to my menu collection.

The challenge only took me a couple hours of work, though I had a couple days where both of my computers were out of commission. Many thanks to Craig Campbell over at School of Flash, and Ali Qureshi for their tutorials. Between the two I was able to get the bulk of the logic figured out and implemented. I ended up using Craig's custom scrollbar and masking approach rather than the scrollpane as in Ali's example so I could have more control over the look of it. Ali has a very well commented block of code for spawning the desirable amount of movieclips from AS3. I used this primarily to get the inventory items to spawn. Overall I learned a lot about spawning movieclips and setting parameters using a for loop, and what math is needed to get a particular block of content to scroll. Here is the final product of my self-challenge: (Go ahead, click on it! It's interactive!)

Here is the Actionscript3 code that makes it work: Not too different from the tutorials though.

import flash.events.MouseEvent;

stop();

//Movieclip vars
var desiredMCs:int = 20;
var nextYPos:int = 10;
var i:int = 0;
var invoCont:invoContainer;
var invoArray:Array = ["Bread", "Milk", "Juice", "Steak", "Pinapple", "Carrot", "Ginger", "Parsley", "Eggs", "Peppers", "Onions", "Porkchops", "Chicken Nuggets", "Salmon", "Prickly Pear Cactus", "Butter Cup Squash", "Spam", "Red Leaf Lettuce", "Cornbread", "Cheeseburger"];

//Scrollbar vars
var rect:Rectangle;
var scrollerMinY:Number = slider_mc.handle_mc.y; 
var containerMaxY:Number; 
var padding:Number = 20;

slider_mc.handle_mc.buttonMode = true;
slider_mc.handle_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragHandle);

popup_mc.drawInvo_btn.addEventListener(MouseEvent.CLICK, drawInvo);
back_btn.addEventListener(MouseEvent.CLICK, removeInvoCont);

//Inventory functions
function drawInvo(e:MouseEvent)
{
    desiredMCs = popup_mc.inputField_txt.text;
    
    if(desiredMCs >= 1 && desiredMCs <= 20)
    {
        invoCont = new invoContainer();
        
        invoCont.x = 170;
        invoCont.y = 30;
        
        mainICont_mc.addChild(invoCont);
        
        containerMaxY = invoCont.y;
    
        popup_mc.visible = false;
        
        for (i = 0; i < desiredMCs; i++) 
        {
            var item:invoItem = new invoItem();
            
            item.x = 10;
            item.y = nextYPos;
            item.name = "invoItem" + i;
            item.itemName_txt.text ="Item Name: " + invoArray[i];
            item.itemType_txt.text ="Item Number: Item " + (i +1);
            item.itemDesc_txt.text ="";
            
            invoCont.addChild(item);
            nextYPos += item.height + 1;
        }
        
        for (i = 0; i < invoCont.numChildren; i++)
        {
            trace ("name: " + invoCont.getChildAt(i).name + "\t type:" + invoCont.getChildAt(i));
        }
        
        //If there is not enough content to scroll, disable it
        if(desiredMCs <= 3)
        {
            slider_mc.visible = false;
        }
        else
        {
            slider_mc.visible = true;
        }
    }
    
    else
    {
        //Do something to show an invalid number
    }
}


function removeInvoCont(e:MouseEvent)
{
    //Removing the existing inventory
    mainICont_mc.removeChild(invoCont);
    //Reseting variables for a new test
    slider_mc.handle_mc.y = 3;
    nextYPos = 10;
    popup_mc.inputField_txt.text = "";
    
    popup_mc.visible = true;
}

//Slider Functionality
function dragHandle(e:MouseEvent):void 
{
    rect = new Rectangle(0, 3, 0, 345);
    slider_mc.handle_mc.startDrag(false, rect);
    stage.addEventListener(MouseEvent.MOUSE_UP, releaseHandle);
    slider_mc.handle_mc.addEventListener(Event.ENTER_FRAME, scrollInvo);
}

function scrollInvo(e:Event):void 
{
    var scrollerRange:Number = rect.height; 
    var contentRange:Number = invoCont.height - mask_mc.height + padding; 
    var percentage:Number = (slider_mc.handle_mc.y - scrollerMinY) / scrollerRange;
    var targetY:Number = containerMaxY - percentage * contentRange; 
    invoCont.y = targetY; 
}

function releaseHandle(e:MouseEvent):void 
{
    slider_mc.handle_mc.stopDrag();
    slider_mc.handle_mc.removeEventListener(Event.ENTER_FRAME, scrollInvo);
}

That's about it. It was a nice little challenge that I think will help me with creating the action queue visuals when I get around to them, plus a better inventory management system. For bearing with me here is an point pickup inspired by the 2007 game Monster Madness: Battle for Suburbia!

No texture, sorry!