Month: January 2020

Creating an interactive story, or game can be tricky! This post has been written to show how to make an interactive story game in Flash (Adobe Animate) – described using simple (less non-tectie) methods.

Make an interactive story or, in my case – an interactive museum!

If you are completely new to creating games or making interactive gaming experiences, then I would advise looking posts such as this: creating a STEM game that was also made in flash. This is from another project I worked on in the past.

Flash, if you are unaware is the old name for Adobe Animate. All methodologies and approaches in the post are still relevant today and I am sure will help you in your journey creating a cool story type game!

The short answer: How to make an interactive story game in Flash (Adobe Animate)

Artwork | You will need a graphics creation program such as Adobe Photoshop or Illustrator, I have written a detailed post on the graphics programs which you can read here – creating digital artwork.

Build it | In order to build, or develop your game, you will need to use an engine or a platform such as Unity or Adobe Animate (flash) which is what this post and project as all about!

Publish it | Is that all? Sort of, if you want to make a compelling story game you will need to put a lot of time into making some striking visuals and compelling narrative to carry the player through to the end.

If you are just embarking on making games or interactive experiences, I would also consider using a powerful game creation program such as Unity. Unity is powerful, you can create a range of games types with many off the shelf solutions.

Although, Unity does come with a steep learning curve, so be warned!

The interactive museum in this post was built for a client using Adobe Animate and Photoshop. The steps below outline some of the methods and approaches to creating an interactive project.

Using Adobe Animate to build a game (or museum)

My core training was based around using Adobe Animate to make 2D games, animations, and rich media experiences – it was my major!

Now, I don’t wish to go into the opinions of why or why not to use Animate in this day and age. I will assume for whichever purpose, you either need or want to use the application to build an awesome experience and that is okay! None should judge.

You should know this when you publish with Adobe Animate.

When you publish a game in Animate, it can be created in the following formats and platforms:

• .SWF (flash player browser) ( I would avoid this format now due to lack of technical support and accessibility issues – read more reasons on avoiding flash player on this blog ) .
• HTML5 – can run straight from your browser.
• Projector files for both Mac and PC – similar to making regular program or .exe file.
• As an app for Android and Apple.
• As an enclosed Adobe Air app that can be downloaded straight to the computer.

My interactive project as shown further down in this article was made by publishing as an Adobe Air application and as a browser-based *SWF format. Old yes, irrelevant? Not at all.

The .SWF format or flash player for browsers to be specific is an old format and I would now avoid using it.

If you are undecided which is best if you are intending on making a game solely for a browser – use HTML5, WEB GL, or if you download your game, use Adobe Air.

Publishing to Adobe Air applications isn’t the only way to create an enclosed stand-alone program or application. You can use .exe or a mac projector also.

Flash Publishing Plus

You can also download applications that extend the publishing capabilities of flash.

For example, ZINC will make a neat package for your application although it has now taken its servers offline you can still use the legacy format. MDM Zinc

Edit / note : many of the formats Animate can now output is very much capable enough of fulfilling the duties of these programs listed here. eg. Zinc.

You can also create a DMG on an iMac and pack your items inside it for professional distribution. You can also have a lot of creative license for logos and interface artwork.

On a personal note, I would be inclined to stick with *ADOBE AIR ( no longer owned by Adobe ). Adobe air comes with more than enough capabilities for packaging distribution for your game – even to implementing your or desktop icons.

Using Adobe Flash (animate) to publish your interactive story game to a browser

The image above is from a slightly older version of Adobe Flash (now Animate) but it shows that it is mostly a case of ticking the publishing formats you wish to use.

If you are skim reading this, I would advise paying close attention to the next paragraph, especially if you want to put your game on the web.

Using The SWF format and flash player for your game?

The .SWF format is no longer as widely supported as it used to be, especially if you publish it to the web as a flash player. I would advise against using this format.

You may notice on certain websites a notification box appears on the body of a page asking for you to “run flash player”? That is what now happens if you publish to flash player / SWF. As shown below. Or, it should be a case that now Flash Player has gone altogether.

The image here illustrates the flash player being put on hold until it is enabled by the user.

By publishing to the flash player with your .SWF object – Instead of your movie, you will get a hollow grey box and notification.

Using the .SWF object makes for terrible user experience in 2020 and has done for some time now. Many people are more likely to hit the back button or just ignore the interactive content as it needs to be enabled or ‘allowed’ by the user.

And how heartbreaking is that feeling after spending all of your time creating a game or animation? Flash player is now stopped by default by many browsers.

With this in mind, I would say it is best to avoid a SWF / flash player for the browser. And, don’t forget how this will also behave on a Smartphone now too. ( This website, should I publish to Flash Player)

