CreateJS/EaselJS web page (not game) consisting of several pages - javascript

I have coded an existing (pure) HTML5 Canvas web page consisting of several pages, 'buttons' and 'hotspots'. It is pure canvas javascript code.
Reason why I put 'buttons' and 'hotspots' in quotes is because I have actually implemented those in pure javascript from scratch without using any framework, just created 'classes' for buttons, hotspots, mouse event detection, etc.
These elements are approaching end of its functionality, so I need better elements and especially a scrollbar which will respond well to mouse scrolling.
As web site is redesigned and a lot more new and complex requests are needed to be implemented, it is no more feasible to continue coding in javascript as such, i.e. I need a serious graphical framework.
Between KineticJS and CreateJS/EaselJS I chose the latter.
Now, since this is not an one-page game, but several page long website with somewhat complex navigation relation between pages, can someone advise me what approach should I take?
Containers, just 'pages' with 'buttons' on it, what should be taken for a button, how to handle different pages and machine states in CreateJS/EaselJS?
Did I made the right choice? Is this easier in KineticJS?
Can you share an experience and/or advice, please?

Since EaselJS is "just" a graphical framework, there is no native support for states. However compared to KineticJS I wouldn't say that there is a huge difference for you purpose (someone correct me if I'm wrong here)
I'd use the same approach of using Containers as Pages. For buttons I'd use the ButtonHelper-class: http://www.createjs.com/Docs/EaselJS/classes/ButtonHelper.html
You probably knew most of that already, but I thought I'd still share it, maybe it does help you.

Related

Are complex twin js animations faster in two divs or two iframes?

I have a complex javascript animation that is both GPU and CPU intensiive. It was originally a single page, but I needed twin views, so to get a working model quick, I made a wrapper that loads it into two iframes. This works really well.
The question is: Can I get better performance (especially on mobile) if I port it over to two div containers instead?
My understanding is that iframes are generally running on seperate threads, but I'm not sure if this applies only to sandboxed iframes (these are not sandboxed). The scripts running in the two views are almost, but not quite identical. Concievably I could refactor this but will take time, so I'd like to know if anyone has experience with something similar.
For the record, the two views are also overlaid and mixed with backgrounds, and each other using css blend-modes. There is a lot going on with both js and css animations.
Anyway, the kids want me to play. Hopefully I explained well, but I'll check back later to clear things up if needed.
Sadly, as far as i know and experienced, each page it's a single thread, regardless for iframes.
The HTML5 standard implementation of multithread is trough Web Workers that's pritty well supported in its basic features by all modern browser and IE >= 10

How to best design (code wise) a highly interactive web page in JS

Let me start by giving a bit of background on me so you know what my status is, I'm a experienced web developer, have knowledge of design patterns, and come from a background of performance and optimizations.
However, most of my background is server-side down to the server OS and it's config. I code mainly in PHP and Python. I do know HTML, JS and CSS to a certain level - far from calling myself a front-end developer.
My question is this; I'm currently working on a small personal project in which i have a single web page (the main part of it anyway) which has basically a map (Google map), a side bar (show relevant data on the map) and a top bar with controls (to effect what's visible on the map+side bar).
This page is highly "interactive" and every action, whether on the map, the sidebar or the controls effects any number of other elements. for example, clicking somewhere on a map, might highlight a sidebar item, and vise versa. (it could be that for every action there is a opposite action, or not... 1 way actions/2 way actions)
What are the "best practices" or best design patterns to build the JS library to power these interactions? I'm trying to avoid repeating myself in the code and also making it easy to maintain and add "actions/interaction" in the future.
I was thinking of building a PageManager object (of sorts) which has all these "events" then use JQuery to add these custom events thus enabling the correlation of 2 way actions...
I would like to know how you would go about designing the main JS and any other tips you client-side guru's might have :)
Good day and thanks for all the fish .. i mean tips..
Ken.
Microsoft recently created a patterns & practices project called Project Silk: Client-Side Web Development for Modern Browsers. Its targeted at javascript and jQuery developers.

Suitable tool for simple interactive web application

