My Geek Life

Context Menu

2009-10-28T18:35:00.000-07:00

So, i have viewed a lot of flash files over the last few years and noticed that a large amount of them don't bother with the context menu. A few just hide it completely, well, as much as flash allows you to anyway. This isn't bad but you could get a lot more out of it if you wanted to. You can add your own items to that menu and even get them to perform functions within the flash movie. When i first came across this i found it quite hard to understand but none the less i soldiered on with it until i got it. Since then i have used it in all of my projects for many different things but the main use is to link back to your websites if your flash movie isn't hosted there or if you host it on a few different sites.

So to get started, open up an actionscript 3 file. Select the first frame and open up the actions panel(press F9).

!!!Remember that all code is case sensitive and should be copied exactly else it may not work!!!

Put this code in the panel:

--------------------------------------------------------------------------

var myMenu:ContextMenu = new ContextMenu();

myMenu.hideBuiltInItems();

var item1:ContextMenuItem = new ContextMenuItem("what you want to see goes in here");

myMenu.customItems.push(item1);

item1.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, openLink);

function openLink(event:ContextMenuEvent):void
{
navigateToURL(new URLRequest("http://www.dansgeeklife.co.nr"));
};

contextMenu = myMenu;

--------------------------------------------------------------------------

Explaining the code:

var myMenu:ContextMenu = new ContextMenu();
This is creating a new variable, naming it myMenu, telling flash what type of variable it is ContextMenu, and telling flash its a new ContextMenu.

myMenu.hideBuiltInItems();
This does what it says... It hides the standard built in items. You can hide them individually if you want to, just look on the adobe as3 help files to find all the options.

var item1:ContextMenuItem = new ContextMenuItem("what you want to see goes in here");
This creates a new context menu item, change the last bit to what you want to see like your website name, more games etc.

myMenu.customItems.push(item1);
This adds the newly created menu item into your custom menu. Without doing this the item would not show up.

item1.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, openLink);
This adds an event listener to the menu item so when you click it it performs your function.

function openLink(event:ContextMenuEvent):void
This creates the function to be run on clicking your new menu item. The event type is ContextMenuEvent telling flash to listen for that.

navigateToURL(new URLRequest("http://www.dansgeeklife.co.nr"));
This tells flash to look up an internet address, a new URL request is made directed to the website defined by you.

contextMenu = myMenu;
This tells flash that its context menu is to be replaced with your new context menu.

Now test the file and right click. The menu should now show the item you defined and when clicked should take you to the website you defined.

There are a few other options to look at too, like, you can add an item to the menu and stop it from being selectable. This is good for adding copyright information, your name and the date it was made for example. To do this just put the line:
item1.enabled = false;
After the line defining the item1 variable. Of coarse doing this would mean that the item cannot be clicked and therefore cannot run any function so doing this would be useless if you want to use it as a button for doing something within your flash movie. But you don't need to have the items run any function. you can just add them to the menu without them being used for anything.

Also, to add more items to your menu you don't need to make more or the myMenu variables. Just copy out your item1 variable and change its name to item2, then copy out the customItems.push line and change that to item2 too so it would look like:

--------------------------------------------------------------------------

var myMenu:ContextMenu = new ContextMenu();

myMenu.hideBuiltInItems();

var item1:ContextMenuItem = new ContextMenuItem("what you want to see goes in here");
var item2:ContextMenuItem = new ContextMenuItem("what you want to see goes in here");
item2.enabled = false;

myMenu.customItems.push(item1);
myMenu.customItems.push(item2);

item1.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, openLink);

function openLink(event:ContextMenuEvent):void
{
navigateToURL(new URLRequest("http://www.dansgeeklife.co.nr"));
};

contextMenu = myMenu;

--------------------------------------------------------------------------

That just about covers the basics of custom context menus, hope it helps!

Preloaders...

2009-10-28T08:37:00.001-07:00

Making a Flash file for your website can add some interactivity such as games or animations. The problem is, a large file or people with slow connections will have to wait for the file to load before it can be viewed. Without a preloader this would just look like a blank screen, and could look like the page or content isn't loading. This is bad for your page making it less user friendly and less likely to be visited again.

So we need a preloader to show that the file is loading and keep people viewing your website. This can be as simple or complex as you like, though simple ones are the easiest and don't add too mush to your file size.

To begin, open up a new Flash File(actionscript 3) and create 2 or 3 blank keyframes on the first layer.

In the new frames add some large picture files from your computer, anything big will do. This is to increase the size of your file so when you test it, it has some size to it to show you that it works properly. Don't put anything on the first frame, this is where the preloader is going to sit and you don't want anything in the way on this frame.

In the first frame, draw a rectangle and make it 400 pixels wide and 15 pixels high with an outline and center it to the stage (ctrl+alt+2, ctrl+alt+5). The colour doesn't matter so long as it is different to the stage background so it can be seen. Select the inner(not the outline) rectangle and convert it to a movie clip(select it and press F8). In the options box that opens up: name the clip anything you want, select movieclip from the selection box( or list in CS3), make sure the registration point is in the top left hand box(the block of 9 squares to the right of the name box, the square that is blacked out is the selected one) and press OK.

In the properties inspector where it says Instance Name, type in loadBar. Now select the first frame in the timeline and open the actions panel(press F9). in the box that opens up, type:

!!!All code should be typed EXACTLY as it is seen, the capitals are important and the code will only work with them in the right place!!!

(anything green is code, that's what needs to be typed, anything else is just my explination of the code and should be left out of the actions panel)

stop();

This tells flash to stop on this frame, so it doesn't play through to your pictures which will cause problems.

function loader(preLoader:ProgressEvent):void
{
var percent:Number = Math.floor((preLoader.bytesLoaded*100)/preLoader.bytesTotal);

if(percent <=99)
{
loadBar.width = percent*4;
}
else if(percent == 100)
{
loadBar.width = 400;
loaderInfo.removeEventListener(ProgressEvent.PROGRESS, loader);
}
}
loaderInfo.addEventListener(ProgressEvent.PROGRESS, loader);

Thats all the code needed to get it to work, now i will explain it a bit in case you don't quite understand it.

function: this tells flash that it should do something

loader: this is just the name i used to identify our function, this can be set to anything you like so long as it isn't a predefined keyword used by flash, like function, stage and class are.

(preLoader:ProgressEvent): This is the event type, for example if walk was a human function it would be the event type (event:MovementEvent)

:void : This tells flash that the function will be returning nothing so it doesn't expect it to

var percent:Number = Math.floor((preloader.bytesLoaded*100) /preloader.bytesTotal); : This is the most important part of the code... the maths.

var is telling flash that this is a variable, percent is just the name, same rules apply here as naming functions,

Number is the variable type.

Math.floor tells flash that the calculation inside its () part needs to be rounded down, this is important to make the number 0-100 not a 2.787469484 or anything like that as that would mess up our loading bar.

((preloader.bytesLoaded*100) /preloader.bytesTotal); This is the calculation, the current amount of the flash file that has loaded times 100 divided by the total size of the flash file to make a 0-100 number.

I think the if statements are pretty self explanatory.

loaderInfo.addEventListener(ProgressEvent.PROGRESS, loader); This tells flash to listen for the loading event and do the function loader when it hears the event.

loaderInfo.removeEventListener(ProgressEvent.PROGRESS, loader); This tells flash to stop listening for the event, this has to be done or flash will produce errors when it no longer has anything to listen for.

I think that just about covers the simple preloader in flash. There are ways of making more impressive looking preloaders but this is functional and works so what else would you need?

To see some of my preloaders in action just play one of my games from the link at the bottom of the blog page.

Thanks for reading and i hope this helps you!

Introduction

2009-10-27T08:23:00.000-07:00

So, this is a blog about my life as a geek.

About me, well...

My name is Dan, i'm 22 and i'm a geek!

A few months ago i started learning ActionScript3 (AS3), a programming language used in Flash. I'm not a fast learner but i am learning to do some cool stuff, mainly game related as i feel it's a fun way to learn and should keep my interest for more than an hour.

I also play guitar and drums, not like a pro but i can knock out a few chords and keep in time most of the time too. I have been in a few bands and played a few gigs but nothing too serious, it's more about having fun than anything else... and we sucked!

That just about sums me up.

About this blog...

I am writing this blog as a chronicle of my AS3 progress. Where i get stuck and what i accomplish over the next however long it takes me and such. Not to say i wont post anything else, but mostly my AS3 stuff will be here for all to view and hopefully learn from if you are also learning AS3 and find this in looking for the answer.

So far i have made a few silly little games that aren't very good but it's a start, eh?

You can see and play those here

I think thats enough for now anyway.