This is a work in progress tutorial. It's unfinished, and as such, you should ignore it until it's done.
Step 2. Make a da button work
Here is how it should be nested, root being the start
Do whatever you want on the main menu, I won’t tell you what to put. Now, create a start button.
It’s pretty ugly, I'm sure you can do better.
Convert it into a button and create the necessary frames for it.
Here is what each of the frames means for a button.
Up - The Button goes here when idle
Over - The Button goes here when the mouse is touching it
Down - The Button goes here when the mouse is pressing down on it
Hit - Hitbox of the button. If not defined, it will use the Up frame as its hitbox. This frame is never shown
Once it’s done being made, exit the symbol and give it an instance name using the property panel.
An instance is the name given to MovieClips and Buttons to access them via code. There are some rules about what names you can pick
- Has to start with a letter
- Can contain numbers, underscores, and dollar signs anywhere else
- Can’t contain keywords (words that do certain things)
- Can’t contain spaces
- Can’t contain swears
- I made the last one up :P
It’s also common practice to end your instance name with “mc” if it’s a MovieClip, “btn” if it’s a button, and “tx” if it’s text. This is to avoid a potential conflict with keywords or something like that; you can absolutely not do that if you want.
If you are still with me, in the main menu, create a new layer and call it “actions” or “code” or anything that reminds you that's where the code goes.
Put it where it can easily be found (like the top or bottom).
Select the frame and open the Actions panel (F9). To make the button interactable, we need to give it a task. Thankfully, AS3 has a way to sort “Assign orders” to movieclips using “addEventListeners”.
Start by writing the start button instance name and include the "this" keyword at the start to make sure that Flash knows it's referring to the start button from this EXACT location.
this.startbtn
Now, add an event listener to it like this and add parentheses next to the addEventListener, with a semi colon at the end to tell flash that's the end of this line and to move on (it's optional btw)
this.startbtn.addEventListener();
Now we have to specify to startbtn that it needs to look for a click from the mouse, this can be done like this
this.startbtn.addEventListener(MouseEvent.CLICK);
So we’ve assigned the startbtn a task, that is to report when it has been clicked by the mouse. However, it has nothing to do with this when it is activated. To make it work, we need to add a function.
this.startbtn.addEventListener(MouseEvent.CLICK, startgame);
This gives the startbtn the task to listen for when it’s been clicked by the mouse, when it does get clicked, do the startgame function, which right now doesn’t exist soooooo…
Start by typing in the function and then the name
this.startbtn.addEventListener(MouseEvent.CLICK, startgame); function startgame
Then put parentheses and inside of them type “event:MouseEvent”. Also, add “:void” at the end to signify that nothing is being returned to the function, again common practice that doesn’t necessarily need to be followed.
this.startbtn.addEventListener(MouseEvent.CLICK, startgame); function startgame(event:MouseEvent):void
And add brackets (or whatever you call them) like this
this.startbtn.addEventListener(MouseEvent.CLICK, startgame); function startgame(event:MouseEvent):void { }
Or you can do them like this (which takes up more lines and therefore is the inferior way of doing it)
this.startbtn.addEventListener(MouseEvent.CLICK, startgame); function startgame(event:MouseEvent):void { }
So let's take a couple of steps back and see what is going on rn. startbtn is given an EventListener, a task to call the startgame function anytime startbtn is clicked. Currently, the startgame function does nothing when it should be starting the game, which doesn’t exist…
Step 3. Make Cutscene
This is optional; if you don’t want to see a cutscene after playing the game, go to step 4.
From the root of the timeline, enter the game symbol and make an empty frame; the cutscene will be on here.
Make the background and convert the symbols.
Inside this symbol, animate your cutscene. Use as many layers as you want.