One Project Completed - PrepHelp

Hello everyone!

I should have posted this a little earlier, but time got away from me. I finished up the code stuff for PrepHelp. It now is a fully functional little program. Yippie! You can download it from here, but be warned: I have not improved the visuals past the mock ups I made for testing. I was planning on it but another idea came up that I will explain a little later. I did, however, provide a little instruction image pointing out what some of the more obscure, unlabeled buttons do.

I believe on my last post all I had left to do was set up the search feature, as well as implement the medical item category as well. The latter was very simple, just copy, paste, change a few names, and done. The search function...at first I thought it'd be easy, just do a check against the types and it will find them and sort them. Well, I was partially right. Actually finding the elements was the easy part, the hard part was figuring out how to display just the search results without overwriting my existing inventory.

Since I wanted to find all of the elements in the array that matched the given item type I found that the Array.Find() function wouldn't suit my purposes without a bunch of work. Instead I created a for loop, where on each element it would check if the item type matched the searched type. Here is an example below.

function SubmitSearch(string TempType)
{
    local GFxObject DataProvider;
    local GFxObject TempObj;
    local int j;

    //Clearing the temp array
    PP.TempFoodInv.length = 0;

    for(i = 0; i < PP.FInv.length; i++)
    {
        if(PP.FInv[i].T == TempType)
        {
            j = PP.TempFoodInv.length;
            PP.TempFoodInv.length = PP.TempFoodInv.Length + 1;

            PP.TempFoodInv[j].N = PP.FInv[i].N;
            PP.TempFoodInv[j].T = PP.FInv[i].T;
            PP.TempFoodInv[j].Q = PP.FInv[i].Q;
            PP.TempFoodInv[j].E = i; //Setting the temp element number to i so it will show where it is in the food inventory

            PP.TempFoodInv[j].D.Y = PP.FInv[i].D.Y;
            PP.TempFoodInv[j].D.D = PP.FInv[i].D.D;
            PP.TempFoodInv[j].D.M = PP.FInv[i].D.M;
        }
    }
    
    //If any matches were found, draw the new inventory
    if(PP.TempFoodInv.length > 0)
    {
        bFood = true;

        DataProvider = CreateArray();
    
        for(i = 0; i < PP.TempFoodInv.length; i++)
        {
            TempObj = CreateObject("Object");
    
            TempObj.SetString("FoodItem", PP.TempFoodInv[i].N);
            TempObj.SetString("Type", PP.TempFoodInv[i].T);
            TempObj.SetInt("Quantity", PP.TempFoodInv[i].Q);
            TempObj.SetInt("Element", PP.TempFoodInv[i].E);

            TempObj.SetInt("ExpY", PP.TempFoodInv[i].D.Y);
            TempObj.SetInt("ExpD", PP.TempFoodInv[i].D.D);
            TempObj.SetInt("ExpM", PP.TempFoodInv[i].D.M);
    
            DataProvider.SetElementObject(i, TempObj);
        }

        RootMC.SetObject("foodInvo", DataProvider);
    
        ActionScriptVoid("_root.clearInvo");
        ActionScriptVoid("_root.drawFoodInvo");
    }
    
    //If no matches were found, show an error
    else
    {
        ActionScriptVoid("_root.spawnSearchError");
    }
}

If the for loop found an element it would copy it to a new array. After it finished searching the entire array the temp array would be sent over to the SWF to be displayed. This way, my original item array would remain intact and I would only be displaying the contents of the found items.

Now, to talk about the idea that got in the way of redoing the graphics for PrepHelp. I have been calling it AssetManager, but the name will probably change. Basically it is just a remake of PrepHelp, but focused on helping keep track of the different assets needed for the projects I'm working on. I hope this can help me, and possibly others, keep track of how many things they need to work on, when they're due, and at what stage of development they are at. I could just take PrepHelp and rename few things and call it good, but that just isn't good enough.

While I was figuring out how to do the search feature I thought of a better way of doing things to make the whole system more dynamic. I figured if it was going to help you keep track of all the assets for every project you are working on it will have to be more flexible than having only two set categories(like food and medical in PrepHelp). So I am in the process of reworking it to allow user added categories with their own asset lists. This way a person can add as many projects as they would like, and the system would still work perfectly. I do plan on making graphics for AssetManager though, since I will probably be using it more than PrepHelp.

One feature I wanted to add, but couldn't figure out until a couple days ago was having a auto adjusting thumb on a scroll bar. Meaning, if you only had a couple items the thumb on the slider would be really big, while it would be a lot smaller if you had a bunch of items. That way you wouldn't have to drag as far to move a few items up, just like on a webpage. I have a working version, though it could use some tweaking if I can figure out to... Anyway here is the first version of it, using the inventory test I made a couple months ago and put up on my blog.

That's all I have for now. When I get the rest of the code wrapped up for AssetManager I'll fill in more detail on how I went about doing some of that stuff.

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!