power point to html 5 - html

I'm looking for a tool/solution that would allow me to convert a power point presentation into a fully html5 website. I've seen solutions like iSpring and html5point which just make each slide as an img or iSpring whihc is good for simple slides. In my case the slides contain graphics and shapes (no animation or video though). Any adivce ?

I don't know of any of the solutions you mention, but the last time I had to do this I found it easiest to export (Save As ...) the .ppt as a single webpage and then copy and paste chunks of it into a template I had created previously.

Related

3D Animation out of html files using Plotly

I am using Plotly with Python 3.11 in order to create some html files that contain a 3D animation of a surface and a set of points.
Since it is important to me to see the geometric relation between this set of points and the surface, having that picture as an html file instead of a static format is of great value to me, because I can move around the image to see better how those points relate to the surface.
Now, those points I was talking about are particles in motion: they have a trajectory, therefore I can capture an html of the situation at every time, but as in separate html files. In that sense, I would find extremely useful to create an animation out of those html, so that I can decide when to stop the motion to see the position in case something interesting happens.
Does anyone know if such a thing would be possible to do? I have been searching around and the most information that I get is for "static" animations, meaning that I cannot "move" in a given frame.
Thank you in advance!!

How to directly save HTML/CSS animations to a video file (AVI)?

Without a screen recorder, Is it possible to directly export, render, or save HTML CSS animations to a video file? I'm also aware SVG within a html document could also be a part of such a process.
I tried searching online for a solution, but I only get "Export After Effects to CSS...". Seems like there's no answer. Surely if your browser can render it, there must be some code that'll be able to export it..?
Ideally, id write some divs and some css animation code, see how it looks on Chrome, then maybe click a button and export little clips of what the browser rendered. Could be an extension, or anything.
Many thanks.
There's a good extension where you can create a screencasting from a website and export it to AVI, on https://screencast-o-matic.com/tutorial/save-as-a-video-file
The thing is that you won't be able to achieve that without recording your screen.
I'm assuming you can copy the code and pass it to an expert in video edition and they will create an emulation from the animation you want, they may do it in Adobe After Effects or a different video software, but that's like the expensive solution.
Fiverr might have some freelancers that can do that.

How to print two Google Charts in one PNG image?

I'm writting a code which shows two different Google Charts in one XHTML page. I need to put a button that export both graphs to the same PNG file, one above the other as they are shown.
To export one single chart is easy and is already done; Google documentation teaches that in here with only minor adjustments needed to show the button (done). The question now is how do I pick the information of both charts and print in the same PNG file.
I've considered a solution similar to the one shown in this link: pick the underlying canvas behind both images and tell to print that instead of the graphs per se. Problem is I have no idea how to do that and if that is even possible, even though a thread here in SO suggested something similar, suggesting it's possible, without going into the details on how to do it.
So how could I do that? I'm completely new to this web programming, so I'd be grateful for complete answers.

AS3 replace string/text with image characters

i am developing the code for a simple game in AS3 and i have all the graphic assets made by a designer.
He wants all the textual messages (i.e. win, lose, lives, etc.) to be done exactly as in the original photoshop drawing, they have lots of visual fx on them.
Since these messages inside the game are dynamic, I tried to use normal textfields and replicate the visual fx with Flash filters, but the result is not even comparable.
I think i could try to export from photoshop a spritesheet with the all the image characters, or the single image characters one by one, and replace my old textfields with sprites/movieclips in which i would load the specific image characters based on the string i need to show to the enduser, but i don't know precisely how to do it.
Does anyone have some hints on how to achieve this result? Better to use a separate class and image library? I googled online hoping to find some class or method alike to customize a little for my needs, but unfortunately i haven't found anything!
You could add all the graphics to the library exporting them with each name.
Than call them when needed creating a MC. If useful, you could store the names in an array and use it to simplify your script (it depends on usage)
Ok, after some more research, i found out my main problem in not finding answers to my problem was the terms of research i was using.
I was erroneously looking for "AS3 string replace with images" or "text replace with images in Flash", while the correct question was: "how to use a BITMAP FONT in AS3".
I was sure someone else had to do what i'm trying to do (like in old games where texts were all image sprites) but i didn't know how to find it!
So, this is the solution i found, i still have to refine the workflow but it's a good starting point:
Create a custom Bitmamp font using the SHOEBOX tool in conjunction with photoshop, where you will be able to apply all the raster fx you want (here's the tutorial: http://renderhjs.net/shoebox/bitmapFont.htm)
You will obtain a .fnt file (descriptor) and a .png image (font characters atlas)
You will need to flip the png image vertically: apparently, a lot of bitmap text engines work with flipped characters, and i found this one to be working like this as well
Once you have these files, use the BMFontRenderer AS3 class to embed your bitmap font into an AS3 project of your choice (tutorial here: http://blog.bengarney.com/2011/12/07/fast-bitmap-fonts-in-flash/)
I hope it will be useful for others who may need to replace standard text in Flash with font images.

How was this HTML5 screencast animation created?

I visited http://www.sublimetext.com today and was intrigued by the screencast animation the website has on its opening page. It looks like a mashup between video and slideshow. I've seen them at other modern websites as well, but I assumed it was some HTML5 video tag trickery. But when I looked at the source of sublimetext webpage, I was confused.
The animation on this page is created on a HTML5 2D canvas with plain javascript using base PNG images. Each slide is loaded from a PNG file. The animation is achieved by modifying only handful of pixels from the image. The animation javascript applied these changes on the original PNGs at regular intervals. You will find these deltas stored in *_timeline variables in the script.
My question is what tool can generate such deltas? How can one record one's desktop screen and create such base PNG + animation deltas?
I like this approach because it seems most efficient format for screencasts, where changes in consecutive frames are minimal.
Update 1 I know there are techniques to achieve this using GIF (Check https://askubuntu.com/q/107726), but what cool tool can generate this javascript code that can convert PNG deltas to animation. Googling hasn't helped me find it out.
Update 2 The author of the screencast (and sublimetext) replied to my question on sublimetext forum. He did it using a custom python script and plans to write a blog post about it sometime http://www.sublimetext.com/forum/viewtopic.php?p=34252#p34252
Jon Skinner, the creator of Sublime Text wrote about the process on his website
He also published the encoder he wrote on GitHub
look at one of their images and you'll understand how it works:
http://www.sublimetext.com/anim/command_palette_packed.png
they just cutting and inserting appropriate portions of image into the appropriate positions of canvas element, but if your question is how to make such image, I don't have an idea.
I guess with some software, not by hand, but I don't know such soft...