Web and Video

One of our readers let me know about a new site they have created that’s dedicated to Flash and math. You can find a whole bunch of excellent tutorials on using ActionScript 3.0 with Flash CS3. One such tutorial focuses on using the display hierarchy, the Stage, and depth management in ActionScript 3.0/Flash:

The types of display objects, the display hierarchy, and the depth management are very different in ActionScript 3 from the earlier versions of the language. In this tutorial, we talk about display objects, parent-child relationship, the Display List, and the mysterious Stage in AS3. We will illustrate the concepts using a simple example of an animated “solar system”.

And you can find it here: http://www.flashandmath.com/intermediate/children/index.html

But seriously - check out this site for a whole bunch more really useful tutorials on ActionScript 3.0 and Flash. It’s a great place to go if you’re new to and/or nervous about using or updating to AS3. Lots of samples, source files, code snippets, and hands-on steps to make things work.

(9 votes, average: 4.78 out of 5)

 Loading ...

These are some very rough notes that I took at Erik Natzke’s session on online advertising at MAX 2007.

You want to make ads attractive and legitamite.

He has enjoyed trying to make advertisements fun, essentially bring the fun into the ad. You can have fun, playful ads that are functional.

Important to remember that you are sharing space on a page, so you  have to be graceful (more so than regular).

Want to tell a story, but needs to be precise, regardless of framerate or machine. So the story and message is still taught consistently, regardless of the machine.

Hard to get the vision across if numbers are in the way, so he built his own kind of Flash to have more control. So you have a canvas you can work from that’s appropriate.

You are limited to what you can do (for example, limited to 22K).

Need to use trial and error to get things right sometimes.

Can try designing everything on the stage, and then try things out.

Or, you can start with the minimum content, and then add what you can to that.

Optimization is important.

When an ad is for worldwide distribution, things can get more complex. For instance, you might need to make more changes, have a ton of different sizes of the ad.

Need to find a good workflow for the ad, because you might need to make all these changes.

Recommends keeping everything in a single FLA - all the SWFs that will be at each size are along the Timeline (helps you from going nuts).

Sometimes builds in intelligence where you can change the size of the SWF and the graphics do the right thing / resize / redistribute and such.

Trying to get away from keyframes and timeline animation - Easier to optimize, less time to develop, easier to work with, “keyframes can be all consuming” and “code is more interesting”.

Did a random animation using code - can feel more unique, real, is dynamic.

“Reflection - cause that’s what advertising is about”

Built a scrubber into an animation so can view the animation  like it’s in a video editor — then he can tweak the animation as necessary.

Personalities, people, and pets - character ads. These things commonly in ads.

Interaction results in more click throughs, people almost feel like they owe the company the click for a good experience.

(9 votes, average: 3.89 out of 5)

 Loading ...

Some really rough notes from Sandro Corsaro’s presentation on character animation with Flash. First of all, I really recommend checking out one of his sessions (here at MAX or elsewhere) if you get the chance. He’s a great presenter, very enthusiastic and well spoken… and funny.

animation history: principle of how started, and by end of session, simpler understanding of animation
Persistence of vision. Things are not as they appear - animators can experiment. exaggerator - you have to lie about reality. can buy into animation when not much there. Sort of believe something has happened. Powerful tool of animation.

In 1940 at WB a 6 min animation cost 50K.
By ‘55 they were 70K
Closed things down because not getting return on investment.
2 guys at MGM (Tom and Jerry guys) had idea started a new company called hanna barbara. So in ‘55 HB created 21 min cartoon for $2800

Did “limited animation” - every character had something to separate head from body - separate action of head from action of body. head moves independently - can turn their head and their body stays stationary. This is what flash is. Beauty of Flash, can do limited animation, but sophisticated in what you can do.

Put so much personality into the limited design - infuse them with so much emotion.

Do quick animation - stretch and squash. Flash a lot like clay - draw until like ines with hand on Ctrl Z. Pull lines until you get what you like. Impt to have nice sharp lines. Pull things around. Using the brush tool.

After done, turns the eyes and head into symbols.
For most part uses graphic symbols, unless project calls for mc’s.
Use ink tool to add ink to the inside of the black outlnes - and then moves it over to the right so it’s outside of the character by a couple mm. Then fills in to make the shadow. Then goes to the other side and moves it inside by a couple mm’s,