Use an alternative format if you want to display your content or show an animation – such as HTML5 if it is a game. This is all opinion based on what I have seen, learned and what is now professionally advised. You may ignore all this if you wish.

You will need to know ActionScript 3.0 to make your game work in Adobe Animate (sorry!)

Did I mention code? I’m afraid so. If you are not a coder you may hit some hurdles here or need to do some homework – or hire and Action Script Developer! ActionScript is the lifeblood for Flash games.

There are not many ways around not using ActionScript.

Adobe Flash, which was renamed to Adobe Animate a few years back, uses a coding language called Action Script 3 (AS3) to add interaction to games and applications.

Without being able to code or at least being able to bash some ActionScript together, you will not be able to create a somewhat sophisticated interactive project in Adobe Animate, unless you are making an HTML5 game.

Making a game or an interactive experience will require getting into some script, even just to make a level change, a speech bubble appears or simple player interaction.

Interaction in Adobe will require you to program. It is not the hardest language but if coding really isn’t your thing… perhaps consider an alternative means or more visual-based engine?

Or why not just jump in with both feet and find out if you can code?

You can start to learn Action Script 3 here or by purchasing a cookbook and getting your teeth sunk into it.

You can find these types of books on eBay at a relatively low cost.

It should be noted that if you do decide to buy one of the ActionScript books from eBay I may get a small commission at no additional cost to you.

And yes, I do own one of these books personally. Purchase Essential Action Script 3 book on eBay.

Failing this, if you do not wish to read how to use Action Script you may find tutorials to watch instead or ask for help on forums.

How to make an interactive story game in Adobe Animate – The Nitty Gritty

Now you have an idea of what may be involved with creating your own game application or immersive experience in Adobe Animate. You may be ready to delve a little deeper … or run for the hills

To summarise what has been written so far you will need to do the following for your game :

– Rough / plan out your game or story – although be prepared to edit as you create the actual game

– Write in Action Script for interaction so it reacts to the player, eg: button clicks, movement, transitions to levels for your story.

– Publish it, and get your game out there.

That is a simplified way of summing up what has been covered so far. In essence that is a rough guide of what you need to do in layperson.

– Plan

– Roughout artwork

– Build

– Test / Publish

Whether you are intending on making a 2D gaming application, a story or an interactive museum as shown in this post, come at your project prepared.

Morale boost: As a warning, those milestones can seem a long way from time to time. One foot in front of the other! You will get across those desert coding plains.

Coding or not coding your story game

If coding really isn’t your thing and you are more or a designer than a developer – you should consider using an application such as Stencyl to take some smaller steps into game development.

Stencyl works like lego building blocks in which you can click together the functions and behaviours of your game. The image below is an example.

You can also read an example tutorial here on how to make a Cursor in Stencyl. Which was written by me when I used Stencyl a little bit more often.

Unity software is another option but it is a more advanced option if you are new to creating games and applications.

If you would like to know a bit more about Unity Software you can view why it could be an option for your game project or even have a browse of my micro portfolio that showcases other projects I have created using Unity Software.

Unity Portfolio Website

The next section of the post covers how I created an interactive museum for the client.

The Client Brief | Promote the museum (interactive experience)

After setting up a meeting and discussing the budget and the requirements, I set about what could be done to create an experience that would promote a local museum in Cornwall.

The website part of the project was built to inform and educate potential visitors. The interactive part of the website was built to ‘excite’ visitors and offer an e-learning experience.

The e-Learning part of the website is what I have focused on in the article – “How to make an interactive story game in flash”, or in this instance.

How to make an interactive museum experience that can be played from a web browser.

How I created an Interactive Museum in Flash | The Steps

Being a fan of all things to do with history and using my new found technical knowledge as a graduate, I jumped feet first into this project. This project allowed me to use my imagination and critical thinking to offer an experience that would entertain, entice and educate!

I was thrilled!

It was a challenge, but a great one to embark on so early on in my professional career.

Designing the interactive museum | pre-development stages

Before opening up flash or writing a line of code, I sketched down my ideas of what I was intending to do and proposed it to the client.

After getting approval for the initial design, I started to conjure ways to make this project come to life both visually and technically.

The interactive museum, which would work similar to a point and click style game or a graphic adventure would be launched at the same time as the website, which I also created.

The interactive museum was 2 stages – levels – where you could stand at two opposite ends of a large courtroom. This was the main stage of the hall, both in real life and in an interactive experience.

In early concepts, I toyed with the idea of creating other rooms but with time constraints and budget limitations, the 2 levels were more than enough and difficult enough in all honesty at an early stage in my career.

It is worth noting here if you are also thinking of designing and developing an app or game, add some wiggle room on the timeline.

