Flashy Web Applications with Flash CMPUT 410 Presentation

Maxine Chan Mythi Lam Ian Neufeld Rachel Wong Emily Yeung History

As a boy, loved to build LEGO. He used the LEGO design process to develop flash. The LEGO design process is as follows: 1) Choose a problem – Build a lego ship. 2) Develop a vision – What sort of ship? How big? What will it carry? 3) Build – Build the framework of the ship. 4) Fill in the Details – Design and build the details. Eg. Ramps, doors, etc. 5) Test – Sail the ship. 6) Refine – Take parts of the ship apart and improve them. 7) Learn – Take what was learned and build a better ship next time. As he grew up, he was interested in architecture but because of the lack of opportunities to build the houses he designed, he turned to programming. He found that with programming, one could design, build, and then see it work. He worked with fellow programmers to create FutureWave Software with a product called SmartSketch. SmartSketch was to be used on pen computing allowing users to write on the screen rather than use a keyboard. At the same time, he invested some money in a company called Go who was attempting to build its own operating system. While he was working on the SmartSketch software, AT&T bought out Go and stopped all funding and therefore it was not released on the market. With Go gone, the market for their software was taken away and resulted in failed sales. At this point, they felt that there was an open opportunity to take their software and make it run on Windows and Macintosh. In the summer of 1995, they started to hear about the Internet and how it may be popular enough for people to send graphics and animation over it. This is when they started adding animation to their SmartSketch. With the new features, SmartSketch was renamed to FutureSplash Animator and focused more on its animation capabilities when it was shipped in 1996. Success came when Microsoft was working on MSN and wanted to create a TV- like experience on the Internet. They had seen the FutureSplash Animator and liked it so they adopted the technology. Along with Microsoft, Disney Online also became interested in the software. In November of 1996, became interested in working with FutureSplash. This partnership led to FutureWave Software being sold to Macromedia in December of 1996 and FutureSplash Animator being renamed to Macromedia Flash 1.0.

Technical

Macromedia Flash publishers create Flash movies that run on a Flash player. The plug-in is free and almost every browser can load it. Flash movies can be run embedded on a web page or stand-alone. When creating flash movies, it uses a timeline analogy. The movies are a sequence of frames that can be played continuously or can remain stopped. The continuous frame is an animation but the stopped frames can be used for user interfaces. Running with the movie analogy, anything that appears on the stage is what appears on the display. When drawing with Flash, it’s very much like any other vector-based drawing program. It can draw polygons, bezier curves, and add text. Flash can draw borders and fills and raster images can be imported. There are also many different text types. Static text is used for labels, input text is used for user input and can then be associated with a variable, and dynamic text is used for displaying text dynamically at runtime. Symbols are the basic building blocks of a Flash movie. Images can be converted to symbols in order for behaviors, actions, and tweens to be applied. It also allows images to be reused in a movie or imported into other movies. Symbols reduce file size and updating symbols on one instance will update on all instances. Pre-existing symbol libraries are available with the program or purchased separately. There are three types of behaviors for symbols. Graphics are static images and only one frame in their timelines. They can be used with other symbols to create animations. Buttons are four frames in their timelines and define three button states and the hit area. They respond to events, therefore actions can be applied and provide interactivity for movies. Lastly, movie clips are the last behaviors. They are reusable pieces of and have independent timelines with no fixed length. They are compromised of graphic and button symbols. Tweens are the interpolation of frames “in between” user-specified key frames. It is used to create animations. Motion tweens move objects from one position to another along a customized path and shape tweens gradually transform one object into a second object. Lastly, tint tweens perform graduated colour transformations. ActionScript is the Flash scripting language. It is very similar to JavaScript both in syntax and functionality. It became object oriented as of version 3 and performs all the business logic for Flash. ActionScript can be attached to a frame, button or movie clip and handles events. It sets the object’s properties and controls whether to start, stop, and jump to specific frames. It can GET or POST to the server and get data from external files such as text, ASP, and PHP. It also has XML classes to evaluate XML files.

Pros

There are many pros about using Flash for web application development. From a developer’s point of view, there are many graphic capabilities to Flash. Such capabilities include Photoshop integration and the video and drawing tools, which are also available. Flash uses vector graphics and allows a developer to create animated images that are smaller than traditional image formats and allows users to zoom in and out of the image. If changes are made, it is easy to update websites without the use of AJAX or JavaScript. On a functionality side, Flash can connect to databases, servers, and semantical formats. When placing Flash on a website, it can either be layered on top or underneath HTML and other elements on a web page. When delivering Flash to end users, there are many pros as well. Flash player has the highest browser penetration compared to any other video format. About 96 percent of the Internet enabled PCs have a version of Flash installed. When using Flash, with the capability embedded in most browsers, the delivery method does not need to deal with different versions and types of media players that end users may have. Since Flash is embedded, it will present the same look and feel across many different platforms and browsers and helps programmers know exactly what a user sees. The use of Flash also improves how information is sent. Flash provides a high level of interactivity and can be used with interactive games such as Yahoo! Games and Nickelodeon. One of the major pros about using Flash is how good it deals with animation for demonstrations of products, giving virtual tours, or different stages of development in construction plans. The ability to incorporate video, audio, animations, and interactivity creates a unique user experience. Sounds and animation can be executed differently depending on the user interactions, which also contributes to a unique user experience.

