How to make Flash apps for the iPad
(For Designers:)

by Matt Wasser 26/7/11

Want to make apps for the iPhone and iPad, but clueless about where to start? Until Autumn 2010, developing for Apple’s wondertoys has been a closed shop. The standard programming language used for creating apps for Apple’s iOS is Objective C, so if you come for a design background, that’s highly off-putting. But a new dawn for Flash is here at last. It feels like the early days of the web again, and as I was a student in ’98 I missed that wave!

When I tell people I’m making iPad apps in Flash, they all say the same thing: ‘but I thought Flash doesn’t work on the iPad?’ Well, websites made in Flash are still not supported on the iPad, which is a shame, but there is now a bright ray of sunshine for Flash made apps for the iPad, which is going to be great for Flash animators like me, who know a bit of code, but will never be full-on developers. I’m now becoming a bit of hybrid of the two.

This ray of sunshine comes in the form of Adobe Flash CS5.5 combined with the Air 2.7 packager. After a 2-3 week wait for my iPad 2 in London, and then another wait to get my Apple Provisioning license setup, I could at last test out some animation on my iPad. I started with the Air 2.6 installed, and the results were quite slow, but I was still excited. My vector graphics looked stunning on the iPad’s screen. And then came the Air 2.7 SDK. The change in speed in CPU mode was instant and incredible. It apparently speeds up your app 4 times faster.

The following is literally my findings so far. I can’t say I’ve tried everything, and each day comes a new wall to climb and sometimes a eureka moment. I’m having to learn Actionscript 3 at the same time as testing on brand new device. Everyone on Adobe’s Mobile Forum is a pioneer. The map for interactive touch screen development is still being written..

Getting your Apple license and setting up in Flash

I was expecting the process to be much more complicated. It’s actually not too bad if you’re a flash user. You have to take some admin steps to get your provisioning codes, but after that, it’s all done through iTunes. Here are the steps. Useful links are below.

- You’ll first need to buy an Apple Developer licence first, which costs $100 a year. You cannot even test your app on a device until you have this.

- You need to have an Apple mac running Snow Leopard to be able to make apps in Flash. You can also use Lion, but it is too new to say if this is a good move!

- You don’t need to download Apple’s Xcode software. The last step is done through itunes. In the Air to iOS box > delployment tab > click the ‘More Info’ button for help.

Setting up your iPad project in Flash

Open Flash CS5 or 5.5. File > New > Select Air for iOS. Now we’ll set it to the iPad’s resolution. Click Modify > Document > set the size to 1024 width by 768 height. Next we’ll set up our export settings. Click File > Air for iOS. Here is what the dialogue box looks like:

…Click here to read more of this tutorial >>

Essential links :

Adobe’s getting started with Air pages

Get the Air 2.7 SDK

Air 2.6 Vs. Air 2.7 video

Join the Apple Developer Program

Adobe’s mobile developer Forum

An overview for Multitouch and Gesture code in Flash

Adobe’s Multitouch Gesture Reference guide

Republic of Code’s excellent Flash tutorials

Flash Development Forum at Kirupa.com

One of the best things about FLASH is the community . There are dozens of great Flash resources sites out there, animation, tutorials, inspiration, how to, plugins, free templates… the choice is incredible…
So, with that in mind, here are 20 of my current favorite.

1 – Gotoandlearn , The tutorials of Adobe evangelist Lee Brimelow, excellent insight in Flash news, free videos tutorial, all of the latest Flash widgetry and no ads!
2 – ColdHardFlash , another excellent blog, find out about the news of the Flash animation world. good jobboard mostly US based opportunities.

3 – JumpingEye Quality Flash components to purchase.

3 – The FWA web Awards recognising the very best in cutting edge website design. find the best of Flash out there

4 – keyframer.com, the blog of veteran Flash animator Chris Georgenes. Writer of the “cheat in Flash” book series

5 – Vectorkid.com amazing realistic illustrations made in Flash, great tutorials.

6 – wacom.com creator of the wacom tablet, here is a simple step by step guide detailing how to use it with Flash

7 – A classic animation book for Flash animator.
Richard Williams’s brilliant ” The Animator’s Survival Kit”

8 – AWN Animation World Network – Official animation industry news, nice jobboard.

