Design

July 2, 2011

New alternate content demonstration Mesolabium Alternate Gif.

Mobile Thoughts

I recently made a few design changes based on some of the published Apple Guidelines. The "User First" design concepts are excellent. The current design focus has been on simplifying the animations for mobile devices. Flash-enabled or not, economy of content is an essential design value for them.

I do not have the programming skills to create mobile apps and distribution of this content will take place mostly in the desktop/laptop/netbook environment as I can best adapt it towards the evolving technology. The easier it is for developers to use, the more likely they will distribute it over mobile channels themselves.

The Ipad and now the Droid phones (1, 2, and X) provide some idea of what can be transmitted today, non-Apple tablets such as the Xoom Tablet running Android Honeycomb are expected shortly and the Ipad itself is expected to be updated about the same time. OLPC and related websites indicate practical expectations and limitations for the least developed - I am not sure that any animation can be delivered to devices powered only by shaking.

Currently, Musemath Flash animation can reasonably be viewed on desktops, laptops, netbooks, and Android mobile devices with 600-1Mhz CPU, Froyo (everything worked fast and fine on the Droid 2 and though not tested thoroughly, at least seemed to work on the Droid 1, but they are not designed for screens of that size). They are designed for 9-10 inch netbooks and larger devices and do not provide a good user experience on smaller screens. They cannot be viewed at all on Apple mobile devices and alternate content is needed for those and for smaller screens in general.

***

What follows are extracts and notes made as I was watching the developing situation, visiting store displays and revising animations all at the same time. i just wanted to get them off the "Update Page" and will be editing them into a more cohesive statement here as time is found to do so.

The overall objective is to maintain internet distribution on desktops and laptops while preparing for whatever the mobile evolution brings this school year.

I'm trying to develop content for whatever medium can get it distributed (same as everybody else) and have to make some guesses as to what the options will be.

The current animations will work fine for school-sized Tablet Devices (All of them no doubt though Android says its not ready and I cannot encourage jailbreaking or any thing of that sort on other devices...there are some cloud options available for non-Flash enabled devices, perhaps only useful for video.)

I first need to make it all look interesting and cohesive on 9-10 inch screen which I think useful for any serious 'sit down, study and learn' education purposes. (Pencil and paper remain useful for anything deeper. Perhaps per Thompson the world I knew how to live in has passed but something distinctly non-mechanical remains the goal.)

Smaller screens I am thinking of as supplemental, secondary devices, convenient and portable, for introductory video material and 'flash card' review.

Android

The Musemath Flash animations worked fine on the Droid 2, as fast and as good or better than my home DSL service. Pinch zoom worked fine, All the buttons, though very small, worked. Rollover menu worked.

They are not fully optimized for mobile and the effective battery life is unknown but the Flash 10.1 Player clearly works for the Musemath animations.

The design problem is somewhat the reverse of that recently faced by the Iphone apps developers in adapting to the Ipad.

Here, the smaller screen means you don't get a good experience with current Musemath animation. It was a good thing I already knew where all the buttons were. I could gesture -zoom in but essential visual connections were lost. I suspect vocal accompanyment is needed.

***

The general idea is to make science and music more accessible for the general public through animation. There is no advertising and they run very fast and very well on all the larger Apple devices and all PC's tested to date.

***

On an Ipad you can at least get some idea of the content from the Quick Time video "Mesolabium" 277kb, 1.0 seconds. June 28, 2011 The Quick Time has stopped working properly on Apple devices, therefore, a new alternate content demonstration Mesolabium Alternate Gif.

I have recently found something on "Alternate HTML Content" http://www.adobe.com/devnet/flashplayer/articles/alternative_content.htmll

