Digital Media Homepage

Subject: DMA - Digital Media- 2015

College of Arts, Victoria University

Teacher Name: Lisa Cianci - email: lisa.cianci@vu.edu.au
Education Manager: Adam Hutterer - email: adam.hutterer@vu.edu.au


Class Website - http://vuitarts.net.au/lisa/2015/DMA

 

Class 08 - Introduction to Animation & Video in Flash

Today's Class

Flash Animation & Tools

Today we will be covering the following topics:

  • discussing Assessment Task 1 issues - the design doc, wire frames etc.
  • the Library
  • types of tweened animation Flash;
  • motion guides;
  • onion skinning;
  • nesting movieclips;
  • mask layers;
  • task: simple animation using nested movieclips

 

Look at this revamp of a classic flash animation - a clever use of the Flash interface... Animator_vs_Animation & the sequel Animator-vs-Animation-II

 

Using the Library

The Library in a Flash document stores symbols created in Flash, plus imported files such as video clips, sound clips, bitmaps, and imported vector artwork. The Library panel displays a scroll list with the names of all items in the library, allowing you to view and organize these elements as you work. An icon next to an item's name in the Library panel indicates the item's file type.

You can open the library of any Flash document while you are working in Flash, to make the library items from that file available for the current document.

You can create permanent libraries in your Flash application that will be available whenever you launch Flash. Flash also includes a few sample libraries containing buttons, sounds and other symbols that you can add to your own Flash documents. The sample Flash libraries and permanent libraries that you create are listed in the Window > Common Libraries sub-menu.

 

Working with folders in the Library panel
You can organize items in the Library panel using folders, much like in the Windows Explorer or the Macintosh Finder. When you create a new symbol, it is stored in the selected folder. If no folder is selected, the symbol is stored at the root of the library.


Finding unused library items
To make organizing a document easier, you can locate unused library items and delete them.

Note: It is not necessary to delete unused library items to reduce a Flash movie's file size, because unused library items are not included in the SWF file.

You can view the Use Count of your items in the library by scrolling across in the library panel.

You can select all unused items in your library by clicking and selecting [Select Unused Items]

 


Updating imported files in the Library panel
If you use an external editor to modify files that you have imported into Flash, such as bitmaps or sound files, you can update the files in Flash without re-importing them. You can also update symbols that you have imported from external Flash documents. Updating an imported file replaces its contents with the contents of the external file.

To import a file select the [File] option form the top menu and go down to [Import], select [Import into Library].



Select the file you wish to import – in this case I'm importing a bitmap.



You should now see the item located in your library like below.

 

The image I imported looks like this



Now if I take it into Photoshop and edit it to look like the following, it will still appear the same as the original in Flash, as Flash has stored its own version within the FLA.


To update this imported item I need to right click it in the library and select [Update] and then select the [Update] button again. If all went well the tick next to the file name is left and the option box has disappeared.


 

Copying library assets between movies
You can copy library assets from a source movie into a destination movie in a variety of ways: by copying and pasting the asset, by dragging and dropping the asset, or by opening the library of the source movie in the destination movie and dragging the source movie assets into the destination movie.

You can also share symbols between movies as runtime or author-time shared library assets.

 

Animation

Using the Timeline
The Timeline organizes and controls a movie's content over time in layers and frames. Like films, Flash movies divide lengths of time into frames. Layers are like multiple film strips stacked on top of each other, each containing a different image that appears on the Stage. The major components of the Timeline are layers, frames, and the playhead.


 

Using frames and keyframes
A keyframe is a frame in which you define a change in an animation or include frame actions to modify a movie. Flash can tween, or fill in, the frames between keyframes to produce fluid animations. Because keyframes let you produce animation without drawing each frame, they make creating movies easier. You can change the length of a tweened animation by dragging a keyframe in the Timeline.

The order in which frames and keyframes appear in the Timeline determines the order in which they are displayed in a movie. You can arrange keyframes in the Timeline to edit the sequence of events in a movie.

Note: shortcuts - F5 creates a normal frame, F6 creates a keyframe with the same content as the previous keyframe, F7 creates a blank keyframe. Try and remember these shortcut keys if you can - it makes your work flow much faster.

 

Creating frame labels and comments
Frame labels are useful for identifying keyframes in the Timeline and should be used instead of frame numbers when targeting frames in actions such as Go To. If you add or remove frames, the label moves with the frame it was originally attached to, whereas frame numbers can change. Frame labels are included when you publish a document as a Flash movie, so avoid long names to minimize file size.

