Convert Flash to HTML 5 using Construct 3

Microsoft officially published on their website that Adobe Flash will no longer be supported as from 31 December 2020. This news was published on the 9 September 2019, giving people over a year to prepare for the conversions needed from Adobe Flash to html 5 on their sites. Adobe Flash end of support on December 31, 2020

Hundreds of people and sites will be impacted by this news. From the smallest Adobe Flash advertisement to complex educational websites thats content is purely created in Flash. The impact to these website owners is that the content that is currently viewable via the Adobe Flash plugin will no longer be visible as from 1 January 2021.

With this in mind I decided that what better way to get these people abit more prepared than to give a run down of how you can easily convert your simple,small Adobe Flash content to HTML 5 using the game engine Construct 3.

However, if you have an enormous quantity of conversions that need to take please hire me instead to get the job done speedily. (My marketing pitch is now all done;))

You will need beginners knowledge of Construct 3 for this tutorial

What is a SWF File ?

A SWF file is a file format that is used for videos, vector based animations and ActionScript, and can be known as a shockwave file too. It's used to seamlessly deliver multimedia content on websites. Adobe Flash can only be opened on sites that have the plug-in installed. Adobe Flash was originally owned by MacroMedia and was bought over by Adobe in 2005.

Extracting SWF files

Now that the formal jargon is done about what swf files are, lets just get into the fun stuff of converting!

I downloaded a demo swf file of a car speaker ad, the speaker animates and then the text flows in. I also downloaded the extraction tool I will need to get the necessary assets from the swf file. Install the app as per the instructions on this tools site. This is just a demo tool for this tutorial, and you can research open source tools and test as you go.

I now have the images, sprites, fonts that I need to rebuild this Flash Advertisement in Construct 3

Creating a new Construct 3 project

We can use the free version of Construct 3 for this tutorial as it will most definitely not be over 50 lines of code.

• Open your browser, and navigate to the Construct online editor:
  https://editor.construct.net/

• Click on New Project

• Type in your project name, I will be naming mine car_speaker_demo
• Choose your preset, 1080p landscape. This will automatically set the viewport size and orientation.
• Click on Create

• You start with a blank layout page.
• By default the layouts are named layout 1,2,3 etc. You can rename the layout if need be, I find it helpful when several layouts are created for larger projects IE, gameStartLayout, mainGameLayout, endScreenLayout.
• I renamed mine to mainLayout

• You can also go ahead and rename the Event sheet, again this is helpful in larger projects therefore, i will leave mine as is for now.

Importing Assets

Lets import our assets
You can either drag and drop the assets from the folder on your desktop, or you can double click the blank layout

• Find the sprite object type

• Click on insert
• A crosshair icon will appear
• Click anywhere on your blank canvas
• The Animations Editor window will appear
• Click on “Load an image from a file icon”

• Select your image off disk

• The image will now be displayed in the animations editor. You can edit from here, but that is not part of this blog scope.

• If you are dragging and dropping multiple graphics into your project that are not part of a sprite sheet, be careful because Construct automatically thinks that it is a sprite sheet animation, and will put them in 1 sprite object to play as an animation.

• Close Animation editor
• You will see your new sprite object under the object types folder in the project window

• Rename the object to what it is, in my case this is the background. If you leave your sprite named sprite, when you have multiple objects it gets confusing which sprite is which in very large projects.

• Repeat the importing process of images and rename them until all your images that are needed are in your project

• SAVE SAVE SAVE

Once all the graphic images are in the project, design the look. Where should the assets be placed, how big should they be, etc etc

I have a green background that needs to fade in at some point, but to save memory and space, its only a quarter of the size it should be. This is quite normal for backgrounds that are pretty basic, as then you can just tile them across the screen.

To insert a tile object,

• Double click the white layout in your project
• Choose the object type of tiled background
• Click on insert
• Find the tiledBackground object in the project view

• Double click the object
• Click on “Load an image from a file icon”
• Choose your sprite image that you want to tile as the background
• Close the tile background editor window
• Drag your tiled object from the project window into the layout view

