Flash Tutorial: An Introduction to Animation for Newbies

Introduction to Flash Animation

Now, I only know a handful of the multiple software programs that Adobe has to offer, but, in my opinion, Flash is one of the more difficult to learn. Jumping into a project with Flash takes a lot of time and effort, so I want to go over the absolute basics with you. After all, it was quite difficult for me to find anything that helped me in my introduction with Flash. So for our first project, we’re going to make some rectangles move.

So, first things first. We have to open Flash.

Step 1

The type of file that I typically open is an ActionScript 3.0, which is the most recent version of ActionScript. It’s the best for what you want to do for a lot of technical reasons we don’t need to go over right now. But just know that Flash files that use ActionScript 3 cannot include earlier versions of ActionScript.

Step 2

Okay, so we’ve opened our program and now we are at the workspace. The big white space in the middle here is called the stage. If you want something to be seen, make sure that it is within the white space, otherwise, it is unseen offstage.

You will note that my workspace has all of my tools situated on the right hand of the screen. Flash mostly uses the same kind of tools that are used in most of the Adobe suite.

One important thing to note: when you are making shapes with a stroke, the stroke tends to act as a separate component from the shape you originally drew it with, so I tend to make shapes without a stroke.

The main aspect of Flash is that it contains a Timeline that is typically affixed to the bottom of your screen workspace. The timeline is where you keep track of your layers and animation. The timeline is divided into separate frames that can be selected and keyframes inserted.

A Keyframe is a frame where content appears on the Timeline. Typically, Flash’s default setting for speed is 24 frames per second, so it takes 24 frames of animation to create a second of active content.

Empty Keyframe

This is an example of a blank keyframe, which would be 6 frames long if played in Flash Professional. Notice the empty circle at frame 1 indicating there isn’t any content.

Keyframe w action

This is an example of a blank keyframe, but has actions attached to it. Notice the a above the keyframe. Actions are the coding in Flash (we won’t get into coding in this post).

Keyframe w content

Pictured above is an example of a keyframe with content. Notice the filled in circle on the first keyframe.

Content w Tween

This is what a tween looks like when applied to a keyframe with content, more specifically, this is a shape tween. Tween comes from the words “in between.” A tween helps to create movement in your animation.

There are 3 different types of tweens. There are classic tweens (creating a tween that can change size, position, and skew of almost anything), motion tweens (applied to symbols and text fields), and shape tweens (drawing a vector shape on one keyframe and then drawing another shape in a second keyframe).

Frame Animation

This is an example of what the timeline looks like when you are using keyframe animation. Each frame is a keyframe, so instead of using tweens, you are creating each motion within each frame.

So now that we understand the timeline, keyframes, and tweens, let’s draw some shapes.

Step 3

What I did here is pick my color with the color picker (no stroke!) and use the rectangle tool to draw a shape on Layer 1 in frame 1.

Step 3a

Before we get much further, I want to make sure that you know that there are two defaulted tabbed spaces that can be very helpful to you. Libraries are going to be used later in this post, but Properties is also very useful to you.

Properties will tell you what kind of content you have selected, can let you name instances (not shown), and you can change your positioning, size, color, and all kinds of other useful tools that are necessary to the creation process in Flash.

Step 4

Continuing on, since I want this shape to move, I’m going to insert a keyframe at frame 45, which will make this animation less than 2 seconds long. To insert the keyframe, I simply right click so this menu will pop up.

Step 5

With the keyframe at frame 45 highlighted, I take my shape and move it into the position I would like my shape to end up at the end of the animation.

Step 6

Now that we have our shape in the positions we want, we’re going to click anywhere between the two keyframes and create a classic tween. Now, the shape will move within the 45 frames.

Step 7

Now, let’s make a copy the same shape to move in a different direction as the original shape. So to do that, we’re going to use the library panel.

The library stores shapes, animations, sounds, and even photos where they can easily be clicked and dragged out onto the stage.

To make our current shape an aspect of the library, we must convert it to a symbol.

Step 8

In this new menu, we are going to make this a movie symbol, and name this object “Purple Rectangle” and then click on Okay.

Step 9

The symbol now appears under the library tab as Purple Rectangle. We are going to add a new layer and then drag our new symbol out.

Step 10

Next, we’re going to position out our second shape where we would like it to initially appear when the animation begins.

Step 11