Tweens are overrated, he says. So doing a face looking left, and flips horizontal to make it look right. Squashes shape and stretches to give it a bit of bounce up and down in the middle and end of the animation. In the center, he draws the face looking forward for a second. And draws some lines to “blur - to add a bit of motion. Persistence of vision.

Showing mouth animation - you have a number of different moths, and you pull the frame number you want. Put down one keyframe for the mouth, and you go to pop-up and select “Single frame” in PI, and enter the frame number for “First”.  Use graphic symbols for this instead of MCs.

If you have limited time to design a character, strategy involved. determine how to reuse stuff as much as possible - how cna you nest things and put them in the right spots.

And that’s it, from “Adobe Lady”.

(4 votes, average: 3.75 out of 5)

 Loading ...

Flash CS3 and Soundbooth CS3 : designing content with great audio — mostly brought to us courtesy of Jason Levine, with some assistance from Greg Rewis near the end to cover the Flash bit. Session was mostly on features in Soundbooth (which are quite awesome). So on to the notes… please excuse the mess - haven’t had time to clean as the session ended about 15 minutes ago and I am just hitting post

Soundbooth — Audio for flash people. How easy it is to do great sounding audio, export as FLV/MP3. Ways you can manipulate and modify audio are simpler than ever before. Don’t need to know a lot about audio to make things sound great.

Like to showcase “non audio creative professionals” are the target audience for Soundbooth. Just means your main focus is not audio - but you occassionally need to do certain audio tasks.

Identify things visually and fix them visually. Use your eyes

Five most common tasks are available in the Tasks panel (such as change pitch and timing, add sound to a file — “autocomposer”, clean up audio, create a loop, remove a sound). Purpose of loop - make a seamless loopable file without a click.

You’re going to use Photoshop knowledge to do all of these tasks visually - using “spectral frequency display”. You can see frequency over time in Soundbooth - frequency is on vertical axis and time along the horizontal. Illustrates what sounds look like in the spectral view in SB. Represents kinds of noise. Color is amplitude — closer to yellow/white, the louder the amplitude, opposite for black. Orange is at a softer amplitude, so it is harder to hear in the sample file being used. Going to repair this file so you can hear the orange stuff - which is a voice.

Goes to clean up audio in tasks panel. SB can scan the file, and try to remove noise automatically. Showing Noise dialog. How aggressively is SB going to try and remove those sounds, and reduce by what. So then you have a very quiet audio after they clean it up. So then you can try to bring up the audio that is underneath  — now you can hear what is underneath all that noise.

More advanced - you can understand where the noise is by itself “capturing a noise profile”. You can right click when you have a selection and capture the noise priont (take a profile)  with right-click. Applies to everything - hum, rumble, hiss. Then you click “remove a sound” - opens up a new view. Then go and highlight the entire file and you can increase the wave form just by drawing on the screen.

Removing individual sounds:

Opens a tape recording of Beatles, and it has hiss in the background. We’re able to take a profile, but instead you can use adaptive noise reduction and adjust it in the Noise dialog until you have the sound you want. You can preview your settings as it plays, and make it sound like you want. If you have noise by itself, you can use it for a profile and get much better reduction.

Photoshop tools for sound removal:

Use remove a sound to take out something like a squeaky door. Opens spectral display, so you can actually *see* where the squeak is. No other way to do this - can’t use filters/equalizers to do something like this. Pitches begin to look like images so you can remove things specifically.

So how to remove? If you use the marquee - can’t get tight enough, would remove too much noise. So you use the lasso instead — probably want to use a wacom tablet or something to be more exact. Checkbox “play selected frequencies only” so you know exactly what you’re removing. Test it - and we have only that squeak. You can take it and paste it elsewhere to clone the sound. Reuse the sound as  a sound effect. To get rid of it, take the volume and drop it down and the squeak is gone.

Another way to do this. Use the healing brush to remove the squeak. Have to be precise with the selection - limitation on the brush size. You can use auto-heal - analzyie the audio and then heals it. Doesn’t effect anything on bottom channel either. And it’s totally gone. And didn’t require any audio knowledge either.

