Flash Slideshow with Fade Transition Slideshow #1-Themed Images Slideshow #2-Instructional Images.

Slides:



Advertisements
Similar presentations
Chapter 3 Creating a Business Letter with a Letterhead and Table
Advertisements

Flash animation For beginners. Lesson objectives To understand how to animate a ball To understand how to loop animations To learn how to use animation.
© Anselm Spoerri Lecture 11 Flash –Build Flash Website with Animated Navigation Structure –Decide on Overall Navigation Layout, Import Images & Organize.
Roentgen photo effect. This detailed, thoroughly explained lesson will show you how to create very attractive roentgen photo effect. You can use this.
Power Point Presentation - Advanced Julia J. Stahl Distributed System Specialist.
With Alex Conger – President of Webmajik.com FrontPage 2002 Level I (Intro & Training) FrontPage 2002 Level I (Intro & Training)
Chapter 3 Working with Symbols and Interactivity.
Exercise : Animated Navigation Structure in Flash 1.Develop Answers to “What did you learn in ITI program?” “What do you have to offer?” “What are your.
CIS 205—Web Design & Development Flash Chapter 1 Getting Started with Adobe Flash CS3.
Lehigh University Introduction to Flash MX Sharmeen Mecklai.
Adobe Flash Professional CS5 Provides a comprehensive authoring environment for creating digital animation and interactive Web sites. Used to create engaging.
CT1514.  What is Motion Guide Layer?  Controls the movement of objects in a Motion tween animation  How to create a Motion Guide Layer?  Click on.
Working with Symbols and Interactivity
Slide 1 of 24 1) Launch Fireworks 2) Under File, choose New 3) In the New Document dialog box, enter Width: 100, Height 160, Resolution 72, and choose.
CIS 205—Web Design & Development Fireworks Chapter 1.
DIAMOND SHINE EFFECT. IN THIS STEP BY STEP LESSON, I WILL SHOW YOU HOW TO CREATE VERY ATTRACTIVE DIAMOND SHINE EFFECT USING SOME SPECIAL FLASH TIPS AND.
EYEGLASSES SHINE EFFECT. IN THIS LESSON, YOU WILL SEE HOW TO APPLY SHINE EFFECT ON EYEGLASSES ON THE PICTURE USING THE COLOR MIXER PANEL AND MASK.
Creating Buttons – Lesson 71 Creating Buttons Lesson 7.
Click your mouse for next slide Flash – Morphing and Shape Tweening You have designed some motion animation with the last lesson There is another type.
2006 Adobe Systems Incorporated. All Rights Reserved. 1 INTRODUCTION TO ADOBE FLASH CS3.
Introduction to Flash Animation CS 318. Topics Introduction to Flash and animation The Flash development environment Creating Flash animations  Layers.
PowerPoint Practice Exercise 1 1.Save this file in your AV-TECH Folder as PowerPoint Practice Exercise 1. 2.Open this file in PowerPoint. 3.Edit each slide.
Building the Events Components– Lesson 111 Building the Events Components Lesson 11.
1 Flash Basics Exercise Guide Making Animated Text  1.1 Open Flash 5.0 working environment frame 1  1.2 Highlight frame 1 of the first layer Insert.
BASIC MOTION TWEEN Studio 8 1. Draw a square (blue fill, no stroke) on the upper-left area of the stage.
Recording your voice in a slide Recording your voice in a slide (1 of 4) 1. Click on Insert. 2. Click Movies and Sounds. 3. Click Record Sound
Photoshop Image Slicing. Reasons to Image Slide To create links out of sliced images To optimise different areas. (flat areas of colour, such as logos,
Chapter2 Create animation. Objectives Import image Use the blank keyframe Add sound Publish the movie as an SWF file Use a motion tween animation.
Flash animation For beginners. homework Your homework is over two weeks so please write in each week of your planner for the next two weeks For homework.
Hyperstudio: A Beginner’s Tutorial By Judy Swaim.
Flash Develop Rich Internet Content and Applications –Design motion graphics or build data-driven applications Flash Document = “.fla” filename extension.
Video in Macromedia Flash (Optional) – Lesson 121 Video in Macromedia Flash (Optional) Lesson 12.
CIS 205—Web Design & Development Flash Chapter 3 Appendix on Using Buttons.
Open a new Flash File Action Script 2.0. Create a button like you did last lesson and name it Click to Play.
Click your mouse for next slide Flash – Fades and Alphas One useful thing you can so is to do a fade in of a picture or an image This is done by controlling.
+ This step by step tutorial demonstrates drawing a keyboard illustration using rectangles, grids, move and transform effects.
Lesson 4 Photoshop Basics. What you’ll learn Combining images Understanding document settings Removing backgrounds Saving files.
Flash 1. Document Properties Set frame rate and dimensions of project Set frame rate and dimensions of project (default width=550 and height=400)
Learning the Basics of ArcMap 3.3 Updated 4/27/2010 Using Arc/View pt. 1 1.
1 Sophiebook 101: Exploring the interface. 2 Open a new book in Sophie 1.File > New Book 2.Click OK.
CIS 205—Web Design & Development Flash Chapter 3 Working with Symbols and Interactivity.
Adobe ® Photoshop ® CS6 Chapter 1 Editing a Photo.
Copyright © Texas Education Agency, All rights reserved.1 Web Technologies Creating a Navigation Bar.
Power Point Technical Directions. Change Font: Size, Type, Color Size: –On the top toolbar, click on the arrow next to the number in a white box (not.
Prof. Anselm SpoerriMultimedia Production Rutgers Lecture 11 Flash –Build Flash Website with Animated Navigation Structure –Decide on Overall.
PowerPoint Grades 3-5.
INTRO to PIXLR.com.
PowerPoint PowerPoint is used for creating slideshows that accompany speeches, lectures, or other types of presentations. Slides can include text, images,
PowerPoint PowerPoint is used for creating slideshows that accompany speeches, lectures, or other types of presentations. Slides can include text, images,
Flash Interface, Commands and Functions
Macromedia Flash Tutorial
Chapter 1 Editing a Photo
Animated picture changes during motion path (Advanced)
ФІЗИКА Кількість завдань - 34 Час на виконання – 180 хв.
INTRODUCTION TO ADOBE FLASH CS4
Flash animation For beginners.
Economist Report (Advanced)
Sample heading First line of text Second line of text
DIRECTIONS: 1. Click Enable Editing in the yellow bar above.
سرطان پستان دکتر مریم طباطباییان پاییز ۱۳۹۱
Learning the Basics of ArcMap 3.3 Updated 4/27/2010
Working with Symbols and Interactivity
Animated recolored picture fades in over black and white copy
Develop Rich Internet Content and Applications
Power Point 101.
Flash Concepts and Demos - Overview
spotLIGHT TEXT Ppt宝藏 提供下载 (Intermediate)
Exercise : Animated Navigation Structure in Animate (= Flash)
Exercise : Animated Navigation Structure in Flash
Digital Story Telling with Frames
Presentation transcript:

Flash Slideshow with Fade Transition Slideshow #1-Themed Images Slideshow #2-Instructional Images

Acquire Your Images Decide on a theme- (example-Dogs, Flowers, Cars, Yoga Positions) Go on google and find several images that fit your theme for your slide show Save them in a folder

Size Your Images All your images should be approximately the same size to make your slide show more cohesive Although there are many ways to do this, I find the following, the easiest. Open Adobe PhotoShop

Size Your Images…Cont. Go to the file tab on top and choose open. Browse to one of the image files and open it. Go to the Image tab and choose image size

Sizing Your Image Check constrain Change the width to 300 pixels Allow the height to be whatever it changes to Hit ok

Saving Your Image Click on the file tab Choose Save for Web

Saving Your Image Make sure this says Gif Click on the save button Go to next slide for naming

Naming Your Image Name your image something like “dog1”, or “flower1”, or “car1” Resize each of your images, going through this same process, naming them in a numerical order. The Flash software picks up on this and often will automatically load each one in its own layer for you!

Open a new Flash File Open Flash Choose new document Click on the modify tab Choose “document” Make the dimensions 310 x 400 (or if your pictures are more horizontal, you might want them reversed)

Setting Up Your Layers 2. Create 6 layers. Rename the layers from top to bottom text, images1, images2, images3, images4, images5.

Import Your Images Choose File >> Import >> Import to Library. In the Import to Library window choose the first image for the slideshow and press Open button. Repeat this step for all the pictures you want to introduce (5 in my case). Now you should be able to see the images in the Library panel. If this is not opened choose Window >> Library (CTRL+L) to open it.

In the first frame of the images1 layer drag the first image you want in the slideshow. Select it and go to the Properties panel. Set X:5.0, Y:5.0. While the image is still selected choose Modify >> Convert to Symbol (F8). In the Convert to Symbol window that appears choose MovieClip as type and give it a name of image1MC.

Now go to the first frame of the images1 layer and click it to select it. Right click it and choose motion tween from the drop down list

Go to the frame 20 of the images1 layer press F6 to insert a keyframe. Insert again a new keyframe to frame 30, and then to frame 50. The frames should turn blue and a dot appears in each keyframe.

Change the Alpha (transparency) Now go back to first frame and select it. Select the MovieClip that is there Hit ctrl F3 to bring up the Properties panel and choose the Color tab. Under style, choose Alpha Amount: 0%. Repeat the same actions for frame 50.

Set Up the rest of the frames Now go to the frame 51 of the images2 layer. Repeat steps 4 to 7 for the second picture you desire in the slideshow and the frames For the third picture and images3 layer for frames , For the fourth picture and images4 layer for frames , and For the fifth picture and images5 layer for frames

Set up the text layer frame Great job! Now go to the first frame of the text layer. Select the Rectangle tool (R)from the Tools panel. Choose Stroke color: # and none for the Fill color. Draw a rectangle and then using the Selection Tool (V) double click the Stroke to select it. When the rectangle is selected go to the Properties panel (ctrl F3) and set W:310, H:235, X:0, Y:0.

Making the see-thru title box Select again the Rectangle tool (R). Now choose none for Stroke Color and for Fill Color choose #99CCFF and alpha 60%, like in the picture. Draw a rectangle, lick it to select it, go to the Properties panel and set W:300, H:40, X:5, Y:190.

Adding the title Select the Text tool (T) and in the Properties panel choose Font: Arial, Size:25, Text Color: #000000, bold. Create a Static Text field and write Your Title or whatever you want. Go to the frame 250 of the text layer, right- click and choose Insert Frame (F5).

Test Your Movie Test your movie and whaa laaa! A neat little slide show. Your Rubric is: – 5 points for craft – 5 points for content – 5 points for function.

Slide Show #2 Using the same techniques as described for slideshow #1, design an instructional slideshow. Show a process, steps, or a demonstration.