Now that all the sprites are in that we need, we can move onto inserting text
To insert

• Double click the white layout area
• Find the object type of text

• Click on insert
• A cross hair will appear in the layout view
• Click on the area you want to place your text.
• In the project view window, you will see a new text object
• Rename it so that you know what text this object relates too

• Resize the text to what your project requirements are
• You can change the Font, size, text, colour all under the properties window while having the text object selected

In this example I need 2 text objects
I can duplicate this object by simply selecting the text object in the layout view, and copying and pasting
Rename this text object, and move it to where I need it

I am using plain text for the purpose of this blog, but if you look at the example its a fancier font

You can either use a sprite font, and use a tool called the sprite font generator or you can use a static image if you font doesn't need to be updated on run time.
To use a sprite font, you will need the font installed on your machine in order to create the sprite sheet. This is out of scope of this blog

We will stick to our text object for the purpose of this blog

Now that I have all the elements in place to start creating the animations for this flash project, I move everything in place, correct any ordering issues of sprites and put in my Call to Action button.

If we look at the original flash, the sequence is as follows :

• Static speaker with BG
• Speaker tweening in size
• Fade in text
• Fade in green BG with text over speakers
• Fade/dissolve in call to action button
• Repeat

There are a few objects in our project that needs to be hidden on start

• We can do this in two ways:
  • Select the object
  • In the properties window
  • Change the opacity to 0%

OR

• Select the Event Sheet tab

• Click on Add Event
• Click on system
• Find condition “On start of Layout”
• Click on next

This will add the condition “On start of layout” to the event sheet

• Next to this condition, click on Add action
• Click on the object that needs to be hidden on start
• Click on next

Under the appearance sub heading

• Find the set opacity action
• Click on next

• Set the opacity to 0%
• Click on Done

Now when you click on play, or the game runs in run mode, this object wont be visible
Give it a go!

You can now copy this action, and paste it for every object you need hidden on start
Double click the pasted action to edit the object that needs to be hidden

Now the only thing that should be visible on start when clicking on play is the static speaker bg

Comparing my original flash file , the static speaker displays and then after about 2 seconds the larger speaker tweens in size, so let's get the tween done

Add the tweening behaviour to the object

• Click on large speaker image object
• Click on behaviors under the object properties

• Click on add new behavior
• Click on lite Tween behavior (Third party addon)

The lite tween behavior is now attached to this sprite object

• Close the behavior window
• Go to the event sheet

We need to add a global variable to keep track of the time, due to the tween property only beginning 2 seconds into the start of the advertisement

• Right click on any blank area of the event sheet
• Click on add global variable

• Change the name to gTime
• Keep the type as Number
• Keep the initial value at 0
• Leave everything else as default
• Click on ok

You will see the newly created global variable at the top of the event sheet

We need to add a counter type functionality to know when the tween should start

• Create a new event by clicking add event
• Click on system
• Find the condition “Every X seconds”
• Type in the value 1, IE Every 1 second something must happen
• Now add the action, click on add action
• Click on system
• Under the Global and local variables heading
• Select Add to

• Choose your global variable you created earlier
• Type in 1 in the value field
• Click on done

IE, Every 1 second add a value of 1 to the global variable called gTime

Create a new condition that depicts the action that needs to occur when gTime reaches 2

• Click on Add event
• Click on system
• Select compare variable
• Select gTime
• Change the comparison value to =Equal to
• Change the value to 2
• Click on Done
• Click on Add action to this condition
• Click on the large speaker image
• Select the set opacity action
• Change the value to 100

IE: when gTime is equal to 2 -> set the opacity of large speaker to 100

Click play and see what happens

Add the tweening behavior now so it looks like the speaker is playing

• Set the behaviour properties on the object
• Set the Active on start to No
• Set Tweened property to size
• Leave everything else as default
• We can also change all these values from the event sheet, but due to us only having one action for this object its easier to change it in its properties

