Multimedia Application Development using Flash

1. Multimedia Application Development using Flash E-mail: kkthyagharajan@yahoo.com kkthyagharajan@gmail.com Web Site: www.tansitresearch.com Dr. K.K. THYAGHARAJAN Principal R.M.K. College of Engineering and Technology Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

2. Multimedia Application Development using Flash requires many technical skills and Domain Knowledge: • Technical Skills: • Graphic design, layout and visualization skills • Object-oriented programming and event programming skills to add Components (buttons), animations, audio, video and special effects to your application • Basic concepts of Internet Programming, Data base concepts and Web Services. Domain Knowledge: • Web Design • Streaming Technology and Networking. • Basic concepts of AI and game programming. • Basic concepts of mobile devices. • Basic concepts of e-learning Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

3. Flash • Flash is a Multimedia authoring (content creation) tool. • Even though the term “Flash” is used to generally refer the IDE, it also includes the Flash player. • The Flash authoring (source) file has the extension .fla, it may not be run in a Flash player. • The .fla file can be published in the Flash IDE to provide .swf file. Only, this .swf can be run in the Flash player. • Flash Player is a virtual machine used to parse and run a flash file. Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

4. Flash • Flash produces platform independent Rich media. • Nowadays, Flash is a complete multimedia development environment used to create everything from simple Web graphics to rich mobile device applications. • Flash animations are smaller in size and faster compared to GIF animations. Therefore more suitable for web sites. (Web Graphics) • The graphics designing capabilities, close integration between designing and programming (Action Script) and capability for handling rich media has made Flash more suitable platform for Multimedia application development. • Recent innovations in Flash have enabled it to work as a client for business applications and Web Services. Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

5. Flash • Nowadays it also includes an XML parser, which makes easy to use XML objects inside a Flash application using Action Script programming. • The use of XML allows to load multimedia content dynamically into Flash document. • XML for image and video retrieval Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

6. Flash Application Areas Flash is not only used for creating Interactive Web animations but also used in (i) Interactive Web site design with Animation (ii) Computer generated cartoon movies (iii) Internet game programming (iv) Internet TV and Radio (Multimedia Streaming) (v) Internet applications with data base management (vi) Web-based education (Learning Management Systems) (vii) Mobile games and applications (Flash Lite) Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

7. History of Flash • Flash began its life as Smart Sketch an Illustration Program created by Jonathan Gay of Future Wave company in 1995. • Future Splash – April 1996 • Flash 1 - Macromedia – Dec 1996 • Flash 2 – Sound was added - June 1997 • Flash 3 - FsCommands - May 1998 • Flash 4 – ActionScript – Interactive presentations – June 1999 • Flash 5 – ActionScript 1.0 – Smart clips, HTML text formatting, XML - Aug 2000 • Flash 6 – V1 UI components , Sorenson Spark video codec, Unicode, vector drawing API – March 2002 Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

8. History of Flash • Flash MX 2004 – ActionScript 2.0 – OOP – behaviors – JSAPI – Timeline effects - Sept 2003 • Flash MX 2004 (Professional) – V2 UI components - Video Import Wizard – Media playback, Data Set components - XML and Web Service connector components - Screens – - Sept 2003. • Flash 8 (Basic) – Basic drawing, animation and Interactivity - bitmap effects, filters - Sept. 2005 • Macromedia Flash 8 (Professional) – Object based drawing mode - caps and joins – runtime bitmap caching - On2 VP6 - alpha video – cue point for flv - Anti aliasing for text - file upload and download - security, mobile authoring - Sept. 2005 • Dec 3, 2005 Adobe acquired Macromedia. Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

9. History of Flash • Adobe Flash 9 Public Alpha was released in 2006, and was a preview of Action Script 3.0. • Flash Player 9 for Linux was released in January 2007 • Adobe Flash CS3 was released in 2007 and provides better integration with other Adobe products. Action Script 3.0 – Improved XML handling with new XML engine – Optimized virtual machine AVM2 – document class, interfaces, packages, name spaces added – importing native Photoshop files • After some nine releases and three companies, it lives on as core Web design and development and Mobile application development tool under the Adobe brand. • The mobile application developed in Flash IDE can be tested using the emulator in the IDE. • The output file (SWF) can be directly stored in a Flash enabled mobile phone. • Flash enabled mobile phones have Flash Lite player preinstalled in it. Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

10. Flash MX 2004 Environment Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

11. Timeline Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

12. Toolbox Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

13. Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

14. Stroke and Fill Parts of Rectangular Shape Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

15. Stroke and Fill Parts of Different Shapes Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

16. Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

17. Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

18. END OF PART 1 Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

