2D Design and Animation Introduction to Flash

1. 2D Design and Animation Introduction to Flash

2. WHAT IS FLASH ?

3. Flash is a multimedia platform. • is used to create advertisements and games. • is a tool for RIA’s (Rich Internet Applications) • can add animation, video and interactivity to web pages.

4. It can manipulate vector and raster graphics for animation. • It supports bidirectional streaming of both audio and video

5. It can capture user input via mouse, keyboard, microphone, and camera. • It contains Object-Oriented Programming Language called ActionScript • It can also create mobile applications using Flash Lite • It can create amazing presentations far better than powerpoint.

6. HISTORY OF FLASH

7. It was originally developed by Macromedia • Introduced in 1996 • Successor of Future Splash (1995) • From Smartsketch > Future Splash > Macromedia Flash > Adobe Flash

8. VERSIONS OF FLASH

9. Future Splash Animator (1996) • Macromedia (1-5) (1996-2000) • Flash MX (2002) • Flash MX 2004 (2003) • Macromedia Flash 8 (2005) • Adobe Flash CS3 (2007) • Adobe Flash CS4 (2008) • Adobe Flash CS5 (2010) • Adobe Flash CS5.5 (2011) • Adobe Flash CS6 (2012) • Adobe Flash CC (2013)

10. STARTING FLASH

11. The first time you start flash, you will see a Welcome screen. • Choose -> Start -> All Programs -> Adobe CS6 Flash. • Choose File> Open. It will open n open dialog box.

12. WELCOME SCREEN

13. CHOOSING ACTIONSCRIPT 3.0 • Choose File > New. The new document dialog box opens. • Under general tab, choose ActionScript 3.0

14. LIBRARY PANEL • Stores symbols as well as assets; images, sounds, and video files that you’ve imported or created inside your Flash document. • Manages library’s contents. • Lets you view, sort, edit, and return information on symbols. • a. Importing an Item to the Library Panel • b. Adding an item from Library Panel to the Stage

15. Drawing Environment • Flash features a complete set of drawing tools to handle intricate illustration and typography. • Flash is a native vector drawing application where you can create rich, detailed, and scalable digital illustrations.

16. Flash now supports Illustrator and Photoshop files in their native file formats, .ai and .psd, making it easy to work with your favorite applications. • All the content you create in Flash or these other programs can be brought to life through animation and interactivity.

17. Animation • Flash creates lightweight animation that incorporates images, sound, and video, and can be quickly downloaded through the web.

18. Animation • Flash animation is featured on web sites, CD-ROMs, and interactive games, and has become very popular for developing interactive, web-based advertisements.

19. Animation • Flash’s compact files make it the ideal application for creating animated content, games, and applications for mobile phones and PDAs.

20. Animation • Flash supports traditional frame-by-frame animation as well as its own method of animation, known as tweening.

21. Animation • With tweening, you specify an object to animate, create starting and ending frames, and Flash automatically creates the frames in between (hence tween) to create slick motion, color, and transformation effects.

23. Layout • The Flash Stage gives you the flexibility to create extraordinary web site layouts without the design restrictions that are typical of HTML-based web pages. • You can position content anywhere on the Flash Stage with flexibility and precision, taking your layouts far beyond the limitations of static web pages.

24. Flash Player VS. Adobe Flash • The Flash Player is a standalone application found most often as a plug-in to such popular browsers as Internet Explorer, Safari, and Firefox. • While Adobe Flash is the authoring multimedia platform itself that publishes SWF files to be played on the browser by the Adobe Flash Player.

25. Flash File Types • .fla (can only be opened within Adobe Flash) • .swf (compressed movie file published within Adobe Flash can be played by the Adobe Flash Player)

26. Starting Flash and Opening a File • Start > All Programs > Adobe Flash CS6 • Choose File > Open > Select File • Option to File>Publish Preview > HTML • ( it creates an HTML or an SWF file to display)

27. Creating a New Document • File > New • New Document dialog box opens. • Choose ActionScript 3.0, the latest version of Flash’s Scripting language. It creates a new document configured for playback in a desktop browser such as Chrome, Safari, or Firefox with flash player.

28. Creating a New Document • Right-hand side dialog box • This is the selection of the dimensions of the stage by entering pixel values for the width and height. • FOR STARTER: Enter 800 for width and 600 for height. Ruler units as PIXELS. Keep the rest of the values in default. • File > Save Filename: SURNAME_Exercise01_X22

29. FLASH CS6 WORKSPACE This is the default display.

30. CHOOSING A NEW WORKSPACE Try predefined workspaces. The various panels are rearranged and resized according to their importance to the particular user. RESETTING WORKSPACE (Window>Workspace>Reset) Reminder: We will be using Essentials Workspace

31. Saving your own workspace You can create your own workspace to work on.

32. The Stage The big white rectangle in the middle of the screen is called the stage. Rulers ( View > Rulers) Grid ( View > Grid > Show Grid)

33. MORE ON STAGE Scale the Stage Changing the Stage properties

34. DEMO

35. End of Module 1