Packages that we use Within ICT we primarily use Dreamweaver CS3 and Flash CS3 This is embedded in an Adobe Design Premium CS3 package (Go to Start > Programs > Graphics Software > Adobe Design Premium CS3) –Which includes: Illustrator – Vector Graphic Images Photoshop CS3 – Digital Bitmap Image Manipulation In Design – Desktop Publishing Adobe Bridge CS3 – Easy access to files

Overview of Flash What can be achieved in Flash –Animations: These include banner ads, online greeting cards, and cartoons –Games: Many games are built with Flash using a combination of the animation capabilities of Flash with the capabilities of ActionScript –User interfaces: Website design incorporates Flash user interfaces – navigation bars as well as much more complex interfaces –Flexible messaging areas: These are areas in web pages that designers use for displaying information that may change over time. A flexible messaging area (FMA) on a restaurant website might display information about each day's menu specials.

Overview of Flash What can be achieved in Flash –Create and import media elements, such as images, video, sound, and text –Timeline for animations –ActionScripts to create interactivity Concept of programming

Introduction to Flash An Overview Tools Stage Timeline Library that contains Assets: images, video and sound Properties

Setting the Stage size –Click on the Size button in the properties window Flash – The Stage Save your file at this stage by clicking on File, at the top, and then select Save from the menu

Click on Settings on the Properties at the bottom Flash – The Publish Settings We will look at these settings in more detail later… Make certain that Flash Player 9 has been selected from the Version drop- down list Make certain that ActionScript 2.0 has been selected from the ActionScript version drop-down list Now click OK We will look at these settings in more detail later… Make certain that Flash Player 9 has been selected from the Version drop- down list Make certain that ActionScript 2.0 has been selected from the ActionScript version drop-down list Now click OK

Flash – Tools Snap to Objects Fill Colour Arrow Tool Subselection Tool Lasso Tool Pen Tool Ink Bottle Tool Paint Bucket Tool

Flash – Simple Shapes Left-click on the Shape Selection tool Choose a shape… Move the mouse so the pointer is on the stage… Now hold the left-click down, drag the pointer on the stage and create a shape… Release the left-click

Flash – The Colour Swatch Click on the Fill Colour to change the colour of the shape…

Flash – The Colour Mixer Click on the Colour Mixer to access a range of colours to fill your shape. You can change the fill style…

Library - Assets The Library contains all the elements for your animation or interactive program… Right-click on the object and select Convert to Symbol. Choose either Movie Clip (sequences of animation), Button (for interactive ‘behaviors’) and Graphics.

Creating an Animation – Timeline A movie is a collection of frames and the timeline is the area in Flash where you will be configuring those frames –A single frame is inserted into a shot to provide a variation of an image –Point and click in the first Frame and then left-click and drag so that 20 frames are selected –Right-click and select Insert Frame

Creating an Animation – Timeline Right-click in Frame 5 and select Insert Keyframe Now do this for Frames 10, 15 and 20…

Creating an Animation – Timeline Select the Second Keyframe… Now do the same for each Keyframe: move the ball object to another area of the stage Using the Arrow Tool, move the ball object to another location on the stage

Creating an Animation – Tweening Left click on the first frame: whilst the left-click is held down, select all your frames by dragging the mouse’s pointer across them –In the Properties Window, select Shape or Motion from the drop-down menu. This will add ‘tweening’ images between each Keyframe Arrows will appear between each Keyframe to show that tweening has taken place Now press the Enter key to preview your animation

Interactive Animation Left-click in the first frame of the animation Go to Window at the top and then select ‘Behaviors’ Choose the Actions required –Click on the Plus sign –Select MovieClip –GoTo and Play at frame or label ActionScript to pause your movie.

Interactive Animation Click on Frame –Within the field, input 1 Click On OK 1

Buttons The Up State is what the end user will see when the animation plays With the Over State, the image changes to indicate that this element is interactive With the Down State, the image changes to indicate that this element has been selected With the Hit State, the image indicates the area of interactivity – the hot spot. This image can be the same as that of the Up State (see later) You will need to alter the image i.e. alter the colour on each Keyframe except for the Hit State Keyframe.