After we have our initial position, we’re going to insert a keyframe on layer 2 under frame 45 and move the shape to where we would like the shape to end when the animation is complete.

Step 12

Now that we have our two positions, we are again going to create a classic tween so that our shape moves.

Step 13

Now let’s preview our hard work by going under the Control Panel, to Test Movie, to In Flash Professional.

Step 14

Congrats! You’ve made your first Flash movie! Brought to you by the patron saints of responsive web design Ohio, Go Media.

Adobe Digital Publishing Platform

Today Adobe announced their Digital Publishing Platform, which in their own words is “a platform which consists of applications, technologies, and services that allow publishers to cost effectively author, produce, and distribute groundbreaking content to the broadest possible audience on a wide variety of digital devices”.

While it’s hard to tell from the web page exactly what the Digital Publishing Platform is, it’s also hard not to look at it as a response to Apple’s recent stance against Flash for their mobile devices like the iPhone and iPad.

From the FAQ Adobe states that it will use “Objective-C for the iPad and the Adobe AIR for the desktop and other mobile platforms”. The FAQ also states that at this time the iPhone is not supported, at least not for the Wired Magazine app which is the flagship example of Adobe’s new platform.

From what I can gather, the DPP will use existing Adobe software such as InDesign CS5 so designers don’t need to learn or use new tools to design and at the same time will compile the final output in a format that fits the Apple app store requirements.

Additionally, the DPP will also include support for HTML5 output, which is Apple’s suggested route for web-based rich media on their devices.

Adobe plans to make the Digital Publishing Platform available to CS5 users later this year via Adobe Labs.

Blank Canvas: Flash vs. HTML5

Recently we published a post regarding Apple’s stance on Flash and their iDevices. The gist of the situation is that Apple has decided they don’t want to be reliant on a third-party plugin for the iPad, iPhone and iPod Touch products.

Apple’s suggestion is for developer’s to embrace the new HTML5 specs which are supported by most current browsers, with planned support for HTML5 coming in those browsers that don’t currently support it.

There’s actually two components to this situation: the first being a browser plugin, which allows Flash-based video players and Flash-based websites (or web elements) to run on the Apple devices; the second is the new terms for the iPhone OS 4.0, which basically state that coders must use Apple’s tools to create apps for the platform.

So on one hand, we’re talking about browser content, and on the other we are talking about the App Store.

GoMedia wants to hear from you web devs out there: what’s your take on this? Not being a web developer myself, my thoughts come from an end-user perspective.

Personally, I like the idea that video and other interactive content would be browser-based as opposed to being restricted to one single authoring tool (Adobe Flash). It just seems good for the internet in general moving forward.

As far as the App Store, I think that is beyond the scope of the Flash vs. HTML5 argument as you cannot use HTML5 to build an App Store app, but one could easily build HTML5 “web apps” for the Apple devices as Google has done with their Gmail, Google Reader and Google Voice “web apps”. So let’s stick to browser-based content on this one.

I’m sure at this stage Flash has more flexibility and options for creating content than the yet-to-be-approved HTML5 standards offer. Flash has been around much longer. But in the long run, which is better for the internet in general?

Basing interactive elements within the browser as opposed to relying on a proprietary plugin just seems like the way to go. It opens up more options for competing software development tools as well as a set standard and coding language that everyone can use without needing anything more complex than a text editor.

But perhaps I am missing something here, not being a web developer (or in particular a Flash developer). As I mentioned, I am sure the Flash tools are currently more robust than HTML5, but I am also looking forward to what HTML5 has the potential to become.

With the success of the iPad, I have seen many major websites starting to at the least implement HTML5-based options for their video and interactive content. Some have decided to completely switch over from Flash to HTML5.

Go Media wants your input: what are the pros and cons of each route? Are your opinions based on your use of Flash? We’d like to hear from web developers that use Flash, and those who don’t. We’d also lke to hear from those who have used HTML5 to either replace or supplement Flash content — what were the benefits? What were the limitations?

Go!

Flash, Floppy Disks & FreeHand

Apple’s Steve Jobs just posted a long open letter on the reasoning behind the decision to exclude Flash support on mobile devices such as the iPhone, iPad and iPod Touch.

Jobs lists six major points surround the decision, but wraps it up and confirms what I suspected was the driving force behind the decision. In Steve’s own words:

