Tutorials

April 13, 2009

Making a Complete Flash Game: Prerolling Sponsor Ads and Your Logo

More articles by »
Written by: Par
Tags: , , , , ,
cg-tn-3

Share on TwitterShare on TumblrSubmit to StumbleUponSave on DeliciousDigg ThisSubmit to reddit

One of the number one ways you can make money off your Flash game is to get a sponsor. One of the number one ways to get a sponsor is http://flashgamelicense.com.  That said, if you get a sponsor they are going to want their advertisement at the beginning of your Flash game.  Now honestly, this is probably one of the simplest things you can do with Flash. I mean all we are doing is showing their advertisement, which is likely a MovieClip, and then jumping on to our game.  But the thing is, you could sell your game to multiple sponsors. You are going to need a quick and easy way to show of the sponsors advertisement and your advertisement without having to change your whole game every time. So today we are going to write a quick simple class to go through and play all our sponsor and credit MovieClips before our game starts.

This tutorial is apart of a series on Flash game development and how to make a complete Flash game from the ground up.  Below is the Table of Contents for this series. If something in this article is confusing please return to the first article to progress from there. If you want to start this tutorial without reading the previous one, here is the source from the previous tutorial.  This series is for intermediate Flash users. If you are a beginner and the information in this series is too advanced please read, AS3 Flash Games for Beginners.

You are reading Making a Complete Flash Game Read more from this series of articles.

Step 1: Why our Preloader has a PhaseOut Function that we need to use

If you are following along from the previous tutorial you should remember that our ThePreloader class has a function called phaseOut that we run when our file is completely preloaded.  Also if you remember from the previous tutorial, we can’t use any of our game’s assets until our main timeline reaches frame 3.  Well if our phaseOut function immediately calls phaseComplete and jumps to loading our sponsors preroll then we are in trouble. Why? because our sponsors preroll hasn’t loaded yet since we are still on frame one. So just open your ThePreloader.as file and inside our phaseOut function add:

Tweener.addTween(this, { time: 1, alpha: 0, onComplete:phaseComplete } );

Alright, of course you will need to import Tweener and add it to your directory so flash can use it. But now it will take one second for our Preloader to fade out(plenty enough time for us to reach frame 3), then we can start loading our sponsors.

Step 2: Organize your Preroll MovieClips

Okay, First let me state the obvious, we are using Flash. Flash is great 2D animation software. Therefore most of your sponsors will probably do their animated logo as a MovieClip. So we are going to assume that all your sponsors will use MovieClips for their logo. Don’t worry, if they use a video file you can import it and tell Flash to embed it in a MovieClip. And if they just send you a JPG you can throw it in a MovieClip to solve that problem as well.

So here’s what you need to do. Download my FLA for this project. I have two MovieClips ready to be used. I’ll discuss how they are setup once you look at them.

Here’s the FLA: CompleteGame.fla

If you want to keep using your FLA from the previous project, just copy and paste Sponsors Preroll folder from my FLA file into your FLA file.

You’ll notice there are two MovieClips prefixed with Preroll under the Sponsors Preroll folder.  Doubleclick PrerollEchodrop, you’ll notice the timeline is 130 frames long.  In those frames we animate in a still rastor image of the Echodrop logo then we fade it back out. At the end, on the very last frame, we write in the actions:

gotoAndStop(1);
dispatchEvent(new Event("finished"));

So when our Preroll is finished, we dispatch “finished”. All we have to do is listen for “finished” in our class and we will know the animation is over.

One more thing, right click on PrerollEchodrop in the Library and goto Linkage…  Your’ll notice the class is PrerollEchodrop and the Linkage… has “Export for ActionScript” but not “Export on First Frame”. So we need to make sure our PrerollEchodrop Symbol is in the AssetHolder MovieClip in order for it to export. (If you are using my FLA, it will already be in the AssetHolder MovieClip).  You’ll want to do the same with the PrerollGameSponsor and any other Preroll clips you use.

Step 3: Let’s Code our Preroll Sponsors Manager Class

Okay, this is actually a very simple class. Here’s what we need. A class that will create our preroll clip, animate through it, call the next clip, animate through it, and so on until all our prerolls are finished.  We’ll call our classPrerollSponsors. So make the as file and let’s write the code. It’s super simple, here it is.