Buttons Go to Insert, then select New Symbol –Select the Button option and then click on OK Not only will the timeline for the button appear but the button object will be displayed in the Library too Left-click in the first Keyframe and create a shape. The Keyframe’s dot will change to black.

Buttons Now right-click in the Over State frame and select Insert Keyframe. A Keyframe will appear as a black dot. Now carry out this same task individually for the Down State frame and the Hit State frame. You should now have 4 black dots which represent the Keyframes. BEFORE The Shape Click on the Over State Keyframe. Now change the colour of the shape. Now click on the Down State Keyframe and change the colour of the shape again. AFTER

Buttons Go back to the stage by clicking on the Scene icon. The Shape Now create a layer by clicking on the Layer icon. A new layer will appear in the timeline. Make certain this layer is selected. Left-click on the button (instance) in the Library and drag onto the stage.

Buttons – Action Script 2 Left-click on the Button image, go to Window and select ‘Behaviors’. Click on the cross From the list, select MovieClip and then Goto and Play at frame or label –Input 2 in the following field, then click OK

Buttons – Sound Go to File, then select Import and then Import To Library In the Import dialog box, locate and open the desired sound file To go back into the button object timeline, double-click on the button object in the Library.

Buttons – Sound Left-click on the Down Keyframe Select your sound from the Sound drop-down menu The sound will appear in the Keyframe as a sound wave You can also add an effect…

Add Sound to the Timeline Insert a new layer and name it ‘Sound’ Drag your sound from the Library onto the stage The sound wave will show in the timeline You can choose when the sound starts and stops playing by dragging the start and stop Keyframes on the timeline

Testing and Publishing Go to Control and select Test Movie to preview the Flash document before publishing the file A window will appear showing your animation. Once the animation has ended, close this window by clicking on the cross at the top When you are ready to deliver your Flash content to an audience, you can publish it for playback 1. Go to File at the top and select Publish Settings 2. Click on the Create New Profile button (+) 3. Name the ‘Publish’ profile “Ball”, and click OK 4. Now click on Publish and then OK You can specify the publish settings for your document…see the next slides

Publishing The Publish command creates a Flash SWF (Shockwave) file for use on the Internet To Publish your movie or embed it in a Web Page –Go to File and select Publish Settings –Click the HTML tab and make certain that Loop has been selected and you can select specific Browser settings if required –Now select the Flash tab…

Publishing To specify how Flash loads a SWF file’s layers (i.e. when downloading the first frame of your animation) select a load order (Bottom Up or Top Down) Select the ActionScript™ version from the ActionScript version pop ‑ up menu i.e. ActionScript 2 Protect From Import prevents others from importing a SWF file and converting it back into a FLASH document. This lets you use password protection with your Flash SWF file.

Publishing Compress Movie(Default) – Compresses the SWF file to reduce the file size and download time. This is most beneficial when a file is text or ActionScript intensive. A compressed file plays only in Flash Player 6 or later Export Hidden Layers enables you to export hidden layers in the Flash document To control bitmap compression, adjust the JPEG Quality slider or enter a value. Lower image quality produces smaller files; higher image quality produces larger files

Publishing – Sound Sounds can use large amounts of disk space and RAM Best to use MP3s because MP3 sound data is compressed and smaller than WAV (Waveform audio format) or AIFF (Audio Interchange File Format) files When using WAV or AIFF files, it’s best to use kHz mono sound (stereo uses twice as much data as mono) Bit Rate –Determines the bits per second in the exported sound file. Flash supports 8 through 160 Kbps CBR (constant bit rate). When you export music, set the bit rate to 16 Kbps or higher for best results.

Publishing To set the sample rate and compression for all streaming sounds or event sounds in the SWF file, click Set next to Audio Stream or Audio Event Note: –A streaming sound plays as soon as enough data for the first few frames downloads –An event sound does not play until it downloads completely

Publishing Quality –Determines the compression speed and sound quality –Fast Yields faster compression but lower sound quality. –Medium Yields somewhat slower compression but higher sound quality. –Best Yields the slowest compression and the highest sound quality.

Publishing You need an HTML document to play a SWF file in a Web browser and specify browser settings.