591 Pro Android Flash ebook Free download


5 months ago
Full text

CHAPTER 9: Super Jumper: A 2D OpenGL ES Game 488 For your convenience Apress has placed some of the front

  For Those New to Android The Flash and Fle× platform takes advantage of all the great features of Android, while insulating the programmer from having to deal with the complexities of the Android APIs and programmingmodel. We will show youhow to leverage the powerful and mature technologies, frameworks, and tooling that make up the Flash Platform to build highly customized applications that take fulladvantage of all the mobile features that users demand from their devices.

2 Top 3

  Mobile OS traffic share in the United StatesThis could be due to many different factors, including the fact that the platform is open source, which attracts device manufacturers, the relative freedom provided by AndroidMarket, Google’s in-device application storefront, or the Google experience, which provides a seamless integration of Gmail, Google Maps, Gtalk, YouTube, and GoogleSearch for end users. Some of the currentfeatures of the Android platform include the following: Mobile browser: WebKit, a modern framework that supports all of the HTML5 proposed extensions and powers Android’s built-in browser Flash player: Starting with Android 2.2, you can run Flash content from within a web browser as a standard feature.

3 Reproduced from work created and shared by the Android Open Source Project and

  used according to terms described in the Creative Commons 2.5 Attribution License:Google, “What is Android?”, http://developer.android.com/guide/basics/what-is- android.html, 2011 5 Bluetooth, Wi-Fi, and USB: All Android devices come with Bluetooth and Wi-Fi for connectivity and a standard USB port for data transfer and debugging. Both of these options are available on desktop and mobile, and give you a lot of flexibility in tailoring yourapplication deployment to the needs of your end users.

4 Source: Adobe, “Benefits of rich internet applications”

6 Adobe AIR

  At the time ofwriting, there are 84 million smartphones and tablets that can run Adobe AIR applications, and Adobe expects more than 200 million smartphones and tablets tosupport Adobe AIR applications by the end of 2011. This extends to the Adobe design tools, such as InDesign,Photoshop, Illustrator, and Fireworks, which can be used to develop content for your application that will plug directly into your Flash and Flex applications.

8 Adobe Flash Professional

  The mobile workflow for Catalyst is to create or modify an FXP file that contains your components and assets, and then open it in Flash Builder to add businesslogic and run it on a mobile platform. All of these applications are available with free trials; however, if you want to develop with a pure open source stack, you can do Flex and ActionScript development rightfrom the command line using the Flex SDK.

10 Running Applications from Flash Professional

  A graphic clip layer: In order to make the text appear from behind the graphics as it scrolls in and disappear as it scrolls out, we added anadditional layer with a solid background and a section cut out where the text should be visible. In creating this example, you will get a full tour of the mobile capabilities of Flash Builder, including how to create a new Flex mobile project,debugging your application with the Flash Builder debugger, and running on a device via USB deployment.