19. Web Graphics • Drawing or pictures created so that they are suitable for transmitting through the Web are known as Web graphics. • It is split into two categories: Vector graphics & Raster graphics. • Vector graphics uses geometric shapes such as line, Square, circle, polygon and Text to create more complex objects i.e. it uses geometric modeling. • Vector-based graphic use mathematical descriptions to store information (geometric shapes). • A circle is represented by its equation, radius, center, stroke color and thickness, fill color – These are device independent units. • The file size in Vector graphics is independent of object’s size. • Since the circle is treated as object, and the radius , color etc., are treated as properties of circle, Vector graphics can be considered as object-oriented graphics. Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

20. Vector Graphics • Smaller file size and hence lower bandwidth requirement. • Scaling, rotating, moving and filling does not degrade the quality of the graphics. • In the early days of computing vector graphics display systems were used. In these systems the electron beam of the CRT display monitor directly draw the shape on the screen – called as X-Y displays, Analog monitors and requires special graphics processors. • Tools: Adobe Flash, Adobe Illustrator. Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

21. Flash Graphics • Flash is a vector-based tool, by default it produces .swf file. The .swf is a vector graphics file. • Vector drawing tools: Line, Pen, Rectangle, Oval, Text and options for setting fills and strokes – geometric objects. • All modern digital monitors display only the pixel information stored in the display RAM. • Vector graphics must be translated to raster graphics pixel information and stored in the display RAM. • Flash can also export its content in raster graphics format (GIF, jpg, audio, video formats). Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

22. Images / Raster Graphics • Image is represented by a rectangular grid of pixels. • The color of each pixel is defined by RGB values – 24 bits (pixel depth) Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

23. The three different colored phosphors are placed in groups very close to each other Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

24. Image Fundamentals • The quality of the raster image depends on the total number of pixels used to represent it i.e. its resolution and the number of bits used to represent each pixel i.e. color depth. • Some times more number of bits are used to represent green color component because human eyes have greater discrimination to this color. • Data compression techniques are used to reduce the file size of an image stored on disk • Scaling to higher resolution reduces the quality of the image. • More suitable for photographic and photo-realistic images. • Raster graphics tools: Paint brush, paint bucket and eraser. • Tools: Adobe Photoshop, Corel Paint Shop Pro. Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

25. RGB Color Mixing • A system that combines Red, Green and Blue to produce another color is called an additive color system. • RGB are called the primary colors. Because, they may not be created by mixing other colors in the color space. • Primary colors can be mixed to produce secondary colors. • Mixing of red and green light, produce shades of yellow or orange. • Mixing green and blue produces shades of cyan. • Mixing red and blue produces shades of purple and magenta. • Mixing equal proportions of the additive primaries results in shades of grey. • When all three colors are fully saturated, the result is white. • 24-bit true color uses 8 bits to represent R, G and B – 16.7 million colors, 32-bit color uses 8 bits to represent R, G and B and 8 bits for alpha channel. Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

26. Additive Color Mixing Alpha = 0 – fully transparent = 100% – fully opaque Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

27. Color Cube Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

28. CMY Color Space Complementary color has an equal amount of the primaries on either side of it and none of the primary opposite to it: Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

29. Hue, Saturation and Value (HSV) Color Model (OR)Hue, Saturation and Brightness (HSB) Color Model • Hue : Color type (Red, blue etc.) - 0 to 360 degrees • Saturation : Vibrancy of the color - 0 to 100 % (lightness) 100 % indicates that the color is pure or saturated low value indicates that more grayness is added. • Value : Brightness of the color - 0 to 100. Determines the level of whiteness Hue is invariant to the changes in illumination and camera direction. Hence more suited to image retrieval Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

30. Maximum whiteness / brightness (0,0,100) H=0 any color (Pure/ RGB) (0,100,100) (0,0,0) Maximum blackness H,S,B Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

31. H=00 H=3590 B=100%, 0,0 H=00 ,100,100 (0,0,0) H A color can be chosen by first picking the hue from the circular region, then selecting the desired saturation and value from the triangular region. Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

32. Texture Synthesis Input Result Textures • Texture is a ubiquitous visual experience. It can describe a wide variety of surface characteristics such as terrain, plants, minerals, fur and skin. • Textures are commonly employed when rendering synthetic images • Images containing repeating patterns • Image Pyramid • A collection of images of reduced resolutions of the original 1:1 image – 1:2n • Local & stationary • Texture Synthesis - Construction of large regions of texture from small example images. Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

