Jump to content


Photo
- - - - -

Flash as HTML5?


  • Please log in to reply
9 replies to this topic

#1 Neil@creative

Neil@creative

    Dedicated Member

  • Members
  • PipPip
  • 152 posts

Posted 22 February 2015 - 10:32 PM

I have not used Adobe Flash in a while. But when I opened up my Flash 6 I noticed that it now gives an option of an HTML5 canvas. Does this mean that flash no longer creates shockwave files (.fla) and instead opts to create a javascript file that will now work on iOS devices?



#2 Nillervision

Nillervision

    All-rounder

  • Privileged
  • PipPipPipPipPip
  • 1,590 posts
  • Gender:Male
  • Location:Copenhagen, Denmark
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 22 February 2015 - 11:39 PM

You can now choose if you want to compile/export your projects as .swf  or HTML5/JS (.fla is the actual project file .swf is the compiled "movie" to be executed in the flash player). You are correct in asuming that projects exported as HTML5 can be executed on handheld devices but I'm afraid the conversion produces quit unsemantic and bloated code/markup. If you absolutely need a framework Adobe Edge probably does a better job. Personally I have not used any of these applications in years so I might be wrong.


Edited by Nillervision, 22 February 2015 - 11:40 PM.


#3 rbrtsmith

rbrtsmith

    ReferenceError

  • Privileged
  • PipPipPipPipPip
  • 4,001 posts
  • Gender:Male
  • Location:Manchester, UK
  • Experience:Nothing
  • Area of Expertise:Web Developer

Posted 23 February 2015 - 06:55 AM

It's probably best to ditch Flash alltogether now, as Niller posted, the code produced will be terrible.  These days complex animation is done with HTML5 + JS.  GASP is a very power JavaScript animation framework.  You can also animate canvas with JavaScript, all this of course will required good knowledge of JavaScript.



#4 Nillervision

Nillervision

    All-rounder

  • Privileged
  • PipPipPipPipPip
  • 1,590 posts
  • Gender:Male
  • Location:Copenhagen, Denmark
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 23 February 2015 - 09:31 AM

@OP: If you like you can have a look a this thread: http://www.webdesign...for-animations/

It's 2 years old (a lifetime in our trade) but it still contains some valuable info



#5 Jack

Jack

    NaN

  • Moderators
  • PipPipPipPipPip
  • 3,163 posts
  • Gender:Male
  • Location:Jersey Channel Islands
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 23 February 2015 - 10:32 AM

It's probably best to ditch Flash alltogether now, as Niller posted, the code produced will be terrible.  These days complex animation is done with HTML5 + JS.  GASP is a very power JavaScript animation framework.  You can also animate canvas with JavaScript, all this of course will required good knowledge of JavaScript.

 

Actionscript is very similar to Javascript, it compiles well to JS, and you can even write JS in Flash CC. So depending on the users ability with Actionscript, they may not have to dive too deep into JS to port something like an animation over. Especially if they use some kind of animation framework.



#6 DigitalWorkshop

DigitalWorkshop

    Dedicated Member

  • Members
  • PipPip
  • 128 posts
  • Gender:Male
  • Location:Stratford upon Avon
  • Experience:Intermediate
  • Area of Expertise:Designer

Posted 22 April 2015 - 12:03 PM

The problem here IMO is that hand-coding is fine for simple animation but for the more complex creative animation we used to enjoy with Flash you need a WYSiWYG editor [like ours  :)]. Try hand-coding shape tweening to any meaningful degree.

 

As regular readers will know I feel the seemingly unstoppable march of the homogenised "bootstrap-template" web design is making the internet boring (even though I use it myself). We need to rediscover the excitement we used to have from Flash highlights and that's not as easy when you hand-code stuff.



#7 Nillervision

Nillervision

    All-rounder

  • Privileged
  • PipPipPipPipPip
  • 1,590 posts
  • Gender:Male
  • Location:Copenhagen, Denmark
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 22 April 2015 - 02:16 PM

The problem here IMO is that hand-coding is fine for simple animation but for the more complex creative animation we used to enjoy with Flash you need a WYSiWYG editor [like ours  :)]. Try hand-coding shape tweening to any meaningful degree.

 

As regular readers will know I feel the seemingly unstoppable march of the homogenised "bootstrap-template" web design is making the internet boring (even though I use it myself). We need to rediscover the excitement we used to have from Flash highlights and that's not as easy when you hand-code stuff.

I share that feeling to some degree . To much coding can be very destructive for the creative process. But todays handheld devices simply requires websites to be optimized, very light and fast to execute and animation frameworks simply produces to much code.