16 To start with, the Flex template gives you the following project structure (files marked

  For this we are going to use some of the basic layout and UI classes of Flex,including the following: H/VGroup: The HGroup and VGroup classes let you arrange a set of components in a simple vertical or horizontal stacked layout. Using these layouts and controls, we can put together a simple user interface that displays the status of whether a particular multitouch gesture is enabled on the deviceand whether the user has successfully tested the gesture.

18 To start with, we will run the application using the AIR Debug Launcher (ADL) on the

  It sets the state of the enabled CheckBox to true and adds an event listener that will set the state of the tested CheckBox to true when that gesture is used in the application. When you select a frame in the Debug panel, it shows the state of the execution context in the top-right Variable pane, as well as the associated source code in the center panel.

24 To run your application on a physical device, you will need to make sure that it is set up

  To switch to running onthe device, go to Run Run Configurations…, and referring back to Figure 1–8, you can choose the option for launching on the device. Finished Gesture Check application running on an Android mobile device In case you are having trouble getting your Android phone to connect with your computer, here are some troubleshooting steps you can follow:Make sure that your device has a USB connection to the computer.

26 If you are not getting a USB connection, it could be an issue with

  Look for an option that says “Charge Mode” or “Disable MassStorage.” If you are still having problems, you should verify that your phone is in the list of supported devices for the release of Flash Builder you are using, and check with yourmanufacturer to make sure you have the correct drivers and settings. Running Applications from the Command Line In addition to running from within Flash Professional and Flash Builder, you can also launch your application from the command line using the AIR Debug Launcher (ADL).

28 Screen Size Keyword Normal Size Full-Screen Size

  FWVGA 480x854 480x854 1080 1080x1920 1080x1920720 720x1080 720x1080 480 480x720 480x720To run the Gesture Check application you developed earlier, navigate to the root project folder and execute the following command:adl -profile mobileDevice -screensize Droid bin-debug/GestureCheck-app.xmlThis will execute the Gesture Check application in the AIR Debug Launcher using a mobile profile and a screen size of the Motorola Droid. In the short span of this first chapter, you have already learned how to do the following:Create mobile applications using both Flash Professional and Flex BuilderRun applications in the AIR Debug LauncherDeploy and test on Android devices via a USB connectionUse the Flash Builder debugger to diagnose your applicationTest your application with different screen sizes from the command line This is just the tip of the iceberg for Flash Android mobile development.

1 Pekka Parhi, Amy K. Karlson, and Benjamin B. Bederson, “Target size study for one-

32 Screen Resolution Physical Device Size

  Flex Display Densities Density DPI Mapped DPI Range Example Devices Medium Density (mdpi) 160 Below 200 T-Mobile G1,Xperia X10 mini,HTC Hero High Density (hdpi) 240 200 to 280 Motorola Droid,Google NexusOne, HTC Evo 4G Extra High Density (xhdpi) 320 Above 280 N/ATo take advantage of the Flex density support, set the applicationDPI property on yourApplication object to the scale the application was originally designed for. Based on the ratio of the author density to the device density, the portions of your application built using vector graphics and text are smoothly scaled up or down asneeded.

34 Bitmap graphics will also be scaled, but may look blurry when scaled up or lose detail

  To complete this portion of the UI, the Device DPI text contains a bound reference to dpi so you can see the value of the slider as itchanges. DensityUtil has two static methods with the followingsignatures: getRuntimeDPI():Number: This function returns the applicationDPI ifset, otherwise the current runtime DPI classification of the application; it will always return one of the following values: 160, 240, or 320.getDPIScale(sourceDPI:Number, targetDPI:Number):Number: This function calculates the scale that will be used by Flex given anapplication DPI (source) and a device DPI (target).

36 Making use of these APIs, we can augment the previous code to add in initialization

  In order to fade the devices in slowly as the dpi value is approached, a simple mathematical formula is applied to alpha:1-Math.abs(deviceDPI-{physicalDPI})/{threshold}For each of the phones, the actual dpi is substituted for the physicalDPI for that device,and the threshold is set to a value low enough that there will not be two phones overlapping for the target dpi value. Side-by-side comparison of the Density Explorer when run on a device classified as 160 dpi (left), 240 dpi (center), and 320 dpi (right) Density Support in CSS While the applicationDPI setting in Flex gives you a simple mechanism to write yourapplication for one density and let Flex take care of the resizing, it doesn’t give you fine- grained control over the precise layout and style of your application when viewed ondifferent devices.

2 Recommendation, but contain only a subset of the functionality that is most relevant to Flex and mobile applications

  Code Sample Demonstrating a Media Selector for Devices @namespace s "library://ns.adobe.com/flex/spark";@media (os-platform: "IOS") { s|Label{ color: red;}}@media (os-platform: "Android") { s|Label {color: blue;}}Adding this style sheet to your application will turn the color of all Labels to blue or red, depending on the mobile platform you are running on. To demonstrate the use of a dpi selector, we will update the Density Explorer exampleto make use of a style sheet to substitute the images rather than embedding it in the code with the MultiDPIBitmapSource.

42 Using this technique to bind to a named style makes the

  To complete the example, we also need to create a style sheet that makes use of the dpi media selector to substitute an appropriately scaled image. A well-behaved mobile application should resize the UIon rotation simply to let the user stay in his or her preferred orientation, often displaying an entirely different view that is custom-built for that orientation.

3 Creative Commons licensed photograph taken by Tim Pritlove: www.flickr.com/photos/timpritlove/12865627/

44 Portrait/Landscape Switching in Flex

  Application Descriptor Changes to Allow Automatic Orientation of the Stage <initialWindow><content>[This value will be overwritten by Flash Builder in the output app.xml]</content><autoOrients>true</autoOrients></initialWindow>This both rotates and resizes the stage, and also causes events to be fired that you can listen to in order to change your application layout. Density Explorer application in landscape mode with noticeable croppingFor a landscape orientation of the Density Explorer application, the ideal layout would be to have the phone picture to the left of the controls.

46 Portrait/Landscape Switching with Events

  The StageOrientationEvent has two variables on it that are particularly useful for handling orientation changes:beforeOrientation: The handset orientation prior to the current rotation event being firedafterOrientation: The current handset orientation Putting all of this together, you can modify the Density Explorer to change the layout based on the orientation of the phone. The first step is to update the declarative MXML UI to include an additional HBox that will be used for the landscape orientation, to name the outerHBox and inner VBox with unique IDs, and to hook up an addedToStage event listener.

48 Portrait/Landscape Switching with States

  While this is accessible only from MXML and does not provide as much information as the event API about the orientation of the device, the code to implementthis is much simpler and more declarative in nature, making it easier to read and maintain. If you want to change the layout of your content to fill the screen and have full control over resizing the stage, you will need to disable the automatic scale and positioning.

50 This can be added to any key frame in your application that executes on startup, and will

  Animation of the smiley face from happy to devilishAt the same time, also create the reverse animation to get back to the happy smiley face at around two seconds. This should be added to the first keyframe inthe timeline, and should include both stopping the animation from automatically playing and attaching an orientation event listener to the scene, as shown in Listing 2–17.

54 In this section, you will learn how to take advantage of multitouch and user gestures, improving the user experience and usability of your Flash applications

  Mobile Gestures The easiest way to work with multitouch is to take advantage of the predefined gestures that Flash supports. Mobile Gestures Supported by Flash Android Gesture Name Event Description Pan gesturePan Place two fingers on the screen, and drag left or right; commonlyused for scrolling the contents of the whole screen Rotate gestureRotate Touch the screen with two fingers, and move them in an arc.

4 Creative Commons licensed illustrations provided by Gestureworks

  ( www.gestureworks.com) 55 Swipe gestureSwipe Place one finger on the screen, and quickly swipe it in a single line of travel. It is usually a good idea to provide some other mechanism to accomplish the same behavior in your application in case gestures are not supported; however, mobile usershave come to expect the convenience and speed that gestures offer, so mapping them appropriately in your application design is important.

56 Flash Scrapbook Example

  Here are some of the multitouch events that we will support: Zoom: Increase or decrease the size of the pictures Rotate: Rotate the images to arbitrary anglesPan: Move the entire page of images as a unit Swipe: Swipe the header to switch between pages of imagesTwo-Finger Tap: Tap an image with two fingers to open it in its own viewAlso, while it is not a multitouch gesture, we will hook in drag listeners so you can position the images by dragging them with a single finger. To ensure that the rotation and zoom occur at the center of the Image node, we set transformX and transformY to be at the midpoint of the node in the resizeListener.

58 Press and Drag Mouse Events

  ScrapbookPage" dataProvider="{images}" width="100%" height="100%"added="updateVisibility()"/></s:View>While there is a fair amount of code to create the view, the actual view definition itself consists of only five lines to create a VGroup for the title and a DataGroup to display the images. Also, you need to ensure that the component you hook the swipe listener up to is wide or tallenough to provide enough travel for the gesture to be recognized.

62 Flash Scrapbook Image View

  Drag the images out of the way so you can see the background and use two fingers to drag across the background, panning the scene—this exercises the pan listener on the ScrapbookPage. TOUCH_TAP touchTap Event dispatched after the user finishes a gesture that involves touching and removing contact with theobject; a high tolerance of movement in the middle is allowed as long as it is within the bounds of the object.

66 Most of the touch events are fairly self-explanatory, but the

  As the finger rolls from A to C, you would receive the following roll events: touchRollOver(A) -> touchRollOver(B) -> touchRollOver(C) At the same time, you would also receive the following over/out events: touchOver(A) -> touchOut(A) / touchOver(B) -> touchOut(B) / touchOver(C) The events that rectangle A would directly receive are highlighted in bold. To start with, we will create a few art assets that can be used to construct the example: Background: Create a layer called Background that will be the backdrop for the application.

70 Summary

  By now you know the reasons for choosing the Flashplatform and some of the considerations involved in writing applications for devices with a wide variety of screens that use touch gestures as their main form of user input. By the end of this chapter, you will know how to decide between the various types of Flexapplications, how to write your own Views, and how to provide rich content to those Views using the mobile-ready controls in the Flex SDK.

72 ViewNavigator: This class handles linking a set of Views together

  Since the ViewNavigator also maintains a stack of theViews that have been displayed, it can pop the most recent View off of its stack and return to the previous View in response to a “back” button press without any extra code being written by the application developer. The important thing to keep in mind about this sequence is that the initializeand creationComplete events will be received by the new View before the ViewNavigator plays the animated transition to the new View.

78 View that lets you examine one particular stock in detail. Another tab might show market

  Although we haven’t done so in this simple example, in a real application you would want to make use of a MultiDPIBitmapSource todefine your tab icons so they look good across a whole range of device screens. Listing 3–4 shows theMXML for the two Views that make up the Hello tab of this application, the HelloView and the LanguageView.

80 The

  At the bottom of Listing 3–4, you can see that the code for the LanguageView displays the data object’s hello and lang properties to the user with twoLabel components, whose text properties are bound to the properties of thedata object. The method has three more optional parameters: a data object that will be passed to the new View, a context object thatis stored by the ViewNavigator and is also readable by the new View, and a transition to play between the Views.

88 When you add different easers to the mix, you really have a large number of

  When a View is pushed on top of the stack, the oldView’s data object is automatically persisted, and a new data object is passed to the new View if one was provided as the second parameter of the pushView function. It would seem, then, that communication via data object is one-way: a View can pass a data object to the View that it is pushing onto the stack, but that View has no way toreturn data back to the original View when it is popped off the stack.

94 You can also pass data to a new

  Persisting View and Session Data We have already seen in Listing 3–4, and briefly discussed in the previous section, that a View’s data object is restored to it when the View is reactivated by one of theViewNavigator pop functions. The ViewNavigatorApplication and the TabbedViewNavigatorApplication containers have a reference to a persistenceManager instance that can be used to save and loadpersisted data when the application starts or shuts down.

98 Control Mobile Skin Recommended Usage

  Thedata attribute of the XML Path element is shown here:<s:Path data="M 50 50 L150 50 350 150 50 150zC 250 300 200 150 350 100 T 250 250 400 280">The first portion of the data attribute (which starts with the letter M) specifies a trapezoid;the second portion of the data attribute (which starts with the letter C) renders a cubicBezier curve; the third portion of the data attribute (which starts with the letter T)specifies another cubic Bezier curve. The third GradientEntry element has a ratio attribute whose value is 0.66, and therefore the rectangle is rendered with the color 0x0000FF(hexadecimal value for blue) from the location that is 66% of the way from the initial location to the destination.

Dokumen baru