1 / 11

Creating Animated Apps: Canvas and ImageSprite

Learn how to create animated apps using Canvas and ImageSprite components. This tutorial covers the basics of drawing on Canvas, specifying coordinates, reacting to touches and drags, and animating objects.

wgeraldine
Télécharger la présentation

Creating Animated Apps: Canvas and ImageSprite

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Creating Animated Apps：Canvas與ImageSprite 靜宜大學資管系 楊子青

  2. 1. Canvas Component • A two-dimensional touch-sensitive rectangular panel on which drawing can be done and sprites can be moved. • Any location on the Canvas can be specified as a pair of (X, Y) values, where • X is the number of pixels away from the left edge of the Canvas • Y is the number of pixels away from the top edge of the Canvas • There are events to tell when and where a Canvas has been touched or a Sprite has been dragged.

  3. The Canvas coordinate system

  4. Adding a Canvas Component to App • You can drag a Canvas component into your app from the Basic palette. • specify the Canvas’s Width and Height. • Often span the width of the device screen: “Fill parent” • Height: 300

  5. 2. ImageSprite component • is an animated object that is contained by a canvas • can react to touches and drags, • interact with other sprites (image sprites and other balls) and the edge of the canvas, • and move according to its properties.

  6. 介面設計

  7. 介面內容

  8. 初始設定

  9. 2.1 Timer event • One way to specify animation in App Inventor is to change an object in response to a timer event. • Most commonly, you’ll move sprites to different locations on the canvas at set time intervals.

  10. 時間到，隨機移動SaucerSprite的X軸

  11. 2.2 拖曳RocketSprite，讓其水平移動

More Related