Another couple restoration examples:

Piece with clicks and crackles (vinyl) — wireless, you’ll get lots of little clicks. Use the click and pop filter, use the slider to remove them, then click OK to process the file.   Same thing for removing rumble (mic rumble and pops) - another filter. Easier to get in there, fix, and get out.

Live piano recording, and there’s a cell phone goes off. You can pretty much highlight the ringtones - identify them digitally and remove them easily.

Dialog:

Lots of noise in the background, cell phone in the background. Same thing, select, drop the volume down, auto-heal.  Use adaptive noise reduction to remove enough of the background noise.

Sounds close and boxy after you remove to much noise. Using some effects to fix that. They were using a boom mic, but the volume of his voice is all over the place - soft and loud. One of the first things you can do to make volumes the same is highlight a section, and use the onclip volume tool to visually match the audio levels by redrawing the size - will just have the same consistent level by just matching it visually. If you can get it visually approximately the same, after you compress it for the web, people won’t notice.

Then you can go to the history panel to look at what the changes were. Non destructive so you can step back in time.

Fade in / Fade out.

If you do a fade in and fade out you are respecting the 0 cross - it ramps up from negative infinity and ramps down to negative infinity so you don’t have a click.
You can trim off the beginning and end, grab the fade handle to draw the fade curve for how the audio fades in and fades out.

Presets/filters:

Apply them non-descructivity. Only apply when you export them to FLV or whatnot.

Have a ton of presets for reverb, mastering, voice, EQ and so on. Stuff to give you clarity, fix muddy voices, clarity, prsets for male and female voices. Preset for sivvelence (”de-esser”) that takes the “s’s” out of a voice.

You can stack the presets to make layered effects, so you can apply multiples. So, if a voice sounds like it doesn’t have an environment (if you pull out too much noise, going to make file sound artifacted). So you can apply simple effects - reverb. You get a slider to set how much reverb you want to apply. Or you get a bunch of presets instead and use them instead — you can choose “Dark room, bright room, clean room” and so on. Or you can use an advanced reverb where you have a bunch of sliders that you can use if you know what you;re doing (or want to play around).

Then you can apply the effect (which is descrutive).

Now make the whole thing louder — at the bottom right of the interface, there is a louder button that you can just click to make things louder.

Now adding some cuepoints to prepare for Flash.

Greg Rewis.

Opening Flash and AS3. Selects an MP3, but don’t want to import the MP3. Do not do that, because if you put the sound into the Flash file you bloat the size of the SWF.

Hard way - ActionScript.
- Writes some code to import flash.media and then URLRequest the sound file. Then create the sound object. Say that it will hold the file that you’re requesting. Then you play the sound.
<didn’t quite get to cuepoints>

(2 votes, average: 5 out of 5)

 Loading ...

Lisa Larson-Kelley led a good session on advanced video encoding at MAX. Here are some notes I took on the session. Note that her blog, www.flashconnections.com, will have complete information and links that will be better than these notes. But in case this is useful, thought I would add them here anyway to give you a taste of what went on.

The session covered: general info to understand the FLV format and codecs, info to help you improve the quality of your FLVs and FLV playback, best practices, settings you can make when you encode video, and info about HD and FLV (and info about the new Flash Player code named Moviestar).

Showed an FLV playing back at full screen running at 1080p (HD) - demonstrated the great, crisp quality that’s possible using proper encoding settings. She played this through the beta version of Flash Player.

Some of the new things available in Moviestar include HD, H.264 codec, base/mainline/high/high 10 profiles of ISO 14496-10 standard. Also referred to as AVC (squeeze encoding profiles). Details of what’s not supported - MPEG-4 pt. 2 (XVid, DivX), H.263, Sorenson 3, Fairplay protected video (itunes DRM content, etc).

Coming up, VP6-S (simplified) - this will work in Moviestar. Strips out some stuff to reduce size or something like that. This simplified version of VP6 does support alpha channel.

Audio. AAC support ISO 14496-3 standard. Default for iPod and PS3, and will play in Flash Player as long as it’s not DRM protected.

Hardware acceleration - frees up CPU, new API to select which area to cache in the hardware, which area of your Flash app.

Codecs vs containers: H.264 is a codec, and FLV is the container.