(September 20, 2010 also:

http://code.google.com/p/swfobject/

http://www.warmforestflash.com/blog/2010/07/make-your-flash-site-iphone-friendly/)

So far, anything generating alternate content directly from embeded swf/html Flash files seems to require this "swfobject" javascript file. I'm not sure that all the things it does are going to be helpful and would have to study it awhile; in addition, the Adobe sites are not populating today (IE - "Cannot load the page...") and the MS fix utility wants a fifth of my remaining HD! - not today!

(I have an old version of "swfobject" I didn't want to use for the "Click to Activate" days and will reread that if nothing else turns up - no hurry.)

The website is not entirely Flash but it is designed to use the advantages that animation program has provided - till recently. A separate non-interactive html page at this time will not do much and has a lower priority for me.

The principle concern is the ability of non-language specific interactive animation to transfer abstract ideas over currently available media. (An ideal, not fully realized but I think the shorter paragraphs can be automatically translated failrly well). The specific information, if understood, will get redistributed by others and other methods - some better, some worse.

If the hoops get low enough I will start jumping through them.

***

The following article deals with some of the education issues in mind. Class-Act-The-iPad-and-the-Flash-Challenge-for-Elearning

Ipads, netbooks, upcoming tablets or some combination are irrelevant to the quality of the content, ignorance should be reduced by any and all means available. Distribution now requires more work. My first thought is to update old animations as above, optimizing for Flash 10.1 mobile and non-Flash devices in stages, as may be possible.

Apple (or HTML5 - with or without SVG) does not (yet) clearly address the degree of interactivity and teaching tools currently in use. Will they?

Look at the "Gestalts" I'm trying to create with these animations to understand how much can be transferred to mobile platforms and how much simply requires more powerful computers. (So far as hardware, all my simple Flash animtions were created on a desktop P3 450 mhz processor and have run very quickly cross platform to date.

However, while working on the mathematics, I did not do much surfing outside some basic technical sites. It was only when I started researching the Ipad on blog sites I became aware how many serious problem sites there are. If Steve Jobs is correct and these problems are the result of poor Flash programming - (and he's as honest as a businessman can be I suppose), Then I will have to either convince people to turn Flash on and/or develop other means of delivering the content.

Software Bloat is always a big issue. "Technology Creep" is similar.

Flash still seems to be the best prototyping tool - so far as sketching out ideas, I miss Flash MX which used to populate before I had time to forget my ideas. It is now a much more complex developer program.

I will have to redesign a second set of animations for Small Screen Mobile. regardless of OS, the primary focus has to be screen size, the touchscreen and the zoom experience, and for phones:

When and how exactly is someone going to be interested in the subject matter while on a phone?

I suspect that streaming video and/or a separate 'flash card' interface will be the best way for me to distribute Musemath to small screen mobile devices.

Greater interactivity and more intensive animation than that would likely require significantly better programming skills to maintain functionality across the proliferating hardware, browsers and operating systems.

All for the future, to be kept in mind as current work is finalized.

***

For Mobile:

The trade off seems to be between battery life and file size (cost of data transmission).

But there is also the issue of effective communication, does the device transmit the concept effectively. If you save power but transmit ineffectually or at too slow a rate, no gain is achieved.

Of course, if you've got a killer app that crashes or drains batteries you don't get to change the world either.

***
Some websites of possible interest:

http://davidwarlick.com/2cents/?p=2712 “21st century leaning has nothing to do with iPads, iPod Touches, or any piece of technology. The only thing that is one to one that we should be concerned with is equitable access to rigorous, relevant, and irresistible learning experiences that reflect and harness the times, environment, and ultimate goals of the learning."

http://wayan.com/4p-computing/ 4P Computing: the emergence of appropriate Power, Performance, Portability, and Price as drivers of technology innovation.

http://edutechdebate.org/ ...substantive discussion of how low-cost information and communication technology (ICT) device initiatives for educational systems in developing countries are relevant...

http://blogs.worldbank.org/edutech/

***

Apple

Steve Jobs - Thoughts on Flash
http://www.apple.com/hotnews/thoughts-on-flash/

Apple Guidelines (start, thereafter, a lot of digging)

Jobs presentation OS4, 'Search is not a principle use on Iphone, Apps are'. - Search will likely be somewhat more important on Ipad, it is a sit down device..

Ipod - education:

http://www.apple.com/education/itunes-u/

https://sites.google.com/a/eusd.org/eusd-iread/

http://www.wired.com/gadgetlab/2010/06/apple-slaps-adobes-flash-with-ipad-friendly-html5-showcase/ Apple Slaps Adobe’s Flash with iPad-Friendly HTML5 Showcase

This site seems useful to explore Apple capabilities: http://www.iear.org/
"A community effort to grade educational apps"

The following may be useful as well: http://www.canvasdemos.com/

iPad's Promise and How to Use it Now ( Wednesday, August 18, 2010) http://www.iear.org/iear/2010/8/13/what-do-teachers-really-want-in-an-educational-app.html

Found the following Apple app info which is topical (physics - waves) and gives me some idea of what is currently being done over there.

http://physics.bu.edu/~duffy/iPhone/waves/waves.html

Link to the PhysicsWaves app on iTunes
http://www.itunes.com/apps/PhysicsWaves

Ipad - First Impression - June 11, 2010;

Did get to the Apple Store in Fashion Valley. The IPad looks like a very good innovative web magazine format to me, that's all many people want so a very good tool for mass marketing. With potential for more.

Tried to see some of the animation capabilities but it was so busy marketing itself I couldn't quickly find any free samples to test.

It does reach the internet very well, navigates exceptionally well, zoom in is great, and it is certainly a pleasure to not have to worry about browser crash or annoying animated advertisements.

Some bloggers are indicating it is good for limited business matters but indicate some need for add-on bluetooth tools.

Without the interactivity of Flash, applets and computational programming, it seems inadequate to much current science e-learning.

***

Technical Issues - specific to Musemath

Everything should be selectable, eventually. A problem to watch for is exponents which become regular numbers when text is selectable - will have to rewrite with ^ and/or mc_symbols.

Animation Technique Limitations

...fudged a few frames of an animation. It seems likely this cannot be made too precise if it is ever to play with a reasonable frame rate in anything like a "Canvas" animation in the near future. A good mathematics - CAD program - might do better but for the moment, Flash 8 will have to do here. Will probably try to refine it.

***
Direction of guitar image.

Each stopped note is a function of the open (whole) string length. My current thought is that measuring from left to right will cause less problems of interpretation with some of the mathematics later on.

However, fret numbering would then be from right to left and the frequency curve will be one of decay (this is not the way I think of the guitar when I play). Not sure yet, no perfect solution but I want a consistant imagery...

***
This is still for Desktops, Laptops, and Netbooks. Some of the individual movie clips on each page have been simplified in appearance to adhere more closely to what seems to be the animation capabilities of mobile devices but I have not yet adopted all of Adobe's optimization recomendations.

These are all prototypes for the direction I think the internet is headed but I still need to communicate to a current audience.

Whether Flash 10.1 or Ipad (and HTML5 - Canvas - SVG in general), some significant reduction in cpu processing is highly desirable to extend battery life on mobile devices.

Most of this seems to require programming skills I don't have, this is to explore how much animation seems minimally required to convey the conceptual ideas.

What cannot be achieved by animation on a device will have to be transmitted by static symbols, image transitions, voice and video.

Animation might be still be functional for "classroom" computer lectures where external power is available.

***

Deep Linking

Links from within the animations to other Musemath animations are now populating in separate windows as I still need to do a lot of cross checking. This is not mobile friendly as a number of flash movies tend to remain active. I may bring them back to the same window shortly and will consider Flash Deep Linking as noted below, though browser and hardware proliferation makes me leery of such software fixes, especially those I don't understand very well. What works one day stops the next.

http://www.padizine.com/blog/swfaddress-tutorial-for-actionscript-2-0/

***

The animated gifs of guitars by Russel - Kettering

http://www.kettering.edu/~drussell/guitars/index.html

work fine on Ipads so some alternate content in that order may be forthcoming.

***

Indian Government unveiled a $35 touchscreen tablet prototype aimed at students, with optional solar power for a bit more money, memory card instead of hard drive. Keywords "Kapil Sibal", "Economic Times". No manufacturer yet.

From my point of view, will any such device last a student through a single rainstorm on a single day in a single monsoon season? Durability, reliability, repair, replacement, recycling costs all applly to any cost estimates. Science is both applied and abstract, here, apply it.

***

Since Musemath is concerned with science and every kid in the world has to learn this subject the same way, the lowest common denominator is an affordable delivery system. Content can be devised around that criteria with an eye to what higher end systems may be able to deliver into the future. The principle concern is imagery which is cross-cultural, platform independent. (Independence is not completely achievable these days - device specific solutions are required.)

OLPC apparently intends adding touchscreen functionality at something over $150 in a few years and eliminating the physical keyboard in a later tablet version.

Apparently, their current devices should play most if not all of the Musemath animations as is and I have downloaded and am now trying to figure out how to test in their default "Gnash" player.

http://wiki.laptop.org/go/Gnash

***

HTML5 - Silverlight - Flash, SVG:

Html5 Canvas and Silverlight

http://team.silverlight.net/announcement/the-future-of-silverlight The Future of Silverlight
September-01-2010 Brad Becker, Director of Product Management, Developer Platforms

"Microsoft remains committed to using Silverlight to extend the web by enabling scenarios that HTML doesn't cover. From simple “islands of richness” in HTML pages to full desktop-like applications in the browser and beyond,

We group these into three broad categories: premium media experiences,
consumer apps and games, and business/enterprise apps."

The following may be useful as well: http://www.canvasdemos.com/

http://thomastalkstech.com/blog1.php/world-browser-war-iii-html-5-vs-flash-fl "Will HTML 5 allow me to create the unique, interactive learning experiences that I build in Flash?"
"Flash is a great tool and the files it creates display the same in every browser on every platform. The inconsistencies in the way the browser displays content has no impact on your .swf. It runs the same, it looks the same, it feels the same, and it sounds the same on each and every platform. It is a stable tech that my clients understand and provides me with creative flexibility."

http://www.upsidelearning.com/blog/index.php/2010/04/14/apple-vs-adobe-impact-on-mobile-learning-development/ "As an eLearning developer I feel it’s a great opportunity to get into learning the new languages like Objective-C and HTML5 which has now become mandatory because of Apple’s policy. But at the same time it’s a huge investment for eLearning vendors to train their workforce on these new languages so that they can develop the iPhone/iPad apps and that too without being sure of iPad or iPhone would be big in workplace learning domain at all."

Canvas and its future:
http://www.slideshare.net/robhawkes/html5-canvas-the-future-of-graphics-on-the-web

Also Googled "html5 vector animation gui" ...They are two different things, Canvas is bitmap, SVG is vector...

Introduction to HTML 5 - This is a Google video indicating Canvas for animation and (SVG- vector? for interactivity- not certain I understood correctly). http://www.youtube.com/watch?v=siOHh0uzcuY

***

ADOBE:

http://mashable.com/2010/09/17/flash-vs-html5-adobe-interview/ Interview -September 17, 2010 - Paul Gubbay, Adobe’s VP of design and web engineering, about HTML5, Flash, the emerging mobile landscape and how Adobe fits into this new world.

"When building an RIA designed for the desktop, in most cases, Flash does make more sense. Not only is it more capable, the performance is usually going to be better.

However, we should note that on mobile, this isn’t always the case. Even with Flash 10.1 for Mobile, Flash content needs to be optimized for mobile devices. Flash video and Flash animation designed for the desktop doesn’t really work the same way on mobile platforms."

Flash optimization for mobile and best practices. and touch interactivity

Optimization

This is more or less a working guideline for me.

Adaptation to economical mobile devices suitable for student use requires considerable simplification. See ""Smartbooks" OLPC//News

Here is a link to a video on creating Flash CS5 content for Mobile Devices by Igor Costa, the first I've seen: http://www.igorcosta.org/?p=338

Apparently, some part of both home and school work will use batteries and relatively weaker processors.

For myself, I am guessing: Canvas and/or html5 vector graphic gui in 2-3 years. Today, Flash is the only way for me (and most teachers) to develop complex animation content for general use. We now have some idea how Flash 10.1 actually works on mobile devices as well as some idea of the education capabilities of the Ipad and PC Tablet formats. Content distribution is the goal, I would like to be ready to use whatever tools the winds blow my way.

My own programming is certainly inadequate for mobile but some work on the imagery used here should be helpful. I'm generally using Adobe guidlines for optimization summarized below.

Finished reading a PDF "Optimizing Performance for the ADOBE FLASH PLATFORM". It is for Flash Developers but I can follow some of it for background and there are useful phrases such as:

"Consider whether your desired level of richness is a good match for the performance characteristics of the machines and devices on which your application runs."

____________________

Some issues - The following were the first animations I looked at but then decided to update the main guitar animations first. Except for stopping any continuous motion, little has been done by way of optimizing the mathematics animations.

Motion Transparencies, Transitions

Euclidean Algorithm 2
Number Line
Ratios 3 p 2,6 Mesolabium (?)
Nested Intervals p5 (ghost)
Dienes Multiplication p1.2,.3,.4 (alpha only)
Dienes Blocks 2 p4

Integration 1
p3 (transparency zoom in)
p17 figures fade in/out
p19 Riemann rectangles (alpha but stationary)
p20 stationary rectangles under curve - alpha

Integration 2
p1 alpha - left side
p8 numbers fade out
FOIL - highlighted by transparencies

Integration 3 - some transparencies, mostly stationary

Irrationals p2
Mesolabium Linkage p 3 (animated alpha)
___________________

Gradient

Sum of First n Squares p5, radial gradients

___________________

Continuous Motion

Calculus (done - see Dienes Blocks 2)
Phonograph p3 (done -transferred to Odds and Ends)
Motion Circular 6 (deleted)

_____________________

Display Objects

(ror - At some point, but making everything into a movie clip is helpful right now in reducing clutter and duplications that have been accumulating.

Even the date is now an MC. Convenient though wasteful of memory. In time.)

http://www.adobe.com/devnet/flash/articles/flash8_bestpractices_11.html#optimizing_graphics

Flash 8 Best Practices
Optimizing Graphics and Animation

Avoid gradients...

Alpha or transparency...to a minimum.

Animating transparent graphics over bitmaps is a particularly processor-intensive kind of animation, and must be kept to a minimum or avoided completely.

The best bitmap format to import into Flash is PNG, they have RGB and alpha information for each pixel...you retain some ability to edit the graphic objects in the FLA file.

Optimize bitmaps

Vector graphic...is preferable in most cases... reduces file size, because the images are made from calculations instead of many pixels. (ror - issue of calculations vs bitmap rendering on mobile devices?)

Limit colors.

Avoid scaling bitmaps.

Set the _visible property to false instead of changing the _alpha level to 0 or 1.

Calculating the _alpha level for an instance on the Stage is processor-intensive. If you disable the instance's visibility, it saves CPU cycles and memory, which can give your SWF files smoother animations.

Instead of unloading and possibly reloading assets, set the _visible property to false, which is much less processor-intensive.

***
Reduce the number of lines and points.

Use the Optimize Curves dialog box (Modify > Shape > Optimize) Use Multiple Passes option.

Try different ways of producing an effect, and test.

Find the lowest frame rate possible. For detailed information, see "Animation Frame Rate and Performance".

***
Animation Frame Rate and Performance

Setting a frame rate too high can lead to processor problems, especially when you use many assets or use ActionScript to create animation.

***

onEnterFrame

Note: When you use an onEnterFrame event handler to create scripted animations, the animation runs at the document's frame rate, similar to if you created a motion tween on a timeline.

***
setInterval Function

An alternative to the onEnterFrame event handler is setInterval.

Instead of depending on frame rate, you call functions at a specified interval.

Like onEnterFrame, the more frequently you use setInterval to call a function, the more resource intensive the animation is on your processor.

***
Also, especially if you're working with timeline-based animation, select a frame rate for your animation as early as possible in the development process.

When you test the SWF file, check the duration, and the SWF file size, of your animation. The frame rate greatly affects the speed of the animation.

***
Filters and SWF File Performance

(ror - I haven't used filters to date but it seems that mobile devices require more bitmaps and will keep some of this in mind)

Avoid using an excessive number of filters, and use a lower quality setting when possible.

Caution: If a 100 pixel x 100 pixel object is zoomed in once, it uses four times the memory since the content's dimensions are now 200 pixels x 200 pixels. If you zoom another two times, the shape is drawn as an 800 pixel x 800 pixel object which uses 64 times the memory as the original 100 pixel x 100 pixel object.

Whenever you use filters in a SWF file, it is always a good idea to disable the zoom menu options from the SWF file's context menu.

***

Bitmap Caching and SWF File Performance

(ror - this may be worthwhile)

Flash Player 8 introduces bitmap caching, which helps you enhance the performance of nonchanging movie clips in your applications.

When you set the MovieClip.cacheAsBitmap or Button.cacheAsBitmap property to true, Flash Player caches an internal bitmap representation of the movie clip or button instance.

This can improve performance for movie clips that contain complex vector content. All of the vector data for a movie clip that has a cached bitmap is drawn to the bitmap, instead of to the main Stage.

Note: The bitmap is copied to the main Stage as unstretched, unrotated pixels snapped to the nearest pixel boundaries. Pixels are mapped one-to-one with the parent object. If the bounds of the bitmap change, the bitmap is re-created instead of being stretched.

It's ideal to use the cacheAsBitmap property with movie clips that have mostly static content and that do not scale and rotate frequently. With such movie clips, using the cacheAsBitmap property can lead to performance improvements when the movie clip is translated (when its x and y position is changed).

Enabling caching for a movie clip creates a surface, which has several advantages, such as helping complex vector animations to render fast.

...Overall performance of cached data depends on how complex the vector data of your instances are, how much of the data you change, and whether or not you set the opaqueBackground property.

If you are changing small regions, the difference between using a surface and using vector data could be negligible. You might want to test both scenarios with your work before you deploy the application.

**
When to Use Bitmap Caching

Complex background image:

An application that contains a detailed and complex background image of vector data (perhaps an image where you applied the trace bitmap command, or artwork that you created in Adobe Illustrator).

Scrolling text field:

Windowing system: An application with a complex system of overlapping windows. Each window can be open or closed (for example, web browser windows). If you mark each window as a surface (set the cacheAsBitmap property to true), each window is isolated and cached. Users can drag the windows so that they overlap each other, and each window doesn't need to regenerate the vector content.

**
When to Avoid Using Bitmap Caching

Misusing this feature could negatively affect your SWF file. When you develop a FLA file that uses surfaces, remember the following guidelines:

Do not overuse surfaces (movie clips with caching enabled). Each surface uses more memory than a regular movie clip, which means that you should only enable surfaces when you need to improve rendering performance.

Do not overuse bitmap caching. A cached bitmap can use significantly more memory than a regular movie clip instance... it might use 250K instead of 1K.

Avoid zooming into cached surfaces.

Use surfaces for movie clip instances that are largely static (nonanimating). You can drag or move the instance, but the contents of the instance should not animate or change a lot.

For example, if you rotate or transform an instance, the instance changes between the surface and vector data, which is difficult to process and negatively affects your SWF file.

Avoid mixing surfaces with vector data.

***

Working with Components in Flash Player

(ror - I avoided entirely so far, skip this section)

The component framework enables you to add functionality to components, but it can potentially add considerable file size to an application.

***

Where to Go from HereChanging your workflow to incorporate best practices (or standardizing your code) can take time and patience. However, you will quickly realize the benefits to your code and workflow.

If you're just starting to learn Flash, use and refer to this guide frequently to help you form good habits as you learn. If you do this, you can avoid having to retrain yourself later on.

_________

General Mobile Optimization Considerations

http://www.tipsblogger.com/2010/03/10-tips-to-optimise-your-site-for.html

Avoid Flash
(ror - unworkable for the moment - some of this may be changing with Flash Player 10.1 but will keep in mind the difference between phone and smartbook.)

Keep it Slim, designing your site in one central column, to keep things central for mobile users.

Make Navigation Really Simple

Mobile users will struggle to navigate your site if your navigation relies on clicking images, as these will take longer to load on slower connections. So, design the navigation and user journey depending as little as possible on images and plugins to make things smoother on mobiles.

Optimise HTML

Use the most efficient, semantic HTML you can, and put more emphasis on presentation in your CSS. CSS is more powerful and doesn’t clutter your site with presentational data, so the site can be viewed by mobile users more easily.

Lose the Special Effects

Dynamic effects simply don’t translate to most mobile browsers well. They do not add much to a site when viewed on a PC, and bring nothing but annoyance when users try to view your site on a mobile.

Control Text Sizes
Large text is unwieldy on a mobile device as the screen is so much smaller, and users have to scroll down through squashed-up words to get to body text. With this in mind, your large text headers should be no more than twice the size of your body text, and headlines should be as short as possible to avoid them spilling over into several lines on a mobile device.

Write for Mobile Users
The majority of mobile browser users, according to mobile operator Orange, feel that there should be specific content for mobile rather than the same content as on web pages.

If you’re planning to go down this route, remember that you shouldn’t just change the structure and features of your mobile content; you need to edit the actual words as well. Mobile users are more likely to be on the go when they access your site, and so have less time to read, and there’s also the problem of a lack of space.

So, your copy for mobile should be as concise and punchy as possible.

___________

http://www.adobe.com/devnet/devices/articles/ota_delivery_04.html

Optimizing your content for OTA delivery (over the air)

In order to optimize graphics, you need a graphics authoring tool like Adobe Photoshop or Macromedia Fireworks as well as some understanding about file formats and their good and bad features.

Sometimes it's a good idea to use vectors instead of bitmaps, because vectors are mathematical functions, not concrete pixel-by-pixel graphics like bitmaps. Just remember to check that the vectors don't tax the device too much, and that the application runs smoothly on the device.

PNG is a format that uses both bitmap and vector graphics, and is often the best choice with Flash Lite.

It is somewhat dependent on the file format, but when optimizing, you have control over the number of colors (color depth), compression strength, and image resolution (see Figure 1): 72 dpi for mobile devices and computer screens, around 120–150 for newspaper quality, and 300 dpi for print quality, etc.

Hard-coding
Always code in a portable way. If you draw graphics by using code, hard-coding something is a bad idea because it is always device-specific.

(ror-haven't done any of this - skip for now...may be relevant to "Canvas" in the future)

Contrast
All mobile devices differ from one other, and screen contrast and brightness vary wildly. Due to these differences, the way colors are perceived by the user differ as well...and always test on the target devices in broad daylight.

And yes, it's a must to test on every target device in order to spot the anomalies. It's no use if your applications look good on your own mobile device with your profile but bad on every other device. What does this have to do with OTA delivery? If the end users don't like what they see, the impact on you and your business will be inevitably bad.

Tip: Avoid using many overlapping transparent PNG layers, as the graphics may start to flicker.

**************

THE BIG ISSUE for Musemath

Animation
The basic thing to keep in mind when creating animations is that mobile devices are not desktop computers or consoles. Using many complex animations can easily bring a mobile device to its knees.

When making animations, or making single images called sprites that form the animation, always look for a solution that has the fewest frames possible—meaning fewer kilobytes and/or less taxation on the mobile device's CPU.

We recommend that you use tween animations (motion and shape) to save time and kilobytes. The most efficient way to make animations is coding them using ActionScript. The combination of these two techniques is by far the best solution when applicable.

For more information on bitmaps vs. vectors, check out this Flash Lite article on LiveDocs: Bitmap versus Vector Graphics.

Figure 2. Effect of gradients and alpha transparency on file size in bitmap and vector sprites

Tip: There is at least one graphics handling bug that can affect optimization possibilities. Flipping transparent PNG images doesn't work correctly on all devices (at least on the Flash Lite 2.0 player's developer version). Flipping transparent PNGs doubles an animation's size because you're not able to use the same image for both orientations (like animation to left and right).

Video
Video editing should be done in a video editing program like Adobe Premiere. The Flash Lite 2.x player can play any video format supported by the target device. Because the device itself decodes and renders (and even streams) the video, we can't provide a general guideline for which video format to use. Check with the manufacturer or use ActionScript in your application to find out which, if any, video formats are supported and then serve the right one accordingly.

Tip: Videos tend to involve large file sizes.

_____________

Bitmap versus vector graphics

http://livedocs.adobe.com/flashlite/2/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00000086.html

Flash Lite 2

Developing Flash Lite 2.x Applications > Optimizing Content for Performance and Memory > Performance optimization > Bitmap versus vector graphics

Bitmap versus vector graphics
Flash Lite can render both vector and bitmap graphics, and each type of graphic has its advantages and disadvantages. Whether to use vector or bitmap graphics is not always a clear decision, and often depends on several factors. This section discusses some of the differences between vector and bitmap graphics to consider when deciding what type of graphic to use.

Vector graphics are compactly described in SWF files as mathematical equations, and then rendered at runtime by the Flash Lite player. In contrast, bitmap graphics are represented as arrays of picture elements (pixels), which require more bytes of data to describe. Therefore, using vector graphics in your application can help keep file size and application memory usage down.

Vector graphics also maintain their smooth shapes when scaled in size, unlike bitmaps images that can appear boxy, or pixelated, when scaled.

Compared to bitmaps, however, vector graphics require more processing power to render, especially vector graphics that consist of many complex shapes and fills.

Consequently, heavy use of vector shapes can sometimes reduce overall application performance.

Because bitmap graphics don't require as much processing time to render as vectors, they can be a better choice for some applications.

For example, a road map of a large city would have too many complex shapes to scroll and animate well on a mobile phone if it were created as a vector graphic; a bitmap would animate better.

Following is a list of additional considerations for using bitmap and vector graphics in your Flash Lite application:

Whenever possible, do not use strokes on your vector shapes, because doing so increases the number of rendered lines.

As a general rule, use bitmaps for small, complex images (such as icons) and vector graphics for larger and simpler ones.

Import bitmap graphics at the size that they will be used in the application; don't import large graphics and scale them down in Flash, as this wastes file size and runtime memory.

***

March 8 , 2010
Apple Game Change

The immediate concern is the future of the Flash authoring tool. Apple's dismissal of the tool is bad for Musemath. It seems likely there will be several years of decreasing viewers on this website as other programs and delivery systems take over what has been a virtual monopoly of a cross platform tool by the Flash player for Desktops.

It is still the only tool I can use for quick sketch-ups and design layouts and will remain useful for some time. The issue of delivery to mobile devices has not been finalized yet but it seems mostly the province of programmers and there is little I can do except try to optimize content for the new versions of browsers and Flash Player.

July 24, 2009

The general design objective, especially with the current math is a self teaching, step-by-step tool. Video lectures of first class math and science teachers now available world wide seems a step of higher order.

May 21, 2009

Designing for school size mini-laptops:

Some design problems of legible exponent numbers on mini-laptops - will change to using movieclips with multiple layers of numbers for image labeling in the future.

Some see-through backgrounds changed to enhance printing,

The 10" is very much easier for me. I do not have to strain to see the figures as often and am therefore less likely to make useless mistakes. Durability, battery life, keyboard size, connectivity, repairability, and storage needs (internal and external) are important. Connectivity varies considerably on the wireless network during a busy day. At its best, it worked fine and the mathtutor video started off at least very well.

The wireless connection was as good as I get at home (slow DSL) though it had varied in past tests on other higher priced machines - seems more a function of how many users online than the cost of the machine?

I will have to keep an eye on touchscreen technology (as opposed to keyboards, the mouse, and touchpads) though I suspect designing for it will be beyond my capabilities. I am curious about its limitations as an input device.

March 1, 2009

The goal on these animations is always instant recognition of the symbols and relationships on each page. It is rarely achieveable in complex explanations where some form of step by step process is needed, during which various meanings have to be learned and kept in short term memory until some unforeseeable combination of steps turns the key of understanding.

The back and forth manipulation of short modules is the principle design feature here.

Delay in recognizing the screen content is critically damaging to the process and with a diverse audience, that which speeds things up for one individual is rather likely to slow another down.

Possible solution:
Physics AccuDesigns
http://www.accudesigns.com/waves.html

(May 1, 2009 - some weeks ago, I opted against this javascripted method of design because of significant wireless reception delays - everybody's flash animations downloaded normally except for these - apparently it doesn't always happen - maybe someone disabled something, (I verified javascript enabled) but the same result occurred on several machines and I am concerned that it may be a function of overburdened networks - the fundamental design priorities are universally reliable, rapid reception of legible documents. Since I have no idea why or when I will avoid the issue for now and design for normal browser windows. I should look into this further since it does seem to provide the largest possible image on each machine.)

January 7 , 2009

My principle consideration is the simultaneous visibility and comprehension of both the formula and the diagram on the small screen. Flash movies can emulate somewhat the rather sketch-like step by step proceedures of a whiteboard with the additional value of the viewer's ability to review and control the steps, both backward and forward from any point in the proceedure, as often as may be needed.

November 13, 2006

http://www.blink-media.com/jeffjoneslive/Expression-interactive-designer.asp

Over all...If your want to build something people can use in the next five years use Flash...

July 7, 2006

Some alternatives to Flash are noted here: My conclusions so far, I'm staying with Flash but may want to take a closer look at Cinderella and Geometer's Sketchpad.

As I understand it, Flash is an artistic drawing program, it takes shortcuts with the math and physics for the sake of making appealing presentations, suitable for use on the internet. Game developers are emphatic that such shortcuts are needed, that you cannot get bogged down in details if you want to hold interest and make things "look right".

The drawings and animations involving time are a nice mechanical proceedure for learning some of the principles - some of which are not understood without this process. Flash does this better than anything else I've seen so far but it now does many other things and it's drawing tools have become more difficult...

The geometry program "Cinderella" may be a practical solution for students to create such animations.

http://cinderella.de/tiki-index.php

Geometer's Sketchpad and Cabri Geometry and a number of other programs and discussion forums etc. may be found at http://mathforum.org/dynamic.html

Sketchpad

http://www.keypress.com/sketchpad/

The following example may take a while to download:

http://www.keypress.com/sketchpad/javasketchpad/gallery/pages/sine_waver.php

A GoogleSearch on May 14, 2006 has discouraged me from seeking immediate help from SVG technology.

http://gilbane.com/gilbane_report.pl/80/SVG__The_Future_of_Web_Rendering.html

A 2002 article..."PDF and Flash are the only serious survivors here, and they both allow for more graphically sophisticated content."

April 5. 2005

I have spent some time experimenting with various color combinations and alternatives to solid colors, this has proven surprisingly difficult and no improvements have yet been discovered. I'll take a look at more flash sites for ideas. Some people may not be able to distinguish the colors used.

Sound - sometime maybe, there is a lot out there already and I am placing the visuals for complex motion of an air molecule ahead of everything else. Images of simple harmonic motion are commonplace - images of complex harmonic motion and the change from one pattern to the next are pretty much nonexistant but that is what happens when music is played. That is the nature of 'chord progression'. Some people cannot hear either but may appreciate the visual animations.

Early Goals

May 2003 - February 2005

The design of the website is important, I chose the content long ago because of its fundamental educational significance and because I was interested enough to study it for some time. When the web came along it became the fundamental means of communication for the content so, how to use the web became the study.

I have tried to address 'Conceptual Problems' that might benefit from the interactive, animated medium; if not actually solved, hopefully they have not been made worse.

I have followed the copyright requirements to the best of my ability. The law however relies on tradition and precedent (even when interpreting statutes).Such things are notably hard to pin down in cyberspace, which reinvents itself by the nanosecond. For a non-comercial website, this one should be OK.

The original idea of possible use on a PDA screen can be seen by resizing the images. I am not pursuing that goal right now; too much explanatory text has been used and I don't see how to work it into PDA formatting.

The ideal is one idea, one screenview.

I think of the string as a number continuum and all the various tunings and segmentation as denumerations thereof. I do not know how far this idea will get me or anyone else.

There is a considerable learning curve with Flash; hardly any of the animations would be done the same way again.

Top