You don’t want to be crushed by the deadline, worse still if you get stuck!

Under a supervised out of season and out of hours visit to the museum, I collected together as much knowledge as I could about my topic and environment. I wanted to create an authentic piece of work that would immerse the players.

I took pictures of the environment which would later become the interactive parts of my flash project. With the interaction in mind, I took plenty of interesting close-ups of Cannonballs, skulls, puppets, etc which would later be cut out and used.

Taking Photos of the Environment

The purpose of these PNGs allows for a transparent background on the objects. When the player ‘hovered’ over the PNG’s with their cursor in the interactive museum, a green outline would appear around the objects to show that it was ‘live’.

This small visual representation is a good way of showing to the player that the item was selectable or interactive in some way. Player or user experience was paramount to the project as it should always be when creating an experience.

After all of the content was collected together, edited and prepared it was imported into the project library in Flash and coded to life!

Yes, almost like a mad scientist.

Interactive Museum | The building & development stages

Heads up, consider ‘white boxing’ your game

White boxing? What am I talking about!

By this point, I had taken my photos and created the bits and pieces as I needed to – based on my artistic and creative vision.

All the artwork was finished cut out etc.

As a more modern method, I would actually advise against making your app this way.

Don’t worry about all the nice polished artwork first. Focus on the function of the game.

Why?

It’s not an art project for starters even though that is how I treated it. It’s a learning experience for “others” to use. It’s for the client to promote the museum. Not for me to show my skills, that comes second to the brief.

Also, if you are new to a program, and you have no outside help, you can throw away a lot of time focussing on aesthetics that you may not be able to use due to technical issues and programming hurdles which you cannot overcome.

And guess what happened to those piece’s artwork or assets because of that technical issue?

Or things I couldn’t overcome – despite the fact I had created the final artwork?

They were canned.

I didn’t get to use it. All that time photographing, trimming, prepping, etc and I couldn’t use them because whilst I was overconfident I could code it into existence – I did meet with time and technical hurdles.

Save time!

I would advise using a method called “white boxing” and this carries across many gaming or interaction projects.

Okay, what is “White boxing!?”

White boxing is a stage in which you are testing and designing how your game or interactive museum may work.

It’s a case of designing the function before the form and seeing what constitutes as an actual viable gaming experience.

In other words it a bit like mocking your game up first, or loosely sketching out what goes where and seeing how it works and behaves.

If you are curious and just want to find out a bit more on where I learned the term “White Boxing” read the book ‘Unity in Action’ – good book in my opinion!

You can find out a bit more about it here on eBay. It should be noted that if you do decide to purchase the book through eBay, I may get a commission at no additional cost to you.

The code for the museum

In order to make this interactive museum work, I developed it in a language called ActionScript 2. Action script 2 is now a very defunct language and I would advise against learning that version of Actionscript now.

Unless you otherwise enjoy reading obsolete languages or need to edit the code in a very old project! And if you are editing the code in an old project it in AS2 – it needs to pulled out of the dark ages ( I can talk)

For which ever reason, stick with AS3 (Action Script 3) by default when working in Animate

And, for the sake of keeping my shared knowledge more relevant, I will share with you a piece of Action Script 3.0 instead which was the closest match to my AS2 script.

Now, if you are completely new to using Adobe Animate, I would advise downloading a demo from Creative Cloud and getting stuck in from there. The Demo is free!

Note: Remember that is a general overview of how I created an interactive museum. To go into greater depth I would advise looking for step by step tutorials on using Action Script 3. You would need a lot more than this post to discuss how all aspects of the code makes the museum work.

After I imported my artwork to the library it was essentially broken down into core elements – the background and the interactive elements – the clickable bits!

In order to make my content interactive, I needed to make things happen when they were pressed. A Scene change, a speech bubble or all trigger by Action Script 3.0

For example, this snippet of code is what makes a button take a player to the next scene when it is clicked.

After I imported my artwork to the library it was essentially broken down into core elements – the background and the interactive elements – the clickable bits!

when this button is clicked, go to the next scene, the next scene would represent the next level.

For your own knowledge, and for my personal reference – I will call this a simple click and go to the next scene.

And it just that, when the “arrowBTN” was pressed in the scene, it would take the player to the next stage or level – or Scene 2. There is nothing stopping you from adding multiple scenes to your game and having multiple click arrows!

Illustrations showing how to make a level change in principle

Click a button, go to Scene2.

Interactive story game / Museum | Hide and Unhide

The essence of this hide and unhide would be along these lines in Action Script

When I ‘hid’ or ‘unhid’ objects in a Scene, I used Action Script to do so – Object Orientated Programming.

This is the principle of what I used with Action Script 3.0

MovieClipname.visible = false;

