FAQ

What browsers does Purple support?

Purple supports webkit-compatible browsers, such as Safari browser, mobile Safari or Google Chrome browser. We are using newest CSS extensions like keyframes, which are not available on every browser. We want to deliver smooth animations and the best way to accomplish this is to use -webkit CSS extensions. Firefox 5 will follow soon, since it supports keyframes now.

Our player used to play Purple animations is BSD-licensed and available on github.

Will Internet Explorer ever be supported?

Internet Explorer 10 supports keyframe animations since Platform Preview 3 and we are currently evaluating it.

What’s the common workflow or use case for Purple?

Casual user: Open Purple, create a new animation, drag some images and/or movies from the Finder tool or the Media Library onto the stage and animate then. Preview with Purple Moon and publish e.g. to Dropbox.

Pro: Create and collect your assets in Adobe® Photoshop® software and arrange them roughly. Every image layer will result in a corresponding layer in your Purple animation. Use either our Export2Purple-Script to export your image if it contains Text-Layers, Effects, etc. or flatten/rasterize every layer and drag the PSD file onto Purple. Animate your Clips. Preview with Purple Moon or the browser (Purple comes with an internal HTTP-Server).

Developer: You might want to use Purple to create a tutorial for your iOS App. Simply create one with Purple, copy the exported HTML contents into your app bundle and display the content in an UIWebView. If you need periodic content updates or packaging (e.g. for a magazine-style app), you might find AFCache useful, an open-sourced iOS client cache with packaging option.

What image formats does Purple support?

Purple supports images in JPG, PNG, GIF and TIF format and can also handle PSD images.

How can I open files created with Adobe® Photoshop® software?

Simply drag the PSD file onto the Purple icon in the Dock. Please note that not all PSD files can be read. Although we do our best to import PSD files, there are some situations, when Purple cannot parse them. For example PSD files with text layers, complex effects or special layers cannot be imported via drag. In this case follow our instructions for PSD import with a script. The script renders every layer, combines groups and finally opens Purple. This might even fit better into some workflows than the direct import.

Which Adobe® Photoshop® software versions are supported?

We’ve tested our scripts and PSD file import with Photoshop CS3, CS4, CS5 and CS5.1. The script works best with files created with Photoshop CS5 software. Photoshop CS3 works, but requires an additional manual task. Please have a look at our image import documentation.

Does Purple support text editing?

Yes. Currently Purple supports standard fonts which are available on iOS and Desktop. You can animate the foreground and the background color as well as the text frame (bounding box) and the font size. More typographic enhancements will follow in the upcoming releases.
Animating fonts is one of the most critical tasks, since several visual rules apply to texts when dealing with animations. We want to achieve best output quality and simply altering the font size might sometimes not satisfy your needs. This is due to the browser’s rendering techniques, which we have no influence on. In many cases, bitmaps as text (made with an image editor like Photoshop) are a legitimate alternative. See our Typo only animation for an example.

How do I preview my animations on an iPad?

The easiest and most comfortable way is Purple Moon, our dedicated preview client for Purple. Purple Moon simply lets you browse the network for a running Purple instance and shows the last animation you previewed. Of course, you can also use the Safari browser and point your browser to http://YOUR_MACHINE:9080, where YOUR_MACHINE is the address or host name of the machine Purple is running on, e.g. marcs-macbook-pro.local or something like that. PORT is the port number Purple’s internal web server is running on. This is an arbitrary number by default (You’ll see it in Safari when clicking the Preview-Button in Purple) but may be configured in Purple’s preferences.

How do I preview my animations on the Android device or in the browser?

See above. Point your browser to http://YOUR_MACHINE:PORT.

My animations look broken, choppy or don’t work on my phone, tablet or Android OS version

Webkit on Android has several bugs. Some have even been introduced beginning with 2.2 and are still not fixed, for example:

http://code.google.com/p/android/issues/detail?id=12451

You can try to circumvent some of them by de-checking the “Use 3D transforms” checkmark in Purple’s preference panel. For other bugs there are no workarounds.
Due to fragmentation in the Android market it’s not possible for us to guarantee that every single animation will run on every single phone or OS version. We have several test devices with several OS versions and try to figure out how to make it work, but it may take some time or is even impossible, depending on the bug.

What about native animations?

Purple has its own data model, which is independent of the output format. This means that Purple is able to support other formats than HTML5 too. We will release a native iOS client library soon, which can be used to play Purple animations. An XML file describing the animation is directly converted into CoreAnimation instructions, which enables you to use Purple animations without a UIWebView. This might by interesting especially for games or performance-critical applications.

More information coming soon, stay tuned.

Why isn’t Purple supporting all CSS properties?

As mentioned above, Purple has its own data and representation model, which is independent of the output format. Our goal is to reach best performance and smooth animations. Right now, we are focusing on the iPad and we will support our own animation framework because users don’t care if the underlying technology is web-based. They want a flawless user experience.
Some features that are dead-simple to do in web views have to be implemented from scratch in our animation framework. The price to pay for performance and flexibility is that Purple is not supporting all features from day one.

Can video (.mov) files be converted to HTML5 animation with Purple for iPad use?

It depends on the file. The MOV file format is a container format and may contain references to other movies like for different bandwidths. These movies are called “reference movies” and are not supported by Purple (see link below).
If you have a .mov file suitable for web in terms of size and bitrate you may import it into Purple. .m4v or .mp4 files will just work fine.
Movies will be displayed on the iPad using the HTML5 <video> tag. Please be aware, that auto play is not possible on the iPad. This is a restriction made by Apple and cannot be bypassed by Purple or any other tool creating HTML5. The user will have to press the play button to start the video.

More information on video encoding for iOS: iOS Developer Library – Creating Video

How can I export Purple files to iBooks Author?

We have built an export plugin for iBooks Author. You can download it here: Export Purple animations for iBooks Author