“We know from painful experience that letting a third party layer of software come between the platform and the developer ultimately results in sub-standard apps and hinders the enhancement and progress of the platform.

If developers grow dependent on third party development libraries and tools, they can only take advantage of platform enhancements if and when the third party chooses to adopt the new features.

We cannot be at the mercy of a third party deciding if and when they will make our enhancements available to our developers.”

Apple dealt with this during the transition from OS9 to OS X, and Jobs even notes in his letter that only now in CS5 has Adobe finally shipped a native Mac OS X version of the Creative Suite software. With the success of the iPhone & iPad, you can’t blame them for not wanting it to happen all over again.

The Floppy Disk is Finally Dead

I find it interesting that also this week, Sony announced it will be phasing out the manufacturing of floppy disk drives. Apple chose to do this in 1998 with the first iMac. Jobs implies in his letter that HTML5 is a new era for the web, and I believe he and Apple look at Flash the same way they looked at the floppy disk in 1998. Is it really any surprise?

Interestingly, this week Apple finally opened up access to hardware acceleration on OS X 10.6.3 for plugins such as Flash, something Adobe has been telling Apple for years they need in order to optimize the Flash Player on OS X. So far it’s only supported on the newest of the new Macs, but it’s a start.

Flash Catalyst

Jobs notes in his letter regarding the other Flash issue — namely their attempt with Flash Catalyst to provide a “packager” for Flash creations that would allow them to run on an iPhone in a “wrapper.  I think most Apple-bashers on the Flash issue seem to have overlooked what Jobs points out: any app created with that sort of tool must rely on the lowest common denominator features across all mobile platforms.

Apple doesn’t want this. Apple wants developers to create apps using the unique features offered by the iPhone OS.

The Apple “Experience”

Some people look at a device as a “tabula rasa” — something that they should be allowed to do whatever they want on it. I believe the Android operating system is built on this approach. But not the iPhone OS.

Apple has always focused on the overall experience rather than a “jack of all trades” open-endedness with their offerings. They make their own operating system. They make their own software. They make their own hardware/computers. And now with the iPad and recent acquisitions, they now make their own processor chips.

It shouldn’t be surprising to anyone that Apple has no desire to be a company producing a blank slate device that runs every last thing out there. They want to offer a unique and specific experience for the end-user. It is my opinion that they believe the best way to go about this is to use the tools specifically designed to create for the iPhone OS platform.

FreeHand R.I.P.

Adobe has called Apple to task on this decision, calling themselves open and Apple proprietary. But it’s not like Adobe hasn’t had their share of cutting users out of preferred authoring tools. It’s a no-brainer to see that Adobe acquired Macromedia primarily for the Flash authoring tool.

But in this process, they also acquired authoring tools such as FreeHand which was discontinued in favor of Adobe’s own vector graphics software, Illustrator. There has been no relenting of the frustration former FreeHand users have felt having lost their favorite tool.

Adobe has implicitly said that you need to move to Illustrator, and no roadmap as to what will or will not be incorporated into Illustrator. While not exactly the same, still it echoes the Apple decision that if you want to create iPhone OS apps, you do so with the approved tools. In a certain sense, Adobe has said that if you want to create vector graphics, you do so with the approved tools.

I’d venture to say that Adobe’s decision to end support for FreeHand and force users to migrate to Adobe Illustrator is really not that much different from Apple telling app developers that instead of writing lowest common denominator apps, you must use the free tools offered to create specifically for the iPhone OS.

I am sure out dear readers have opinions on this situation, and I would love to hear them. Please leave us your 2 cents in the comments section below.

Go Media friend Brad Colbow has a nice comic on this topic, and I’ll leave you with that.

Full Color Rollovers in Flash

header-image

In this tutorial, we will create a Flash file with a simple, yet eye-catching effect — a black & white photo with full-color rollovers. We will initially edit the photo in Photoshop, then import and complete the file in Flash. I wanna send a shout-out, and special thank you to the band Today the Moon, Tomorrow the Sun for the use of their photo.

Download the sample file [download id=”43″] and open in Photoshop.

band_photo jpeg

Save this document as band_photo.psd

Isolate The Figures

Using the pen tool, create a path around one of the band members
I’m making a selection just around the person, not the chair. The goal here is to create a selection of a band member. I’m using the pen tool, however you may use whatever selection tools you prefer.