9 – FlashMagazine.com loads of news and tutorials
10 – CartoonBrew cool animation weblog
11 – John K Stuff blog of Ren and Stimpy creator
12 - Flashkit , probably one of the oldest Flash tutorial site, lots of flash animation tutorials
13 – Bulbo . I just love Bulbo cartoons!
14 – Adobe TV – high quality video tutorials
15 – Flash on The Beach , yearly British Mega Flash convention
16 – LFPUG London Flash Platform User Group (monthly meet up)
17 – moshimonster.com Awesome Flash virtual world for kids .
18 – kirupa.com Flash tutorials
19 – activeden.com Reasonably priced Flash Templates
20 – CBeebies Big and Small…And finally, the brilliant 3d flash site of Big and Small!.

Check out our new Flash Artist JOB BOARD, for Freelance & permanent Flash job.

Job Types: Freelance / permanent
Flash Designer | Animator
Flash Animation Jobs

Flash Animation Tutorials: Animate for broadcast.
Hello and welcome to FLASHARTIST.

Today I will demonstrate how to create some cool collage type character animation using Flash CS3.

this is the example movie I will be using for this tutorial.

Character animation in Flash from FlashArtist on Vimeo.

The first step is to create your collage character in a photo editing software such as Photoshop or Firework. you need to break down the character in separate layer for each body part.  as shown below

Go to Flash and create a new document 720×576 / 30 frame per seconds  ( broadcast setting )

Locate and import your layered document to stage .

Make sure your character is  layered  with each part of the character on separate layers,

head

torso

leg left

leg right

arm left

arm right

Once imported on stage  each body part should be on a separate flash layer

Now select the head and press F8 to convert it into a Movieclip

- Name the movie clip HEAD and select the FREE TRANSFORM tool.

- Click and drage the IK point to the most realistic rotation  point (around the neck area)

Using the FREE TRANSFORM you can rotate the head side to side and locate where you feel is the best IK point.

Repeat the same operation for each body parts; the arms, the  legs and the torso. replacing the IK point as required for each .

Once done , select all the keyframe copy and paste them in a new MovieClip that you can name Walkcycle.

Once all the layer are in the new Movieclip go to frame 10 and insert a keyframe for each layer.

Go over the timeline RightClick and create a Motion Tween for each layer.

That’s it! Now the fun bits, the character is now ready to be animated using the FREE TRANSFORM tool.

Here is a bit of walk cycle reference.

Getting a walk cyle right is one of the trickiest thing to get right in animation, as a guideline for this example make sure that the first and last frame of the walkcycle are the same so that it  loops seamlessly . you can use the onion skin tab to help with the animating.

You should get something like that

elephant flash tuto from FlashArtist on Vimeo.

Now to create the background, in this example I have created a deck scene out of recycled images, the trick to simulate movement is to make it super wide to scroll / pan  from one end of the scene to the other.

Make a new MovieClip and import your background image, convert it into another MovieClip and using tweening animate your backgound from left to right.

Finally Go to the main stage and compose your scene using the 2  movieClips of the walk cycle and the animated background

Once you are happy with your animation publish as a quicktime file for further editing.

download all the project files here

Here is a short tutorial  demonstrating  how to simulate a cartoon 3D effect using Flash CS4 3D rotation tool

you will find the 3d rotation tool as the  fourth tool of the palette .

- Step 01 : Create a movie clip containing all the face feature (mouth, eyes, eyebrow, etc. in this clip they are animated in nested movie clip.)

- Step 2 : Create a round vector shape that will be used as the head main shape, see below>

- Step 03 : put the “face”  clip over the “head shape”

- step 04 : These two layers need to be nested within one movie clip ,the  superior layer contains the “face”  & the  inferior layer contains the “head shape”

- step 05 : extend your timeline to about 60 frame / right mouse click over the timeline and select create motion tween

- step 06 : select a point in the timeline (eg :30) and right click insert keyframe / all

step 07: Select the rotation tool from the toolbar, you will notice a round shape centered around a cross, this is the rotation

guide that will help you visualise your 3 d space.

Step 08 : Click and drag over the rotation guide and orientate the face only towards the right , try to simulate a 3/4  face direction .

try left and right adding keyframes on the timeline.

Here is the final result.    you can also download the FLA.