Frame Comments are useful for making notes to yourself and others working on the same document. Frame comments are not exported when you publish a document as a Flash movie, so you can make them as long as you want.


To create a frame label or comment:
  • Select a frame.
  • If the Property inspector is not visible, choose Window > Properties.
  • In the Property inspector, enter the frame label or comment in the Frame Label text box. To make the text a comment, enter two slashes (//) at the beginning of each line of the text.

 

Tweening

Inbetweening or tweening is the process of generating intermediate frames between two images to give the appearance that the first image evolves smoothly into the second image. Inbetweens are the drawings between the keyframes which help to create the illusion of motion. Flash is a great tool for Tweened Animation.

Flash can create 3 types of tweened animation, motion tweening, classic tweening (formerly called motion tweening) and shape tweening.

Differences between motion tweens and classic tweens

Flash supports two different types of tweens for creating motion. Motion tweens, introduced in Flash CS4 Professional, are powerful and simple to create. Motion tweens allow the greatest control over tweened animation. Classic tweens, which include all tweens created in earlier versions of Flash, are more complex to create. While motion tweens offer much more control of a tween, classic tweens provide certain specific capabilities that some users may want.

The differences between motion tweens and classic tweens include the following:

  • Classic tweens use keyframes. Keyframes are frames in which a new instance of an object appears. Motion tweens can only have one object instance associated with them and use property keyframes instead of keyframes.

  • A motion tween consists of one target object over the entire tween span.

  • Both motion tweens and classic tweens allow only specific types of objects to be tweened. Applying a motion tween will convert all non-allowed object types to a movie clip when the tween is created. Applying a classic tween will convert them to graphic symbols.

  • Motion tweens consider text a tweenable type and do not convert text objects to movie clips. Classic tweens convert text objects to graphic symbols.

  • No frame scripts are allowed on a motion tween span. Classic tweens allow frame scripts.

  • Any object scripts on a tween target cannot change over the course of the motion tween span.

  • Motion tween spans can be stretched and resized in the Timeline and are treated as a single object. Classic tweens consist of groups of individually selectable frames in the Timeline.

  • To select individual frames in a motion tween span you must Ctrl-click (Windows) or Command-click (Macintosh) the frames.

  • With classic tweens, eases can be applied to the groups of frames between the keyframes within the tween. With motion tweens, eases apply across the entire length of a motion tween span. Easing only specific frames of a motion tween requires the creation of a custom ease curve.

  • You can use classic tweens to animate between two different colour effects, such as tint and alpha transparency. Motion tweens can apply one colour effect per tween.

  • Only motion tweens can be used to animate 3D objects. You cannot animate a 3D object using a classic tween.

  • Only motion tweens can be saved as motion presets.

  • With motion tweens, you cannot swap symbols or set the frame number of a graphic symbol to display in a property keyframe. Animations that include these techniques require classic tweens.

what a motion tween looks like

motion tween

 

Additional tweening resources

The following articles and resources are available about the differences between motion tweens and classic tweens:

 


Frame-by-frame animation

Frame-by-frame animation changes the contents of the Stage in every frame and is best suited to complex animation in which an image changes in every frame instead of simply moving across the Stage.

Frame-by-frame animation increases file size more rapidly than tweened animation. In frame-by-frame animation, Flash stores the values for each complete frame.



Representations of animations in the Timeline
Flash distinguishes tweened animation from frame-by-frame animation in the Timeline as follows:

  • Motion tweens are indicated by a black dot at the beginning keyframe, and black diamond shapes


  • Classic tweens are indicated by a black dot at the beginning keyframe; intermediate tweened frames have a black arrow with a light-blue background.


  • Shape tweens are indicated by a black dot at the beginning keyframe; intermediate frames have a black arrow with a light-green background.


  • A dashed line indicates that the tween is broken or incomplete, such as when the final keyframe is missing.


  • A single keyframe is indicated by a black dot. Light-grey frames after a single keyframe contain the same content with no changes and have a black line with a hollow rectangle at the last frame of the span.


  • A small a indicates that the frame has been assigned a frame action with the Actions panel.


  • A red flag indicates that the frame contains a label or comment.


Distributing objects to layers for tweened animation


You can quickly distribute selected objects in a frame to separate layers to apply tweened animation to the objects. The objects can be on one or more layers initially. Flash distributes each object to a new, separate layer. Any objects that you don't select (including objects in other frames) are preserved in their original positions.
You can apply the Distribute to Layers command (Modify/Timeline/Distribute to Layers) to any type of element on the Stage, including graphic objects, instances, bitmaps, video clips, and broken-apart text blocks.
Applying the Distribute to Layers command to broken-apart text makes it easy to create animated text. The characters in the text are placed in separate text blocks during the Break Apart operation, and each text block is placed on a separate layer during the Distribute to Layers process.


Classic tweening instances, groups, and type

To tween the changes in properties of instances, groups, and type, you can use classic tweening. Flash can tween position, size, rotation, and skew of instances, groups, and type. Additionally, Flash can tween the colour of instances and type, creating gradual colour shifts or making an instance fade in or out. To tween the colour of groups or type, you must make them into symbols.

To animate individual characters in a block of text separately, you place each character in a separate text block – you “break apart” the text.
If you apply a classic tween and then change the number of frames between the two keyframes, or move the group or symbol in either keyframe, Flash automatically tweens the frames again.

You can create a classic tween using one of two methods:

  • Create the first keyframe for the animation, insert the number of frames you want on the Timeline, choose Insert > Create Classic Tween, and move the object to the new location on the Stage. Flash automatically creates the ending keyframe.
  • Create the first keyframe for the animation, insert the number of frames you want on the Timeline & Right-Click on the first keyframe, choose Create Classic Tween. You can then move the object around on the other keyframes and Flash will automatically create the tweening between keyframes.

classic tween

You should then see the tweening arrow appear between your keyframes. You can add extra keyframes along your tween span by electing the frame and hitting F6 to place a keyframe on the timeline (or by Right-Clicking on the frame). Then you can change a whole variety of symbol properties like scale, position, rotation, alpha, tint etc.

classic tween

 

Shape tweening

By tweening shapes, you can create an effect similar to morphing, making one shape appear to change into another shape over time. Flash can also tween the location, size, and colour of shapes.

Tweening one shape at a time usually yields the best results. If you tween multiple shapes at one time, all the shapes must be on the same layer.
To apply shape tweening to groups, instances, or bitmap images, you must first break these elements apart. To apply shape tweening to text, you must break the text apart twice to convert the text to objects.

 

To control more complex or improbable shape changes, you use shape hints, which control how parts of the original shape move into the new shape.



Using shape hints
To control more complex or improbable shape changes, you can use shape hints. Shape hints identify points that should correspond in starting and ending shapes. For example, if you are tweening a drawing of a face as it changes expression, you can use a shape hint to mark each eye. Then, instead of the face becoming an amorphous tangle while the shape change takes place, each eye remains recognizable and changes separately during the shift.
Shape hints contain letters (a through z) for identifying which points correspond in the starting and ending shape. You can use up to 26 shape hints.
Shape hints are yellow in a starting keyframe, green in an ending keyframe, and red when not on a curve.
For best results when tweening shapes, follow these guidelines:

  • In complex shape tweening, create intermediate shapes and tween them instead of just defining a starting and ending shape.
  • Make sure that shape hints are logical. For example, if you're using three shape hints for a triangle, they must be in the same order on the original triangle and the triangle to be tweened. The order cannot be abc in the first keyframe and acb in the second.
  • Shape hints work best if you place them in counter-clockwise order beginning at the top left corner of the shape.

To use shape hints:

  • Select the first keyframe in a shape-tweened sequence.
  • Choose Modify > Shape > Add Shape Hint.  The beginning shape hint appears as a red circle with the letter a somewhere on the shape.
  • Move the shape hint to a point that you want to mark.
  • Select the last keyframe in the tweening sequence.  The ending shape hint appears somewhere on the shape as a green circle with the letter a.
  • Move the shape hint to the point in the ending shape that should correspond to the first point you marked.
  • Run the movie again to see how the shape hints change the shape tweening.  Move the shape hints to fine-tune the tweening.
  • Repeat this process to add additional shape hints.  New hints appear with the letters that follow (b, c, and so on).

While working with shape hints, you can also do the following:

  • To see all shape hints, choose View > Show Shape Hints. The layer and keyframe that contain shape hints must be current for Show Shape Hints to be available.
  • To remove a shape hint, drag it off the Stage.
  • To remove all shape hints, choose Modify > Transform > Remove All Hints.

 

Onion Skinning



Onion-skinning allows you to see frames on the timeline before or after your current one. It's very useful when you're doing frame by frame animation. You can turn onion-skinning on or off by clicking the onion skinning graphic located right underneath the timeline.

 


You can increase or decrease the scope of your onion skinning  by moving the black brackets.


Onion Skinning with outlines


The onions skin with outlines button is almost identical as the normal onion skinning mode, except it shows surrounding frames as outlines, instead of just fading them.


 

Onion skinning options


Before we look at the third button (editing multiple frames) lets jump to the fourth, which has options for using our onion skins.

  • Always Show Markers leaves the black onion skinning brackets showing even if you don't have onion skinning turned on.
  • Anchor Onion means that it it wont follow the red play scrub when you move it – it will instead be anchored to the timeline
  • Onion 2 will look ahead and behind 2 frames
  • Onion 5 will look ahead 5 frames and behind 5 frames
  • Onion All will onion skin all available frames

Don't forget those – these are optional – you can always just drag out the black brackets to suit your needs.

It's also good to note that these options also apply to editing multiple frames.


 

Edit Multiple Frames


The third button allows you to see and edit a number of objects on the timeline at the one time. This is a handy feature for situations when you may need to move some frame by frame
animation. Instead of moving each image individually, turn on this option, then select all your frames and move them once.


Motion path

The motion path allows you to control how an object gets from a to b. For example, lets  draw a circle on  the stage.


Now double click on this circle and go up to [Modify] on the top menu and select [Convert to symbol] (or press f8). Set it's name to 'circle' and its type to 'Movie Clip'.



To animate this right click on the circle and select [Create Motion Tween] and drag the circle somewhere else on stage.


Now if you scrub the timeline you should see that the circle is now animating from a to b. This is fine but we can now alter and modify the motion path and edit how it gets there.



With the Selection Tool selected (Black pointer, shortcut = V) click on the blue line and drag it down. You should now be able to see a curved line – this is the path your animation will follow. Scrub through the time line again and see the difference.


We can continue to alter this motion path by selecting the Subselection Tool (White pointer, shortcut = A). Click on one of the end points (larger squares) of your motion path and you should see that you now have some bezier curve handles which you can drag around to make a more complex path. Play with the bezier curves and when your finished scrub through the timeline again. Save this file as 'week2_motion_path' in your week2 folder.


Motion Guide

 

To create a custom motion guide lets start with a new flash file. As before lets draw a circle on screen and select it and convert it to a movieclip with the name of circle.


Lets draw with the pencil tool. Lets set its mode to smooth and begin drawing something that loops.


Double click on that path and cut it (ctrl x / cmd x)

Now right click on our circle and select [Create Motion Tween] from the options. With the motion tween selected paste the line back in (ctrl v / cmd v) and you should now see that your object follows the motion guide you drew.



Mask Layers

Work with mask layers

You can use mask layers to reveal portions of a picture or graphic in the layer below. To create a mask, you specify that a layer is a mask layer, and either draw or place a filled shape on that layer. You can use any filled shape, including groups, text, and symbols, as a mask. The mask layer reveals the area of linked layers beneath the filled shape.

Create a mask layer

  1. Select or create a layer containing the objects to appear inside the mask.
  2. Select Insert > Timeline > Layer to create a new layer above it. A mask layer always masks the layer immediately below it; create the mask layer in the proper place.
  3. Place a filled shape, text, or an instance of a symbol on the mask layer. Flash ignores bitmaps, gradients, transparency, colours, and line styles in a mask layer. Any filled area is completely transparent in the mask; any non-filled area is opaque.
  4. Right-click (Windows) or Control-click (Macintosh) the mask layer’s name in the Timeline, and select Mask. A mask layer icon indicates the mask layer. The layer immediately below it is linked to the mask layer, and its contents show through the filled area on the mask. The masked layer name is indented, and its icon changes to a masked layer icon.
  5. To display the mask effect in Flash, lock the mask layer and the masked layer.

mask layer mask layer

Mask additional layers after creating a mask layer

Do one of the following:
  • Drag an existing layer directly below the mask layer.

  • Create a new layer anywhere below the mask layer.

  • Select Modify > Timeline > Layer Properties, and select Masked.

Unlink layers from a mask layer

Select the layer to unlink and do one of the following:
  • Drag the layer above the mask layer.

  • Select Modify > Timeline > Layer Properties, and select Normal.

Animate a filled shape, type object, or graphic symbol instance on a mask layer

  1. Select the mask layer in the Timeline.
  2. To unlock the mask layer, click in the Lock column.
  3. Do one of the following:
    • if the mask object is a filled shape, apply shape tweening to the object.
    • if the mask object is a type object or graphic symbol instance, apply motion tweening to the object.
  4. When the animation operation is complete, click in the Lock column for the mask layer to re-lock the layer.

Animate a movie clip on a mask layer

  1. Select the mask layer in the Timeline.
  2. To edit the movie clip in place and to display the movie clip’s Timeline, double-click the movie clip on the Stage.
  3. Apply motion tweening to the movie clip.
  4. When the animation procedure is complete, click the Back button to return to document-editing mode.
  5. To lock the layer again, click in the Lock column for the mask layer.

 

Video in Flash

The Flash Player is capable of playing back video. Although it's possible to embed video content within an .swf file, most Flash video content is stored in Flash video files (.flv files) and loaded into the Flash Player at runtime using ActionScript. By loading .flv files at runtime, you have smaller .swf files, more flexible content management, and greater control over the loading and playback of the video content. There are times though when it is useful to import video to the Library, and use it within a movieclip - generally when you have short clips of video that you want to integrate with other media content in the Flash file as we will see today. Importing long video clips with sound into flash can lead to audio synchronisation issues where the sound and image don't match up, so you have to consider a few things when deciding how to work with your video in Flash.

Flash video loaded from .flv files has two faces: progressive download and streaming. Streaming .flv video requires a streaming server, such as Flash Media Server. In contrast, progressive download doesn't require any additional software. However, for the most part, the ActionScript required to work with streaming and progressive download video is identical. The notes today look at how to work with progressive download video and focus exclusively on working with .flv files.

To create an FLV file from your video content, just use the Adobe Media Encoder (it should be part of the Adobe suite of apps) and convert your video file to FLV. Make sure it's the FLV format, not the F4V format because that cannot be imported directly into Flash - although you can use F4V files as external video with Flash. You may have to play around with the settings to get the right properties to suit your requirements. you can try this yourself with most video file formats. If you don't have one handy, grab this sample video file and open it with the Media Encoder.

 

Importing Video to the Library

It used to be easier to import video to the Library in previous versions of Flash because you could import a few file formats. Now you can only import FLV files so you must encode your video first.

I like to import video when I use blends and layering with other content in my Flash file - so usually these are artistic, interactive pieces that I am creating. The video files I use are usually short loops without sound. The benefit of importing to the library is that you can then place the video into a movieclip and use AS3 to control and manipulate your movieclip properties.

Internal video

Import an FLV provided, or use your own if you have one. When the import Video wizard comes up, choose "Embed FLV in SWF and play in timeline". once you have your video in the Library with its related movieclip, you can place a movieclip instance on the stage and give it an instance name.

 

You can set blends and other properties in the properties panel, or use AS3 to change properties like alpha, scale, position etc.

One popular trick is to use the mouse position to create a scrubber effect. you can go to a movieclip frame based upon your mouse position on the X or Y coordinates of the stage:

//vidpaint is the instance name of the movieclip with the video inside
//create an enter frame listener

vidpaint.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
//this function calculates that the 447 frames of the video divided by the stage width of 800 will give us a ratio
//to use with the mouseX position to scrub the video back and forth

var numFrames:Number = 447;
var myRatio:Number = numFrames/stage.stageWidth;
var myPos:Number;
function enterFrameHandler(e:Event):void {
trace(int(stage.mouseX * myRatio));
myPos = int(stage.mouseX * myRatio);
e.target.gotoAndStop(myPos);
}

Try some other property changes with code.

Save and test.

See the SWF
Get the FLA

 

Playing External Video

There are lots of things you can do with external video in AS3 - many more than previous versions of Flash. If you just want to play back a video with normal controls, then you can just use the import video wizard and select the "load external video with playback component" which does all the work for you.
See SWF & FLA for this example. Note the extra SWF file needed for the video playback control "skin" - SkinOverAllNoFullNoCaption.swf. This file gets automatically added to your folder when you select the playback component. It may have a different name depending on which skin you choose. Make sure you upload it to your website with your SWF file and keep them both in the same folder, otherwise the video controls won't work.

But if you want more control over your video to do more creative and interesting things with it, then you can use AS3 & make custom controls. We will try a few things out today in this exercise, although this is really only the tip of the iceberg of what is possible with video in AS3, but it should give you a basis for researching further into scripts that can control and manipulate video in Flash.

What you need to know is that playing external video is different to loading other objects like sound, images and SWF files. You need to use the following objects:

  • NetConnection()
  • NetStream()
  • Video()

to play and pause video:

  • videoStream.play(myVideo);

  • videoStream.pause( ); // toggles the pause on and off.
  • videoStream.pause(true); //If you pass the method a true value, the video pauses if it's currently playing, and nothing occurs if the video is already paused:
  • videoStream.pause(false); //If you pass the method a false value, it resumes if the video is paused, and nothing occurs if the video is already playing:

Although it's a common mistake, you should not use the play( ) method to resume playback of a paused video. The play( ) method is only used to load and start the initial playback of a video.

When you want to stop a video from playing back, use the close( ) method of the NetStream object that controls the video. When you use the pause( ) method, the video simply pauses and starts playing again (typically when a UI button is pressed by the user), but even when paused, the FLV data continues to download. If you want to completely stop a video from downloading, use the close( ) method, as follows:

videoStream.close( );

To go to different frames of the video, use the seek() method. The seek( ) method requires one parameter to specify the number of seconds from the start of the video to which you want to move the playback. The following example seeks five seconds from the start of the video before starting the playback:

videoStream.seek(5);

 

External video

Get a copy of the FLV file provided in class, or use your own if you have one.

Create a new AS3 Flash file and make sure you save it in the same folder as your FLV file.

get a Library button or make a button and place one instance of it on the stage. Give it the instance name "btnSeekNum". Create 1 dynamic text field and 1 input text field on the stage - we will be using the input field to type a number that we want to use as a seek value to jump to a position in the video file. Give them the following instance names:

  • dynamic text field: txtVideoTime;
  • input text field: txtSeekNum;

Place the following code on frame 1 of the main timeline. We will go through each line to identify the functionality. You can play around with this code and try some different things.

//import the relevant classes
import flash.media.Video;
import flash.net.NetConnection;
import flash.net.NetStream;
import flash.events.NetStatusEvent;
import flash.display.Sprite;
import flash.events.Event;
import flash.filters.ColorMatrixFilter;
//----------------------------
//VIDEO SCRIPTS
//----------------------------

//the path of the video file
var myVideo:String="water7.flv";
var myDuration:Number = 0;
//new NetConnection instance
var videoConnection:NetConnection = new NetConnection();
videoConnection.connect(null);
//new NetStream instance
var videoStream:NetStream=new NetStream(videoConnection);
//new object instance to get metadata info from the video file
var videoObject:Object = new Object( );
//onMetaData event to get duration metadata from video file
videoObject.onMetaData = function(metadata:Object):void {
myDuration = metadata.duration;
};
videoStream.client = videoObject;
//new video instance
var video:Video = new Video();
//add child video to stage
addChild(video);
//negative filter using ColorMatrixFilter (optional)
video.filters = [new ColorMatrixFilter([-1, 0, 0, 0, 255, 0, -1, 0, 0, 255, 0, 0, -1, 0, 255, 0, 0, 0, 1, 0])];
//video properties on stage
video.width = 400;
video.height = 300;
//this code centres the video on the stage
video.x=stage.stageWidth/2-video.width/2;
video.y=stage.stageHeight/2-video.height/2;
//attach the video stream to the video object on the stage
video.attachNetStream(videoStream);
//play the external video file through this net stream
videoStream.play(myVideo);
//----------------------------
//LISTENERS & FUNCTIONS
//----------------------------
//place an enter frame event listener on the stage to calculate the time property of the video
//and to loop the video when it is complete

stage.addEventListener(Event.ENTER_FRAME, videoTimeHandler);
function videoTimeHandler(e:Event):void {
txtVideoTime.text=int(videoStream.time)+" of " + int(myDuration) + " seconds duration";
//to loop the video
if (videoStream.time >= myDuration){
videoStream.seek(0);
}
}
//swap children to make sure the text field appears above the video

swapChildren(video, txtVideoTime);
//allow the user to type a number into an input field to jump to that position using the seek() function
btnSeekNum.addEventListener(MouseEvent.CLICK, seekHandler);
function seekHandler(e:MouseEvent):void{
var seekNum:uint = Number(txtSeekNum.text);
videoStream.seek(seekNum);
}

Save and test. Try creating some playback buttons for this video exercise.

see the SWF

get the FLA and the FLV

get the files & code here for today's class.

 

more advanced stuff (further research):

flash and webcams

see my sample file at

http://www.blackaeonium.net/drowned/drowned01.html

or see some of grant skinner's webcam examples at

gskinner - gallery incomplet

and some more examples:

http://blog.soulwire.co.uk/code/actionscript-3/webcam-motion-detection-tracking

 

 

CLASS EXERCISE - ASSESSMENT TASK 2

Create a video kaleidoscope

This exercise will demonstrate how to import and use video in Flash, but is also a really good example of how you can nest movieclip timelines in Flash to create really interesting animation effects.

1. Convert your video to the FLV (Flash Video) format so that it can be imported to Flash and saved in the Library. Video can be linked externally, but when creating a file like this with multiple instances, masking etc, it's best to use an internal video symbol.
Use the Adobe Media Encoder to save a version of your video as an FLV - you don't need audio for this project, so make sure your file has the audio option turned off.

2. Create a new ActionScript 3 Flash file and import video to Flash using the Import Video option in the File menu. When importing you need to choose the following options:

  • Embed FLV in SWF and play in timeline;
  • Symbol type = MovieClip, place instance on stage & expand timeline if necessary (do not include audio);

3. Remove the instance of the video from the stage (we'll use it later after we've done some masking and tweaking) - it will still be in the Library.

4. Create a new MovieClip symbol in the Library & call it "Wedge". Open the Wedge MovieClip by double-clicking it. We will nest the Video Movieclip in the new Wedge MovieClip by dragging it into the new MovieClip - thus nesting one MovieClip inside the other.

5. Create a new layer inside the Wedge MovieClip above the layer with the video MovieClip in it. This new layer will contain a mask that will only show a "wedge" shape of the video.

6. Select the top empty layer that is above the video layer. Draw a wedge shape with the pen tool and fill it with any solid colour. You can play around with the shape until it looks OK.

7. Turn the top layer with the wedge shape into a Mask layer by right-clicking on the layer and choosing "Mask". The layer will automatically mask the video with your wedge shape. Unlike Photoshop, Flash masks show the solid area rather than hide the solid area.

8. Now you have a wedge shaped piece of video in your Library. At present there should not be anything on your main timeline. We will now create another movieclip in the Library called "Kaleidoscope" and drag 6 instances of the wedge MovieClip symbol into the Kaleidoscope MovieClip - all in the one layer. you can use the Transform tool to rotate the wedges so that you end up with a circle of wedges, like a cake with the slices cut into it. This is now a video kaleidoscope!

9. Make sure you save your Flash file as you go, and once the Wedges are in the Kaleidoscope, you can start dragging Kaleidoscope instances into the main timeline, you can "test" your movie by hitting Command-Enter on the Mac (Control-Enter on Win) to generate a SWF file that will show you how your video kaleidoscope will play back. If it's too fast or slow, you can change the Frame Rate by clicking on the area outside the Stage which will show you the Properties for the Flash file. You can set the frame rate, change the stage colour and size etc.

10. If you want to make a circle mask to smooth off any rough edges of your kaleidoscope, you can do the same procedure you did inside the Wedge MovieClip, but you do it in the Kaleidoscope MovieClip... Your wedges should be on one layer of the main timeline. Create a new layer on the kaleidoscope timeline that will be above the wedges layer. Draw a circle shape and fill it with any colour. Position the circle over the kaleidoscope so that it is centred and just fits inside the kaleidoscope area. Right-click on the circle layer and turn it into a Mask. Your Kaleidoscope should now be a smooth circle.

11. Try experimenting with your kaleidoscope - because you made the whole kaleidoscope inside a MovieClip, you can now drag multiple kaleidoscopes onto the main timeline. You might like to try some blends and other effects that can be applied to MovieClip symbols - just select the MovieClip on the stage and view the properties in the Properties panel.

see the SWF file here

get the FLA for this file to see how it was made

 

Assessment Tasks

Read the current Assessment Task (2) to see what the requirements are - basically you can create any project you want that combines video and Flash. we can discuss your ideas and see what's feasible in the short timeframe.

 

Homework / Readings

Prepare some video footage to be used in your assessment task. Experiment with Flash if you can.

 

References

Flash related content

some very cools things made with Flash, or using Flash content: