Adobe Flash KM © 2007 the University of Greenwich1 Introduction to Macromedia Flash Kevin McManus Adobe.

Slides:



Advertisements
Similar presentations
INTRODUCTION TO ADOBE FLASH CS4
Advertisements

1What is the Stage. 2How do you open a panel in Flash
Create slices and hotspots Create links in Web pages Create rollovers from slices Create basic animation Add tweening symbol instances to create animation.
Macromedia Dreamweaver 4 Advanced Level Course. Add Rollovers Rollovers or mouseovers are possibly the most popular effects used in designing Web pages.
Introduction to Macromedia Flash 8
1 Flash and Animation Presented by : Behzad Sajed Khosrowshahi.
Creating Animation Pertemuan Matakuliah: L0182 / Web & Animation Design Tahun: 2008.
© 2010 Delmar, Cengage Learning Chapter 4: Creating Animation.
© 2011 Delmar, Cengage Learning Chapter 8 Building Complex Animations.
Chapter 9 Introduction to ActionScript 3.0. Chapter 9 Lessons 1.Understand ActionScript Work with instances of movie clip symbols 3.Use code snippets.
Chapter 3 Working with Symbols and Interactivity.
Chapter 4 Dreamweaver: Part II The Web Warrior Guide to Web Design Technologies.
XP Tutorial 5 Buttons, Behaviors, and Sounds. XP New Perspectives on Macromedia Flash MX Buttons Interactive means that the user has some level.
© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 1 Macromedia Dreamweaver 4 Advanced Level Course.
BUILDING RICH MEDIA ELEMENTS. Design Decisions Based on Design Specification  Following the design specification will ensure that the application is.
Introduction to Flash FYS100 Creative Discovery in Digital Art Forms Spring 2007 Burg.
1 Flash Basics by Dr SC Li. 2 File Types  In general, Flash 5.0 generates 3 types of files:  ???.fla  Flash ’ s working file  ???.swf  Flash movie.
Flash MX II. Flash MX – Tweened Animation There are two methods for creating an animation sequence in Flash –Frame-by-frame animation –Tweened animation.
Lehigh University Introduction to Flash MX Sharmeen Mecklai.
Tutorial 5 Making a Document Interactive. XP Objectives Explore the different button states Add a button from the Button library Create a button Learn.
Tutorial 5 Making a Document Interactive. XP Objectives Explore the different button states Add a button from the Buttons library Edit a button instance.
Advanced Level Course. Site Extras Site Extras consist of four categories: Stationeries Site Trash Designs Components.
1 SEG3120 Analysis and Design for User Interfaces Flash Anis Zarrad Parallel Simulations and Distributed Systems (PARADISE) Research Laboratory SITE, University.
© 2011 Delmar, Cengage Learning Chapter 9 Introduction to ActionScript 3.0.
1-1 OBJ Copyright 2003, Paradigm Publishing Inc. Dr. Joseph Otto Silvia Castaneda Christopher deCastro CSULA Macromedia Flash MX Introduction.
© 2011 Delmar, Cengage Learning Chapter 3 Working with Symbols and Interactivity.
© 2012 Adobe Systems Incorporated. All Rights Reserved. Copyright 2012 Adobe Systems Incorporated. All rights reserved. ® INTRODUCTION TO FLASH ANIMATION.
Copyright © 2003 Pearson Education, Inc. Chapter 3, Slide 1 by Michael Kay The Web Wizard’s Guide to Flash.
® Copyright 2008 Adobe Systems Incorporated. All rights reserved. ® ® 1 INTRODUCTION TO ADOBE FLASH CS3.
® Copyright 2010 Adobe Systems Incorporated. All rights reserved. ® ® 1 INTRODUCTION TO ADOBE FLASH PROFESSIONAL CS5.
Working with Symbols and Interactivity
Chapter 10 Fireworks: Part II The Web Warrior Guide to Web Design Technologies.
© 2010 Delmar, Cengage Learning Chapter 3: Working with Symbols and Interactivity.
University of Sunderland CDM105 Session 6 Dreamweaver and Multimedia Fireworks MX 2004 Creating Menus and Button images.
CSC 361/661 Digital Media Spring 2010 Professor Burg.
XP Tutorial 4 Special Animations. XP New Perspectives on Macromedia Flash MX Special Layers for Animation Animation Using a Motion Guide Layer.
Tutorial 7 Planning and Creating a Flash Web Site.
Creating Buttons – Lesson 71 Creating Buttons Lesson 7.
Adobe Flash CS3 Revealed Chapter 3 - WORKING WITH SYMBOLS AND INTERACTIVITY.
Flash! Macromedia Flash is the key to designing and delivering low-bandwidth animations, presentations, and Web sites. It offers scripting capabilities.
Flash Flash. It’s components and usage. New generation of web- design  Definition Multimedia technology developed by Macromedia to allow much interactivity.
Chapter 16 Video. Importing Video Into Flash  Once you import video into Flash, you can control it using behaviors and very basic ActionScript, target.
2006 Adobe Systems Incorporated. All Rights Reserved. 1 INTRODUCTION TO ADOBE FLASH CS3.
Motion Tweening – Lesson 81 Motion Tweening Lesson 8.
Introduction to Flash Animation CS 318. Topics Introduction to Flash and animation The Flash development environment Creating Flash animations  Layers.
5-1 OBJ Copyright 2003, Paradigm Publishing Inc. Adding Sound, Video, and Basic Interactivity with Buttons Macromedia Flash Design & Application.
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.
Reading Flash. Training target: Read the following reading materials and use the reading skills mentioned in the passages above. You may also choose some.
1 Flash Basics by Dr SC Li. 2 Ordinary Movie vs. Flash Movie AnimationVector GraphicsInteractivity MPEG MovieFlash Movie.
XP Tutorial 7 Creating a Flash Web Site. XP New Perspectives on Macromedia Flash 82 Objectives Plan and create a Flash Web site Create a Flash template.
1 A Basic Introduction to Flash. Outline What is a flash? Macromedia Flash MX 2004 Flash concepts Flash Demos Conclusion Additional help 2.
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.
Chapter 11 Adding Media and Interactivity. Chapter 11 Lessons Introduction 1.Add and modify Flash objects 2.Add rollover images 3.Add behaviors 4.Add.
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.
XP Tutorial 3 Creating Animations. XP New Perspectives on Macromedia Flash MX Elements of Animation Layers are used to organize the content of.
Integrating Components and Dynamic Text Boxes with the Animated Map– Lesson 101 Integrating Components and Dynamic Text Boxes with the Animated Map Lesson.
CDM105 Session 12 Macromedia FLASH MX 2004 Part 5 : Sounds, publishing your movies, and the ‘Get URL’ action.
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 >
Creating a Flash Web Site
Flash Interface, Commands and Functions
INTRODUCTION TO ADOBE FLASH CS4
Animate Some more advanced concepts
Chapter Lessons Create shape-tweened animations Create a mask effect
INTRODUCTION TO FLASH ANIMATION
Working with Symbols and Interactivity
Develop Rich Internet Content and Applications
Flash Concepts and Demos - Overview
Presentation transcript:

Adobe Flash KM © 2007 the University of Greenwich1 Introduction to Macromedia Flash Kevin McManus Adobe

Adobe Flash KM © 2007 the University of Greenwich2 We are going to look at What is Flash an IDE to create shockwave media Animation timelines, symbols, tweening Programming with ActionScript Sound Publishing on the Web Morphing Fonts Forms

Adobe Flash KM © 2007 the University of Greenwich3 Shockwave Binary file format for Flash web pages small download sizes open standard requires a browser to have a shockwave plug-in only from macromedia currently at version 8 in Adobe Flash CS3 Supports all features found in DHTML plus so much more extensive animation support vector and bitmap graphics guaranteed pixel perfect on all browsers providing they have a shockwave plug-in no more browser compatibility issues

Adobe Flash KM © 2007 the University of Greenwich4 Shockwave Created using the Flash environment sophisticated IDE work with.fla files and compile to.swf files to publish graphics + animation toolkit part of Adobe Creative Suite 3 Dreamweaver, Contribute, Fireworks, Illustrator, PhotoShop not ColdFusion Other shockwave tools Swish and many others Sophisticated applications ActionScript programming in the client Flash remoting to access server side scripts XML and web service interfaces

Adobe Flash KM © 2007 the University of Greenwich5 Animation Cell based (frame) animation key frames motion tweening shape tweening - morphing Path based (vector) animation follows an object’s transition over a vector Combination of cell and path based animation Computational animation object moves by calculating its x and y coordinates Program or script based animation ActionScript - Flash’s scripting language ECMA script flexible, powerful, interactive not as powerful as Lingo - Director’s scripting language

Adobe Flash KM © 2007 the University of Greenwich6 Flash Animation IDE with the ability to support Scripted behaviors ActionScript User interaction events forms Key Frames timeline Tweening motion shape Layers Symbols, buttons and movie clips

Adobe Flash KM © 2007 the University of Greenwich7 Flash IDE with lots of training support in built A set of lessons implemented as interactive Flash movies complete with template files Getting started with Flash Illustrating in Flash Adding and editing text Creating and editing symbols Understanding layers Creating tweened animation Creating buttons Comprehensive set of HTML tutorials Conventional HTML help system It is a good idea to complete the lessons before attempting to do anything with Flash