package com.asgamer.snipergame
{
	import flash.display.MovieClip;
	import flash.display.Stage;
	import flash.events.Event;
	import flash.display.Sprite;
 
	public class PrerollSponsors extends Sprite
	{
 
		private var stageRef:Stage;
		private var prerollList:Array; //keeps up with our Movieclip prerolls
		private var currentPreroll:int = 0; //the current preroll we are on
 
		public function PrerollSponsors(stageRef:Stage)
		{
			this.stageRef = stageRef;
			prerollList = [new PrerollEchoDrop(), new PrerollGameSponsor()];
		}
 
		public function preroll() : void
		{
			if (currentPreroll == prerollList.length)
				return prerollComplete();
 
			var clip:MovieClip = prerollList[currentPreroll];
			clip.x = (stageRef.stageWidth - clip.width) / 2;
			clip.y = (stageRef.stageHeight - clip.height) / 2;
			clip.gotoAndPlay(1);
			clip.addEventListener("finished", nextPreroll);
			stageRef.addChild(clip);
		}
 
		private function nextPreroll(e:Event) : void
		{
			e.currentTarget.removeEventListener("finished", nextPreroll);
			stageRef.removeChild(e.currentTarget as MovieClip);
			currentPreroll++;
			preroll();
		}
 
		private function prerollComplete() : void
		{
			dispatchEvent(new Event("prerollComplete"));
		}
 
	}
 
}

Okay, let me break this down:

  • imports, extends, stageRef. You should know what all this is (stageRef is just a stage reference holder). If not you should be reading AS3 Flash Games for Beginners
  • prerollList = [new PrerollEchoDrop(), new PrerollGameSponsor()]; Here we create instances of our two preroll classes and drop them in our prerollList array.
  • public function preroll() : void. The function we call every time we want to start the next video in the list.
  • if (currentPreroll == prerollList.length). So in the case of this example, currentPreroll should be 0 on the first run and prerollList.length should be 2. So if currentPreroll equals 2 then this will evaluate TRUE.
  • return prerollComplete(); If the above evaluates true then we run this line.  Here we are telling flash to return the result of prerollComplete. If you look at prerollComplete quickly you’ll see it only returns void so we are actually returning nothing. But we will dispatch our event in prerollComplete which is all we want to do anyway. We could have wrote this in two lines: prerollComplete(); followed by return; But it’s just simpler this way.
  • var clip:MovieClip = prerollList[currentPreroll]; Just grabbing the current preroll and dropping it in the variable clip. This way we don’t have to write prerollList[currentPreroll] every time we want to access it.
  • clip.x = (stageRef.stageWidth – clip.width) / 2; clip.y = (stageRef.stageHeight – clip.height) / 2; This will center our MovieClip, no matter it’s size, in the middle of the stage. One thing is required for this to work. The movieClip’s registration point MUST BE in the top left corner of the movieClip.
  • clip.gotoAndPlay(1); Simply reset and play our movieClip.
  • clip.addEventListener(“finished”, nextPreroll); Remember we dispatch the event “finished” at the end of our preroll MovieClip. Well we catch it here and call nextPreroll when it occurs.
  • stageRef.addChild(clip); uhm we add it to stage. Don’t even know why I am explaining this.
  • e.currentTarget.removeEventListener(“finished”, nextPreroll); Alright nothing complicated. e.currentTarget will let us grab whatever dispatched the event. In our case, it was our preroll MovieClip. So we remove the event listener because we are finished with it.
  • stageRef.removeChild(e.currentTarget as MovieClip); Remove the currentTarget.  as MovieClip let’s Flash know that the currentTarget is a MovieClip so it doesn’t give us a hideous error, 1118: Implicit coercion of a value with static type Object to a possibly unrelated type flash.display:DisplayObject., when we compile.
  • currentPreroll++ increment the currentPreroll by 1
  • preroll(); since currentPreroll is now 1 greater let’s run preroll again and show the next preroll advertisement or sponsor.
  • dispatchEvent(new Event(“prerollComplete”)); We’re done! Dispatch “prerollComplete”. Now we just need to make something catch it.