Four things to think about when you encode things

- H.264 handles pans and zooms and fast movement well - if you have these things, choose an appropriate codec if possible.

- Audience reach. If you need a wider reach you may need to go with an earlier version player.

- Archive-ability. H264 is a more open format, so it is easier to archive and play years forward

- Licensing. H264 is not completely open. You need to pay fees if you use it commercially, so if this applies to you see the FAQ on Adobe.com.

Footage fundamentals

Compromise when you encide. File quality to file size. File size goes up if you want it to playback smoothly. Consider dimensions of the video - smaller dimensions lowers file size. Consider the framerate (more frames filesize goes up), minimize artifacting when you improve quality.

Start with a profile and then tweak your settings according to what your footage is like.

When you’re encoding, start with the highest quality video file that you can get, and then compress from that.

Often you will get a DVD from a client, so you will need to rip it (demux). Separate the audio and the video. On Mac you can use software like MacTheRipper and Handbrake (I use Mac… sorry I didn’t note Windows, but they’re easy to find…). Convert the file to a MPEG or a MOV file and then encode.

Taking video footage. Shoot in proressive mode. Use a tripod and avoid pans and zooms. Avoid fades and dissolves, Avoid using your camera’s autofocus and autoexposure. Use proper lighting (this will help you avoid those big dark spots that have lots of artifacting when you encode and you get that pixelly dark area in the back that sort of shifts). Get proper audio because that’s hard to fix and will totally detract from your video online — it will distract the user and ruin the whole thing. Also avoid ambient noise.

Transmuxing — take video out of one format and convert it to another.

Squeeze: good at - preprossing filters, batch encoding, auto keyframe placement, and you can FTP video right from the software.

Flix: has vector video, can use to add watermarks (but add these using flash if possible… do add to the video file if you’re concerned about the video going across the interwebs), and it’s cheaper.

Progressive H264 issues.

Moov atom: like metadata, player needs to have this data at the beginning of the file. However, Premiere and After Effects currenly put it at the end of the file. You can use a utility to move the moov data to the beginning of the file. Use QTindexswapper (AIR app), or QT Pro and prepare for internet stream/fast start.

FLV issues

FLVCheck on Labs to fix FLV files metadata formation. Then you can use Burak’s metadata injector to fix any issues.

Encoding steps

1) watch and analyze the video and note dimensions and frame rate. She notes that you can get info and see this depending on format.

2) Bandwidth target - choose if you want to detect this and how. And plan what you’ll do based on gathered information. Or if you do this server side with FMS.

3) Choose your target datarate. Don’t rely on using all of users bandwidth because they’ll be doing other things too. Use 70-80% of the target user’s bandwidth. If the video is low quality, plan to use a higher bit rate.

4) Choose a frame size - 4:3 or 16:9 and use a fraction of that. Also act for square (computer) or rectangular (broadcast) pixels. Make sure that you don’t stretch the image. One way to make sure you’re not stretching is to encode a perfect circle on first part of the video, then you can easily tell if you’re stretching it when you encode.

5) Choose an optimal frame rate.

6) SEt keyframe interval. Automate this if you can. Or if there’s lots of motion, it’ll put in too many keyframes. Fewer keyframes is better if you can do this. Progressive video with a scrubber bar - you need more keyframes in this situation because you can only seek to the keyframes.

7) audio compression. Always use MP3 audio encoding - use AAC with H.264. Always encode the audio too, Flash needs this for syncing the framerate.

If applicable, alpha channel. Crop the video down to the masked area. Note that it takes longer to encode.

Streaming or progressive.

CBR - streaming, VBR - progressive [allocates datarate when needed]. Always use 2-pass encoding [1st pass plans how to encode, 2nd pass actually encodes the file. Results in smaller and better video].

Best Practices.

Try to encode from a video editor. Flix and Sorenson Squeeze both have exporter plugins available. Also there’s a FLV QuickTime export plugin.

If not, then save as QuickTime using Video codec (Mac) or Uncompressed AVI (Win).

Deinterlace always, if shot in Progressive mode. Apply the deinterlace filter, “upper field”

Apply pre-processing filters, white/black restore if using Squeeze.

HD video

720p - recommend 1.5 GHz processor