33. Applications of Textures • Make things `look’ real • Image Processing - • Texture segmentation, recognition and Classification– Used in Computer Vision http://graphics.stanford.edu/projects/texture/ Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

34. Image and Texture Creation Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

35. Rainbow • Star • Lotus and Registration point • FF,0,60H • Line Style • Fill Transform tool : Scale, Rotate • Change Centre Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

36. Brush shape modifier 101. • Drawing a triangle. 125 • Align Panel. • Text menu. • Align Panel. • Break apart text and apply gradient color. • Filling Bitmaps and using Lock fill modifier. • Text Mask • Text along curved path. 154 • Shadow effect. 159 Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

37. Drop Shadow: Use Two layers, skew the text, change distance and color in one layer Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

38. Text Mask Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

39. Using Bitmaps Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

40. END OF PART 2 Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

41. Animation • Persistence of Vision • Rapid display of sequence of images to create the illusion of motion • Winsor McCay invented the animation cel in 1915. • Instead of drawing on a single sheet of paper, and then redrawing the entire scene for every frame (12 for every second), the scene was drawn in parts, on a thin, transparent celluloid acetate or "cel". • For example, the background would be drawn on the first layer, then the body of a character would be drawn on the next layer, then the head on the next layer and the expression on the next layer. This made it easy to change an expression without having to redraw everything. Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

42. Flip book Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

43. Frame-by-frame animation :objects for each frame are created and the frames are displayed at a particular speed – larger file size. E.g. Skeleton dance • Tweened Animation :Objects are created for the first and last frames and Flash automatically interpolates the intermediate frames – smaller file size. • Layers – e.g. Rising sun – mountain in one layer sun animation in another layer. • Motion Tweening:Motion tweening is used to create the movement of an object in a straight line path or in a free path drawn by pencil tool. • e.g. rotation, color, size, mask layer, registration point (pendulum), text animation, image slide show, timeline effect. • Shape tweening:May not be applied to symbols, groups, text and bitmaps. • e.g. rotation, color, size, shape hints (square to A). Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

44. Flash Animation • Animation is a sequence of images or graphics placed in successive frames. • Frame cell, Frame number, Frame Label, Current Frame marker, Frame view button (large), Status bar. • Key frame, Blank key frame. • Frame Rate. • Onion Skin is used to see multiple frames Simultaneously. Only the objects in the current frame are bright. • Movie Clip – sub movie that can run independently from the main movie. • Library panel. • Buttons – four states (animated buttons). Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

45. Motion Tweening • Wipes, fades, zooms, and dissolves • Insert timeline effects. • Motion Tweening (Moving Circle, flying text, image) • Rotating Star, Two wheels rotating in two different speeds • Color Tweening (circle, text). • Color Tweening with transformation. • Tweening with Zooming (object, text, image) • Tweening with Rotation, Alpha (object, text, image) • Multiple Tweening (bouncing ball, image slide show) • Multiple Layer Motion Tweening (Rising Sun) • Diagonal motion, Motion in X and Y direction • Motion Tweening with guide path (earth in Solar system) Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

46. Motion Tweening • Motion Tweening with Mask layer. (Torch Light effect, masking text, image through circle, masking image through text). • Text Advertisement from bottom to top. (with masking). • Jumping Letters. • Changing Registration point (Pendulum, elastic text, door open) • Adding sound to animation. Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

47. Complex Animations • Complete Solar System • Nested Movie clips (car, face) • Rotating Ring. • Analog Minute clock. • Skeleton Dance • Cube Animation • Shape Tweening with Transformation (Blend properties: Distributive : smooth out edges in a tween, Angular: straight edges) • Shape hints (coin, Square to A) • 3D Rotating Ring Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

48. Creating Buttons and Interactive Animations • Buttons States • Click Effect • Placing text, symbols (> < O) , pictures in the button • Controlling animation (Play, Stop, _currentframe) • Analog stop clock (start, stop, reset). • Navigating Flash Presentations using buttons. • Open the Publish Settings (File > Publish Settings) and click the HTML tab. In the Template menu, choose Flash with Named Anchors. This template inserts a JavaScript function into the HTML document that catches the named anchors (Frame labels inserted in the main time line) as they play in the browser. • Changing Movie clip properties using buttons (_x, _y, _width, _height, _rotation). • gotoAndPlay("newFrame"); • gotoAndPlay("sceneTwo", 1); • gotoAndStop(5); • _level0.nextFrame(); Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

49. ANIMATED GIF & FLASH ANIMATION • An animated GIF is actually many images saved in one file. • When the animated GIF is loaded onto a webpage, the browser simply loops the images. This means, if you make an animation of a clown that moves his hand up and down in 25 small movements, then the animated area of the image is saved 25 times. • Animated GIFs do not support interactivity. They simply loop images in a predefined order. • In Flash, you can control the animations. For example, you can make the animation stop and wait for the user to click a button. And when the animation starts again it can be dependant on which button was clicked. Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology

50. Animated GIF & …Contd … • A final obvious difference is that GIF images are limited to a 256 color palette. • So compared to animated GIFs, the advantages of Flash are that: • Flash movies load much faster. • Flash movies allow interactivity. • Flash movies can use more than 256 colors. Dr. K.K.Thyagharajan, R.M.K. College of Engineering and Technology