Category: Video

Flash is Dead. Long Live Animate

Adobe Animate CC Logo

Flash has had a few hard years. HTML5 whupped its ass. So it’s going away.

Sort of.

In its place, Adobe will give us Animate CC, which loses the loser of a name but retains much of the function. There will be added functions, as well. Here’s Adobe’s announcement of the change.

To summarize the changes, here’s how Adobe describes what the new software will do:

  • Drawing, illustration and authoring
    • Vector art brushes – Modify the path of a stroke after it’s been drawn, and scale them to any resolution without losing quality. You can also make custom brushes and import brushes created with Adobe Capture CC.
    • 360° rotatable canvas – Rotate the canvas on any pivot point as you draw to get the perfect angle and strokes. You can even use this feature with a Wacom Cintiq!
    • Improved pencils and brushes – Draw smooth, precise vector outlines along a curve and get faster live previews.
    • Easier audio syncing – Control audio looping directly on the timeline, without having to code.
    • Faster color changing – Naming tagged colors lets you change one color and have it automatically update your entire project.
    • Colored onion skinning – Easily orchestrate complex animations now that adjacent frames can have different color and alpha values.
  • CreativeSync integration
    • Adobe Stock – Browse and license millions of high-quality photos, illustrations and vector graphics directly in Animate CC. You can even add life to static content by adding animations to them.
    • Creative Cloud Libraries – Access colors, vector graphics and brushes directly as you work.
  • Output capabilities
    • Multiplatform support: HTML5 Canvas, WebGL, Flash (SWF), AIR, video, and custom platforms (such as SVG) via extensions.
    • 4K+ video export – Export videos with custom resolutions for the latest Ultra HD and Hi-DPI displays.
    • Custom resolution export – Revitalize older content by resizing and optimizing them for any resolution, such as Ultra HD and Hi-DPI displays.
    • .OAM support – Export your project as an .OAM file for easy importing to Adobe Muse, InDesign, DPS and Dreamweaver.

The new Adobe Animate CC will be released in January 2016.

HTML5 Video in Dreamweaver CC

I saw a nice post at Overdigital called HTML5 Video Guide – All You Need to Know for 2014. It contains information about current codecs, streaming, mobiles and more.

As I was reading it, I realized I hadn’t looked at Dreamweaver CC to see how it handled the video element. Dreamweaver 5.5, which is what I had before CC, had no help at all with HTML5 video element insertion. You could do it in Code View, of course, but no WYSIWYG help.

But many things in Dreamweaver have changed in CC. I took a look.

There’s now an HTML5 Video command in the Insert menu. Once you have a placeholder for the video element on the document page, the Properties Panel gives you all the options you need to manage your video in Document View.

Dreamweaver property panel for video element
Dreamweaver property panel for video element

The Properties panel includes places to add alt sources in different codecs, specify the poster image, the Flash fallback file, fallback text and more.

I’m happy to see that Adobe has given Dreamweaver users such an easy tool for using HTML5 video. This can only help with the adoption of the video element across many sites.

Microformats with Tantek Çelik (Video)

Mozilla’s Tantek Çelik discusses how new HTML5 elements and microformats offer a simple way to represent web data without additional URLs, file formats, or callbacks. Microformats2 and HTML5 improvements bring better accessibility, simpler markup, improved semantics, and a direct mapping to JSON APIs for data consumers.

Tantek’s slides are here: http://tantek.com/presentations/2013/07/microformats2/

Useful links: UX Video, remote control, Instagram video, mobile #fails

How to Fail at UX in 3 Steps is a very short video, but it makes strong points.

Where will this lead? Microsoft shows off a wall of 200 Windows Phones you can control remotely.

In case you’re already deeply committed to Instagram’s new video service, here’s How to Embed Instagram Video on Your Website.

Mobile Web Problems and How to Avoid Them is a series of problems collected by Brad Frost and Jen Simmons over the last few months. You see screen shots of the problem and get tips on how to avoid the errors.

Flexbox Tutorials from Web Designer Depot (Video)

I mentioned the first of these videos when it was first published at Web Designer Depot. The second one has come out now and I wanted share them both here, rather than just adding them as useful links. They are good tutorials and I think the two of them together would make a nice classroom experience and introduction to flexbox.

I’ll repeat my note about the vendor prefixes, since this technique doesn’t work in all browsers yet. Note that the order of the properties they use should put the actual property last after the vendor prefixes are listed. Like this:

display: -webkit-flex;
display: -moz-flex;
display: flex;

If I were using this in a classroom exercise, I would couple it with less generic containers for the various parts of the content – the tutorials use divs for everything. HTML5 sectioning elements with ARIA landmark roles would be a good replacement for the divs.

Useful Links: Gender equity, flippa a site, Vine

The brilliant Lauren Bacon wrote a list of fantastic resources to explain What Men (and Everyone, Really) Can Do To Support Gender Equity in Tech. This includes help for conference organizers, employers, managers, team leaders, investors and just about anyone. I support what Sheryl Sandberg said to women in Lean In, but it has to be a systemic effort for things to change.

Want to buy or sell a web site? Look at Flippa.com. I learned about this site from my buddy in New Zealand, Miraz Jordan, who is selling her awesome site Mac Tips. So much good content on Mac Tips, and now someone can buy the whole site.

Vine Is the Show, and Vine Records the Show. I wrote about Vine yesterday on BlogHer and explained how disruptive I think this new six-second video app that works through Twitter has been in just 4 months. What are your thoughts on Vine?