Adobe Edge

[DaveLEWIS1973]

Hi,

Before I start my first project with Baker, may I ask, is it possible to use Adobe Edge Animate with Baker.

I see that Adobe Edge can export Jquery and Javascript file. Are these files, created by Edge, acceptable in the Baker Framework please ?

It is my plan to possibly do all of the animation for a client's book in Adobe Edge Animate, as there is a tight deadline involved.

Thank you in advance for your reply.

Best Wishes

DaveLEWIS

[folletto]

Hi Dave, there are a few people that experimented with Tumult Hype and as far as I know they achieved a good degree of success. I can't promise 100% it will work, but you can quickly test yourself by creating a dummy animation with some complex thing and see if it opens and work correctly in Baker.

It should, because Baker is just the Mobile Safari engine (UIWebView) wrapped to provide a book/magazine interaction. :)

[jhmac]

I am having problems with the edge animate. It does not seem to work for me. I am trying to make my html work with the the retina display. If I could get it to stay in portrait it would help. I have only worked with it a few hours today but it distorts in portrait for me. If you have any suggestions let me know. From what I read today it has something to do with the js it produces for the height property.

[folletto]

You can make it portrait only: for us it's just a flag in the book.json file. :) Also, check this, it might help: https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag :)

[jhmac]

yep, It see it now. I will try it, thanks for the help.

[folletto]

Hello @jhmac, did you find a solution? :)

[jhmac]

Your suggestion about the portrait only worked perfectly. Now the major hangup is the text size. This is the last hurdle, but is a big one I am finding out. The size of the text stays the same and only the div re-sizes. From what I gather the only way to fix this is pretty JS intensive. Also the transition of the edge pages are very abrupt. I also am trying it using fluid grid layouts in Dreamweaver. With this I am having trouble with certain pages flashing white after they load. Not all the pages do this so I am trying to figure out why only some do. As of now only pages with a single image and no text are flashing white after they load. I have some the pages with images and and text that are not flashing and even some pages with a single image that are not flashing. Suggestions are always welcome.
Scratch that. It is flashing on pages with text also.

[folletto]

The white flash is a know issue of UIWebView, Baker tries hard to workaround that, but if the page is "heavy" it happens... :/

[jhmac]

When you say heavy, do you mean size as in a 290k image? Also, I just tried it on in the simulator for the first time and the Book Index.html (default downloaded from baker) page is flashing. It was not doing it on my ipad. So if you are talking about image size, does this mean I can not have full page images(1536 x 2048) for the retina display? If so this puts a kink in things, I am wanting to put photo shoots in the mag.

[folletto]

It's a bug, I can't really tell. We just noticed that some kind of "weight" on the page seems triggering it. Sometimes is just a specific pattern of CSS rules, some other time big images... it's hard to tell. Only Apple can definitely fix it. :/

[jhmac]

When I create a page in edge they load differently than a normal html page. It does not flash but it does not transition in. It loads a white page with and then shows the edge page. After you view an html page it stay in the book and does not have to reload. The edge page has to load every time. I do not know if that is clear or not. I am going to try a blank html page from dreamweaver then make the page in edge.

[davsuas]

Hi, I had use Adobe Edge Animate with Baker Framework to create iPad Apps. And I can tell you that I haven't have any problem with this. The white page that u see in transitions depends of the reder mode flag in the book.jason file.

Make sure to use the best practices on html desing and use Adobe Edge to animate specific things in your pages. Adobe Edge animate permits you to use web fonts also. Even you can use SVG artwork.

Actually I have created 10 iPad applications using BakerFramework, Adobe Edge Animate, JQuery, CSS3 and until now I haven't had big troubles with this mixture

[DaveLEWIS1973]

Hi Davsuas,

Sounds great :D

Can you post the names of your apps please ?

I would be interested to see what you have produced.

Can you tell us about your workflow / pipeline please ?

Best Wishes

DaveLEWIS

[davsuas]

Hi, I have created In House apps for GlaxoSmithKline, Novartis and other Pharma Industry Corporations here in my country

[folletto]

If you're able to point out which apps are yours we might think to include them in the showcase. It might be very useful also to other to see what could be done with Baker + Edge.

Also... would be possible for you to write a tutorial? ;)

[jhmac]

@davsuas What do you mean by the reader mode flag? I am sure it is something I have to add, but I have not heard of it before. What did you add to the book.json to get it to transition the way it does normally. Also what did you do about the text not resizing for for different screen size?

[DaveLEWIS1973]

Does Jquery slow the App down ?

[DaveLEWIS1973]