[youtube=http://uk.youtube.com/watch?v=axypVOIXj4Q]

A simple way to animate a vector based character in a flash animation using the bone tool

[youtube=http://www.youtube.com/watch?v=kngaZQQ84Xo]

How to Create a Cartoon character from a drawing to  Flash

The following step by step tutorial describes how to create a vector based cartoon character in flash from a hand drawn concept.

your cartoon character once created will be ready to be animated in flash or after effects for a web or broadcast animation project.

For this tutorial you will need

-  Pen and paper, wacom tablet , demo of Flash CS3,  scanner

• Step 1:

start with pen and paper to create your character.

• Step 2:

Scan artwork / hand drawn character.

• Step 3:

Open flash / create a new scene (eg:800X800) and import scanned image onto the timeline

file/import/import to stage

(if necessary convert your scanned file .tiff into a .jpeg)

• Step 4:

Lock the layer containing your drawing and mouse right click the layer to turn it into a guide.

Now create a new layer to start drawing !

• Step 5:

Look into your tool panel and choose how to draw your character, there are several ways to do this and obtain different line style , you can use your wacom tablet and draw free hand using the brush (click the brush tool to adjust settings)

In this example we are going to use the bezier tool (the one that looks like a fountain pen). if you click over the bottom right corner of this tool you will notice a drop down menu including 4 selectable options:

• open tool
  
• add anchor
  
• delete anchor
  
• convert anchor

• Step 6:

Go around the head with the pen tool, left click to insert anchors in corners or delete anchors using back arrow key.

Check out shortcuts shown next to the tools (in brackets) .

Now using the free tool, adjust the lines over artwork tracing .

• Step 7:

Repeat the same tracing principles for each items of your character,

Make sure that you create a new layer for each elements of the composition ( head, ears, eyes, mouth etc..)

if you hide the layer used as a guide you should see how is the compositon coming together.

• Step 8:

Once all your outlining is done , you can start the coloring of your character , closed up shape can be filled up using the bucket.

if you run into trouble filling up shape because there they aren’t fully closed use the gap size tool , this could help.

Step 9:

open the color tab and experiment with gradient to give volume to your shapes.

In the color tab Select type:linear

you can add as many key as needed in your color grading.

Control the angle/spread of the gradient using the toolbox gradient tool (3rd from top, see below)

• Step 10:

Draw the eyes (only the white no pupils at this stage) select your eye layer and click F8 / click ok to convert into symbol. the eyes will be nested within a symbol as it will contain the pupils, the eyelids and the various eye states (open closed etc..)

As before within the eye symbol, create a new layer for each item (eyelid, pupil etc)

• Step 11:

Draw the Eye brow , press F8 /click OK to convert into a symbol.

Draw the Mouth , press F8 /click OK to convert into a symbol.

( once the shape are color filled you can add / clear the black outline around the drawing if needed )

• Step 12:

Now bring the finishing touch using the wacom pen and tablet, add details , shade etc..

• Step 13:

Zoom out to see the whole picture and amend your drawing if necessary.

• Step 14:

Et voila ! from your original pencil drawing you now have a vector version in color and broken down to symbols.

Ready for the next step of flash animation.

the next tutorial will show how to move onto the next step, hopefully using Flash CS4 (some really cool animation tools are coming with the new version…)

I will show how to animate using

• IK and inverse kinematics
• nested symbols containing the various state (mouth phonemes , eye states, eye brow position etc..)
• and much more..

FlashArtist.

Check out Lee Brimelow’s excellent Flash tutorial site Gotoandlearn for a tour of some of the most exciting new features coming in Flash CS4 Professional!

How to Create a custom flv player

Welcome to FlashArtist.org 10 steps tutorial on how to make your very own flv player in flash CS3,

Step 1 :

Open :
C:\Program Files\Adobe\Adobe Flash CS3\en\Configuration\FLVPlayback Skins\FLA\ActionScript 2.0\

Step 2:

Select one of the ready made player template, for this tutorial we will be using

ClearExternalPlaySeekMute.fla

Step 3:

Edit / modify the Play button etc.. convert each graphic into your own.

Step 4:

Once all the graphic are converted save the .Fla and export the swf file in this folder .
C:\Program Files\Adobe\Adobe Flash CS3\en\Configuration\FLVPlayback Skins\ActionScript 2.0

I have named my custom player MyCustomPlayer.swf

Step 5:

Create a new fla to insert your video

Step 6:

Select video from hard drive

Step 7:

Select encoding quality

Step 8:

Select now your custom player skin MyCustomPlayer.swf

Step 9:

That’s it ! your video now use your very own custom made flv player.

Step 10:

You can now publish and see you custom player in action!

Have a look at this minimalist animation by designer and flash
animator Matt Wasser.
The Trailway Code was made for Oxfam’s 100km Trailwalker event taking
place across the south Downs July 2008. Check out the sound effects too.
Here is a link to Matt’s Portfolio
[youtube=http://www.youtube.com/watch?v=XrJoUYV2X0c&hl=en&fs=1]