• Go back to the eventsheet
• Under the condition we created earlier where we set the opacity of the large speaker to 100%, and 4 new actions
• Click on action
• Choose large speaker
• Select liteTween parameter Set Target
• Change the Target is to Width
• Leave the Relativity
• Update the value to self.width+10 (setting the size of the image to its size plus 10 pixels)
• Copy this action and then change the target values to Height and value self.height+10

• Copy the action and then update the property to Set Duration
• Set the value to 0.125

• Copy this action, and update the property to Playback controls - start

A reverse tween is needed when it gets to a 1.1 size of its original size

• Add a new event
• Select the large speaker image
• Choose the liteween poperty on LiteTween end
• Click on add action
• Select large speaker object
• Choose Playback control parameter of Revers
• Keep the default values
• Click on Done

Now it needs to loop

• Add event
• Choose the large speaker
• select "On tween reverse End"
• Click on next
• Choose add action
• Select the large speaker object
• Under Playback control, select the start parameter
• Click on run to test that your code functions as you expect it to

Add the fading-in effect of the first lot of text

• Click on the text object
• Click on the behaviors
• Click on add new behavior
• Select the fade
• Click on add

• Edit the Fade properties on the object
• Change the Fade in time value to 1
• Change the fade out time to 0
• Untick enabled

We want the font to fade in after about 5 seconds, IE when the gTime variable reaches a value of 5

• Add a new event
• Click on system
• Click on Compare Variable
• Click on Next
• Choose variable gTime
• Comparison should =equal to
• Change the value to 5
• Add a new action
• Select the txtNoFun object
• Click on next
• Click on start fade
• Click on next

After 7 seconds we want the green background to show

• Click on the Play button object
• Add 2 behaviors, the litetween behavior and the fade behavior
• Set the properties of these behaviors as we have done earlier in this blog

• Create the events and actions needed for when gTime= 7, then:
  txtnoFun = opacticy 0
  Tiledbackground = Opacity 100
  System wait = 0.5 seconds
  txtBrandSpeakers = opacity to 100
  System wait = 1 seconds
  LargeSpeaker object = opacity 0%
  Play button image = fade start

I like adding a clicking affect to any of my buttons, this is purely a nice to have and not necessary at all

• Click on the play button game object
• Add a new instance variable to this game object too, this will help us evaluate when the button has been clicked or not. I need this to stop any monkey clicking that might occur

Adding a touch object

• Click on your layout sheet
• Double click the white area
• Select the touch object
• Click on insert

You wont see anything here, but now you will be able to see the touch condition in the events

• Go back to the event sheet
• Click on add event
• Click on touch
• Select the On touched object condition
• Choose the play button object
• Click on done
• Add 2 more conditions with values
  Iclicked = 0
  Button play image opacity = 100
  IE On touch button AND iClicked = 0 AND opacity = 100, then only do the following actions

• Set the actions as follows
• Set iClicked value = 1
• Start the tween in height and width over a time period of 0.125 seconds
• When the tween is done, reverse the tween
• When the reverse tween is done, set the iClicked instance variable value back to 0
• Test your code by clicking erratically on the play button in play mode

As a last action to complete this conversion, the play button needs to be a call to action, IE, either go to a website, open up a blank email to email the company, anything that get the user to interact with the ad.

In the same btnPlay condition on reverse end,

• Add action
• Add Browser (If the browser object is not visible, add it like we added the touch object)

• Select Go to URL under Navigation

• Type in the URL

Play test for the last time, and confirm that there are no errors, bugs and everything works similarily to the original

Conclusion

This was a super simple example of converting Adobe Flash to HTML5, but its a start and hopefully was fun and educational from a Construct 3 point of view.

I have worked on some pretty complicated conversions and with some grind, research, learning and pure creativeness, any project can be converted with the right tools!

Credits

https://blog.bannersnack.com/2-sample-swfs-available-for-download/
http://www.flash-decompiler.com/mac.html
https://editor.construct.net/