OCR Unit 21 – AO5 – Creating Web Banners in Adobe Flash CS3

OCR Unit 21 – AO5 – Creating Web Banners in Adobe Flash CS3 MERIT/DISTINCTION GUIDE & EXAMPLE

Wherever you see

, you must screenshot and explain your work in a document.

REMEMBER – THIS IS A GUIDE – USE YOUR PLAN TO CREATE YOUR ACTUAL BANNER STEP 1

Run Flash CS3 (Start  All Programs  Student Adobe ) When the wizard appears, click on create new Flash File (ActionScript 2.0)

STEP 2

Go to Modify  Document

Set up your banner with the settings shown in the picture.

Dimensions: 600 x 180 Background: yellow (or what your plan says) Frame rate: 24 fps

STEP 3

If you haven’t done so already, find some pictures on the internet which you wish to use in your banner. These should be saved in your AO5 folder.

STEP 4

In Flash, go to: File > Import > Import to Stage

Find your Blue Star logo or one of your pictures.

STEP 5

Select the “Free Transform Tool” from the menu

Resize your picture appropriately, so it fits on your stage.

STEP 6

Insert a new layer by going to Insert  Timeline  Layer.

A new layer will appear in your timeline.

STEP 7

With your second layer selected, insert your second picture. go to: File > Import > Import to Stage

Import your second picture, and resize it (see step 5).

STEP 8

Click on your first picture press F8 on your keyboard. Name it “Logo” Select Movie Clip and click OK

STEP 9

Click on your second picture press F8 on your keyboard. Name it “phones” Select Movie Clip and click OK

STEP 10

Insert a new layer (Insert  Timeline  Layer)

Click on the text tool.

STEP 11

Draw a box on your stage. Enter in your tag line text. Don’t worry about the position of the box for now.

Use the settings at the bottom to adjust the font style and settings.

Use

to move your box where you want it

STEP 13

Insert a new layer (Insert  Timeline  Layer)

You’ll now have four layers.

Insert a new text box using

Enter an offer and adjust the font.

STEP 14

Pull everything off your stage, as shown in the diagram.

STEP 15

Click on frame 40 of layer 1 in your timeline.

Press F6 – it should look like the picture 

STEP 16

Move your FIRST picture (your logo in this case) on to the stage.

STEP 17

Select frame 5 in layer 1

From the properties at the bottom, select Tween: Motion Rotate: CW

STEP 18

Click on FRAME 40 of LAYER 2

Press F6.

You will get a grey bar in layer 2.

STEP 19

Move your second picture onto the stage.

Click on Frame 5 of layer 2.

From the properties at the bottom, select Tween: Motion Rotate: CW

STEP 20

Select FRAME 40 of LAYER 3

Press F6.

Drag your text onto the stage.

STEP 21

Select FRAME 5 of LAYER 3

In the properties at the bottom set Tween to be Motion.

STEP 22

Select FRAME 40 of LAYER 4 Drag your text onto the stage.

Click on Frame 5 of Layer 4.

In the properties at the bottom set Tween to be Motion.

STEP 23

We want your animation to STOP animating when it gets to the end. Right click on FRAME 40 of LAYER 4 and Select Actions

Click on “Global Functions”  “Timeline Control”

Double click on “stop”

Close the action script window

STEP 24

We want to add some interactivity, so when the user clicks on your banner it takes them to the company website. Click on FRAME 40 of LAYER 1

STEP 25

Right click on your first image and select “Actions”

STEP 26

Click on “Global Functions”

Click on “Browser / Network”

DOUBLE click on “getURL”

STEP 27

On the right enter in the details shown in the picture.

As we do not have a web address for Blue Star, we will use google for now. URL: http://www,google.com Window: _blank

STEP 28

Click on the writing which says “onClipEvent (load)

Select Mouse Down from the top options

Close the action script window

STEP 29

SAVE your movie in your AO5 folder as “Banner Master.fla”

Test your movie by pressing “CTRL+ENTER”

Try clicking on your banner and see what happens

FURTHER EXPLORATION MAKE YOUR BANNER MORE SUITABLE FOR AUDIENCE AND PURPOSE – REALLY EASILY STEPS

Click on Frame 40 (the number) Then just right click on the picture or text and go to Timeline Effects

Explore!

WARNING: SAVE BEFORE YOU PLAY!

EXPORTING YOUR BANNER FOR THE WEB STEPS

File  Publish

This will create a webpage for your banner, in the same place as where you saved your work.

KEEP THESE FOR A06