1080p - recommend 2.5 GHz processor

Visit her blog at www.flashconnections.com for more info.

(No Ratings Yet)

 Loading ...

Notes from the session on interactive video with After Effects (AE) and Flash (Fl) at MAX 2007, by Michael Coleman (AE product manager).

These are messy for now. I’ll clean them up, but do watch Michael’s blog on blogs.adobe.com for more details, source code, and the project soon.

Purpose: Show a workflow where use After Effects and Flash together to create an interactive experience.

Create a microsite video viewer. Want to combine footage with bike rider information on a site. The rider info should be accessible throughout the video experience. And you can show the hide and the data in a heads up display, which is essentially a pop-up.

Using the Aquo assets (which are the assets used in Adobe demos and Video Workshop).

Will be creating 3D text - can let each character have 3d rotation, and so on. Will be modifying animation presets (you can modify for your own needs), motion tracking (of an object through a scene), parenting (one layer can inherit the mvt of another layer - don’t have to copy/paste keyframes, can just lock together), track mattes (vx term of using alpha layer of one layer for another layer, keep motion related), markers (put a note in time, comment, FLV cuepoints), FLV encoding with render queue (can do batch rendering of FLV).

Flash concepts: importing PSD and video, basic ActionScript (AS), event cue points, basic interactivity. How to write AS to listen for cuepoints.

Showing final piece: 3d text spinning around the rider, click it and there’s a display of data. Driven dynamically by cuepoints in the video. Can automatically change it.

– Importing video into AE –

D-click on Project window (quick way to import), finding footage.

Creating a new composition - drag footage onto new comp icon, and it will set it up with all the right settings (aspect ratio, framerate, etc).

Viewing raw footage.

– Adding text –

Starting with animation presets. Going to presets panel, and checking out 3d text folder. Goes to Browse Presets, and browse them visually in Bridge (you can see previews). Selecting text in a circle, and add it to the comp by d-clicking it in Bridge.

Changing the rotation - click the “r” key in the timeline and it narrows down the options so you can quickly find rotation. All live, dynamic text so you can change it afterwards.

Positioning the text so it’s around the rider, double click it so you get Free Transform controller.  Previewing. Text stops, but want it to stay animating, and doesn’t match the rider’s mvt yet.

Going into the text layer again. Select a layer, and press “u” key - shows you everything in layer that has keyframes on it - shows you everything that’s animated, so you can see path options. Making the animation the whole length of the comp so it animates.

Using motion tracker to let you attach something with motion and attach it to something in video with motion. Added a motion tracker to the layer - place it on an object that you want to follow though the scene. So you can set an attach point (the rider in the video), and then you add a search region - tells AE where to look for the object (speeds things up).

Setting motion tracker options. Then set analyze movement, and it quickly looks through the shot and tracks the object. Then we hit the apply button to apply it to the other layer with text. So now the text is following the racer. Want to tweak the text.

To tweak, selecting all the position keyframes, and shift the entire thing down - so then AE adjusts all of the values at the same time. So, going to comp window with all selected, and drag the text in the comp downwards and so on. Preview again, and the text still follows the rider.

Text needs to go around the rider - right now it’s rotating on top of the rider.. text is in front of the rider. Now the background layer goes partially in between the text. So now you’re making that layer 3d. But now the text sort of hides behind the rider. Switch view to “top” on the now 3D layer. So we need to create a mask around the text so it looks as you’d expect.

Going to create a new solid layer. Put a mask on the solid layer, a round mask. So you mask out the rider so the text can go behind her. Cmd T to free transform and position the mask on the rider. Makes the text look like it’s going behind the rider. Feathering the mask, so it’s a gradual fade instead of just clipping off.  But now you need to have the mask track the rider so it is animated/follows the rider too. Use parenting to do this - so the mask inherits the movement of the text layer.

In the timeline, parenting column, and you select the layer you want to parent. Now if you preview again, you can see the mask tracking the rider as well.

Create a track matte - layer as alpha channel on top of the layer that’s being matted. On the background rider MOV, use the alpha matte from the mask layer, and applies it to the video. Then they can be animated independently.

Then you add another copy of the video to the back. Everything on the video side has now been put together - motion graphics done.