Adobe Flash KM © 2007 the University of Greenwich8 Symbols Each symbol has a unique timeline and stage, complete with layers When you create a symbol you choose the symbol type, depending on how you want to use the symbol in the movie graphic symbols button symbols movie clip symbols Use graphic symbols for static images to create reusable pieces of animation that are tied to the timeline of the main movie graphic symbols operate in sync with the movie's timeline Interactive controls and sounds won't work in a graphic symbol's animation sequence

Adobe Flash KM © 2007 the University of Greenwich9 Symbols Use button symbols to create interactive buttons in the movie that respond to events onRollOver, onPress, onRelease, etc Define the graphics associated with various button states assign actions to a button instance. Use movie clips symbols to create reusable pieces of animation. Movie clips have their own multi-frame timeline that plays independent of the main movie's timeline movies inside movies can contain interactive controls, sounds even other movie clip instances. Place movie clip instances inside the timeline of a button symbol to create animated buttons.

Adobe Flash KM © 2007 the University of Greenwich10 Bouncing Ball Exercise to animate a bouncing ball Make the ball Turn it into a symbol Create a motion tween Modifying the tween Guide lines Easing Buttons

Adobe Flash KM © 2007 the University of Greenwich11 Make the Ball Draw with the oval tool Fill with a texture to give a “3D” effect Save it as a symbol in the library why? can’t use it until it is in the library motion tweens work with symbols Before a shape is a symbol in the library it is a graphic on the stage consisting of strokes and fills

Adobe Flash KM © 2007 the University of Greenwich12 Keyframes The symbol exists in a keyframe (1) in a layer on the timeline insert another keyframe in the layer right click in a blank frame (30) set a motion tween between them right click between the two key frames In the new key frame move the symbol to a different position Flash interpolates move the play head to see the effect

Adobe Flash KM © 2007 the University of Greenwich13 Motion Tween You can animate by creating intermediate keyframes that modify the ball’s path

Adobe Flash KM © 2007 the University of Greenwich14 Motion Tween But this is clumsy the interpolation is not effective Add guide lines using a guide layer to effectively control motion force the symbol to follow a path

Adobe Flash KM © 2007 the University of Greenwich15 Guide Layer They’re still jagged -let’s smooth them and curve them

Adobe Flash KM © 2007 the University of Greenwich16 Guide Layer

Adobe Flash KM © 2007 the University of Greenwich17 Easing Easing is a way of controlling the frame rate to… accelerate into a scene decelerate out of a scene note orient to path

Adobe Flash KM © 2007 the University of Greenwich18 Buttons There is an internal timeline (state-line) associated with each button When the user interacts with the button (a mouse event) the button references its internal timeline and performs the action set for it There are four button states: Up (first frame) dormant no interaction with mouse Over (second frame) rollover by mouse Down (third frame) mouse button down and over button Hit (fourth frame) not seen by user, defines the area that responds to the mouse

Adobe Flash KM © 2007 the University of Greenwich19 Buttons Insert another layer and create a button symbol Double click the symbol to see it’s timeline Up must have some content visual element for user interaction

Adobe Flash Buttons Over and Down a keyframe must be inserted (or copied from the Up state) behaviours can then be associated using ActionScript appearance of the button should be modified to show the state change test the movie to see the button behaviour

Adobe Flash KM © 2007 the University of Greenwich21 Buttons Hit inserting a blank keyframe here stops the button working defining the hit area is then necessary, this supercedes previous hit area definitions why do this? If you are using text as a button only the stroke of each character is considered a hit area. A hit area allows all of the box space of the text to respond to the mouse.

Adobe Flash KM © 2007 the University of Greenwich22 ActionScript ActionScript provides elements, such as actions, operators, and objects, that you combine with scripts that tell your movie what to do events, such as mouse overs, button clicks and key presses trigger these scripts. e.g. use ActionScript to create navigation buttons for your movie You can write simple scripts without a full understanding of ActionScript. to begin working with ActionScript use the built-in tutorial resource Help > Tutorials > Introduction to ActionScript.

Adobe Flash KM © 2007 the University of Greenwich23 ActionScript In Flash, you use the Actions panel to write ActionScript. Attach scripts to buttons, movie clips or frames to create the required interactivity In normal editing mode the Actions panel helps you to build scripts by choosing options from menus and lists. In expert editing mode you enter text directly into the Script pane. In both modes code hints help you complete actions and insert properties and events.

Adobe Flash ActionScript Add ActionScript to stop the movie in the last frame expert view select the last frame add script