EDIT: Also website animations is over-used on many sites. Not all websites should be "creative" (most should actually be consitent and uniform) . As a user you may be impressed by the "Wow factor" on your first visit. But when comming back and wanting to access the content quikly the same wow factor can be really anoying.


Edited by Nillervision, 22 April 2015 - 02:29 PM.


#8 rbrtsmith

rbrtsmith

    ReferenceError

  • Privileged
  • PipPipPipPipPip
  • 4,001 posts
  • Gender:Male
  • Location:Manchester, UK
  • Experience:Nothing
  • Area of Expertise:Web Developer

Posted 22 April 2015 - 09:24 PM

The problem here IMO is that hand-coding is fine for simple animation but for the more complex creative animation we used to enjoy with Flash you need a WYSiWYG editor [like ours  :)]. Try hand-coding shape tweening to any meaningful degree.

 

As regular readers will know I feel the seemingly unstoppable march of the homogenised "bootstrap-template" web design is making the internet boring (even though I use it myself). We need to rediscover the excitement we used to have from Flash highlights and that's not as easy when you hand-code stuff.

 

No you don't there are great animation libraries like GSAP where folk can create highly complex, animation sequences without a WYSIWYG editor.  I'll also bet that GSAP will massively outperform any WYSIWYG animation editor, especially on a mobile device.   It's just that now you need to have a little bit of JavaScript knowledge to know how to use it, which all professional web developers should already have.

Animating Tweens with GSAP is a breeze.


Edited by rbrtsmith, 22 April 2015 - 09:26 PM.


#9 DigitalWorkshop

DigitalWorkshop

    Dedicated Member

  • Members
  • PipPip
  • 128 posts
  • Gender:Male
  • Location:Stratford upon Avon
  • Experience:Intermediate
  • Area of Expertise:Designer

Posted 23 April 2015 - 01:17 PM

GSAP can produce some impressive results and certainly enlivens pages easily, but I'd hate to be the client paying for anything significant or original because of the time involved - unless you're just going to reuse existing effects which gets tired very quickly. It's a programming tool for animating web elements, not an animation tool. The development process is not intuitive or visual and not conducive to creativity IMO. 

 

I guess it depends on whether your coming from a scripting background or a visual background.

 

WYSIWYG editors like Creator just give you the interface to generate custom SVG and Javascript - it's really no different to a visual interface to a comprehensive jquery library. I admit our .js should be broken down so if you're not doing elearning you don't need the functions etc but deliver it in compressed form and it's not a huge overhead and most of our clients are corporates who are still desktop-heavy and it's trivial for them given the cost-effectiveness of development.



#10 rbrtsmith

rbrtsmith

    ReferenceError

  • Privileged
  • PipPipPipPipPip
  • 4,001 posts
  • Gender:Male
  • Location:Manchester, UK
  • Experience:Nothing
  • Area of Expertise:Web Developer

Posted 23 April 2015 - 01:45 PM

GSAP can produce some impressive results and certainly enlivens pages easily, but I'd hate to be the client paying for anything significant or original because of the time involved - unless you're just going to reuse existing effects which gets tired very quickly. It's a programming tool for animating web elements, not an animation tool. The development process is not intuitive or visual and not conducive to creativity IMO. 

 

I guess it depends on whether your coming from a scripting background or a visual background.

 

WYSIWYG editors like Creator just give you the interface to generate custom SVG and Javascript - it's really no different to a visual interface to a comprehensive jquery library. I admit our .js should be broken down so if you're not doing elearning you don't need the functions etc but deliver it in compressed form and it's not a huge overhead and most of our clients are corporates who are still desktop-heavy and it's trivial for them given the cost-effectiveness of development.

 

It doesn't take much longer to create an animation in GSAP.  Like I said it requires JavaScript knowledge. I have no problems tweening CSS properties with it and building out timelines.  Of course a client would prefer to have a developer who knows the language of the Web as JavaScript is commonly referred to.   WYSIWYG have their place on cheaper projects where the client cannot afford a skilled developer. I guess it could also be useful for a designer to prototype animations before passing his/her idea over to a developer, where they then would re-create that in GSAP / another animation library.  GSAP does have a very nice API.  Building this kind of thing with no library would clearly be very time consuming.

 

There's also the issue of performance, a client wants something that renders great with no jank in as many devices as possible, I have yet to see a WISYWIG come close to GSAP / Velocity.js especially when animations are viewed on low powered devices.

This is a good post that goes into more detail about animation performance https://css-tricks.c...ues-benchmarks/

Then there's a big problem with browser inconsistencies with transform-origin when animating SVG.  GSAP solves that.  The most difficult thing to code from scratch I believe is easing, they have built a tool to view easings in real-time to ease' the pain.


Edited by rbrtsmith, 23 April 2015 - 01:48 PM.





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users