If you know any good starting point to learn how to create such effect using Adobe Flash for an iPhone app, or even an Air app, it'd be of much help.
Specifically, I want it not to save the overlay only show it while the user is taking the image from the camera.
Here is a great link to the camera class that should get you started.
http://help.adobe.com/en_US/as3/dev/WSfffb011ac560372f3fa68e8912e3ab6b8cb-8000.html
You can then add most any objects on top of the video/camera object for the transparent look you are going for.
Related
I'm trying to make my webpage more interactive by making a small town-like map, with different buildings that are clickable and lead to different pages on my site, but I'm having a lot of difficulty animating the webpage with just HTML/JS and also making it stay the same even after resizing the window.
This is my test site right now, for clarity: https://people.ucsc.edu/~anlin/test#
(I am currently just switching between a png of the map and a gif of the buildings moving when the mouse is hovering)
How can I accomplish this, and should I be using something other than plain html/js to do this?
Thanks!
Probably svg would help you out. You can do awesome interactive stuff with svg. Meanwhile, you can also use css to create great animations. It really depends on what you need.
Check this out: https://medium.freecodecamp.org/a-guide-to-svg-on-web-c5932dadca03
Some examples:
https://codepen.io/search/pens/?q=svg%20animations&limit=all&order=popularity&depth=everything&show_forks=false
You can use an <svg> , which is a "scalable vector graphic"
Here is almost an exact example of what you described
https://codepen.io/dudleystorey/pen/ltpmv
Oculus Connect 3
I know this site was built on react. I want to know more about how to get that background animation and mouse over effect. It's simply awesome to experience. Based on this I will decide to go with React or Angular 2.
If you open your browser's inspection tool (almost always F12) you can see the layout of the webpage. It contains a canvas element with the id "grid". The animation is made using this.
The animation itself looks like a simple node graph, where if you move your cursor the nodes close to the cursor try to stay away from it, thus creating an explosion-like effect.
If your cursor stays fix for 2-3 seconds, the animation starts using a point going randomly across the page instead.
I doubt this animation uses too much of any of the libraries you mentioned in your question, thus deciding which one of these you will be using based on this demo (which let's be honest, max 200 lines of vanilla JavaScript) is like deciding what you eat for breakfast based on the food statistics of Mongolia.
And also, animations like this are what scares off most users. I don't think you can show me any big multimedia or social network site, which has animation close to this.
I'm currently doing a project which is an interative website for a "company". My idea was to use an image of the company room, where they work and use it as the background for the website. The problem is that i wanna do it like a point and click game, where i move my mouse and as soon as I step into something it will pop up information about that something. For example, a written board at the bottom right side of the picture talks about a meeting they are doing, so as soon as my mouse goes over that board it would pop up something talking about that meeting. My difficulty is that i don't know how to "split" the image into those small things (the board, the 3 desks, the posters on the wall...).
The idea is to use an html base and use JavaScript auxiliated by jQuery.
Any help would be appreciated :)
PS: can't post the image because I still don't have 10 reputation.
This link has pretty much example what you want. You can use css :hover on the areas to detect when the mouse moves over them.
Hope that helps!
I've to build a website for one real estate developer. Now he wants to put walk through of building/apartment. Is there any way to implement this using jquery like a visitor can see layout of building or apartment as he moves a mouse cursor. Such as moving camera in 3d object. I don't want to use video or swf object. Plz help me.
I'd check out jQuery Virtual Tour.
Here is a demo:
http://www.openstudio.fr/jquery-virtual-tour/
I've actually seen this in production in a couple different places.
I need to create a slide show of some images that can go full screen so it can be displayed via S-Video out.
The software is delivered via the web so a web-based option is needed.
The list of images is dynamic, and I would like to show them in order. The list of photos can change while the slideshow is running, and I would like to add the new photos to the slideshow.
I see two options:
Build it using JavaScript and then use a browser plugin to go full screen. I have a prototype of this, however it displays photos in random order.
Build it using Flash. I know nothing about Flash so I am looking for slideshows that can go full screen.
What would be best? Are there any good, customizable Flash slideshows?
For those interested, I ended up making an Adobe AIR application using HTML and JavaScript. Adobe AIR can go full screen and I was able to leverage the knowledge of HTML and JavaScript I already have. It has worked out pretty well, though there was a rather steep learning curve for the native AIR classes and how to use them.
If you're using Flash, SlideShowPro is a good option that you may recognize from sites like ESPN.
when you say "fullscreen", do you mean taking up ENTIRE screen? if so, javascript is not a tool to use, it must live inside the browser, so you will always have some chrome visible from the browser.
flash can do full screen, on the other hand.
Most browsers allow you to go full screen (even hiding the chrome) with the F11 key (requires user input). Then it's just a matter of scaling the image in javascript to the size of the viewport. If it doesn't exists, it could be written easily enough probably from a preexisting gallery script.
Also, this answer may be helpful
Hope that helps.