New! Unlimited audio, video & web asset downloads! Unlimited audio, video & web assets! From $16.50/m
Advertisement
  1. Game Development
  2. Game Design
Gamedevelopment

Build a Sci-Fi Game Intro Using Assets From deviantART

by
Difficulty:BeginnerLength:LongLanguages:

In this tutorial we will create an intro to a space-themed tower defense game using only assets from deviantART.com. We will create all parts of the animation ourselves, mostly with the help of Photoshop brushes. In the end you will be able to create a stunning intro animation and a professional start menu for a sci-fi Flash game.


Introduction

How deviantART can not only inspire you but also serve as a stock and resource center.

As most of you will know, deviantART is an online community where users showcase their self-made artwork. There are literally thousands of breathtaking high quality pictures to inspire you for your next project. What you may not know is, that deviantART also has a category named Resources and stock images which is very useful for finding the assets you need to create impressive animations. The license for usage of the individual assets differ from unrestricted use without any credit needed to personal/educational use only. Be sure to add anything you like to your favorites (we'll get to that later) and leave a comment. And even if the artist says he doesn't need credit - give it to him anyway. If it wasn't for free stuff like this, only the rich kids could play our game.

While deviantART has not only hundreds of thousands of images and files out of every art-related aspect to give you inspiration for a new project, it also gives you the possibility to create your own "folders" to store the bookmarks of assets you want to use. In this way you can create your own personal online library of high quality resources.


Section 1: Starting a Collection of Assets with deviantART.com

In this section we will learn how to find the assets we need for this tutorial and how to create folders on deviantART.com to store them.


Step 1: deviantART.com Create an Account

First thing you need to do is to create an account at deviantART.



Step 2: deviantART.com Searching for Tech Brushes

In particular, brushes (collections of shapes with a similar style) are very useful tools when it comes to creating something visually impressive, even if you have no artistic skills whatsoever. As of the day this tutorial is written there are 57366 results on devianArt in Resources and stock images for the search term brushes. You'll surely find something useful for whatever project you're currently working on.

For this tutorial we will use tech brushes. So make sure you are logged in to your account, click on the category Resources and stock images on the navigation menu to the left and perform a search for tech.



Step 3: deviantART.com Creating a Folder

After you performed a search for tech one of the resources we need should already be on the first page of your results. For this tutorial we will need the Big Brushes 200 Tech Brushes resource.

In order to start a collection we need to add at least one item to our favorites first. So click on Big Brushes 200 Tech Brushes and add it to your favorite by clicking on the button to the upper right. It's common courtesy on deviantART to leave a comment if you liked something enough to add it to your favorites. Please take the 20 seconds and tell the artist how much you love his or her work!

After you have one resource in your favorites, deviantART allows you to create different folders to store your assets in. Refresh your page and click on Collect in the upper right corner of your screen. You will notice a plus symbol next to your Favorites folder (if you don't see anything in your Favorites folder, you forgot to refresh your page). If you click on it, a new folder appears and wants you to give it a name. Let's call it Tech brushes.





Step 4: deviantART.com Storing a Resource

To keep our workspace tidy we will now remove the Big Brushes 200 Tech Brushes from our favorites so we can later re-store it in our Tech brushes folder. Storing a resource in one of your folders counts as having them as a favorite, so you're not depriving the artist of his fame by doing so. Click on the Remove Favorite button that appeared where the Add to Favorites button used to be. If you refresh your page and click on your Collect button, you will notice that your Favorites folder is now empty but your Tech brushes folder is still there.

Now drag the image of the Big Brushes 200 Tech Brushes (don't get confused that your cursor is a magnifier glass - it's still draggle). You will notice that your Collect frame opens automatically. Drop the image in your Tech brushes folder and download the resource.

Congratulations, you just started your first online resource collection on deviantART.




Step 5: deviantART.com Collecting More Assets

We're going to need three more brush sets from deviantART:

Z-DESIGN Tech Brushes Set v5 by z-design,

Technical Brushes BEST OF 250x by basstar,

and conetix by r2010.

Drag and drop them all into our Tech brushes folder, leave each artist a comment for his/her amazing work then download the resources.



Step 6: deviantART.com Collecting PSD Files

Next we will collect the elements we need to complete the background and the planet for our animation. We'll start off by clicking on our Collect button in the upper right corner and create another folder. Let's call this one psd-files. Please notice that all the psd-files we're going to use are free to use for non-commercial use only. Depending on the kind of project you're working on you should always ask the artist for permission to use their work!

Now we use the left navigation menu. Click on Resources and stock images > Application Resources > Photoshop .PSD Files.

Search for "Space Resource". The first file we need is made by Superiorgamer and has the name Space Resource. Drag it into your psd-files folder, comment it and download the files. Another search result we need is Space Compisition Resource (also by Superiorgamer), comment and download.




Step 7: deviantART.com Adding Fonts

Now we need some fonts. Create a new folder in your Collect area, name it Fonts and search for sputturt. You will find the deviation Sputturt.Fecal (also referred to as Sputtert) by pabh. Drag & drop it into your Fonts folder, thank him for his nice creation in the comments and download it.

The next resource we need is the Lastwaerk - font by the user aajohan.

Unzip the folder and install the font on your system.



Step 8: deviantART.com Downloading

We need to download an image for the static effect. Create a new folder in your collection and name it Pictures. Download static by grandtheftautopsy,
drag & drop the asset into your Pictures folder and leave a nice comment.



Section 2: Using Photoshop to Prepare Your Assets

In this section we will cover how to turn brushes into pictures and manipulate the psd files we downloaded to fit our needs.


Step 9: Photoshop Preparing the Background

Since we will create a lot of pictures to animate later on, it would be best practice to create a new folder in which you can put all your creations.

Unzip Space Composition Resource, open the folder, select the file part 1.psd and open it in Photoshop. Since we only want the background, we'll need to remove some layers. Uncheck the visibility for the layers 24, 2, 5 and 4 and save the image as part 1.png.

Open part 1.png, select the Rectangular marquee tool, mark the whole image and send it to the Clipboard via Ctrl + C.



Step 10: Photoshop Finishing the Background

Open the file sisterplanets.psd from your Space_Composition_Resource_by_Superiorgamer folder and open it in Photoshop. Click on Layer 2 and paste part 1.png from the Clipboard into a layer by pressing Ctrl + V.

Delete Layer 1, and make the layers 2 and the text layer named SISTER PLANETS invisible.

We don't need the transparent parts at the top and bottom of the image. To get rid of them, select all layers by selecting Layer 12 first and shift + click on Layer 2. Press your right mouse button on the marked layers and select Merge Layers. Select the visible area of the image via the Rectangular marquee tool and go to Select > Inverse (or press Ctrl + Shift + I). Now press your delete key (although invisible something seems to be in those areas) and go to Image > Trim... and press OK on the menu popping up.

Save the file as Background.jpg. We'll get back to the file to implement it into Flash in Section 3.





Step 11: Photoshop Setting up and Loading Brushes

First we need all the files you downloaded from our Tech brushes folder. Unzip them if necessary and store the .abr files in Program Files>Adobe>Photoshop>Presets>Brushes. Depending on your operating system and version of Photoshop the names of the folders will differ slightly. The conetix file is different since it doesn't have an .abr files file in it. Just unzip it and remember where you put the folder, we'll get to it in Step 17.

Open Photoshop and create a new file. Name it Assets, give it a width of 650, a height of 500 and a transparent background. Set the foreground color to #00ff00 and save it as Assets.psd.

Select your Brush Tool by pressing B, move your mouse over the canvas and press the right mouse button. In the upper right of the appearing menu is an arrow button. Press it and select Load brushes from the appearing menu list. Go to the folder with your brushes (Program Files>Adobe>Photoshop>Presets>Brushes) and load the file WURKLASH_BIGBRUSHES200TECHBRUSHES.




Step 12: Photoshop Creating the Moving Text Asset PNG

After you loaded the new brush set, scroll down to the bottom of your brushes and select the brush with the number 79 under it. Move the cursor anywhere on the canvas and press the mouse three times on the same spot to get the color density we want. Trim the image (Image > Trim...) and save it as MovingText.png.

Don't save the changes to our Assets.psd file. The file is just a template in which we transform all the brushes we need into images.




Step 13: Photoshop Creating the Console PNG

Load the brush set Technical_Brushes_BEST_OF_250x_by_basstar (see Step 17 for details), scroll down to the bottom of your brushes and select the brush with the number 195 under it. Move the cursor anywhere on the canvas and press the mouse. Trim the image (Image > Trim...) and save it as Console.png.



Step 14: Photoshop Creating the Main Menu I

Open Assets.psd and load the brush set v5_INTERFACE (see Step 17 for details), scroll down to the bottom of your brushes and select the brush with the number 364 under it. Set the size of the brush to 450 px. Make sure your main color is still #00ff00, then move the cursor anywhere on the canvas and press the mouse button twice. Trim the image (Image > Trim...) and save it as Interface_Part_1.png.

Since all the brushes we use in the next steps are kind of faint colored it might be a good idea to create a black background layer in Assets.psd for readability reasons and save the file. Just remember to make the black layer invisible before trimming and saving the image as a png with a transparent background!




Step 15: Photoshop Creating the Main Menu II

Revert Assets.psd by pressing F12. Select your brush tool and right click for the brush menu. Find the brush we used for the moving text asset. In the row below it is the brush we need (see the second picture). Resize the brush to 200 px, move the cursor anywhere on the canvas and click. Trim the image (Image > Trim...) and save it as Interface_Part_2.png.



Step 16: Photoshop Creating the Main Menu III

Revert Assets.psd and load the last brush of the v5_INTERFACE set. Move the cursor anywhere on the canvas, click and use the Rectangular marquee tool to mark the two smaller displays highlighted in the second picture. Inverse the selection (Ctrl + Shift + I) and press delete.

Now select just the right one of the two displays and cut it (Ctrl + X). Trim the remaining image and save it as Interface_Part_3.png.

Revert Assets.psd and paste the second display on the canvas. Trim the image and save it as Interface_Part_4.png.




Step 17: Photoshop Creating the Main Frame Parts

For the main frame parts we will use the conetix file. Those of you who know how to work with brushes in Illustrator can do this step differently, everybody else follow my lead, we're going to use some tricks to get what we want.

Inside the zip file of the conetix folder is a file called conetix.pdf. Open it inside Photoshop and press ok when prompted to import the file. Select the item in the upper left corner by using the Rectangular marquee tool and copy it (ctrl + c). Press Ctrl + N to open a new document, use the presets from your clipboard and paste the image into the new file.

Select the layer with the image, double click the layer and go to the Color Overlay section. Set the Blend Mode to Color Burn and the color to #00ff00. Trim any unnecessary transparent areas (Image > Trim...) and resize the image (Alt + Ctrl + I) to a width of 650 px with constrained proportions. Save the file as Mainframe_Part.png.






Step 18: Photoshop Preparing the Planet

Open the Space Resource PSD. Make the following layers invisible:

In the folder "Planet Base": Background, 33, 34

Folder "Glows copy": 10

Folder "Coloring and crap": 13

Save the image as Planet_temp.png.

Open Planet_temp.png and change the canvas size to 2200 x 2200 px (Image > Canvas Size). Create a new layer under the image and fill it with black. You will see that our image has very sharp drawn edges that weren't visible with an invisible background. We need to soften those with the eraser tool (E). Select it, choose the standard Soft Round 300 px brush and change it's size to 600 px.

Select the layer with the image of the planet in it and move the brush in the black area outside of the edge of the original picture. Hold down your mouse button and move the mouse up and down until you start to see the edge disappearing. Do this all around the planet till you don't see an edge between the planet and the darkness anymore.

Resize the canvas to 2000 x 2000 px, make the black layer invisible and save the picture as Planet.png.




Step 19: Photoshop Creating the Title I

The following steps are inspired by a tutorial from n-sane.net.

Open Assets.psd and select the text tool (T). Select Lastwaerk black oblique as the font and 72pt as the font size. Select #ffffff as the font color.

Create a textfield and write "activeTuts+" in it. Duplicate the layer (right click on layer > Duplicate Layer...) and make it invisible. Then rasterize the first activeTuts+ layer (Layer > Rasterize > Layer). Press Ctrl + A to select everything on that layer and V to select the move tool. Use the Align menu at the top to center the image (Align horizontal centers + Align vertical centers).

Apply the Polar Coordinates filter (Filter > Distort > Polar Coordinates...) and select Polar to Rectangular.





Step 20: Photoshop Creating the Title II

Select Filter > Stylize Wind... and click Ok. Press Ctrl + F to use the filter a second time.

Go to Image > Image Rotation > 90° CW and press Ctrl + F two times. Repeat this two more times.

Rotate the image one more time by 90° CW to get the image back to its original position.

Reverse the Polar Coordinates filter (Filter > Distort > Polar Coordinates...) by selecting Rectangular to Polar.

The result of this process looks a little bit different every time you repeat it. If you're not satisfied with the image you get, try again.



Step 21: Photoshop Creating the Title III

Select the layer activeTuts+ copy, press Ctrl + A to select everything on that layer, copy it and paste it right back. This way the text gets centered. Delete the layer activeTuts+ copy.

Select the layer you just pasted in and open the Layer Style menu by double clicking the layer. Give the layer a Drop Shadow by checking the box next to it and an Outer Glow with the color #00ff00.

Select the activeTuts+ layer, open the Layer Style menu and select Gradient Overlay. Select the first preset and change the left color to #00ff00 and the right one to #2f39ff. Change the Angle to , the style to Radial and scale it to 30%.

Trim the image and save the file as Title_1.png.

Change the scaling of the Gradient Overlay on the layer activeTuts+ to 60% and save the file as Title_2.png.

Repeat this with a scaling of 90%, 120% and 150% and save the files respectively as Title_3.png, Title_4.png and Title_5.png.






Section 3: Using Flash to Animate the Assets

In this section we will implement the images we prepared in Section 2 into Flash and animate them. We will also use the fonts we collected in Section 1 and with the help of a little actionscript we will create a cool looking mouse-over effect for our main menu.


Step 22: Flash Setting up

Create a new AS 3.0 Flash file and set the dimensions to 650 x 500 px. The workspace preset I used is Classic. I wanted this file to run on all machines, so I choose a framerate of 12 fps. If you choose to use a different fps you have to adjust every following animation accordingly. Save the file as Intro_TD.swf.



Step 23: Flash Implementing the Background

Press Ctrl + r for the dialog to import a file to the stage (or go to File > Import > Import to Stage) and select our Background.jpg file. Make sure the coordinates of it are X: 0.00 and Y: 0:00. Double click on Layer 1 and rename the layer Background. The background image is bigger than our stage which is perfect, since we will simulate camera motion later on by moving the background.

Select our image on the stage and hit F8 to convert it into a Movie Clip. Name it Inner_BG and press OK. With Inner_BG still selected press F8 again and name this MovieClip Outer_BG.




Step 24: Flash Animating the Background

Double click on Outer_BG and create a Keyframe in the timeline by clicking on Frame 26 and then pressing F6. Move Inner_BG on Frame 26 to X: -625, Y: 0. Right click into the area between Frame 1 and 26 and select Create Classic Tween.

Go to Frame 40, create a Keyframe. Then go to Frame 80 and create another keyframe. Move the MovieClip in Frame 80 to X: -445, Y: -75. Right click into the area between Frame 40 and 80 and create a Classic Tween.

Click on Frame 80 and press F9. In the Actionscript editor write:

Save your Flash file by pressing Ctrl + S and take a look at the animation by pressing Ctrl + Enter.



Step 25: Flash Importing the Main Frame Parts

Lock the layer Background and create a new layer above it and name it Mainframe. Import the file Mainframe_Part.png onto the stage and resize its height to 32 px. Change its Y coordinate to -13 and flip it horizontally using Modify > Transform > Flip Horizontal.



Step 26: Flash Adjusting the Main Frame Part

Create a new instance of Mainframe_Part.png on the stage by selecting it, pressing Ctrl + C and then Ctrl + V. Rotate it 90 ° counterclockwise (Modify > Transform > Rotate 90° CCW). Change its height to 607 px and its coordinates to X: 635, Y: -7. Finally bring the image to the back by selecting it and pressing Ctrl + Arrow Down or right mouse click > Arrange > Send to Back.



Step 27: Flash Putting the Main Frame Together

Select both instances of Mainframe_Part.png on the stage. Copy/Paste them (Ctrl + C and then Ctrl + V) and rotate them 180° counterclockwise. Adjust their coordinates to X: -17, Y: -102. If you hide the layer Background you will notice, that this is the lower left corner of our stage.

Flip the bottom part of our frame horizontally (Modify > Transform > Flip Horizontal) and select all four instances of Mainframe_Part.png. Press F8 and name the symbol Mainframe. Save your Flash file by pressing Ctrl + S.

Now let's take a look at what we've done so far by pressing Ctrl + Enter. Enjoy your first view of space through a nice looking tech frame!




Step 28: Flash Preparing the Moving Text Asset

Create a new Layer and name it HUD_Text. Lock the layer named Mainframe and import MovingText.png onto the stage (Ctrl + R). Turn it into a MovieClip and name it Inner_Text_Asset. While Inner_Text_Asset is still selected, press F8 again and name this MovieClip Outer_Text_Asset.

Click into Outer_Text_Asset and create Keyframes by pressing F6 at the frames 10, 11, 12 and 20.



Step 29: Flash Animating the Moving Text Asset I

Move the MovieClip Inner_Text_Asset out of the visible screen area by setting it's X-coordinates to - 82. Right-click into the area between Frame 1 and 10 and select Create Classic Tween. Click on the frames of the Tween and in the Properties window under Tweening set Ease to 100 out.

Go to Frame 11 and change the height of Inner_Text_Asset to 150 px. Then bring the Transform Dialog up by pressing Ctrl + T and skew the MovieClip horizontal by - 55°.

Go to Frame 20 and change the Y-coordinate of Inner_Text_Asset to 120. Right click into the area between Frame 12 and 20 and select Create Classic Tween. Set Ease to 100 out.

Create Keyframes at the frames 21, 22 and 35. Go to Frame 21 and skew the MovieClip horizontal by 20°. Add a Blur filter to Inner_Text_Asset and set it to BlurX: 16 and BlurY: 0.






Step 30: Flash Animating the Moving Text Asset II

Go to Frame 35 and change the Y-coordinate of Inner_Text_Asset to 400 and create a Classic Tween between the frames 22 and 35. Set Ease to 100 in. Create Keyframes at the frames 36-38, 42-44, 50-53 and 60.

Go to Frame 36 and skew the MovieClip horizontal by -25°. In the same window (Transform) scale the height to 110%. Add a Blur filter to Inner_Text_Asset and set it to BlurX: 27 and BlurY: 0.

Go to Frame 37 and skew the MovieClip horizontal by 21°. Scale the height to 107%.

Go to Frame 42 and skew the MovieClip vertical by -30°.

Go to Frame 43 and skew the MovieClip vertical by 27°. Add a Blur filter to the MovieClip and set it to BlurX: 0 and BlurY: 17.

Go to Frame 50 and skew the MovieClip horizontal by -35°. Scale the height to 122%. Add a Blur filter to the MovieClip and set it to BlurX: 40 and BlurY: 0.

Go to Frame 51 and skew the MovieClip horizontal by 30°. Scale the height to 115%. Add a Blur filter to the MovieClip and set it to BlurX: 40 and BlurY: 0.

Then go to Frame 60 and skew the MovieClip horizontal by -65°. Scale the height to 225%. Add a Blur filter to the MovieClip and set it to BlurX: 0 and BlurY: 255. Create a Classic Tween between the frames 53 and 60.

Done all that? Now create an empty keyframe at Frame 61 by pressing F7. Press F9 and write

in the Actionscript editor.

Finally get out of the MovieClip Outer_Text_Asset back to the main timeline. Select Outer_Text_Asset and change its Blending (Properties window / Display) to Add.

Save your progress and take a look at it by pressing Ctrl + Enter.




Step 31: Flash Preparing the Console Asset

Create a new Layer and name it HUD_Console. Lock the layer named HUD_Text and import Console.png to the stage (Ctrl + R). Move it to the coordinates X: 438 and Y: 304. Turn it into a MovieClip and name it Inner_Console_Asset. With Inner_Console_Asset still selected, press F8 again and name this MovieClip Outer_Console_Asset.

Double click Outer_Console_Asset and create Keyframes at the following frames: 1-3, 10, 20-23, 30, 40-41, 43-49, 51 and 55.



Step 32: Flash Animating the Console Asset I

Go to Frame 2, press Ctrl + T for the Transform window and skew the MovieClip horizontal by - 63°. Scale the height to 225%. Add a Blur filter to Inner_Console_Asset and set it to BlurX: 136 px and BlurY: 0 px.

Go to Frame 10 and add a Blur filter with the setting BlurX: 88 px and BlurY: 0 px. Select the area between Frame 3 and 20 and create a Classic Tween.

Then right click on Frame 2, select Copy Frames and paste the frame into Frame 21.

Go to Frame 30 and add a Blur filter with the setting BlurX: 30 px and BlurY: 0 px. Select the area between Frame 22 and 40 and create a Classic Tween.

Go to Frame 41 and add a Blur filter with the setting BlurX: 0px and BlurY: 144 px.

After that delete the MC Inner_Console_Asset from the following keyframes: 44, 46, 48.

Go to Frame 55 and skew the MovieClip horizontal by 65°. Scale the height to 225% and the width to 22%. Add a Blur filter to the MovieClip and set it to BlurX: 0 and BlurY: 255. Right-click into the area between Frame 51and 55 and create a Classic Tween.



Step 33: Flash Animating the Console Asset II

Create a second layer. Create two empty keyframes (F7) at the frames 1 and 2. Use Shift to mark the frames 3-21 from Layer 1 and copy them into the frames 3-21 from Layer 2. Remove the frames that appear after Frame 21 at Layer 2 and lock Layer 1.

Go to Frame 10 and change its X-coordinate to 72.

Go to Frame 21 and change its skewness from - 63° to 63°.

Create an empty keyframe at Frame 56, press F9 and write

in the Actionscript editor.

Now get out of the MovieClip Outer_Console_Asset back to the main timeline. Select Outer_Text_Asset and change its Blending (Properties window / Display) to Add.

Save your progress and take a look at it by pressing Ctrl + Enter.



Step 34: Flash Preparing the Moving Numbers Asset

Lock the layer HUD_Console and create a new one. Name it HUD_Numbers.

Select the Text Tool (T) and create a textfield a little left from the upper middle of the stage where the frame starts to get smaller. Write down any combination of numbers with the length of 7-8 characters. Set the font (Properties window / Character / Family) to Sputtert, the font size to 18 and the Anti-alias to Anti-alias for animation.

Then, click the "Embed..." button, and select all the characters you've used. (It's probably easiest to select Uppercase, Lowercase, Numerals, Punctuation, and Basic Latin -- that covers pretty much everything you'd need.) This will allow people to see the correct font when they load the SWF, even if they don't have it installed.

Select the textfield we just created, turn it into a MC and name it Numbers.



Step 35: Flash Animating the Moving Numbers Asset

Double click on the MC Numbers. Select the textfield with the numbers in it and copy it to the clipboard (Ctrl + C).

Lock Layer 1, create a new layer, select the next unused frame after the area of the empty keyframe (in this case Frame 2), create a keyframe and paste our textfield in it (Ctrl + Shift + V will place it at the exact same coordinates). Change the number to any other combination of numbers. Repeat this till you have 10 layers.



Step 36: Flash Adding Sparkle to the Moving Numbers Asset

Unlock the Layer 4 and add a Glow filter to the textfiled. Change the color to #00ff00 and give it the settings from the picture below. Repeat this for the layers 6, 8 and 10.

In Layer 10 change the Blur X to 0 px and the Blur Y to 10 px.

Go back to the main stage, change the blending of Numbers to Screen, save the file and test the movie.



Step 37: Flash Preparing the Planet

Since it's starting to get a bit crowded in our library this would be a good point to create two folders. One for the picture resources named Pictures and another one for the movieclips named MCs. Move the pictures into Pictures and the movieclips into MCs.

Unlock the layer Background and get into Outer_BG. Give Layer 1 the name BG and lock it. Create a new layer and name it Planet. Go to Frame 26 and create a keyframe.

Import Planet.png into that keyframe. Turn it into a MovieClip and name it Planet_Asset. Move Planet_Asset to the coordinates X: 65, Y: 450.



Step 38: Flash Animating the Planet

The idea is to simulate a camera zooming out until the planet is in full view.

Create a keyframe at Frame 40 and change Planet_Asset width and height to 80% (Ctrl + T). Move the planet to the coordinates X: -230, Y: 175. Create a classic tween between the frames 26 and 40.

Create a keyframe at Frame 80 and change the planets width and height to 33%. Move the movieclip to the coordinates X: 25, Y: -15. Create a classic tween between the frames 40 and 80.

Save, test and enjoy!



Step 39: Flash Putting the Main Menu Together I

Create a new Layer above Background and name it Main_Interface. Lock every layer except Main_Interface and import Interface_Part_1.png to the stage (Ctrl + R) - and no, you do not want to import all the images of the sequence. Move it to the coordinates X: 352 and Y: 23. Turn it into a MovieClip and name it Inner_Interface_Asset. With Inner_Interface_Asset still selected, press F8 again and name this MovieClip Outer_Interface_Asset.



Step 40: Flash Putting the Main Menu Together II

Click yourself into Inner_Interface_Asset, name Layer 1 Mainpart and lock it. Create a second layer and name it Underscores. Import Interface_Part_2.png to the stage and move it to X: - 170 and Y: 80.

Copy/Paste Interface_Part_2.png and move this version to X: - 170 and Y: 175.

Paste another instance of Interface_Part_2.png to the stage and move it to X: - 170 and Y: 279.

Paste again and move this version to X: - 170 and Y: 425.



Step 41: Flash Putting the Main Menu Together III

Lock the layer Underscores and create a new layer which you name Small_Parts.

Import Interface_Part_3.png and Interface_Part_4.png to the stage.

Move Interface_Part_3.png to X: - 125 and Y: 300 and Interface_Part_4.png to X: - 54 and Y: 300.

Turn Interface_Part_4.png into a MC and call it Blinking Display. Get into Blinking Display and insert a frame (F7) in Frame 2 and two empty keyframes at the frames 3 and 4.



Step 42: Flash Animating the Main Menu I

Get out of Inner_Interface_Asset and into Outer_Interface_Asset. Move the first keyframe to Frame 80 and create more keyframes at the frames 85 and 90.

Move Inner_Interface_Asset on Frame 80 to X: 500 and Y: 0.

On Frame 85 press Ctrl + T for the transformation window and change Inner_Interface_Asset's height to 120% and horizontal skewness to 33°. Then give the MC a Blur filter with Blur X: 55, Blur Y: 0.

Create a classic tween between Frame 80 and 85.



Step 43: Flash Animating the Main Menu II

Copy Frame 90 and paste it into Frame 86. Create new keyframes at the frames 87 and 89.

Go to Frame 87 and change Inner_Interface_Asset's height to 105% and horizontal skewness to -15°. Then give the MC a Blur filter with Blur X: 0, Blur Y: 55.

On Frame 89 change Inner_Interface_Asset's horizontal skewness to 15° and give the MC a Blur filter with Blur X: 10, Blur Y: 0.

Add more keyframes to the frames 115, 120, 250, 255 and 330.

Copy Frame 85 and paste it into Frame 115. Change the Blur X to 150 and the X coordinate to 290. Create a classic tween between the frames 115 and 120.

On Frame 250 change the vertical skewness to 20°. Give the MC a Blur filter with Blur X: 0, Blur Y: 75 and change its Y-position to 15. Create a classic tween between the frames 115 and 120 and ease it in with -100.

Add the following Actionscript to Frame 330:

Save, test, smile :-)



Step 44: Flash Creating the Leveler for the Main Menu

Create a new MC and name it Leveler_Asset. Set your stroke color to #00ff00 and your fill color to #33cc00 with an Alpha of 30%.

Select your Rectangle Tool (R) and draw a vertical rectangle with the size of 12 x 80 px. Copy that rectangle, create 4 more layers and paste one rectangle on each layer. Align them next to each other in a relatively small distance. Use the Align window (Ctrl + K) to align them to them to the same height and distribute them evenly.



Step 45: Flash Animating the Leveler

Create keyframes on each layer (1-5) at the frames 5, 10, 15, 20, 25 and 30. Lock all layers except Layer 1.

Go to Frame 5 and make the rectangle smaller (approximately half its size) without changing its width or position of its base. Go to Frame 10, change the size of the rectangle to approximately 2/3 of its size. In Frame 15 change the size again to about half and in Frame 20 go down to around 20% of its original size. In Frame 25 go back to approximately 60%.

Select all frames of Layer 1 and right click. Select Create Shape Tween.

Repeat the procedure with different changes in size for every layer. Make sure to change the size in Frame 1 and 30 to the same value as each other, so that the animation loops completely (use copy / exact paste [Ctrl + Shift + V]).




Step 46: Flash Implementing the Leveler

Get into Inner_Interface_Asset and lock all layers. Create a new layer and name it Leveler. Bring Leveler_Asset to the stage and resize it to 30 x 35 px. Move it to X: 178, Y: 160 and change its blending to Add. On my computer for some reason the changed blending didn't work in the animation of Outer_Interface_Asset after Frame 120. I fixed the problem by removing the unnecessary Blur filter with the setting Blur X: 0 and Blur Y: 0 from Inner_Interface_Asset at the frames 120 and 255.

Copy the instance of Leveler_Asset on the screen and paste it. Turn it 90° CW, change its size to 55 x 30 px and move it to X: 115, Y: 110.

Paste another instance of Leveler_Asset to the screen, turn it 90° CW, flip it vertical (Modify > Transform > Flip Vertical) and move it to X: 95, Y: 140.



Step 47: Flash Creating the Moving Bar

Create a new MC and name it MovingBar_Asset. Create a keyframe at Frame 6 and select your Rectangle Tool (R). Deactivate the stroke color, set your fill color to #12f836 and draw a horizontal rectangle with the size of 35 x 6 px. Send it to X: 0, Y: 0.

Copy the rectangle, paste it into the same spot (Ctrl + Shift + V) in Frame 1 and resize it to 3 x 6 px. Create keyframes at the frames 13, 19, 25, 33, 39, 42, 46 and 52.

Vary the length of each bar on each keyframe with a maximum width of 50 px, keeping the size of the one in Frame 52 close to the size of the one in Frame 1. When you're done, select all frames and create a Shape Tween.

Duplicate the MC MovingBar_Asset two times and go into each copy to vary the changes in size on each keyframe. Call the duplicates MovingBar_Asset_2 and MovingBar_Asset_3.



Step 48: Flash Implementing the Moving Bar

Get into Inner_Interface_Asset, lock all layers and create a new layer called MovingBars. Bring MovingBar_Asset to the stage and flip it horizontally. Move it to X: 250, Y: 357.

Bring MovingBar_Asset_2 to the stage and move it to X: 205, Y: 382.

Add MovingBar_Asset_3 to the stage and flip it horizontally. Move it to X: 250, Y: 407.

Change the blending of all three MCs to Add.

Save and test the movie.



Step 49: Flash Preparing the First Menu Point

Get into Inner_Interface_Asset, lock all layers and create a new layer called Start. Select the Text Tool (T) . Select the font Lastwaerk black, set the size to 36 pt and create a textfield. Write all capital "START" in the textfield and move it to X: -135, Y: 45. Give the textfield the instance name of ButtonText, and again Embed the font, just like with the Numbers. Then, turn the textfield into a MC and name it Menu_Start.

Move the keyframe from the layer Start to Frame 10. Create frames (F5) till Frame 10 for all other layers. This ensures later on, that the menu points only start to spell themselves when the main interface has fully entered the main stage.



Step 50: Flash ActionScript for the First Menu Point

Click into Menu_Start and create a second layer which you name Actions_Text. Rename Layer 1 to Text. Mark the area between Actions_Text - Frame 2 and Text - Frame 4 and press F6 to fill all frames with keyframes. Whilst still inside Menu_Start delete the textfield from the first frame of the layer Text. At the frames 2 and 3 click into the textfield and remove the letters ("START").

Lock the layer Text and select the first frame of the layer Actions_Text. Open the Actions window (F9) and insert the following:

In the second frame of Actions_Text enter the following:

In Frame 3 enter this:



Step 51: Flash Creating the CONTINUE Button

Go back into Inner_Interface_Asset and give the movieclip Menu_Start the Instance name StartButton.

Give it a Glow filter with the Strength of 320%; High quality and the color #FFA9A9. Also add a Drop Shadow filter and set the strength to 50%, quality to High and check the Inner shadow box. Adjust the position of Menu_Start to X: -140, Y: 45.

Create three more layers and name them Continue, Credits and More_TD.

Copy the MC Menu_Start and paste it back to the stage on layer Continue. Lock the layer Start.

Right click on Menu_Start on the layer Continue, select Duplicate Symbol... and name the new symbol Menu_Continue. Give Menu_Continue the instance name ContinueButton. Get into the symbol Menu_Continue and open the Actions window on Frame 1 of the layer Actions_Text.

Find the line that says:

and replace it with:

Then go to Frame 4 of the Text layer and replace the word "START" in the textfield with the word "CONTINUE". Adjust the size of the textfield so it's only one line. Also adjust the size of the textfields at the frames 2 and 3.

Go back to Inner_Interface_Asset and adjust the position of Menu_Continue to X: -160, Y: 138.



Step 52: Flash Creating the CREDITS Button

We will use the same principle we used to create the "CONTINUE" button for the remaining two buttons.

Lock the layer Continue and paste the MC Menu_Start onto the layer Credits.

Duplicate Menu_Start on the layer Credits and name it Menu_Credits. Give Menu_Credits the instance name CreditsButton. Get into the symbol Menu_Credits and open the Actions window on Frame 1 of the layer Actions_Text.

Find the line that says:

and replace it with:

Then go to Frame 4 of the Text layer and replace the word "START" in the textfield with the words "MORE TOWER DEFENSE". Reduce the size of the text to 32 pt and adjust the size of the textfield so that the words "MORE TOWER" are on one line. Also adjust the size of the text and textfields at the frames 2 and 3.

Go back to Inner_Interface_Asset and adjust the position of Menu_More to X: -180, Y: 355.



Step 53: Flash Creating the MORE TOWER DEFENSE Button

Lock the layer Credits and paste the MC Menu_Start onto the layer Credits.

Duplicate Menu_Start on the layer More_TD and name it Menu_More. Give Menu_More the instance name MoreButton. Double click the symbol Menu_Credits and open the Actions window on Frame 1 of the layer Actions_Text.

Find the line that says:

and replace it with:

Then go to Frame 4 of the Text layer and replace the word "START" in the textfield with the word "CREDITS". Adjust the size of the textfield so its only one line. Also adjust the size of the textfields at the frames 2 and 3.

Go back to Inner_Interface_Asset and adjust the position of Menu_Credits to X: -158, Y: 138.


<


Step 54: Flash Adding the ActionScript for the Mouseover Effect

Be sure to save now because the testing of the next step made my Flash crash when the distortion effect of the main interface appeared at the same time of the typewriter effect. It's stable as a published version in a browser though!

Create a new layer inside Inner_Interface_Asset and name it Actions_Interface. Move the keyframe from Frame 1 to Frame 10. Open your Actions window (F9) and enter the following code:

This code sets up different functions to run when you mouse over, mouse out, and click the four different buttons.



Step 55: Flash Building the Title

Since we have so much stuff flying around in our library again, it's time to move the pictures and MCs to their appropriate folders. Lock the layer Main_Interface, create a new layer above it and name it Title. Create a new MovieClip, name it Inner_Title and import Title_1.png into it. This time when asked if you want to import all images of the sequence click on Yes.

On the timeline select the frames 1 to 4 and copy them. Paste them at Frame 6, select the newly pasted frames, right click and select Reverse Frames.

Note: Since the size of your Title.pngs will vary due to the process of their creation you will have to adjust the coordinates in this and the next step according to your results.

Go back to the main stage, select Inner_Title and create a new MovieClip which you name Outer_Title. Move this MC 90° CCW and move it to X: -32 and Y: -67.



Step 56: Flash Animating the Title

Get into Outer_Title, move the first keyframe to Frame 90 and create new keyframe at the frames 100, 150-154 and 220-222.

Change the size of Inner_Title on Frame 90 to a width of 6 and height of 14, then move it to X: 323, Y: 300. Create a classic tween between the frames 90 and 100.

Create additional keyframes at the frames 95-97. On Frame 95 change the horizontal skewness of Inner_Title to -77° and give it a blur filter with Blur X: 28 px and Blur Y: 0 px.

On Frame 96 change the horizontal skewness of Inner_Title to -106° and give it a blur filter with Blur X: 0 px and Blur Y: 75 px.

On Frame 97 give it a blur filter with Blur X: 75 px and Blur Y: 0 px.

On Frame 150 give Inner_Title a blur filter with the settings Blur X: 38 px and Blur Y: 0 px.

On Frame 151 move the MC to X: -26, Y: 575 and add a blur filter with Blur X: 60 px and Blur Y: 0 px.

On Frame 152 add a blur filter with Blur X: 20 px and Blur Y: 0 px.

On Frame 220 give Inner_Title a blur filter with Blur X: 0 px and Blur Y: 42 px.

On Frame 221 give Inner_Title a blur filter with Blur X: 0 px and Blur Y: 75 px and move it to X: 0, Y: 605.

On Frame 152 add a blur filter with Blur X: 0 px and Blur Y: 24 px and the following actionscript code:

Save and test your almost finished animation.




Step 57: Flash Finishing Touches

In this final step we will add a static effect to our animation.

Create a new MC, name it Static and import static_by_grandtheftautopsy.jpg (see Step 8) into it.

Go to our Main_Interface layer and click into Outer_Interface_Asset. Name Layer 1 Interface_Layer and create a second layer that you name Static_Layer.

Lock Interface_Layer and create a keyframes on Static_Layer at Frame 11. Position the MC Static in it at X: -348, Y; -24. Create additional keyframes at 13, 15 and 115, 117, 119 and 250, 252, 254. Also create empty keyframes at the fames 17, 122 and 257.

On Frame 11 change the Blending of the MC Static to Screen and add a blur filter with Blur X: 40, Blur Y: 0.

On Frame 13 change the Blending of the MC to Overlay and add a blur filter with Blur X: 63, Blur Y: 0.

On Frame 13 give the MC an Overlay blending and add a blur filter with Blur X: 112, Blur Y: 0.

On Frame 115 change the Blending of the MC to Add and add a blur filter with Blur X: 28, Blur Y: 0.

On Frame 117 change the Blending of the MC to Overlay and add a blur filter with Blur X: 62, Blur Y: 0.

On Frame 119 set the Blending to Overlay and add a blur filter with Blur X: 109, Blur Y: 0.

On Frame 150 change the Blending of the MC to Overlay and add a blur filter with Blur X: 0, Blur Y: 40.

On Frame 252 set the Blending to Screen and add a blur filter with Blur X: 0, Blur Y: 60.

On Frame 254 change the Blending of the MC to Overlay, add a blur filter with Blur X: 0, Blur Y: 20, set the horizontal skewness to and height and width to 110%.

To make sure the static effect also includes the Title layer we switch positions of it with the Main_Interface layer (so that Main_Interface is above Title).

There also seems to be a little lag in the animation at the moment the planet starts to zoom in. To avoid this, get into Outer_BG on the layer Background, copy Frame 26 and paste it at the same spot (Ctrl + Shift + V) on Frame 1.



Conclusion

In this tutorial we covered how to use deviantART.com to create a library of useful assets and transform them into a vivid sci-fi tower defense game intro. Especially the brushes we found came in very handy to create new consoles and animated head up display parts. With the help of ActionScript we added a nice mouse over effect for our menu points.

I hope you had fun building this animation with me, thanks for reading!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.