electroglyph opened this issue on Sep 24, 2011 · 13 posts
electroglyph posted Sat, 24 September 2011 at 8:59 AM
My apology for posting this comment here. The HTML forum has 1 post from July. I need an answer faster and know some sharp people read this forum.
I’m shifting gears at work. I need to develop a series of web images that can be hot-linked. An example would be a car where you move the mouse over the tire a link alert pops up. It could be either a highlight on the image or a little tab like on google earth. Click the link and go to a different page that tells you all about tires.
I was hoping to make these 3D images. Say I want to sell tires, hubcaps, rims, brake parts, axels, etc from the same picture. I could click on the 2D image and get 15 links. If it was 3D I could spin my virtual car around and line up on the specific part. It would also give my fiddly non-technical customers real visual insight as to where a bearing is, how big it is, and what it does. Teaching is the real point of the website.
I can think of three ways to do this. VRML was written for this but it’s fallen by the wayside. If I want to look at a page I have to stop and install Cortina or some other viewer. My customers are too impatient. Shockwave comes close but my employer hates the games so bad that our internet blocks the site. I could get permissions but I’d have to apply every time I went to a different site. That leaves Quicktime. It’s in just about every browser and already installed. VR bubbles and their lesser known cousin VR objects with links are still supported by the software. I can’t think of anything else that can do what I describe.
I guess I’m saying I’m going over to the Mac side of the force. What I need now is software. Bryce will do flat panos, but no up and down, and no Quicktime objects. Is there any 3D software that saves objects to a Quicktime .MOV file with links?
bobbystahr posted Sat, 24 September 2011 at 10:53 AM
have jou investigated java...have no knowledge of it's workings myself but have run into it being used as you wish to do. .. ...
Once
in a while I look around,
I see
a sound
and
try to write it down
Sometimes
they come out very soft
Tinkling light sound
The Sun comes up again
staigermanus posted Sat, 24 September 2011 at 12:01 PM
try Debugmode's WInk, it's free, it's awesome. Great for building tutorials, with Flash output, hence hot links. (2D). the trick then is to find a way to embed a flash in it or a video that shows 3D renderings.
Or do you need it 3D interactive?
If you do this in Quicktime 3D/VR style it will be restrictive in platform. BEtter look for something that can also be played on Flash-capable mobiles, and/or HTML5 based for playing videos of pre-configured walk-throughs. Then it can still also lay on iOS (iPad, iFone...)
In the end, if you really want a fully interactive 3D world, where you have clickable/picakble 3D selection hotzones embedded in the 3D structure (and only selectable when you actually see it, i.e. it's not a screen region that is active when something else is hiding the hot-item, for example).... in that case, you'll want a gamedev system. Such as AGK. Very affordable, easy to program, powerful and multi-platform output with focus on new mobile devices too.
AGK is from The Game Makers (they also created the FPS Creator). App Game Kit = AGK. www.appgamekit.com
It's probably easier to program Basic than to learn Flash Actionscript but your mileage may vary.
Other game dev systems of potential interest are Unity3D (verify licensing rules though) and GarageGames' Instant Action - both of these are tottally 3D capable.
A really cheap one to try too is free for the basic version and about $30 or thereabouts last time I checked for the extended version with 3D support, it's GameMaker, now by yoyogames. (created by Mars Overmark). I used GameMaker for Uketutu - see www.uketutu.com for the WIndows app version
(there's also an iPhone4 version and others but not made with Gamemaker in those cases).
If you agree you need something game-creator-ish you might want to go through my list of other solutions like 3DGameCreator and such at www.thebest3d.com/gamedev
Finally, I haven't checked the latest Pro version of Anime Studio but I think it supports Lua based scripting and it just might have enough features to let you create Flash output with interactive elements too.TBD - I'm sure they'll have a new version coming soon since it's been a while since their last rlease and they recently launched a campaign for 80% off on their Debut and 50% off on their Pro versions. Usually a sign of new release coming soon, in time before Xmas
staigermanus posted Sat, 24 September 2011 at 12:04 PM
Satish at debugmode has been developing the next version of WInk for a while, should have tons of great new features for even more format publishing. For mobile. WHat's your platform, is it Flash capable? (Win/Linux/Mac/AndroidOS?) or does it have to include the ability to run on iOS (iPad in particular).
electroglyph posted Sun, 25 September 2011 at 10:32 AM
This is for web pages. It needs to run on PC and Mac. I'd like it to run on as many browsers as possible without having to go get a plugin. Flash, Quicktime, or Java are good because most people already have them or the installer is fairly hands off. IT at work has my Java half way crippled because they are paranoid about hacking from scripts. Anything too fancy or that wants admin control over the computer will be blocked. I even had trouble getting NOAA weather maps to move.
I've used Quicktime and Flash years ago. I remember setting up animations of a car where the wheels rotated and the body moved across the screen. I'll have to get back up to speed no matter what I use.
This program has 2+ years and a $6M budget. I can squeeze a computer and software out of the pot. Cost is really not a limiting factor and I have a month to decide before it actually starts.
staigermanus posted Sun, 25 September 2011 at 10:54 AM
Cool, so essentially putting together traning, user guides, educational material that's accessed in a web browser (even if locally or local area network) and in that case I'd look for Flash. Not the tool from Adobe, just the output format. If you want a good 2D authoring tool for some of that, Wink from debugmode.com - if you prefer Adobe stuff look at Captivate
I'll check if AnimeSTudio has html output with their Flash render that might include hot clickable zones. It does allow in the Pro version to load 3D objects. They have had 3D layers years before Adobe added it to Photoshop CS3. They already had 3D layers back in the days of when it was called MoHo
Now if you want to make the clickable 3D zones be inside the 3D view, the 3D model, such as that you can click the spark plug of a V6 no matter from which angle in 3D you're looking at it, allowing the user to interactively view and rotate and navigfate into the scene and yet still see the clickable and use the clickable items, or such as an architectural walkthrough where the door is clickable so you can open it and transition into the next room,... That's when you'll need a full 3D pipeline, not just Flash and video inside a Flash project with 3D hotzones. In that case, if you want a true 3D interface, don't look at vrml. Look for a Gamedev system. Game dev systems are all making it more and more affordable and attractive, some without programing skills required, to make 3D interfaces. A house with clickable doors is essentially a 3D interface: a bunch of polygons, and afew of them are hot and clickable to link you to another bunch of polygons.
www.thebest3d.com/gamedev has a list of gamedev solutyions, some I'd recommend are GarageGames (now at yoyogames), they're about to release a new version with target for mobiles. Believe me, your solution must include iOS if you want it to have a future beyond the next budget cycle. iPads are not just here to stay, they're here to dominate. And I don't have one either. Other tablets, they run Android and Windows 7 soon WIndows8, that interface is totallt tablet centric. I just bought a monster laptop yesterday, they couldn't believe there was still someone interested in buying laptops on the planet lol. There are so many more users now consuming learning material, and attending webinars with iPhone, iPad, tablets... companies that deliver such content like webex and Go2meeting etc... they all have released viewers/players for the tablets, and I see my audiences use those platforms. Mobility is key. The ability to learn on the go is a huge plus. EVen if you can't watch a video while driving, the audio can be absorbed while commuting to/from home...One of the many hats I wear is instructional designer at Eset, working with Video, doing translations.... here's one I did in a hurry in Captivate http://go.eset.com/us/resources/training/ess5_installation_fr/player.html
Have fun, wish I could be on your team for this one :-)
bobbystahr posted Sun, 25 September 2011 at 11:52 AM
sounds like an exciting project and wish you well electroglyph...way t go staigermanus, for your well considered comments...betcha electroglyph wishes he could have you on the project as well as it seems you'd likely be a great addition to his team. .. ...
Once
in a while I look around,
I see
a sound
and
try to write it down
Sometimes
they come out very soft
Tinkling light sound
The Sun comes up again
Analog-X64 posted Sun, 25 September 2011 at 4:47 PM
Excellent suggestions all of them.
staigermanus posted Sun, 25 September 2011 at 5:47 PM
I also wonder what's new in Carrara 8.5, just downloaded it, haven't installed or read about it yet. I got me a fast new laptop for 3D and video yesterday so I'll check on that.
There's also a thing called Second Life, which could be used as a 3D game engine for education and there are a few tools that can make content for it such as Archipelis or Curvy 3D www.thebest3d.com/3d and on top of that you can expect soon support for other standard formats to be importable to S.L. or so I heard so there may not be the need for Sculpties format anymore necessarily.
TBD.
Talking about Curvy 3D, we're going be offering it here at Renderosity since there's now also a Mac version. (The Windows version also bridges into PD Pro for better cooperation).
-Philip
Rayraz posted Tue, 27 September 2011 at 12:44 PM
Well, if you just want to make popups on mouseover on certain coordinates of your 3d render.. you could use css and/or javascript for that.
a quick example would be something like this:
Some information
Some other information
That would be the markup with:
css to follow..
(_/)
(='.'=)
(")(")This is Bunny. Copy and paste bunny into your
signature to help him gain world domination.
Rayraz posted Tue, 27 September 2011 at 1:06 PM
/* make sure the container, map, triggers and pop-ups are block level elements /
.map, .map img, .map .trigger, .map .pop-up {
display: block;
}
/ make sure pop-ups will be able to overflow their container elements /
.map, .map img, .map .trigger {
overflow: visible;
}
/ makes the absolutely positioned triggers position themselves relative to the top-left corner of .map /
.map {
position: relative;
}
/ styling the map /
.map img {
position: relative;
width: 960px;
height: 480px;
}
/ size of trigger and pop-up-container /
.map .trigger, .map .pop-up-container {
width: 30px;
height: 30px;
}
/ triggers need to be placed precisely, relative to the map, easiest way to do this is by using absolute positioning.
Also give them a red border and fancy rounded corners in supporting browsers /
.map .trigger {
position: absolute;
border: 2px solid red;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}
/ makes the absolutely positioned pop-ups position themselves relative to the top-left corner of .pop-up-container /
.map .pop-up-container {
position: relative;
}
/ pop-ups start out invisible /
.map .trigger .pop-up-container {
display: none;
}
/ pop-ups turn visible if the mouse moves over the trigger /
.map .trigger:hover .pop-up-container {
display: block;
}
/ position pop-up's bottom left corner relative to the top-left pixel of the .pop-up-container.
Also give them a nice dropshadow in supporting browsers /
.map .pop-up {
position: absolute;
bottom: -15px;
left: 15px;
background-color: #fff;
-webkit-box-shadow: 0px 0px 6px #000;
-moz-box-shadow: 0px 0px 6px #000;
box-shadow: 0px 0px 6px #000;
}
/ Some basic typographic styling */
h2, p {
font-family: sans-serif;
color: #444;
margin-bottom: 14px;
}
h2 {
font-weight: bold;
font-size: 18px;
line-height: 24px;
}
p {
font-weight: normal;
font-size: 14px;
line-height: 20px;
}
(_/)
(='.'=)
(")(")This is Bunny. Copy and paste bunny into your
signature to help him gain world domination.
Rayraz posted Tue, 27 September 2011 at 1:17 PM
**Basically what happens is this:
**- The triggers are absolutely positioned over the image so you can easily place them anywhere you want.
**Some side notes:
**- Absolutely positioned elements position themselves relative to the top-left corner of the 1st parent element that is relatively positioned. Thats why there is a pop-up container of the same size of the trigger around the actual pop-up.
**Other ideas:
**You could also use javascript mouse-over events to activate pop-up visibility instead of pure css hovers. This would also allow you some more fancy things like keeping the pop-up visible for a while longer after the mouse leaves the trigger, or keeping the pop-up visible while the mouse is positioned over the pop-up. Or maybe even use an event on an entirely other object to make a pop-up go away.
(_/)
(='.'=)
(")(")This is Bunny. Copy and paste bunny into your
signature to help him gain world domination.
Rayraz posted Tue, 27 September 2011 at 1:29 PM
A more clear color-coded css (for some reason i cant edit the old one)
/* make sure the container, map, triggers and pop-ups are block level elements /
.map, .map img, .map .trigger, .map .pop-up {
display: block;
}
/ make sure pop-ups will be able to overflow their container elements /
.map, .map img, .map .trigger {
overflow: visible;
}
/ makes the absolutely positioned triggers position themselves relative to the top-left corner of .map /
.map {
position: relative;
}
/ styling the map /
.map img {
position: relative;
width: 960px;
height: 480px;
}
/ size of trigger and pop-up-container /
.map .trigger, .map .pop-up-container {
width: 30px;
height: 30px;
}
/ triggers need to be placed precisely, relative to the map, easiest way to do this is by using absolute positioning.
Also give them a red border and fancy rounded corners in supporting browsers /
.map .trigger {
position: absolute;
border: 2px solid red;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
/ makes the absolutely positioned pop-ups position themselves relative to the top-left corner of .pop-up-container /
.map .pop-up-container {
position: relative;
}
/ pop-ups start out invisible /
.map .trigger .pop-up-container {
display: none;
}
/ pop-ups turn visible if the mouse moves over the trigger /
.map .trigger:hover .pop-up-container {
display: block;
}
/ position pop-up's bottom left corner relative to the top-left pixel of the .pop-up-container.
Also give them a nice dropshadow in supporting browsers /
.map .pop-up {
position: absolute;
bottom: -15px;
left: 15px;
background-color: #fff;
-webkit-box-shadow: 0px 0px 6px #000;
-moz-box-shadow: 0px 0px 6px #000;
box-shadow: 0px 0px 6px #000;
}
/ Some basic typographic styling */
h2, p {
font-family: sans-serif;
color: #444;
margin-bottom: 14px;
}
h2 {
font-weight: bold;
font-size: 18px;
line-height: 24px;
}
p {
font-weight: normal;
font-size: 14px;
line-height: 20px;
}
(_/)
(='.'=)
(")(")This is Bunny. Copy and paste bunny into your
signature to help him gain world domination.