Alright, so what’s going to catch the prerollComplete? The same thing that is going to create an instance of our PrerollSponsor class, the Engine.

Step 4: Using our PrerollSponsor Class

Okay. Open your Engine class. Inside the showSponsors class change it to be this:

			stage.removeChild(preloader);
			var ps:PrerollSponsors = new PrerollSponsors(stage);
			ps.addEventListener("prerollComplete", showMenu);
			ps.preroll();

Nice, I really shouldn’t need to break this down but I will.

  • first we remove the preloader. (Which was already in our class from last time)
  • we create a new instance of PrerollSponsors passing stage into it as a parameter
  • we add an Event Listener that waits for prerollComplete to be called, once called we goto the showMenu function.
  • Then we kick off the PrerollSponsors class by calling the function ps.preroll();

Last you just need to create a private showMenu function that receives an event. It doesn’t need to do anything but needs to exist so flash doesn’t crash.  Anyway, here’s our new Engine class with these new updates.

package com.asgamer.snipergame
{
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;
 
	public class Engine extends MovieClip
	{
 
		private var preloader:ThePreloader;
 
		public function Engine()
		{
			preloader = new ThePreloader(474, this.loaderInfo);
			stage.addChild(preloader);
			preloader.addEventListener("loadComplete", loadAssets);
			preloader.addEventListener("preloaderFinished", showSponsors);
		}
 
		private function loadAssets(e:Event) : void
		{
			this.play();
		}
 
		private function showSponsors(e:Event) : void
		{
			stage.removeChild(preloader);
			var ps:PrerollSponsors = new PrerollSponsors(stage);
			ps.addEventListener("prerollComplete", showMenu);
			ps.preroll();
		}
 
		private function showMenu(e:Event) : void
		{
			trace("showMenu");
		}
 
	}
 
}

Alright. We’ve completed the second part of Making a Complete Flash Game.

Here’s our finished source:
Prerolling Sponsor Ads and Your Logo Source Code Zip Archive

Similar Posts:


Share on TwitterShare on TumblrSubmit to StumbleUponSave on DeliciousDigg ThisSubmit to reddit


About the Author

Par
Hey! Don't be surprised, I'm a flash developer. While Flash is definitely one of my favorite languages to develop in, most of all I just like making games. If you want to see the games I've developed so far head over to my website, DigitallyBold, in the link below. If you want to know more about what I'm working on now and in the future be sure to follow me on twitter.