That little snippet of code (ActionScript 3) was employed a lot when creating a project.

That single short line of code is telling Adobe Animate (flash) to hide the object when it comes to runtime ( when you publish your app).

When It’s visibility is ‘false’. It will not be seen by the player. At some stage, you will need to make it’s visibility true!

Now, in order to make the movie clip become visible – it would have been attached to a button like so. And this would have been written.

MovieClipname.visible = true;

Object Orientated Programming Inside Adobe Animate

ActionScript 3.0 really honed in on something called Object Orientated Programming or OOP – now being a bashful designer.

At heart, a part of me didn’t want to discuss what Object Oriented Programming is – the notion of having me describe it here brings me out in schoolboy sweat

Object Orientated Programming is something I make use of lot these days whether it is piece of script in C Sharp or something to be created in Animate. OOP works with elements and animations inside your game, level or scene. It is dedicated to working more fluidly with objects and classes.

Here is the Adobe definition for OOP.

“Object-oriented programming (OOP) is a way of organizing the code in a program by grouping it into objects. The term object in this sense means an individual element that includes information (data values) and functionality.”

– Source : Adobe

I hope my simplified approach helps with some principles of How to make an interactive story game in flash (Adobe Animate). Although this was used on the older museum project, the method still carries today.

That is a principle and condensed overview of steps I used to build this interactive museum.

There was more involved in my version such as point scoring but I won’t share that in this post, as this post talks about the project as a whole and why it was created and what it wanted to achieve – not the development stages.

Designing an interactive museum | The final Product

Up to this point, I have covered some of the technical steps I used to create the application along with discussing the core principles in both the artwork and the main behaviours in the code.

To the all-important stage, the final product.

Looking back | What was this for and did it stay on track?

This browser game was created to educate, entertain and draw attention to the real museum located in the town.

Did I feel that I stayed on track and met the brief as one of my early projects as a postgraduate and a freelancer? Mostly, but there are things I would do very differently now. In particular on the website and the UI to capture the core look at feel.

The is museum was created in conjunction with the new brochure website which set up to educate and talks to readers about the local trust of whom were my clients for this project.

If I was to be honest, the one thing I would say is that parts of the website was OTT for the client’s objectives and budgets.

This browser game was created to educate, entertain and draw attention to the real museum located in the town.

The interactive museum itself offers a great addition to the project as a whole… that is where the project was arguably unbalanced from a web entrepreneurs perspective. The interactive museum was an addition but that is where most of the money and time were invested instead of the website which should have been the ultimate focus in my opinion.

The museum dominated too much.

To come at this again, I would invest much more into getting some enquires and activity from the brochure website. That would at least balance it from a business perspective.

All experience in hindsight from 11 years past! A lot happens in a design career in that time.

And it also contributes to what I am writing today. How to make an interactive story game in Flash (Adobe Animate)

What I would also do differently on my museum | personal note

The project on a personal note gave me a tremendous amount of experience in interaction design and creating applications in Flash. This was a follow on from creating games in flash, for example like the STEM / E-learning game I created which you can read more about.

From memory, the museum project was a challenge – mostly coming from how long it took to animate all the little elements and bug test it.

In the end, I felt it gave a result that I was proud to be part of and that was making an E-learning experience which was educational and fun.

There are a few things I would do differently from an art director’s perspective. As it was a project of limited financial resources, there is only so far you can g, sadly.

If this post has inspired you to create a game in Adobe Animate and how to make an interactive story game (not strictly in flash) then please refer back to this post, or feel free to ask any questions.

Below are some other additional links which cover topics such as; how to create and E-learning game, tip for website design and even some insights into alternative game engines!

How to make an interactive story game in Flash (Adobe Animate) – other resources

Games & Applications

How I created a STEM game in Flash.

Why Unity is Awesome

How to make a Cursor in Stencyl (2D)

Physical Games Tutorials

How to make a successful retail-ready game

How to sell a game to retail

Website Design Projects & Applications

Idesign Application Application Design

Website UI’s

Design Bytes External Websites –

Unity Show Case – you can play games

Other Sources for information on Action script and Flash

Is Action Script 2.0 Dead? Link

Don’t use the .SWF (Flash Player) format for web | Link

* Flash is now Adobe Animate. Animate is still, in essence, the same program.

* ActionScript 2.0 is now defunct language. ActionScript 3 is now the more modern Object Orientated language used in Adobe Animate.

* .SWF format for web is an essentially old and almost redundant format to publish to. I would advise against publishing for the flash player for web – especially in 2020.

How to make an interactive story game in Flash (Adobe Animate) – Useful Resources

Action Script 3 book on eBay

Thank you for reading how to make an interactive story game in Flash (Adobe Animate)!