Cons

Though there are many positives to using Flash, there are many negatives as well. For developers, acquiring the Flash authoring program is very expensive. As technology improves rapidly, purchasing expensive software multiple times as it upgrades is expensive for individuals. When integrating video with Flash, they first need to be converted to FLV format, which may be expensive in terms of time and finding software to convert the videos. Making simple adjustments to Flash moves can take more time than expected because the entire Flash application needs to be recompiled to test a single change. As Flash releases a new version, developers would need to upgrade all their presentations greatly for compatibility. When delivering the product to an end user, there can be many obstacles faced. Users have now started blocking Flash movies because they are overused in ads. This cuts the number of people who can view the Flash site that has taken a lot of time to create. Now with increased security concerns, many users disable ActiveX. ActiveX is a component that is used by Flash and when it is disabled, the Flash movie cannot be shown. Since Flash applications are considered movies and there are no text alternatives for it, screen readers cannot read a flash site. Since there are so many reasons why users may not be able to view a Flash application, during web page development, an HTML site should be developed as well. This means that to create one web page and want the maximum number of users, two versions need to be created. Flash applications can become very big depending on what is integrated into it, therefore the load time also affects user’s usability. If a user has a slow connection, loading a Flash page will take a very long time that most users would not want to wait for. Also, older versions of flash sites have usability constraints. When a user pushes the back button, the user will be taken off the Flash site instead of the previous screen on the Flash application. A user also has no control over text size and there are no indications to users about links that have been visited already. All these usability issues are common web standards that are not met. Another negative point about Flash applications is specific content cannot be book marked, therefore cannot be returned to later. One of the major negatives is that search engines have trouble indexing Flash applications. If a site is indicated to have less text, it will be marked less relevant and therefore, missed out by many searchers.

Flex

Flex is an alternative to using Macromedia Flash. Since Adobe bought Macromedia, all Flash products now belong to Adobe. Adobe developed an alternative to Flash called Adobe Flex. Flex is a software development product for rich Internet applications. These web applications are made to look and function like desktop applications. Flex creates the same SWF files as Flash does therefore has all the same pros and cons that flash applications have. Developers can incorporate streaming media, such as video and sound on its applications. It can also use ActionScript, a language that was previously Flash specific. Flex was created for application developers and programmers rather than web graphic designers. It moves away from the animation and timeline metaphor that Flash has originated. It uses an SDK and IDE that allows developers to compile ActionScript and MXML into Flash applications. MXML is Adobe’s XML-based markup language and is mainly for the user interface layout. There is no official meaning for this acronym. The ActionScript is used for the application logic that can include classes to execute all the business logic. Overall, Adobe Flex is comparable to ASP .NET, ColdFusion, Java, and PHP in terms of server-side technologies.

Rivals

There are many alternatives to creating SWF files. One such rival is AJAX. Some advantages to using AJAX is the availability of open standards instead of proprietary. It may also use any language to handle server-side operations. Applications may also load quickly due to DHTML files, which are usually smaller than SWF files. A disadvantage is that AJAX uses JavaScript, which different browsers handle differently. Applications may need to be rewritten multiple times to work cross-browser. Another disadvantages is that there may be very long delays between a user’s request for data and the server’s response. Lastly, AJAX does not handle streaming multimedia well. A second alternative is Microsoft Silverlight. Microsoft Silverlight is a cross browser plug-in for displaying rich Internet applications with any .NET language. An advantage to using Silverlight is that there is better search engine indexing as it represents its text via XAML (Extensible Application Markup Language). A second advantage is that it integrates easily with existing web technologies such as Apache and PHP. Silverlight also uses and supports all common multimedia files such as Windows Media Video (WMV), Widows Media Audo (WMA), and mp3. It also supports high definition and all standard video formats. Lastly, another advantage is that it can run on small mobile devices. Disadvantages to Silverlight are that it is proprietary of Microsoft and is new technology with small market penetration. Most users do not have the browser plug-in. It also uses the nonstandard XAML instead of the international standard of Scalable Vector Graphics (SVG). Like AJAX, Sliverlight uses JavaScript, which is translated differently by different browsers. A last rival is the Sun Microsystems JavaFX. It is a cross-platform desktop runtime environment for rich Internet applications created with JavaFX Script. An advantage to JavaFX is that it is open source and runs on any desktop with the Java Runtime Envrionment (JRE) installed. It can run on mobile devices, televisions, and Blu-ray disc players and more secure because of the Java platform. A disadvantage is that it runs on desktops and not web browsers. It uses CPU power and RAM so depending on the user’s computer, it may run slowly.