Before we leave AE, we need to create FLV cuepoints. All layer markers can be saved as an AS3 cuepoint. You can add the name, cuepoint, parameter names and parameter values in the Layer Marker dialog in AE. Or, you can create a script that takes keyframe data, and automatically create markers for them.

Selects a tack point, scripts > select properties (something) - creates a marker for every frame. Now it prepopulates the cuepoint parameter names and values for each one.  Now all markers out as FLV cuepoints.  (Will not overwhelm flash with that many cuepoints). Note - current script does not input names. You’d need to insert names at the moment. However — There will be an update for that script soon - and Michael will post this on his blog. Will also post this project, and you can drop it into your AE installation. Now you will have to go through each marker and put in the name.

Using Adobe Media Encoder in After Effects to output FLVs. Will have the H.264 updater soon so can output using new video codec for FLV, but for now can do VP6 out of AE.  If you want, you can output different versions of the same video - can do more than one output module per render item.

Going to Flash. Creating a new FLA. Importing a PSD to use as a background. Bring in the video onto a new layer, and using the File > Import Video. Selecting the FLV that was encoded from AE, and then setting a skin if you want Putting the video onto the Stage, and centers it. Giving the component an instance name.  But now we want to add the “heads up display” (click the text and see a pop-up with racer data).

So for the display pop-up, importing another PSD with the graphics. It’s an image with text and stuff. Then adding some AS to hook it up.

Creating a new actions layer. Which is copied and pasted from a text file

Basically importing the fl.video. Creating some variables for properties, object and value.

myVid is listening for an event, which is a cuepoint. When you hear the cuepoint, you execute a certain function. The function iterates through the cuepoint data, and it listens for the cue point name. When you see that name, the next lines divde the value up to X and Y data, and assign it to the racer data x and y. Also want to add a second event that handles a click. It listens for a mouse click, and when you do, toggle the dataview, which turns on and off the racer data pop-up.  (it’s about 35 lines of code, and it will be up on Michaels blog).

testing the SWF now. When you click you see the heads up display. Then you move the pop-up back in Flash authoring.

You could take it farther by having the pop-up be a dynamic SWF that brings in live data or something.

That’s it!

(1 votes, average: 5 out of 5)

 Loading ...

This great (7 page) tutorial from Kirupa.com shows you how to use XML in Flash CS3 - which involves using some ActionScript 3.0 code. If you’ve used XML in the earlier days of Flash, some of this will feel familiar to  you. However, Kirupa shows you some time-saving techniques that ActionScript 3.0 allows you to take advantage of. You learn a bit about XML structure, how to read the XML (using code), and finally how to filter some data.

This is a particularly excellent tutorial if you’ve used XML and ActionScript with Flash, and need to update your skills for Flash CS3 and ActionScript 3.0.

Find the tutorial here:

Using XML in Flash CS3/AS3 by Kirupa
Enjoy!

(8 votes, average: 4.75 out of 5)

 Loading ...

Tom Green has written a great tutorial on how to add captions to your videos in Flash CS3. He says:

This new component is dead simple to use and, best of all, requires zero knowledge of ActionScript 3.0. It also has tremendous possibilities for Flash designers.

The tutorial covers using Flash components to add captions, using Timed Text captions, and covers some troubleshooting steps for disappearing captions.

You can find Tom’s tutorial here: Captions for Video with Flash CS3

(8 votes, average: 4.38 out of 5)

 Loading ...

Getting Started with ActionScript 3.0 in Adobe Flash CS3: With Flash CS3 comes support for ActionScript 3.0 - the newest, standards-based programming language for Adobe Flash (SWF) movies and applications. More so than in the past, you may find it difficult to get started with ActionScript 3.0 when compared to older versions of ActionScript. The transition to ActionScript 2 from ActionScript 1, for example, can probably be seen as a cakewalk compared to the leap to ActionScript 3.0, especially for someone who is prone to working and coding in the Flash IDE (Integrated Development Environment).

Go see: http://www.senocular.com/flash/tutorials/as3withflashcs3/

This is a “in progress” tutorial on using ActionScript 3.0 with Flash CS3 that’s valuable and highly detailed.

(3 votes, average: 4.67 out of 5)

 Loading ...