13 Comments


  1. It’s not working, I think…:S What was it supposed to do? Because now I only see a grey screen, no proloader nor sponsors.


  2. Par

    Not sure man…. I’d have to see where the code is messed up. Download the Source at the end of the Tutorial and compare it with yours. I know it works.


  3. Figured it out. I had placed tweener in the wrong directory.


  4. Clouse

    Hmm… all i did was download the source, open up the .FLA, and Test the Movie and all i got was a grey screen, and two compile errors.


  5. Par

    Try reading the tutorial next time.
    You need to download Tweener and install it.


  6. pkr

    Read and used your tutorial! Learned a little bit!
    Simple, easy to understand and the explanations are really pleasing!

    I wish Id ve teachers like you in my younger days!

    Keep it going!

    cheers
    pkr


  7. You can, also, add links to the preroll.

    I have done it by myself ^^.

    Here are the new lines:

    First the imports. We need to add:
    import flash.net.URLRequest;
    import flash.net.navigateToURL;

    Next, we add two more global class variables:
    prerollLinks:Array;
    currentLink:int = 0;

    After that, in the constructor function we add at the bottom of the preroll list, the prerollLinks array, with the links in the same order than their appear order.

    Next, in preroll function we change this:

    if (currentPreroll == prerollList.length) {
    return prerollComplete();
    }

    To this:
    if (currentPreroll == prerollList.length) {
    stageRef.removeEventListener(MouseEvent.CLICK, link);
    }

    After that, we add in the preroll function:
    stageRef.addEventListener(MouseEvent.CLICK, link, false, 0, true);

    Next, we create a link function with this inside:
    var request:URLRequest = new URLRequest(prerollLinks[currentLink]);
    navigateToURL(request, “_blank”);

    And finally, we add to the nextPreroll function this:
    currentLink ++;

    I hope this will help you.

    Sorry for my English.
    Rolpege


  8. ath77

    Hi Par, I don’t know where to put the caurina folder in my project, you say:

    “Alright, of course you will need to import Tweener and add it to your directory so flash can use it. But now it will take one second for our Preloader to fade out(plenty enough time for us to reach frame 3), then we can start loading our sponsors.”

    Which is supposed to be ‘your directory’?

    On ThePreloader.as file, I write ‘import caurina.transitions.Tweener;’ INSIDE the ‘package com.asgamer.snipergame {‘.
    My question is, should the caurina folder be within the snipergame folder?
    Also I don’t know how properly configure the classpath. I’ve read on Tweener’s site that I should modify the doc’s classpath, but in the tutorial, the properties state its ‘com.asgamer.snipergame.Engine’.

    I’ve managed to follow and do all the stuff in your beginner’s guide as well as the preloader, but now I’m stuck here.


  9. I agree with ath77. I am also having an issue with the tweener. I wish you guys would have extended your basics series to add in the preloader and such, because I came to this tutorial to learn to put a preloader on a game, but so far I’ve been doing damage control with the code and am very confused. It would have been the perfect idea to extend your last set of tutorials instead of starting from scratch with something else.

    I am assuming I put the caurina folder included with the Tweener package into the projects com folder. Yet when I do I get nothing but errors even when I import the Tweener. A small guide on setting this up or a link would have been nice. I didn’t even see anything saying we were going to be needing anything else for this project besides the code we have. I didn’t even start to realise Tweener was a set of add-ons until I read through the comments.


  10. ath77 – I figured it out. When you install the Tweener zip there is a folder labeled caurina in there. That has to go into the default folder for your project, NOT in the com folder. The paths inside the files are not setup any other way so compiling will result in many errors. You also have to import it without the com. in front of caurina.transitions.Tweener; This is contrary to how they have been doing things thus far. Just thought I would help out.


  11. FX

    Slight issue. Tutorial 1 works great. I try recreating tutorial 2 but when it gets to the preroll it shows the trace for which preroll (0) but nothing plays. If I click on export on frame one then it plays correctly. I am sure (and have redone) moving my movie clips into assetholder but still no luck. I am using cs5.


  12. Iron3

    I am having trouble with Tweener.
    I downloaded the completed Tutorial Zip file but Tweener is not in that file.

    So I downloaded Tweener from Google. I have tried using it but I get
    Compiler errors. My path is correct I but I am not sure what the trouble is.

    @Beau, were did you get your Tweener.as file?

    BTW:
    ArgumentError: Error #2025: The supplied DisplayObject must be a child of the caller.
    at flash.display::DisplayObjectContainer/removeChild()
    at com.asgamer.snipergame::Engine/showSponsors()
    at flash.events::EventDispatcher/dispatchEventFunction()
    at flash.events::EventDispatcher/dispatchEvent()
    at com.asgamer.snipergame::ThePreloader/phaseComplete()
    at Function/http://adobe.com/AS3/2006/builtin::apply()
    at caurina.transitions::Tweener$/updateTweenByIndex()
    at caurina.transitions::Tweener$/updateTweens()
    at caurina.transitions::Tweener$/onEnterFrame()

    Thank you for anyone’s help :-)


  13. FMPraxis

    I came by because I worked on other projects that didn’t need preloaders for so long that i forgot the code to make one :P . That said, I thought I would add some things to help anyone else who reads this.

    1) if you want to call your showMenu function later (i.e. after the player loses the game) you should change it to:

    showMenu(E=null)

    all you’re doing is giving E a value so you won’t get an incorrect number of arguments when you call showMenu();

    2) You can also preroll things by animating them in a MovieClip and all the linkage class for it needs is a loop function and this if statement:

    if (currentFrame==totalFrames){
    dispatchEvent(new Event(“prerollComplete”);
    }

    3) I haven’t tried it with Par’s code, but replacing “this.play();” in the engine class with “this.gotoAndPlay(3);” seems to negate the need for Tweener in my version. (I’m pretty sure mine isn’t capable of as much as the original, but it is easier to lay out and you can change the intervals easier)



Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">


Advertisement