May I ask, is CSS3 Animation achieved using the Canvas element Plz ?

[folletto]

Nope. Canvas is programmed through javascript. Just google for css3 animations and you'll find plenty of information. :)

[davsuas]

@jhmac The book.json file has some flags that you can enable, here is the documentation: https://github.com/Simbul/baker/wiki/Baker-rendering-modes I think you're using screenshots rendering mode thats why you see a white page between transitions. Screenshots rendering mode make html pages load every time that you access to html page

[davsuas]

@jhmac The actual Adobe Edge Animate version has very useful things. One of this is the ability to resize the layout it help you when you show your work throught mobile devices. For more information of new things in Adobe Edge Animate Preview 7 visit this page: http://labs.adobe.com/technologies/edge/

So, talking about text When I can't find fonts in web fonts galery I use a SVG version of the paragraph text. I mean, I create the artwork in illustrator and convert the text to lines after that I save this part of the artwork (text) as a SVG file and integrate all in Adobe Edge Animate.

When you have the paragraph text in SVG not matters what kind of device the html file is showing throught because its scale and shows better.

This is a nice solution when you don't permit select text. So if you what your users select text use normal html text tags.

[DaveLEWIS1973]

Thank you Folletto,

Looks like I am ready to get started :D

Is there a more I depth Tutorial about how to use Baker for building an interactive story book Plz guys ?

[folletto]

There isn't any specific to Baker: since it's HTML any documentation online works well! ;)

[thejtate]

If you are willing dive into Javascript, you could always check out http://zeptojs.com. It's pretty easy to pick up and gives you more control than Edge. It's not as quick as going into Edge and applying a few simple animations, but once you get the hang of the basics of animation it's way better imo.

Enjoy!

[DaveLEWIS1973]

Thank you Josh, I will check it out, but I do have Adobe Edge as part of the Adobe Creative Cloud already :D

DaveLEWIS

Sent from my iPhone

On 7 Feb 2013, at 20:28, Josh Tate notifications@github.com wrote:

If you are willing dive into Javascript, you could always check out http://zeptojs.com. It's pretty easy to pick up and gives you more control than Edge. It's not as quick as going into Edge and applying a few simple animations, but once you get the hang of the basics of animation it's way better imo.

Enjoy!

— Reply to this email directly or view it on GitHub.

[thejtate]

Adobe Creative Cloud is great, started using it myself recently. Way cheaper.

Also, the only thing that is bit hard to control with Zepto was timing of animations since it doesn't have any sort of delay() function plugged in. So I just used the basic setTimeout() js function to slow down my scripts from executed. :)

setTimeout(setTimeout(function() { $(".outer-bulb").animate({opacity: 1.0, translate3d: '0,10px,0'}, 400, 'ease-in')},100) );

[DaveLEWIS1973]

Hi Josh,

It is great to have my creative software always up to date :D

Thank you for the Tip.

May I ask, do you know how to pause and restart CSS3 animation with JavaScript please. I heard that the CSS3 Pause and Running may very well be deprecated.

Best Wishes

DaveLEWIS

Sent from my iPhone

On 8 Feb 2013, at 17:46, Josh Tate notifications@github.com wrote:

Adobe Creative Cloud is great, started using it myself recently. Way cheaper.

Also, the only thing that is bit hard to control with Zepto was timing of animations since it doesn't have any sort of delay() function plugged in. So I just used the basic setTimeout() js function to slow down my scripts from executed. :)

setTimeout(setTimeout(function() { $(".outer-bulb").animate({opacity: 1.0, translate3d: '0,10px,0'}, 400, 'ease-in')},100) );

— Reply to this email directly or view it on GitHub..

[DaveLEWIS1973]

May I also ask, does baker allow for News Stand Subscriptions. I was executed about Adobe Digital Editions until I saw how much creating a periodical would cost :S

Sent from my iPhone

On 8 Feb 2013, at 17:46, Josh Tate notifications@github.com wrote:

Adobe Creative Cloud is great, started using it myself recently. Way cheaper.

Also, the only thing that is bit hard to control with Zepto was timing of animations since it doesn't have any sort of delay() function plugged in. So I just used the basic setTimeout() js function to slow down my scripts from executed. :)

setTimeout(setTimeout(function() { $(".outer-bulb").animate({opacity: 1.0, translate3d: '0,10px,0'}, 400, 'ease-in')},100) );

— Reply to this email directly or view it on GitHub..

[Simbul]

does baker allow for News Stand Subscriptions

Long overdue answer: yes, Baker supports Newsstand subscriptions.

On a side note, I'll close the thread as it has seen no activity for a long time now.