Adobe Flash ActionScript Add ActionScript to handle events for buttons or find the button in this menu add script to replay the movie select the button

Adobe Flash KM © 2007 the University of Greenwich26 Sound Flash offers a number of ways to handle sounds. Make sounds that play continuously independent of the timeline (sound has it’s own timeline) Synchronize animation to a sound track Add sounds to buttons to make them more interactive make sounds fade in and out for a more polished sound track.

Adobe Flash KM © 2007 the University of Greenwich27 Sound There are two types of sounds in Flash: event sounds an event sound must download completely before it begins playing, and it continues playing until explicitly stopped. stream sounds. stream sounds begin playing as soon as enough data for the first few frames has been downloaded stream sounds can be synchronized to the timeline for playing on a web site.

Adobe Flash KM © 2007 the University of Greenwich28 Sound Use Adobe Soundbooth to create audio files or a wave editor such as GoldWave or CoolEdit Import the sound into a movie File > Import to Library… Select compression options for individual sounds using the Sound Properties dialog box define settings for all sounds in the movie in the Publish Settings dialog box. Use sounds in shared libraries, to link a sound from one library to multiple movies. Use the ActionScript onSoundComplete event to trigger an event based on the completion of a sound.

Adobe Flash KM © 2007 the University of Greenwich29 Sound Create a layer to carry the sound insert keyframes into the sound layer drag sounds from the library onto the stage

Adobe Flash KM © 2007 the University of Greenwich30 Publishing Movies are usually published as shockwave files embedded into HTML pages File > Publish Settings… Can also publish in other formats - GIF, QuickTime, etc.

Adobe Flash KM © 2007 the University of Greenwich31 HTML Embedding Arrow Flash creates an HTML template using nested inside for browser compatibility

Adobe Flash KM © 2007 the University of Greenwich32 XHTML Strict Strictly speaking there is no element in XHTML Could simply not include the element in the web page containing the shockwave but then some browsers may not work A workaround is to nest two elements use CSS to hide one of the objects exploit some IE CSS quirks see the XHTML 1.1 example in the teaching material

Adobe Flash KM © 2007 the University of Greenwich33 Shape Tweening Flash can transform one shape into another over a sequence of frames shape tweening (morphing) Insert two keyframes into the timeline Insert graphics into the keyframes Click on the timeline between the two keyframes and select Shape from the Tweening menu in the properties panel the frames are coloured pale green with an arrow between them Use the onion skin control to see the intermediate stages Add shape hints to control the tweening Modify > Shape > Add Shape Hints

Adobe Flash Shape Tweening onion skin control shape hints

Adobe Flash KM © 2007 the University of Greenwich35 Fonts Flash provides an extensive font library Insert some text onto the stage using the Text tool from the toolbox Modify it’s properties size, colour, font, style, justification, kerning Text is created in symbolic form Break the text apart (Modify) to decompose strings into characters decompose characters into stroke and fill graphics allow shape tweening

Adobe Flash Fonts

Adobe Flash KM © 2007 the University of Greenwich37 Forms Use text fields as input devices select type Input Text from the properties give the text fields a name Other input devices can be found in the Components window checkboxes, menus, etc set their Properties Create Button symbols Add ActionScript to submit the form

Adobe Flash KM © 2007 the University of Greenwich38 Forms add code to the button more GUI components

Adobe Flash KM © 2007 the University of Greenwich39 Forms on (release) { // Prepare the data transfer object. var sender = new LoadVars(); // Custom form-submission function. function submitForm () { if (validateForm()) { // Assemble text field values into our LoadVars object. sender.user = name_txt.text; sender.pass = passwd_txt.text; // Hidden field sender.foo = "bar"; // Transfer the data to the server-side script. sender.send(" this, "GET"); } else { //respond to user } function validateForm() { // test input data return true; } submitForm(); } get the text from the text boxes send data to a URL

Adobe Flash KM © 2007 the University of Greenwich40 We have not looked at... Sophisticated ActionScript Remoting AJAX like applications see teaching material for example XML and web services Video Flex

Adobe Flash KM © 2007 the University of Greenwich41 Why not to Flash Flash is evil Clearly there are accessibility issues associated with Flash but does that make Flash intrinsically evil? Macromedia says Flash is "the solution for producing and delivering high-impact web sites." It's also a solution for making your site highly annoying and downright unusable. dack.com

Adobe Flash KM © 2007 the University of Greenwich42 Conclusions Pixel perfect applications no browser compatibility problems An IDE that really helps no more mucking around with markup Fast downloads compressed binary instead of flatulent markup Fast response easy partial page updates Not cheap but hardly expensive