I have recently visited http://www.sublimetext.com and on their home page there is a flash like animation to represent the features of their editor. I wanted to know if it was a loop of images? or gif or a small .mp4 video. Can anyone give me a basic understanding how I could replicate that sort of functionality. Thanks!
There's an article on how that page was made here, along with a link to the "encoder".
Related
I have this task to make an iframe of a presentation appear on an click. then you can control that presentation, like the page you want or go forward and backward.
The problem is I can't use the cloud solutions, because the data should be on premises.
I've thought about converting it to a video, it would be easier to control it and also to keep the animations.
I've also thought about converting it to a pdf file and then show the slides, like slideshare does in this Example.
Is there anyway I can use the ppt directly or even convert it to another format that would be optimal and user friendly, if so, how? is there any APIs or Javascript libraries? what would you recommend?
So i've found a solution of this, i want to share it with you.
If you need to present a ppt-like presentation on web without using the cloud solutions.
The first one is used to keep animation of the presentation:
I converted the ppt to a video , and then used Video.js library that enables you full control over the video.
I've desactivated the control of the video and made my own controls with Html and css. GoForward , Backwards or pause or play or restart the presentation.
i was able to pick and to know the slide i'm on and how much time in every slide by dividing the full time of the video by the number of slides i have in it. (if we suppose they have equal time).
The Second one is used for better quality but no animation: by converting the PPT to PDF.
I want to know the process taken to make menu page with a 3d logo like on this website: activetheory.net
Here's the screenshot of the menu page:
And also how the logo is moving according to the pointer location.
There are several ways to accomplish that effect, or similar to it: HTML5, JavaScript or Adobe Flash, to mention a few.
I believe that in the case of that page in specific, JavaScript was utilized.
You might want start here: https://www.w3schools.com/js/js_htmldom_animate.asp
Once you master that, and basic JavaScript in general, you can start looking into Unity (https://unity3d.com)
so I was browsing through this page: http://360langstrasse.sf.tv/
It basically is a Javascript-Street View, but only allowing one direction. Therefore its kinda like playing a movie.
When moving fast I notived that the images are grainy/pixelated, the same way as when browsing through Facebook.
I was wondering how to implement this?
I tried with sending small base64 encoded images in the markup, and then draw it on a canvas until the 'real' image was loaded.
This worked fine, but left me thinking if this would indeed increase performance, or do sites like facebook do it differently?
Thanks in advance for any help.
Regards Jens
Edit: Or do they only display the images differently? Have another render process than usual?
As I don't see any small images beeing loaded?
Edit 2: The below mentionewd option to load small images first is descriped nicely here: http://www.phpied.com/picassa-progressive-image-rendering/
But basically it is pretty simple.
I suppose caching (having in-page) bad-resolution images and fetching better is a real way to accomplish this.
The other way would be linking to small images in a normal way, and fetching bigger with JS - small images should load really fast, or you can subscribe to their load event (tricky in IE) and show the page (remove some overlay) once they are loaded.
BTW, instead of using canvas you can put base64 directly into src
<img src="data:image/png;base64,...
The answer is Progressive JPEG's!
One create such with imagemagick for example. This way the browser renders progressively until aborted or completed. Those images may be bigger than normal images, but not always.
Furthermore they provide the ability to be seen before completely downloaded.
Thanks for the help!
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
Has anyone tried recreating the page flip effect with images like you commonly see in Adobe Flash with JavaScript and HTML 5's canvas tag?
Are there any frameworks or JQuery plug-ins that do this type of effect?
The page flip in Flash allows you to grab a corner of the simulated book page and flip the page like you would flip a real book's page.
I really want to learn how to do this with JavaScript and HTML 5's canvas tag, but not sure where to start nor what formulas would be necessary.
Example page flip in flash
You might have a look at another (nice one) implementation of HTML5-based page flipper: http://jpageflipper.codeplex.com/
It's really nice and it's implemented as a jQuery plugin.
You can try jFlip, it's a jQuery Plugin, It's not IE-compliant but I guess it's not a problem for you since you are asking for HTML5.
This one is a jquery plugin and pretty nifty
http://www.turnjs.com/#home
see this http://www.20thingsilearned.com/home
Here is an HTML5 Page flip App that I built using HTML5's Canvas Element & jQuery. It's called RectoVerso.
I also ran across this one: http://romancortes.com/ficheros/page-flip.html
Which is done with only CSS3.
There is a clear and informative case study about creating your own page flip effect based on the one in the 20 Things I Learned About Browsers and the Web book that Narendrakumar linked to. It’s a great implementation to imitate, the case study is clear with relevant code samples, and it was written by a senior interactive developer for Fi, the company who developed the book.
http://js1k.com/2010-first/demo/441
As compact as possible :D
http://www.romancortes.com/blog/pure-css3-page-flip-effect/
This is better done with SVG's <foreignObject> element and SVG transforms. This blog post by Mark Finkle has some info on rotating stuff as you would need to do in a "page flip/turn" effect. As far as I know, only Gecko 1.9+ and WebKit support this.