InDesign to HTML5 Prelease Build 6 Features

Justin | HTML5,InDesign | Tuesday, October 23rd, 2012

Update (12/12/12): The product, now called in5 is now publicly available:
http://ajarproductions.com/pages/products/in5/

We’ve added several new features in the prerelease versions of the InDesign->HTML5 exporter since the build 4 preview. Here’s a brief list of features that have been built since then.

Build 5 Additions

Build 5 included the following features:

  • Video embedding. (MP4) Videos within the InDesign layout are now included with the export. The exporter automatically searches for .ogv and .webm videos with the same name and folder as the .mp4 video and includes them in the exported source files to ensure compatibility across browsers. If the browser does not support the HTML5 <video> tag, a Flash video player will be displayed as a fallback. FLV and and F4V videos are also supported, but will only be displayed with a Flash video player.
  • Flash embedding. Any SWF files in the InDesign layout are now be exported and included in the HTML. If you choose a poster image, it will be displayed when the Flash Player is not available. This way, Flash can be used to progressively enhance images by adding animations or demonstrations.
  • Advanced master page layering. Typically master page items are merged into the background of a page. If you put master page items in the top layer, they will be exported above other page items.

Build 6 Additions

Build 6 now has a user interface with export options.

Selecting a Page Format currently allows you to display your content using a horizontal slider (the default), a vertical slider, or a fade in transition. You can also enable/disable the default navigation arrows (if you’d like to use your own custom navigation, as shown in the build 4 preview) and the swipe navigation. All options are then retained with the document for future exports.

Now that the framework for the interface is built, I can continue adding options to it fairly quickly.

More Information

For anyone who wasn’t able to back this project before it closed, our mailing list is the best way to find out exactly when ID->HTML5 is released.

InDesign to HTML5 Video Preview

Justin | HTML5,InDesign,software | Tuesday, October 9th, 2012

Update (12/12/12): The product, now called in5 is now publicly available:
http://ajarproductions.com/pages/products/in5/

Our InDesign to HTML5 prerelease is progressing nicely. I put a video preview together so that everyone outside the prerelease could see some of the features that we already have in place.

For anyone who wasn’t able to back this project before it closed, our mailing list is the best way to find out exactly when ID->HTML5 is released.

Update (10/23/2012): Build 5 & 6 features covered in next post.

Quirky Flash TextField Fix

Justin | ActionScript,Animate/Flash | Friday, August 24th, 2012

I just encountered an issue with (classic) dynamic and input TextFields in Flash with ActionScript 3. I was able to resolve it, but couldn’t find the solution online, so I’m posting mine in case anyone else is searching for an answer to this problem.

The Problem: The baseline of the TextFields (with an embedded font) is shifted up for some reason, but there doesn’t seem to be a way to control it with styling. In some cases, when capital letters are typed in or assigned to the TextField, the top of the letters are cropped off by the upper border of the TextField.

The Solution: Trick Flash into rendering the TextFields slightly differently. Setting the rotation to .01 worked pretty well, but shifted the first letter in the field upward in some cases. Then I thought cacheAsBitmap might work…no go. I finally settled on assigning the scaleY of the TextField to 1.01, which works perfectly and doesn’t noticeably alter the design.

InDesign to HTML5 Update #4

Justin | design,HTML5,InDesign | Monday, August 13th, 2012

196 backers. 190% funded. The project hit Stretch Goal #1 last week and kept on going, thanks in large part to coverage in Creative Pro.

Down to the wire now. 2 days left before the Kickstarter project closes.

Update (12/12/12): The product, now called in5 is now publicly available:
http://ajarproductions.com/pages/products/in5/

Web App Awesomeness

Justin | design,HTML5,iOS | Tuesday, August 7th, 2012

For the last year or so, I’ve been looking for ways to create content that will be viewable across devices. At Pearson, the entire sales force is on iPads. To date, there hasn’t been a good HTML5 tool for designers. We’ve been looking at developing in Flash Pro, packaging for iOS, and exporting a SWF for the web. An Apple Enterprise Developer license would allow us to distribute internally without going through the app store (which is very slow and approval is not guaranteed). This has proven cheaper than many other custom development options, but still more expensive than our clients can afford in many cases.

Additionally, I’ve been working on a Responsive Design course for Lynda.com, as well as looking at solutions for our upcoming InDesign->HTML5 exporter.

I was delighted to find that Chris Converse of Cōdify Design Studio, has done a wonderful job documenting a solution that marries a web site with a mobile app in his Create an iPad Web App course. His course shows how you can detect whether a user is on an iPad, and whether the user is running from the web or as a web app. If the user is running your site on the web, you can prompt them with instructions (2-clicks) to install the app to their home screen. Once on the home screen, your site work very much like a standard iPad app. No app store approval required, and no annual developer license fee!

You can find more info on Apple Web Apps and Android Web Apps, and see more iPad examples from Chris.

There’s still the issue of no HTML5 design tool, but we hope InDesign->HTML5 will be a step forward for designers and we’re definitely going to work toward including web app functionality into InDesign->HTML5.

Update: The InDesign to HTML5 tool is now known as in5, and it supports exporting for iPad, iPhone, and Android Web Apps.

Page 20 of 49« First...10...1819202122...3040...Last »