Right-click or control-click on the path, and choose “Make Selection…

make_selection_menu

Click OK on the Make Selection dialog box that follows

make-selection-dialog

Create a layer via copy, CONTROL+J/COMMAND+J. This creates a layer from the
selection

Select the background layer, and then repeat this for each band member

Be sure to name each layer.
For simplicity, I named them band-1, band-2, etc, going from left to right

band-layers

Create The Grayscale Background

Select the background layer, press CONTROL+D/COMMAND+D to deselect everything.

Duplicate this layer via copy, CONTROL+J/COMMAND+J
Name this duplicate layer “black & white”

dup-layer-black-n-white

Next, create a new layer, CONTROL-SHIFT+N/COMMAND-SHIFT+N, Set this layer Mode to “Color“, click OK

new-layer-color

On the keyboard, press D to set default colors (black foreground/white
background).

Fill this layer with the foreground color, ALT+BACKSPACE/OPTION+DELETE

Merge this layer with the black & white layer, CONTROL+E/COMMAND+E

As an option, you can push this effect further by lightening the output levels on the black & white layer CONTROL+L/COMMAND+L
Set the Shadow output level anywhere from 25 to 50.

output-levels

At this point, it will be visually obvious if you have selected extra space around the band members. You may see color spots around them that should be black & white. Correct this via selecting the band member’s layer that needs fixing, and use the eraser tool to get rid of any overlap.

final_image

Toggle the visibility of the Background layer to off.

background-visibility

Save this document, CONTROL+S/COMMAND+S, and close it.

Import The .psd File Into Flash

You will need at least Flash CS to import a PSD

Open Flash. Create a new document, either AS2 or AS3 will work as this effect is not dependent on Actionscript.

Import the band_photo.psd, CONTROL+R/COMMAND+R

ps_layers_to_flash
Because we turned off the visibility of the background layer in Photoshop,
this layer is unchecked when importing into Flash.

Hold down the SHIFT key, then select each band member layer, as well as the
black & white layer.

Check the box “Create movie clips for these layers”

convert_layerd_to_movieclips

For Publish Settings, set the Compression to Lossless.

Follow these settings, Convert Layers to: Flash Layers, check the boxes Place layers at original position, and Set stage size to same…
Click OK.

layers-position-stage

Deselect All, CONTROL-SHIFT+A/COMMAND-SHIFT+A

Create The Buttons

Click once on one of the band members to select.

select-band-member

Convert this selection to a symbol, F8, follow these settings:
Name: band #+_btn
Type: Button
Click OK

f8-convert-to-symbol

Repeat the BUTTON SYMBOLS steps for each band member.

Edit The Buttons

Once you have converted each band member to a button, DOUBLE-CLICK on one of them, this will take you into edit mode, in the buttons timeline:

button_edit

Click-and-drag the Up frame to the Over frame

over-frame

Select the Hit frame, and insert a blank keyframe, F7

hit-frame

Select the brush tool and using the photo as a guide, paint a rough silhouette of the band member. The paint color does not matter, as the hit frame is not seen by the audience/end user, you are simply painting the active area of the button.

null

On the timeline, click the Scene 1 button, and you will see a aqua-colored overlay of the silhouette you just painted.

null

Repeat the BUTTON EDITING steps for each band member.

Here is a snapshot of the file with all 4 band member buttons edited. Though you can be as detailed or loose as you like when creating the silhouettes, do not overlap, as this can cause flickering between buttons.

Save, and test your movie CONTROL+ENTER/COMMAND+RETURN

And here is the final result:

Mask Animation in Flash Tutorial: An Angel Grows Wings

GoMedia_Vector_Freebie_An-Angel-Grows-Wings (INCLUDES THREE FREE VECTOR DESIGNS!)

Introduction

Like most Flash Motion Graphics designers, I am regularly perusing the web for design inspiration. I don’t know about you, but when I saw complex design elements like plants and tribal shapes grow on screen right before my eyes, I wanted to know how they did it. I assumed they were really good with shape tweening, but if you’ve tried to execute a complex shape tween, I’m sure you discovered quickly that Flash’s current shape tween renderer is about as predictable as Ohio’s weather. So the next best bet was masking a finished design and then revealing it magically as if it were being illustrated in real time. Sure enough, after testing some theories, we zeroed in on this process which we’ll now share with you!