I want to create not complex interactive web application. It has some pinboard and user can create many simple objects on this pinboard (e.g. many small circles). After this user can:
move these objects
delete some of them or create new ones
make multiple selection and move/rotate elements of selected group
place members of the selected group in some special order (grid, line, circle, etc)
Zoom in/out pinboard
I think that I can use Flash/Flex or JavaScript/SVG/VML for this purpose. Disadvantage of Flash is that user must have plugin. Minus of JS/SVG/VML is that there aren't such powerfull developing tools as in Flash case, but if we use some library (like http://raphaeljs.com/) application won't require flash plug-in.
I'm finding right tool for this aim. So give me some recommendations, please. Thanks in advance.
I believe that you can achieve your goals without Flash using HTML(5), JavaScript and not the least the Canvas element present in HTML5.
Bottomline is, unless you today require your application to animate a lot of objects with framerates approaching three digits, the above should suffice fine and will also pair you with a prospective Web development platform. I am often sceptical of the new stuff, but HTML5 and Canvas are fairly standardized, patent-free and are being actively adopted.
The only benefit of going with Flash that I can think of is being backed by a rich API that does 2D as well as 3D, and the fact that you can later port your ActionScript code to say, JavaScript when you finally decide to go with HTML+JavaScript instead. Aside from having to perhaps rewrite part of your drawing stack, your ActionScript code will require minimal (syntactic mostly) changes.
I would still advise you to go with my first suggestion, unless you need live (camera) video publishing, 3D, sound editing and few features not available easily outside Flash Player. Which I don't think you will need.
You might want to have a look at existing similar projects, such as SVG Edit (MIT license).

jbgallery vs supersized js vs flash

I have been asked to create a website where the homepage consists of a fading image slideshow and a navigation bar at the bottom of the page. The client wants the image to cover the entire screen with the exception of this nav bar with a pause/play button at the top right of the screen.
I have built this using the supersized jquery function and made a few tweaks, but there seems to be performance issues with the fading effect (its very static and transitions dont appear to flow very smoothly).
Before I get stuck into the remainder of the site, I want some advice from the seasoned experts out there on using this function, or the jbgallery jquery function I have recently come across. Alternatively what is the general consensus on building the whole site in flash.
I haved used flash sparingly before due to CMS issues (which I have now worked around) and ipad display problems etc so would need to do a bit of learning to go down this route but am more than happy to adopt the approach if people really think it is worthwhile. My experience to date has consisted of including swf animations and components within php pages populated via mysql using xml files.
Looking forward to any and all advice (not simply for this project but future ones aswell!).
Thanks
JD
I'm actually trying to work out the exact same problem right now. I don't have a perfect/easy solution yet, but here's something that might work:
http://playground.benbarnett.net/jquery-animate-enhanced/
It's a jQuery plugin that takes your standard animate() calls (and a few others) and uses CSS3 transforms when possible. This will theoretically improve the frame rate of transitions since CSS3 effects perform better in modern browsers. I have smaller demos working, but am having trouble getting a lower frame rate for full-browser images.

How to create a flip book/page?

I need to create a flip book/page application. I have seen flash created flip page, can it be done in any other languages, e.g. jquery or javascript? And also, what are some concepts that I am required to have in mind/knowledge on for creating a flip book?
Thanks.
Not quite sure what you mean by "flip book", can you elaborate on this?
If you mean just a digital book, that you can turn the pages of, then I would surgest looking into this AS3 page-flip engine. And here is a list of good (mostly commercial) examples
EDIT* - Not to sure why you would want to create this from scratch, as there are a ton of well made Page-flip libraries out there that are really nicely build, and are either free, or really cheep. Most of the time they are customizable too.
That said, I think they are probably all using a combination of the following:
Preloaded pages - movieclip with either an image or
other graphics preloaded into it
Gradients - to give the illusion of a 3d page that is "turning"
Trigonometry - for dragging effect. To angle the page towards mouse
Masks - to get the page folding effect, when the user start to drag the page, the next page is loaded over the top. Both these page have been masked off based on the users mouse position.
Also the Page-flip engine I linked to above (MegaZine), is open-source. So if you where really keen, then you could dive into there source code and take a look for yourself.
Hope that helps somewhat.
If you need something simple, and don't want to delve into codes, try out pressmo: http://pressmo.com/example3/1
It works faster on slower computers than most of other similar services and what's important you keep your flipbook on your own computer/web server (as online flash or offline executable).
To create a flip page you have to upload your content as a PDF file (which can be easily obtained from Word or Open Office).
Usually a good solution for flipbooks is to keep the number of your pages even, otherside the user will not have the possibility to turn the last site. All pages should be similar size also.
You can use Flex Application
Like this right: Sample Book
Code is here: Source Code

Categories